Billing Table

import { useState } from "react";
import { endOfDay, startOfDay, subDays } from "date-fns";
import { BillingTable } from "@/components/registry/billing-table";
import { DateRangeSelector } from "@/components/registry/date-range-picker";

export function Example() {
  const [columnFilters, setColumnFilters] = useState(() => {
    const to = endOfDay(new Date());
    return [
      {
        id: "emissionDate",
        value: { from: startOfDay(subDays(to, 29)), to },
      },
    ];
  });

  return (
    <>
      <DateRangeSelector
        value={columnFilters.find((filter) => filter.id === "emissionDate")?.value}
        onDateChange={(range) =>
          setColumnFilters([{ id: "emissionDate", value: range }])
        }
        presets={[
          { value: "30days", label: "Último mes", daysBack: 29 },
          { value: "90days", label: "Últimos 3 meses", daysBack: 89 },
          { value: "365days", label: "Último año", daysBack: 364 },
        ]}
      />
      <BillingTable
        billings={billings}
        columnFilters={columnFilters}
        onColumnFiltersChange={setColumnFilters}
      />
    </>
  );
}