@spaceinvoices/react-ui 0.4.11 → 0.4.12

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

@@ -1,17 +1,22 @@
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
 import type { JSX, ReactNode } from "react";
-import { Fragment, memo, useCallback, useMemo, useState } from "react";
+import { Fragment, lazy, memo, Suspense, useCallback, useMemo, useState } from "react";
 
 import { Checkbox } from "@/ui/components/ui/checkbox";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
-import { FilterBar } from "./filter-bar";
+import { cn } from "@/ui/lib/utils";
 import { useTableQuery } from "./hooks/use-table-query";
 import { useTableState } from "./hooks/use-table-state";
+import { SearchInput } from "./search-input";
+import { getColumnSortDirection, getNextColumnOrderBy, isSortableColumn } from "./sorting";
 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";
 
+const LazyFilterBar = lazy(() => import("./filter-bar").then((module) => ({ default: module.FilterBar })));
+
 export type DataTableProps<T> = {
   /** Column definitions */
   columns: Column<T>[];
@@ -55,8 +60,49 @@ export type DataTableProps<T> = {
   onSelectionChange?: (selectedIds: Set<string>) => void;
   /** Content to render in selection toolbar (shown when items selected) */
   selectionToolbar?: (selectedCount: number, data: T[]) => ReactNode;
+  /** When false, hides the search / filter toolbar area */
+  showSearchToolbar?: boolean;
+  /** Custom empty state for truly empty collections */
+  emptyState?: ReactNode;
+  /** When false, hides the pagination footer */
+  showPagination?: boolean;
+  /** Horizontal inset around the table block and related states */
+  contentInsetClassName?: string;
+  /** Bottom padding on the overall table wrapper */
+  bottomPaddingClassName?: string;
 };
 
+function hasFilterControls(filterConfig?: FilterConfig) {
+  return Boolean(
+    filterConfig?.dateFields?.length ||
+      filterConfig?.statusFilter ||
+      filterConfig?.httpMethodFilter ||
+      filterConfig?.httpStatusCodeFilter,
+  );
+}
+
+function SearchToolbar({
+  searchValue,
+  onSearch,
+  t,
+}: {
+  searchValue?: string;
+  onSearch: (value: string | null) => void;
+  t: (key: string) => string;
+}) {
+  return (
+    <div className="flex flex-col gap-2 px-4 pt-4 sm:flex-row sm:items-center">
+      <SearchInput
+        initialValue={searchValue}
+        onSearch={onSearch}
+        placeholder={t("Search...")}
+        ariaLabel={t("Search")}
+        clearAriaLabel={t("Clear search")}
+      />
+    </div>
+  );
+}
+
 /**
  * Generic data table with built-in sorting, search, pagination, and loading states
  */
@@ -82,7 +128,14 @@ export function DataTable<T extends { id: string }>({
   selectedIds,
   onSelectionChange,
   selectionToolbar,
+  showSearchToolbar = true,
+  emptyState,
+  showPagination = true,
+  contentInsetClassName = "px-4",
+  bottomPaddingClassName = "pb-4",
 }: DataTableProps<T>) {
+  const hasFilters = hasFilterControls(filterConfig);
+  const displayRows = Math.max(queryParams?.limit ?? 10, 1);
   // Filter panel open state - starts open if filters are active in URL
   const hasInitialFilters = Boolean(
     queryParams?.filter_date_from ||
@@ -95,11 +148,12 @@ export function DataTable<T extends { id: string }>({
   const [filterPanelOpen, setFilterPanelOpen] = useState(hasInitialFilters);
 
   // Manage table state (search, pagination, filters)
-  const { params, apiParams, filterState, handleSearch, handlePageChange, handleFilterChange } = useTableState({
-    initialParams: queryParams,
-    onChangeParams,
-    disableUrlSync,
-  });
+  const { params, apiParams, filterState, handleSearch, handlePageChange, handleFilterChange, handleSortChange } =
+    useTableState({
+      initialParams: queryParams,
+      onChangeParams,
+      disableUrlSync,
+    });
 
   // Fetch table data (use apiParams which has the query JSON for API)
   const { data: queryResult, isFetching } = useTableQuery<T>({
@@ -166,19 +220,33 @@ export function DataTable<T extends { id: string }>({
   // 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 + (selectable ? 1 : 0)} rows={10} />
+      <div className={cn("space-y-4", bottomPaddingClassName)}>
+        {showSearchToolbar &&
+          (hasFilters ? (
+            <Suspense fallback={<SearchToolbar searchValue={params.search} onSearch={handleSearch} t={t} />}>
+              <LazyFilterBar
+                searchValue={params.search}
+                onSearch={handleSearch}
+                filterConfig={filterConfig}
+                filterState={filterState ?? undefined}
+                onFilterChange={handleFilterChange}
+                t={t}
+                locale={locale}
+                isOpen={filterPanelOpen}
+                onToggle={setFilterPanelOpen}
+              />
+            </Suspense>
+          ) : (
+            <SearchToolbar searchValue={params.search} onSearch={handleSearch} t={t} />
+          ))}
+        <div className={contentInsetClassName}>
+          <TableSkeleton
+            columns={columns.length + (selectable ? 1 : 0)}
+            rows={displayRows}
+            showSearch={false}
+            showPagination={showPagination}
+          />
+        </div>
       </div>
     );
   }
@@ -187,84 +255,107 @@ export function DataTable<T extends { id: string }>({
   // (this means truly empty collection, not filtered to zero results)
   if (data.length === 0 && !hasActiveFilters) {
     return (
-      <TableEmptyState
-        resource={resourceName}
-        createNewLink={createNewLink}
-        createNewTrigger={createNewTrigger}
-        onCreateNew={onCreateNew}
-        t={t}
-      />
+      <div className={cn(contentInsetClassName, bottomPaddingClassName)}>
+        {emptyState ? (
+          emptyState
+        ) : (
+          <TableEmptyState
+            resource={resourceName}
+            createNewLink={createNewLink}
+            createNewTrigger={createNewTrigger}
+            onCreateNew={onCreateNew}
+            rows={displayRows}
+            t={t}
+          />
+        )}
+      </div>
     );
   }
 
   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={cn("space-y-4", bottomPaddingClassName)}>
+      {showSearchToolbar &&
+        (hasFilters ? (
+          <Suspense fallback={<SearchToolbar searchValue={params.search} onSearch={handleSearch} t={t} />}>
+            <LazyFilterBar
+              searchValue={params.search}
+              onSearch={handleSearch}
+              filterConfig={filterConfig}
+              filterState={filterState ?? undefined}
+              onFilterChange={handleFilterChange}
+              t={t}
+              locale={locale}
+              isOpen={filterPanelOpen}
+              onToggle={setFilterPanelOpen}
+            />
+          </Suspense>
+        ) : (
+          <SearchToolbar searchValue={params.search} onSearch={handleSearch} t={t} />
+        ))}
 
       {selectable && selectedCount > 0 && selectionToolbar && (
-        <div className="flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2">
-          {selectionToolbar(selectedCount, data)}
+        <div className={contentInsetClassName}>
+          <div className="flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2">
+            {selectionToolbar(selectedCount, data)}
+          </div>
         </div>
       )}
 
-      <div className="rounded-lg border">
-        <Table>
-          {renderHeader ? (
-            renderHeader()
-          ) : (
-            <DefaultTableHeader
-              columns={columns}
-              selectable={selectable}
-              allPageSelected={allPageSelected}
-              somePageSelected={somePageSelected}
-              onToggleAll={handleToggleAll}
-            />
-          )}
-
-          <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}
-                    selectable={selectable}
-                    isSelected={selectedIds?.has(item.id)}
-                    onToggleSelect={handleToggleRow}
-                  />
-                );
-              })
+      <div className={contentInsetClassName}>
+        <div className="rounded-lg border">
+          <Table>
+            {renderHeader ? (
+              renderHeader()
             ) : (
-              <TableNoResults resource={resourceName} search={handleSearch} onClear={handleClearAll} t={t} />
+              <DefaultTableHeader
+                columns={columns}
+                selectable={selectable}
+                allPageSelected={allPageSelected}
+                somePageSelected={somePageSelected}
+                onToggleAll={handleToggleAll}
+                orderBy={params.order_by}
+                onSortChange={handleSortChange}
+                t={t}
+              />
             )}
-          </TableBody>
-        </Table>
 
-        <div className="border-t px-4 py-3">
-          <Pagination
-            prevCursor={queryResult?.pagination.prev_cursor}
-            nextCursor={queryResult?.pagination.next_cursor}
-            onPageChange={handlePageChange}
-            t={t}
-          />
+            <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}
+                      selectable={selectable}
+                      isSelected={selectedIds?.has(item.id)}
+                      onToggleSelect={handleToggleRow}
+                    />
+                  );
+                })
+              ) : (
+                <TableNoResults resource={resourceName} search={handleSearch} onClear={handleClearAll} t={t} />
+              )}
+            </TableBody>
+          </Table>
+
+          {showPagination && (
+            <div className="border-t px-4 py-3">
+              <Pagination
+                prevCursor={queryResult?.pagination.prev_cursor}
+                nextCursor={queryResult?.pagination.next_cursor}
+                onPageChange={handlePageChange}
+                t={t}
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>
@@ -280,12 +371,18 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
   allPageSelected,
   somePageSelected,
   onToggleAll,
+  orderBy,
+  onSortChange,
+  t,
 }: {
   columns: Column<T>[];
   selectable?: boolean;
   allPageSelected?: boolean;
   somePageSelected?: boolean;
   onToggleAll?: () => void;
+  orderBy?: TableQueryParams["order_by"];
+  onSortChange?: (orderBy: TableQueryParams["order_by"]) => void;
+  t: (key: string) => string;
 }) {
   return (
     <TableHeader>
@@ -299,11 +396,47 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
             />
           </TableHead>
         )}
-        {columns.map((column) => (
-          <TableHead key={column.id} className={column.className} style={{ textAlign: column.align }}>
-            {column.header}
-          </TableHead>
-        ))}
+        {columns.map((column) => {
+          const sortDirection = getColumnSortDirection(column, orderBy);
+          const sortable = isSortableColumn(column);
+          const SortIcon = sortDirection === "asc" ? ArrowUp : sortDirection === "desc" ? ArrowDown : ArrowUpDown;
+          const sortAriaLabel = typeof column.header === "string" ? `${t("Sort by")} ${column.header}` : t("Sort by");
+
+          return (
+            <TableHead
+              key={column.id}
+              className={cn(column.id === "actions" && "w-[52px] whitespace-nowrap", column.className)}
+              style={{ textAlign: column.align }}
+              aria-sort={
+                sortable
+                  ? sortDirection === "asc"
+                    ? "ascending"
+                    : sortDirection === "desc"
+                      ? "descending"
+                      : "none"
+                  : undefined
+              }
+            >
+              {sortable ? (
+                <button
+                  type="button"
+                  className={cn(
+                    "flex w-full items-center gap-1 rounded py-1 text-left transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    column.align === "center" && "justify-center",
+                    column.align === "right" && "justify-end",
+                  )}
+                  onClick={() => onSortChange?.(getNextColumnOrderBy(column, orderBy))}
+                  aria-label={sortAriaLabel}
+                >
+                  <span>{column.header}</span>
+                  <SortIcon className={cn("h-3.5 w-3.5 shrink-0", sortDirection === null && "text-muted-foreground")} />
+                </button>
+              ) : (
+                column.header
+              )}
+            </TableHead>
+          );
+        })}
       </TableRow>
     </TableHeader>
   );
@@ -313,6 +446,9 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
   allPageSelected?: boolean;
   somePageSelected?: boolean;
   onToggleAll?: () => void;
+  orderBy?: TableQueryParams["order_by"];
+  onSortChange?: (orderBy: TableQueryParams["order_by"]) => void;
+  t: (key: string) => string;
 }) => JSX.Element;
 
 /**
@@ -345,7 +481,11 @@ const DefaultTableRow = memo(function DefaultTableRow<T extends { id: string }>(
         </TableCell>
       )}
       {columns.map((column) => (
-        <TableCell key={column.id} className={column.className} style={{ textAlign: column.align }}>
+        <TableCell
+          key={column.id}
+          className={cn(column.id === "actions" && "w-[52px] whitespace-nowrap", column.className)}
+          style={{ textAlign: column.align }}
+        >
           {column.cell?.(item)}
         </TableCell>
       ))}

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

@@ -53,7 +53,7 @@ export function FilterBar({
   if (!hasFilters) {
     // No filters configured, just show search
     return (
-      <div className="px-4 pt-4">
+      <div className="flex flex-col gap-2 px-4 pt-4 sm:flex-row sm:items-center">
         <SearchInput
           initialValue={searchValue}
           onSearch={onSearch}

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

@@ -144,6 +144,8 @@ type DateRangeFilterProps = {
 
 function DateRangeFilter({ fields, value, onChange, t, locale }: DateRangeFilterProps) {
   const selectedField = value?.field ?? fields[0]?.id;
+  const selectedFieldLabel =
+    fields.find((field) => field.id === selectedField)?.label ?? fields[0]?.label ?? selectedField;
 
   const handleFieldChange = useCallback(
     (field: string) => {
@@ -192,7 +194,7 @@ function DateRangeFilter({ fields, value, onChange, t, locale }: DateRangeFilter
         {/* Field selector */}
         <Select value={selectedField} onValueChange={(v) => v && handleFieldChange(v)}>
           <SelectTrigger size="sm" className="w-[140px]">
-            <SelectValue />
+            <SelectValue>{selectedFieldLabel}</SelectValue>
           </SelectTrigger>
           <SelectContent>
             {fields.map((field) => (
@@ -204,7 +206,13 @@ function DateRangeFilter({ fields, value, onChange, t, locale }: DateRangeFilter
         </Select>
 
         {/* From date */}
-        <DatePicker value={value?.range.from} onChange={handleFromChange} placeholder={t("From")} locale={locale} />
+        <DatePicker
+          value={value?.range.from}
+          onChange={handleFromChange}
+          placeholder={t("From")}
+          t={t}
+          locale={locale}
+        />
 
         <span className="text-muted-foreground">–</span>
 
@@ -213,6 +221,7 @@ function DateRangeFilter({ fields, value, onChange, t, locale }: DateRangeFilter
           value={value?.range.to}
           onChange={handleToChange}
           placeholder={t("To")}
+          t={t}
           locale={locale}
           minDate={value?.range.from}
         />
@@ -225,11 +234,12 @@ type DatePickerProps = {
   value?: Date;
   onChange: (date: Date | undefined) => void;
   placeholder: string;
+  t: (key: string) => string;
   locale?: string;
   minDate?: Date;
 };
 
-function DatePicker({ value, onChange, placeholder, minDate }: DatePickerProps) {
+function DatePicker({ value, onChange, placeholder, t, locale, minDate }: DatePickerProps) {
   const [open, setOpen] = useState(false);
 
   const handleSelect = useCallback(
@@ -241,7 +251,7 @@ function DatePicker({ value, onChange, placeholder, minDate }: DatePickerProps)
   );
 
   const formatDate = (date: Date) => {
-    return date.toLocaleDateString(undefined, {
+    return date.toLocaleDateString(locale, {
       year: "numeric",
       month: "short",
       day: "numeric",
@@ -249,22 +259,36 @@ function DatePicker({ value, onChange, placeholder, minDate }: DatePickerProps)
   };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 w-[130px] cursor-pointer justify-start gap-2 font-normal">
-          <CalendarIcon className="h-3.5 w-3.5 text-muted-foreground" />
-          {value ? formatDate(value) : <span className="text-muted-foreground">{placeholder}</span>}
+    <div className="flex items-center gap-1">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm" className="h-8 w-[130px] cursor-pointer justify-start gap-2 font-normal">
+            <CalendarIcon className="h-3.5 w-3.5 text-muted-foreground" />
+            {value ? formatDate(value) : <span className="text-muted-foreground">{placeholder}</span>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="single"
+            selected={value}
+            onSelect={handleSelect}
+            disabled={minDate ? { before: minDate } : undefined}
+          />
+        </PopoverContent>
+      </Popover>
+      {value ? (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 cursor-pointer p-0"
+          onClick={() => onChange(undefined)}
+          aria-label={`${t("Clear filters")} ${placeholder}`}
+          title={`${t("Clear filters")} ${placeholder}`}
+        >
+          <XIcon className="h-3.5 w-3.5" />
         </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <Calendar
-          mode="single"
-          selected={value}
-          onSelect={handleSelect}
-          disabled={minDate ? { before: minDate } : undefined}
-        />
-      </PopoverContent>
-    </Popover>
+      ) : null}
+    </div>
   );
 }
 
@@ -277,8 +301,7 @@ type StatusFilterSectionProps = {
 function StatusFilterSection({ value, onChange, t }: StatusFilterSectionProps) {
   const handleChange = useCallback(
     (status: string) => {
-      // Empty string means "clear selection"
-      if (status === "") {
+      if (status === "all") {
         onChange([]);
       } else {
         onChange([status as StatusFilter]);
@@ -298,10 +321,16 @@ function StatusFilterSection({ value, onChange, t }: StatusFilterSectionProps) {
     <div className="space-y-3">
       <Label className="font-medium text-muted-foreground text-xs uppercase">{t("Status")}</Label>
       <RadioGroup
-        value={value[0] ?? ""}
+        value={value[0] ?? "all"}
         onValueChange={(v) => handleChange(v as string)}
         className="flex h-8 flex-wrap items-center gap-4"
       >
+        <div className="flex cursor-pointer items-center gap-2">
+          <RadioGroupItem value="all" id="status-all" className="cursor-pointer" />
+          <Label htmlFor="status-all" className="cursor-pointer font-normal text-sm">
+            {t("All statuses")}
+          </Label>
+        </div>
         {STATUS_OPTIONS.map((status) => (
           <div key={status} className="flex cursor-pointer items-center gap-2">
             <RadioGroupItem value={status} id={`status-${status}`} className="cursor-pointer" />

package/src/components/table/hooks/use-table-state.ts

@@ -113,6 +113,55 @@ export function buildQueryFromFilterState(state: FilterState | null): string | u
   return JSON.stringify(query);
 }
 
+function parseQueryObject(query: string | undefined): Record<string, unknown> | null {
+  if (!query) return null;
+
+  try {
+    const parsed = JSON.parse(query);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return null;
+    return parsed as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+}
+
+function mergeApiQueries(baseQuery: string | undefined, filterQuery: string | undefined): string | undefined {
+  if (!baseQuery) return filterQuery;
+  if (!filterQuery) return baseQuery;
+
+  const parsedBase = parseQueryObject(baseQuery);
+  const parsedFilter = parseQueryObject(filterQuery);
+
+  if (!parsedBase || !parsedFilter) return filterQuery;
+
+  return JSON.stringify({
+    ...parsedBase,
+    ...parsedFilter,
+  });
+}
+
+function syncParamsToUrl(params: TableQueryParams) {
+  const searchParams = new URLSearchParams();
+
+  Object.entries(params).forEach(([key, value]) => {
+    if (value === undefined || value === null) {
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        searchParams.append(key, item);
+      }
+      return;
+    }
+
+    searchParams.set(key, String(value));
+  });
+
+  const newUrl = `${window.location.pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`;
+  window.history.pushState({}, "", newUrl);
+}
+
 /**
  * Manages table state (search, pagination, filters) with optional URL sync
  */
@@ -164,16 +213,7 @@ export function useTableState({ initialParams = {}, onChangeParams, disableUrlSy
       changeHandler(params);
     } else {
       // Update URL directly
-      const searchParams = new URLSearchParams();
-
-      Object.entries(params).forEach(([key, value]) => {
-        if (value !== undefined && value !== null) {
-          searchParams.set(key, String(value));
-        }
-      });
-
-      const newUrl = `${window.location.pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`;
-      window.history.pushState({}, "", newUrl);
+      syncParamsToUrl(params);
     }
   }, [params, disableUrlSync]);
 
@@ -233,6 +273,18 @@ export function useTableState({ initialParams = {}, onChangeParams, disableUrlSy
     }));
   }, []);
 
+  /**
+   * Handle sort change - sorting invalidates existing cursors.
+   */
+  const handleSortChange = useCallback((orderBy: TableQueryParams["order_by"]) => {
+    setParams((prevParams) => ({
+      ...prevParams,
+      order_by: orderBy,
+      prev_cursor: undefined,
+      next_cursor: undefined,
+    }));
+  }, []);
+
   /**
    * Parse current filter state from URL params
    */
@@ -254,7 +306,7 @@ export function useTableState({ initialParams = {}, onChangeParams, disableUrlSy
    * while query JSON is added for tables that use it (like invoices)
    */
   const apiParams = useMemo(() => {
-    const query = buildQueryFromFilterState(filterState);
+    const query = mergeApiQueries(params.query, buildQueryFromFilterState(filterState));
     return { ...params, query };
   }, [params, filterState]);
 
@@ -265,5 +317,6 @@ export function useTableState({ initialParams = {}, onChangeParams, disableUrlSy
     handleSearch,
     handlePageChange,
     handleFilterChange,
+    handleSortChange,
   };
 }