@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,251 @@
+import type { JSX, ReactNode } from "react";
+import { Fragment, memo, useState } from "react";
+
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
+import { FilterBar } from "./filter-bar";
+import { useTableQuery } from "./hooks/use-table-query";
+import { useTableState } from "./hooks/use-table-state";
+import { SortableHeader } from "./sortable-header";
+import { TableEmptyState } from "./table-empty-state";
+import { TableNoResults } from "./table-no-results";
+import { Pagination } from "./table-pagination";
+import { TableSkeleton } from "./table-skeleton";
+import type { Column, FilterConfig, TableQueryParams, TableQueryResponse } from "./types";
+
+export type DataTableProps<T> = {
+  /** Column definitions */
+  columns: Column<T>[];
+  /** Unique cache key for react-query */
+  cacheKey: string;
+  /** Fetch function for data */
+  onFetch: (params: TableQueryParams) => Promise<TableQueryResponse<T>>;
+  /** Resource name for empty states (e.g., "customer", "invoice") */
+  resourceName: string;
+  /** Default sort order (e.g., "-id", "name") */
+  defaultOrderBy?: string;
+  /** Initial/external query parameters */
+  queryParams?: TableQueryParams;
+  /** Callback when params change (for external state management) */
+  onChangeParams?: (params: TableQueryParams) => void;
+  /** When true, disables URL sync entirely (for embedded tables like dashboard) */
+  disableUrlSync?: boolean;
+  /** Optional entity ID for filtering */
+  entityId?: string;
+  /** Link for "Create New" button */
+  createNewLink?: string;
+  /** Custom trigger for create action */
+  createNewTrigger?: ReactNode;
+  /** Optional row click handler */
+  onRowClick?: (item: T) => void;
+  /** Custom row renderer (overrides default cell rendering) */
+  renderRow?: (item: T) => ReactNode;
+  /** Custom header renderer (overrides default header) */
+  renderHeader?: (props: { orderBy?: string; onSort?: (order: string | null) => void }) => ReactNode;
+  /** Filter configuration (date fields, status filter) */
+  filterConfig?: FilterConfig;
+  /** Translation function */
+  t?: (key: string) => string;
+  /** Locale for date formatting */
+  locale?: string;
+};
+
+/**
+ * Generic data table with built-in sorting, search, pagination, and loading states
+ */
+export function DataTable<T extends { id: string }>({
+  columns,
+  cacheKey,
+  onFetch,
+  resourceName,
+  defaultOrderBy = "-id",
+  queryParams,
+  onChangeParams,
+  disableUrlSync,
+  entityId,
+  createNewLink,
+  createNewTrigger,
+  onRowClick,
+  renderRow,
+  renderHeader,
+  filterConfig,
+  t = (key) => key,
+  locale,
+}: DataTableProps<T>) {
+  // Filter panel open state - starts open if filters are active in URL
+  const hasInitialFilters = Boolean(
+    queryParams?.filter_date_from ||
+      queryParams?.filter_date_to ||
+      queryParams?.filter_status ||
+      queryParams?.filter_method ||
+      queryParams?.filter_http_status,
+  );
+  const [filterPanelOpen, setFilterPanelOpen] = useState(hasInitialFilters);
+
+  // Manage table state (sort, search, pagination, filters)
+  const { params, apiParams, filterState, handleSort, handleSearch, handlePageChange, handleFilterChange } =
+    useTableState({
+      initialParams: queryParams,
+      defaultOrderBy,
+      onChangeParams,
+      disableUrlSync,
+    });
+
+  // Fetch table data (use apiParams which has the query JSON for API)
+  const { data: queryResult, isFetching } = useTableQuery<T>({
+    cacheKey,
+    fetchFn: onFetch,
+    params: apiParams,
+    entityId,
+  });
+
+  const data = queryResult?.data ?? [];
+  const hasActiveFilters = Boolean(
+    params.search ||
+      params.filter_date_from ||
+      params.filter_date_to ||
+      params.filter_status ||
+      params.filter_method ||
+      params.filter_http_status,
+  );
+
+  // Show skeleton during initial load (with filter bar for consistency)
+  if (isFetching && !queryResult) {
+    return (
+      <div className="space-y-4">
+        <FilterBar
+          searchValue={params.search}
+          onSearch={handleSearch}
+          filterConfig={filterConfig}
+          filterState={filterState ?? undefined}
+          onFilterChange={handleFilterChange}
+          t={t}
+          locale={locale}
+          isOpen={filterPanelOpen}
+          onToggle={setFilterPanelOpen}
+        />
+        <TableSkeleton columns={columns.length} rows={10} />
+      </div>
+    );
+  }
+
+  // Show empty state only when no data AND no active search/filters
+  // (this means truly empty collection, not filtered to zero results)
+  if (data.length === 0 && !hasActiveFilters) {
+    return (
+      <TableEmptyState resource={resourceName} createNewLink={createNewLink} createNewTrigger={createNewTrigger} />
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <FilterBar
+        searchValue={params.search}
+        onSearch={handleSearch}
+        filterConfig={filterConfig}
+        filterState={filterState ?? undefined}
+        onFilterChange={handleFilterChange}
+        t={t}
+        locale={locale}
+        isOpen={filterPanelOpen}
+        onToggle={setFilterPanelOpen}
+      />
+
+      <div className="rounded-lg border">
+        <Table>
+          {renderHeader ? (
+            renderHeader({ orderBy: params.order_by, onSort: handleSort })
+          ) : (
+            <DefaultTableHeader columns={columns} orderBy={params.order_by} onSort={handleSort} />
+          )}
+
+          <TableBody>
+            {data.length > 0 ? (
+              data.map((item) => {
+                if (renderRow) {
+                  // Custom row renderer - wrap in Fragment with key
+                  return <Fragment key={item.id}>{renderRow(item)}</Fragment>;
+                }
+
+                // Default row renderer
+                return <DefaultTableRow key={item.id} item={item} columns={columns} onRowClick={onRowClick} />;
+              })
+            ) : (
+              <TableNoResults resource={resourceName} search={handleSearch} />
+            )}
+          </TableBody>
+        </Table>
+
+        <div className="border-t px-4 py-3">
+          <Pagination
+            prevCursor={queryResult?.pagination.prev_cursor}
+            nextCursor={queryResult?.pagination.next_cursor}
+            onPageChange={handlePageChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Default header renderer using column definitions
+ */
+const DefaultTableHeader = memo(function DefaultTableHeader<T>({
+  columns,
+  orderBy,
+  onSort,
+}: {
+  columns: Column<T>[];
+  orderBy?: string;
+  onSort?: (order: string | null) => void;
+}) {
+  return (
+    <TableHeader>
+      <TableRow>
+        {columns.map((column) => (
+          <TableHead key={column.id} className={column.className} style={{ textAlign: column.align }}>
+            {column.sortable ? (
+              <SortableHeader
+                field={column.sortField ?? column.id}
+                currentOrder={orderBy}
+                onSort={onSort}
+                align={column.align}
+              >
+                {column.header}
+              </SortableHeader>
+            ) : (
+              column.header
+            )}
+          </TableHead>
+        ))}
+      </TableRow>
+    </TableHeader>
+  );
+}) as <T>(props: { columns: Column<T>[]; orderBy?: string; onSort?: (order: string | null) => void }) => JSX.Element;
+
+/**
+ * Default row renderer using column definitions
+ */
+const DefaultTableRow = memo(function DefaultTableRow<T extends { id: string }>({
+  item,
+  columns,
+  onRowClick,
+}: {
+  item: T;
+  columns: Column<T>[];
+  onRowClick?: (item: T) => void;
+}) {
+  return (
+    <TableRow className={onRowClick ? "cursor-pointer" : undefined} onClick={() => onRowClick?.(item)}>
+      {columns.map((column) => (
+        <TableCell key={column.id} className={column.className} style={{ textAlign: column.align }}>
+          {column.cell(item)}
+        </TableCell>
+      ))}
+    </TableRow>
+  );
+}) as <T extends { id: string }>(props: {
+  item: T;
+  columns: Column<T>[];
+  onRowClick?: (item: T) => void;
+}) => JSX.Element;

package/src/components/table/date-cell.tsx

@@ -0,0 +1,35 @@
+type FormattedDateProps = {
+  date: string | number | Date | null | undefined;
+  format?: Intl.DateTimeFormatOptions;
+};
+
+/**
+ * Formatted date cell component
+ */
+export function FormattedDate({
+  date,
+  format = {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  },
+}: FormattedDateProps) {
+  if (!date) {
+    return <span className="text-muted-foreground">—</span>;
+  }
+
+  try {
+    const dateObj = new Date(date);
+
+    // Check if date is valid
+    if (Number.isNaN(dateObj.getTime())) {
+      console.error("Invalid date:", date);
+      return <span className="text-destructive">{String(date)}</span>;
+    }
+
+    return <>{dateObj.toLocaleDateString(undefined, format)}</>;
+  } catch (error) {
+    console.error("Error formatting date:", error);
+    return <span className="text-destructive">{String(date)}</span>;
+  }
+}

package/src/components/table/filter-bar.tsx

@@ -0,0 +1,114 @@
+import { FilterIcon } from "lucide-react";
+
+import { Badge } from "@/ui/components/ui/badge";
+import { Button } from "@/ui/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/ui/components/ui/collapsible";
+
+import { FilterPanel } from "./filter-panel";
+import { SearchInput } from "./search-input";
+import type { FilterConfig, FilterState } from "./types";
+
+type FilterBarProps = {
+  /** Current search value */
+  searchValue?: string;
+  /** Search change handler */
+  onSearch: (value: string | null) => void;
+  /** Filter configuration (which filters to show) */
+  filterConfig?: FilterConfig;
+  /** Current filter state */
+  filterState?: FilterState;
+  /** Filter change handler */
+  onFilterChange?: (state: FilterState | null) => void;
+  /** Translation function */
+  t?: (key: string) => string;
+  /** Locale for date picker */
+  locale?: string;
+  /** Whether filter panel is open */
+  isOpen?: boolean;
+  /** Toggle filter panel */
+  onToggle?: (open: boolean) => void;
+};
+
+/**
+ * Filter bar with search input and collapsible filter panel
+ */
+export function FilterBar({
+  searchValue,
+  onSearch,
+  filterConfig,
+  filterState,
+  onFilterChange,
+  t = (key) => key,
+  locale,
+  isOpen = false,
+  onToggle,
+}: FilterBarProps) {
+  const hasFilters =
+    filterConfig?.dateFields?.length ||
+    filterConfig?.statusFilter ||
+    filterConfig?.httpMethodFilter ||
+    filterConfig?.httpStatusCodeFilter;
+  const activeFilterCount = countActiveFilters(filterState);
+
+  if (!hasFilters) {
+    // No filters configured, just show search
+    return (
+      <div className="px-4 pt-4">
+        <SearchInput initialValue={searchValue} onSearch={onSearch} placeholder={t("Search...")} />
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={onToggle} className="px-4 pt-4">
+      <div className="flex items-center gap-2">
+        <SearchInput initialValue={searchValue} onSearch={onSearch} placeholder={t("Search...")} />
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" size="sm" className="h-8 gap-1.5">
+            <FilterIcon className="h-3.5 w-3.5" />
+            <span className="hidden sm:inline">{t("Filters")}</span>
+            {activeFilterCount > 0 && (
+              <Badge variant="secondary" className="ml-1 h-5 min-w-5 rounded-full px-1.5">
+                {activeFilterCount}
+              </Badge>
+            )}
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className="mt-3">
+        <FilterPanel config={filterConfig} state={filterState} onChange={onFilterChange} t={t} locale={locale} />
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+/**
+ * Count number of active filters
+ */
+function countActiveFilters(state?: FilterState): number {
+  if (!state) return 0;
+
+  let count = 0;
+
+  // Count date filter as 1 if any date is set
+  if (state.dateFilter?.range.from || state.dateFilter?.range.to) {
+    count += 1;
+  }
+
+  // Count each status filter
+  if (state.statusFilters?.length) {
+    count += state.statusFilters.length;
+  }
+
+  // Count HTTP method filter
+  if (state.httpMethod) {
+    count += 1;
+  }
+
+  // Count HTTP status code filter
+  if (state.httpStatusCode) {
+    count += 1;
+  }
+
+  return count;
+}