rl-core-front 0.1.0

package/src/components/ui/data-table.tsx

@@ -0,0 +1,401 @@
+"use client";
+
+import {
+  ColumnDef,
+  columnVisibilityFeature,
+  ColumnVisibilityState,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  flexRender,
+  OnChangeFn,
+  PaginationState,
+  RowData,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  sortFn_datetime,
+  SortingState,
+  tableFeatures,
+  useTable,
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  Filter,
+  SlidersHorizontal,
+} from "lucide-react";
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+
+import { countConditions } from "#core/_utils/advanced-filter";
+import { activeFilterCount } from "#core/_utils/filter";
+import { Button } from "#core/components/ui/button";
+import { Card } from "#core/components/ui/card";
+import {
+  ColumnVisibilityModal,
+  ColumnVisibilityOption,
+} from "#core/components/ui/column-visibility-modal";
+import { FilterChips } from "#core/components/ui/filter-chips";
+import { FilterSheet } from "#core/components/ui/filter-sheet";
+import { Spinner } from "#core/components/ui/spinner";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "#core/components/ui/table";
+import { useI18n } from "#core/contexts";
+import { useColumnVisibility } from "#core/hooks/use-column-visibility";
+import type { FiltersState } from "#core/hooks/use-filters";
+
+export const dataTableFeatures = tableFeatures({
+  columnVisibilityFeature,
+  rowSortingFeature,
+  rowPaginationFeature,
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    basic: sortFn_basic,
+    datetime: sortFn_datetime,
+  },
+});
+
+export type DataTableFeatures = typeof dataTableFeatures;
+
+interface DataTableProps<T extends RowData> {
+  columns: ColumnDef<DataTableFeatures, T, unknown>[];
+  data: T[];
+  getRowId?: (row: T) => string;
+  storageKey?: string;
+  loading?: boolean;
+  /** Ações à esquerda da toolbar (ex.: botão "Novo"). */
+  toolbar?: React.ReactNode;
+  pageSizeOptions?: number[];
+  /** Paginação no servidor: informe rowCount, pagination e onPaginationChange. */
+  manualPagination?: boolean;
+  rowCount?: number;
+  pagination?: PaginationState;
+  onPaginationChange?: OnChangeFn<PaginationState>;
+  /** Ordenação no servidor: informe sorting e onSortingChange. */
+  manualSorting?: boolean;
+  sorting?: SortingState;
+  onSortingChange?: OnChangeFn<SortingState>;
+  /** Habilita ordenação (padrão true). Desligue quando o backend ainda não ordena. */
+  enableSorting?: boolean;
+  /**
+   * Filtros dinâmicos, como o `useListQuery` os devolve. Sem esta prop o botão
+   * não aparece — listagem sem catálogo continua funcionando igual.
+   */
+  filters?: FiltersState;
+}
+
+/** Extras que uma coluna pode declarar em `meta`. */
+export interface DataTableColumnMeta {
+  /** Rótulo no seletor de colunas (quando o header não é texto). */
+  label?: string;
+  /**
+   * Coluna encolhe até o conteúdo em vez de receber parte do espaço sobrando.
+   * É o caso da coluna de ações: sem isso o `<table>` a esticava.
+   */
+  shrink?: boolean;
+}
+
+function columnLabel<T extends RowData>(
+  col: ColumnDef<DataTableFeatures, T, unknown>,
+  id: string,
+): string {
+  const meta = col.meta as DataTableColumnMeta | undefined;
+  if (meta?.label) {return meta.label;}
+  if (typeof col.header === "string") {return col.header;}
+  return id;
+}
+
+/**
+ * `w-px` + `whitespace-nowrap` é o jeito de fazer uma coluna de tabela encolher
+ * até o conteúdo: o navegador trata a largura mínima como o conteúdo e o espaço
+ * sobrando vai para as outras colunas.
+ */
+function shrinkClass(columnDef: { meta?: unknown }): string | undefined {
+  const meta = columnDef.meta as DataTableColumnMeta | undefined;
+  return meta?.shrink ? "w-px whitespace-nowrap" : undefined;
+}
+
+export function DataTable<T extends RowData>({
+  columns,
+  data,
+  getRowId,
+  storageKey,
+  loading,
+  toolbar,
+  pageSizeOptions = [10, 20, 50],
+  manualPagination,
+  rowCount,
+  pagination,
+  onPaginationChange,
+  manualSorting,
+  sorting,
+  onSortingChange,
+  enableSorting = true,
+  filters,
+}: DataTableProps<T>): JSX.Element {
+  const { t } = useI18n();
+  const [colsOpen, setColsOpen] = useState(false);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+
+  const { hiddenColumns, saveHiddenColumns } = useColumnVisibility(storageKey);
+  const columnVisibility = useMemo<ColumnVisibilityState>(() => {
+    const v: ColumnVisibilityState = {};
+    hiddenColumns.forEach((id) => {
+      v[id] = false;
+    });
+    return v;
+  }, [hiddenColumns]);
+
+  const [internalSorting, setInternalSorting] = useState<SortingState>([]);
+  const [internalPagination, setInternalPagination] = useState<PaginationState>(
+    {
+      pageIndex: 0,
+      pageSize: pageSizeOptions[0],
+    },
+  );
+
+  const table = useTable({
+    features: dataTableFeatures,
+    data,
+    columns,
+    getRowId: getRowId ? (row) => getRowId(row) : undefined,
+    state: {
+      columnVisibility,
+      sorting: manualSorting ? sorting : internalSorting,
+      pagination: manualPagination ? pagination : internalPagination,
+    },
+    onColumnVisibilityChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(columnVisibility) : updater;
+      saveHiddenColumns(
+        Object.entries(next)
+          .filter(([, v]) => v === false)
+          .map(([k]) => k),
+      );
+    },
+    onSortingChange: manualSorting ? onSortingChange : setInternalSorting,
+    onPaginationChange: manualPagination
+      ? onPaginationChange
+      : setInternalPagination,
+    enableSorting,
+    manualSorting,
+    manualPagination,
+    ...(manualPagination ? { rowCount: rowCount ?? 0 } : {}),
+  });
+
+  const hideable: ColumnVisibilityOption[] = table
+    .getAllColumns()
+    .filter((c) => c.getCanHide())
+    .map((c) => ({
+      id: c.id,
+      label: columnLabel(
+        c.columnDef as ColumnDef<DataTableFeatures, T, unknown>,
+        c.id,
+      ),
+    }));
+
+  const total = manualPagination
+    ? (rowCount ?? 0)
+    : table.getFilteredRowModel().rows.length;
+  const { pageIndex, pageSize } = table.state.pagination;
+  const pageCount = table.getPageCount();
+  const colSpan = table.getVisibleLeafColumns().length || 1;
+
+  const filtersEnabled = Boolean(filters);
+  const activeFilters = !filters
+    ? 0
+    : filters.mode === "advanced"
+      ? filters.tree && filters.filter
+        ? countConditions(filters.tree)
+        : 0
+      : activeFilterCount(filters.values);
+
+  return (
+    <div>
+      <div className="mb-3 flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">{toolbar}</div>
+        <div className="flex items-center gap-2">
+          {storageKey && hideable.length > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setColsOpen(true)}
+            >
+              <SlidersHorizontal className="h-4 w-4" />
+              {t("table.columnsButton")}
+            </Button>
+          )}
+          {filtersEnabled && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setFiltersOpen(true)}
+            >
+              <Filter className="h-4 w-4" />
+              {t("filters.button")}
+              {activeFilters > 0 && (
+                <span className="ml-1 rounded-full bg-primary px-1.5 text-xs text-primary-foreground">
+                  {activeFilters}
+                </span>
+              )}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {filters && <FilterChips filters={filters} />}
+
+      <Card>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((hg) => (
+              <TableRow key={hg.id}>
+                {hg.headers.map((header) => {
+                  const canSort = header.column.getCanSort();
+                  const sorted = header.column.getIsSorted();
+                  return (
+                    <TableHead
+                      key={header.id}
+                      className={shrinkClass(header.column.columnDef)}
+                    >
+                      {header.isPlaceholder ? null : canSort ? (
+                        <button
+                          className="flex items-center gap-1 hover:text-foreground"
+                          onClick={header.column.getToggleSortingHandler()}
+                        >
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                          {sorted === "asc" ? (
+                            <ArrowUp className="h-3.5 w-3.5" />
+                          ) : sorted === "desc" ? (
+                            <ArrowDown className="h-3.5 w-3.5" />
+                          ) : (
+                            <ChevronsUpDown className="h-3.5 w-3.5 opacity-50" />
+                          )}
+                        </button>
+                      ) : (
+                        flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )
+                      )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading && (
+              <TableRow>
+                <TableCell colSpan={colSpan} className="h-24 text-center">
+                  <Spinner className="mx-auto" />
+                </TableCell>
+              </TableRow>
+            )}
+            {!loading && table.getRowModel().rows.length === 0 && (
+              <TableRow>
+                <TableCell
+                  colSpan={colSpan}
+                  className="h-24 text-center text-muted-foreground"
+                >
+                  {t("table.empty")}
+                </TableCell>
+              </TableRow>
+            )}
+            {!loading &&
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={shrinkClass(cell.column.columnDef)}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+
+        <div className="flex flex-col gap-3 border-t border-border px-4 py-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-3">
+            <select
+              value={pageSize}
+              onChange={(e) => table.setPageSize(Number(e.target.value))}
+              className="h-9 rounded-md border border-input bg-transparent px-2 text-sm"
+            >
+              {pageSizeOptions.map((n) => (
+                <option key={n} value={n}>
+                  {n} {t("table.perPage")}
+                </option>
+              ))}
+            </select>
+            <span>
+              {total} {t("table.results")}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="icon"
+              disabled={!table.getCanPreviousPage()}
+              onClick={() => table.previousPage()}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <span>
+              {pageIndex + 1} / {Math.max(1, pageCount)}
+            </span>
+            <Button
+              variant="outline"
+              size="icon"
+              disabled={!table.getCanNextPage()}
+              onClick={() => table.nextPage()}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {storageKey && (
+        <ColumnVisibilityModal
+          open={colsOpen}
+          onOpenChange={setColsOpen}
+          columns={hideable}
+          hiddenColumns={hiddenColumns}
+          onSave={saveHiddenColumns}
+        />
+      )}
+
+      {filters && (
+        <FilterSheet
+          open={filtersOpen}
+          onOpenChange={setFiltersOpen}
+          filters={filters}
+        />
+      )}
+    </div>
+  );
+}
+
+export type { ColumnDef, PaginationState, SortingState };

package/src/components/ui/date-range-picker.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { Calendar, Check, ChevronLeft, ChevronRight } from "lucide-react";
+import type { JSX } from "react";
+import { useEffect, useRef, useState } from "react";
+
+import {
+  addDays,
+  addMonths,
+  formatDay,
+  fromIsoDay,
+  isSameDay,
+  isSameMonth,
+  isWithin,
+  monthGrid,
+  monthLabel,
+  today,
+  toIsoDay,
+  weekdayLabels,
+} from "#core/_utils/calendar";
+import { Button } from "#core/components/ui/button";
+import { useI18n } from "#core/contexts";
+import { cn } from "#core/lib/utils";
+
+export interface DateRange {
+  /** `"yyyy-MM-dd"`. */
+  from?: string;
+  to?: string;
+}
+
+export interface DateRangePickerProps {
+  value: DateRange;
+  onChange: (range: DateRange) => void;
+  /** Atalhos em dias corridos até hoje (ex.: `[7, 30]`). */
+  presets?: number[];
+  disabled?: boolean;
+  /** Descreve o campo para quem usa leitor de tela. */
+  label?: string;
+}
+
+const DEFAULT_PRESETS = [7, 15, 30, 90];
+
+/**
+ * Seleção de período num calendário só.
+ *
+ * Substitui os dois `<input type="date">`: com eles, escolher "últimos 30 dias"
+ * era digitar duas datas e conferir mentalmente qual é a maior. Aqui o primeiro
+ * clique marca o início, o segundo o fim (invertido, o componente ordena), e os
+ * atalhos cobrem o caso mais comum sem clique nenhum no calendário.
+ */
+export function DateRangePicker({
+  value,
+  onChange,
+  presets = DEFAULT_PRESETS,
+  disabled,
+  label,
+}: DateRangePickerProps): JSX.Element {
+  const { t, locale } = useI18n();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const from = fromIsoDay(value.from);
+  const to = fromIsoDay(value.to);
+  const [month, setMonth] = useState<Date>(() => from ?? to ?? today());
+
+  // Fecha ao clicar fora e no ESC — o painel é flutuante e não tem overlay
+  // próprio, então quem fecha é o documento.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onPointerDown = (event: MouseEvent): void => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  const pickDay = (day: Date): void => {
+    const iso = toIsoDay(day);
+    // Intervalo completo (ou vazio) recomeça a seleção; com só o início, o
+    // segundo clique fecha o período, ordenando se vier de trás para frente.
+    if (!from || (from && to)) {
+      onChange({ from: iso, to: undefined });
+      return;
+    }
+    onChange(day < from ? { from: iso, to: value.from } : { from: value.from, to: iso });
+    setOpen(false);
+  };
+
+  const applyPreset = (days: number): void => {
+    const end = today();
+    const start = addDays(end, -days);
+    onChange({ from: toIsoDay(start), to: toIsoDay(end) });
+    setMonth(end);
+    setOpen(false);
+  };
+
+  const isPresetActive = (days: number): boolean =>
+    Boolean(
+      from && to && isSameDay(to, today()) && isSameDay(from, addDays(to, -days)),
+    );
+
+  const dayClass = (day: Date): string => {
+    if ((from && isSameDay(day, from)) || (to && isSameDay(day, to))) {
+      return "bg-primary text-primary-foreground font-semibold";
+    }
+    if (from && to && isWithin(day, from, to)) {
+      return "bg-accent text-accent-foreground";
+    }
+    return isSameMonth(day, month) ? "" : "text-muted-foreground/60";
+  };
+
+  const summary = (): string => {
+    if (value.from && value.to) {
+      return `${formatDay(value.from, locale)} – ${formatDay(value.to, locale)}`;
+    }
+    if (value.from) {
+      return `${t("filters.fromChip")} ${formatDay(value.from, locale)}`;
+    }
+    if (value.to) {
+      return `${t("filters.toChip")} ${formatDay(value.to, locale)}`;
+    }
+    return t("filters.selectPeriod");
+  };
+
+  const hasValue = Boolean(value.from || value.to);
+
+  return (
+    <div className="relative" ref={containerRef}>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-label={label}
+        onClick={() => setOpen((current) => !current)}
+        className="flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors hover:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <span className={cn("truncate", !hasValue && "text-muted-foreground")}>
+          {summary()}
+        </span>
+        <Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />
+      </button>
+
+      {open && (
+        <div
+          role="dialog"
+          className="absolute left-0 z-50 mt-2 w-[19rem] rounded-xl border border-border bg-popover p-3 text-popover-foreground shadow-lg"
+        >
+          {presets.length > 0 && (
+            <div className="mb-3 flex flex-wrap gap-1.5">
+              {presets.map((days) => (
+                <button
+                  key={days}
+                  type="button"
+                  onClick={() => applyPreset(days)}
+                  className={cn(
+                    "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs transition-colors",
+                    isPresetActive(days)
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-border hover:border-ring",
+                  )}
+                >
+                  {isPresetActive(days) && <Check className="h-3 w-3" />}
+                  {t("filters.lastDays", { days })}
+                </button>
+              ))}
+            </div>
+          )}
+
+          <div className="mb-2 flex items-center justify-between">
+            <Button
+              type="button"
+              variant="ghost"
+              size="iconSm"
+              aria-label={t("filters.previousMonth")}
+              onClick={() => setMonth(addMonths(month, -1))}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <span className="text-sm font-medium capitalize">
+              {monthLabel(month, locale)}
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="iconSm"
+              aria-label={t("filters.nextMonth")}
+              onClick={() => setMonth(addMonths(month, 1))}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="mb-1 grid grid-cols-7 text-center text-xs text-muted-foreground">
+            {weekdayLabels(locale).map((weekday) => (
+              <span key={weekday} className="capitalize">
+                {weekday}
+              </span>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-7 gap-y-1 justify-items-center">
+            {monthGrid(month).map((day) => (
+              <button
+                key={day.toISOString()}
+                type="button"
+                onClick={() => pickDay(day)}
+                className={cn(
+                  "flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors hover:bg-accent",
+                  dayClass(day),
+                )}
+              >
+                {day.getDate()}
+              </button>
+            ))}
+          </div>
+
+          {hasValue && (
+            <div className="mt-2 flex justify-end border-t border-border pt-2">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  onChange({});
+                  setOpen(false);
+                }}
+              >
+                {t("filters.clear")}
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}