@spaceinvoices/react-ui 0.4.3 → 0.4.4

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

@@ -6,7 +6,6 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 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";
@@ -22,8 +21,6 @@ export type DataTableProps<T> = {
   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) */
@@ -36,12 +33,14 @@ export type DataTableProps<T> = {
   createNewLink?: string;
   /** Custom trigger for create action */
   createNewTrigger?: ReactNode;
+  /** Callback for "Create new" click — enables client-side navigation instead of full page reload */
+  onCreateNew?: () => void;
   /** 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;
+  renderHeader?: () => ReactNode;
   /** Filter configuration (date fields, status filter) */
   filterConfig?: FilterConfig;
   /** Translation function */
@@ -55,7 +54,7 @@ export type DataTableProps<T> = {
   /** Callback when selection changes */
   onSelectionChange?: (selectedIds: Set<string>) => void;
   /** Content to render in selection toolbar (shown when items selected) */
-  selectionToolbar?: (selectedCount: number) => ReactNode;
+  selectionToolbar?: (selectedCount: number, data: T[]) => ReactNode;
 };
 
 /**
@@ -66,13 +65,13 @@ export function DataTable<T extends { id: string }>({
   cacheKey,
   onFetch,
   resourceName,
-  defaultOrderBy = "-id",
   queryParams,
   onChangeParams,
   disableUrlSync,
   entityId,
   createNewLink,
   createNewTrigger,
+  onCreateNew,
   onRowClick,
   renderRow,
   renderHeader,
@@ -94,14 +93,12 @@ export function DataTable<T extends { id: string }>({
   );
   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,
-    });
+  // Manage table state (search, pagination, filters)
+  const { params, apiParams, filterState, handleSearch, handlePageChange, handleFilterChange } = useTableState({
+    initialParams: queryParams,
+    onChangeParams,
+    disableUrlSync,
+  });
 
   // Fetch table data (use apiParams which has the query JSON for API)
   const { data: queryResult, isFetching } = useTableQuery<T>({
@@ -121,6 +118,12 @@ export function DataTable<T extends { id: string }>({
       params.filter_http_status,
   );
 
+  // Combined clear handler for both search and filters
+  const handleClearAll = useCallback(() => {
+    handleSearch(null);
+    handleFilterChange(null);
+  }, [handleSearch, handleFilterChange]);
+
   // Selection helpers
   const pageIds = useMemo(() => data.map((item) => item.id), [data]);
   const selectedCount = selectedIds?.size ?? 0;
@@ -186,6 +189,7 @@ export function DataTable<T extends { id: string }>({
         resource={resourceName}
         createNewLink={createNewLink}
         createNewTrigger={createNewTrigger}
+        onCreateNew={onCreateNew}
         t={t}
       />
     );
@@ -207,19 +211,17 @@ export function DataTable<T extends { id: string }>({
 
       {selectable && selectedCount > 0 && selectionToolbar && (
         <div className="flex items-center gap-3 rounded-lg border bg-muted/50 px-4 py-2">
-          {selectionToolbar(selectedCount)}
+          {selectionToolbar(selectedCount, data)}
         </div>
       )}
 
       <div className="rounded-lg border">
         <Table>
           {renderHeader ? (
-            renderHeader({ orderBy: params.order_by, onSort: handleSort })
+            renderHeader()
           ) : (
             <DefaultTableHeader
               columns={columns}
-              orderBy={params.order_by}
-              onSort={handleSort}
               selectable={selectable}
               allPageSelected={allPageSelected}
               somePageSelected={somePageSelected}
@@ -249,7 +251,7 @@ export function DataTable<T extends { id: string }>({
                 );
               })
             ) : (
-              <TableNoResults resource={resourceName} search={handleSearch} t={t} />
+              <TableNoResults resource={resourceName} search={handleSearch} onClear={handleClearAll} t={t} />
             )}
           </TableBody>
         </Table>
@@ -271,16 +273,12 @@ export function DataTable<T extends { id: string }>({
  */
 const DefaultTableHeader = memo(function DefaultTableHeader<T>({
   columns,
-  orderBy,
-  onSort,
   selectable,
   allPageSelected,
   somePageSelected,
   onToggleAll,
 }: {
   columns: Column<T>[];
-  orderBy?: string;
-  onSort?: (order: string | null) => void;
   selectable?: boolean;
   allPageSelected?: boolean;
   somePageSelected?: boolean;
@@ -300,18 +298,7 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
         )}
         {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
-            )}
+            {column.header}
           </TableHead>
         ))}
       </TableRow>
@@ -319,8 +306,6 @@ const DefaultTableHeader = memo(function DefaultTableHeader<T>({
   );
 }) as <T>(props: {
   columns: Column<T>[];
-  orderBy?: string;
-  onSort?: (order: string | null) => void;
   selectable?: boolean;
   allPageSelected?: boolean;
   somePageSelected?: boolean;

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

@@ -3,7 +3,6 @@ import type { FilterState, HttpMethodFilter, HttpStatusCodeFilter, StatusFilter,
 
 type UseTableStateProps = {
   initialParams?: TableQueryParams;
-  defaultOrderBy?: string;
   onChangeParams?: (params: TableQueryParams) => void;
   /** When true, disables URL sync entirely (for embedded tables like dashboard) */
   disableUrlSync?: boolean;
@@ -115,17 +114,11 @@ export function buildQueryFromFilterState(state: FilterState | null): string | u
 }
 
 /**
- * Manages table state (sorting, search, pagination) with optional URL sync
+ * Manages table state (search, pagination, filters) with optional URL sync
  */
-export function useTableState({
-  initialParams = {},
-  defaultOrderBy = "-id",
-  onChangeParams,
-  disableUrlSync = false,
-}: UseTableStateProps) {
+export function useTableState({ initialParams = {}, onChangeParams, disableUrlSync = false }: UseTableStateProps) {
   const [params, setParams] = useState<TableQueryParams>({
     ...initialParams,
-    order_by: initialParams.order_by ?? defaultOrderBy,
   });
 
   // Use ref for onChangeParams to keep it stable
@@ -147,10 +140,9 @@ export function useTableState({
       isUpdatingFromInitialRef.current = true;
       setParams({
         ...initialParams,
-        order_by: initialParams.order_by ?? defaultOrderBy,
       });
     }
-  }, [initialParams, defaultOrderBy]);
+  }, [initialParams]);
 
   // Sync params to parent or URL when they change
   useEffect(() => {
@@ -185,21 +177,6 @@ export function useTableState({
     }
   }, [params, disableUrlSync]);
 
-  /**
-   * Handle sort change
-   */
-  const handleSort = useCallback(
-    (order: string | null) => {
-      setParams((prevParams) => ({
-        ...prevParams,
-        order_by: order ?? defaultOrderBy,
-        prev_cursor: undefined,
-        next_cursor: undefined,
-      }));
-    },
-    [defaultOrderBy],
-  );
-
   /**
    * Handle search change
    */
@@ -285,7 +262,6 @@ export function useTableState({
     params,
     apiParams,
     filterState,
-    handleSort,
     handleSearch,
     handlePageChange,
     handleFilterChange,

package/src/components/table/index.ts

@@ -2,7 +2,6 @@
  * Table Component Library
  *
  * A comprehensive, type-safe table system with built-in:
- * - Sorting (client and server-side)
  * - Search/filtering
  * - Cursor-based pagination
  * - Loading states
@@ -20,7 +19,6 @@ export { useTableQuery } from "./hooks/use-table-query";
 export { useTableState } from "./hooks/use-table-state";
 // Supporting components
 export { SearchInput } from "./search-input";
-export { SortableHeader } from "./sortable-header";
 export { TableEmptyState } from "./table-empty-state";
 export { TableNoResults } from "./table-no-results";
 export { Pagination } from "./table-pagination";

package/src/components/table/selection-toolbar.tsx

@@ -1,9 +1,14 @@
-import { FileDown, X } from "lucide-react";
+import { FileDown, FileText, RefreshCw, X } from "lucide-react";
 import { Button } from "@/ui/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
 
 type SelectionToolbarProps = {
   selectedCount: number;
   onExportPdfs?: () => void;
+  onCopyToInvoice?: () => void;
+  onRetryFiscalization?: () => void;
+  retryFiscalizationDisabled?: boolean;
+  retryFiscalizationTooltip?: string;
   onDeselectAll?: () => void;
   t?: (key: string) => string;
 };
@@ -11,6 +16,10 @@ type SelectionToolbarProps = {
 export function SelectionToolbar({
   selectedCount,
   onExportPdfs,
+  onCopyToInvoice,
+  onRetryFiscalization,
+  retryFiscalizationDisabled,
+  retryFiscalizationTooltip,
   onDeselectAll,
   t = (key) => key,
 }: SelectionToolbarProps) {
@@ -25,6 +34,31 @@ export function SelectionToolbar({
           {t("Export PDFs")}
         </Button>
       )}
+      {onCopyToInvoice && (
+        <Button variant="outline" size="sm" onClick={onCopyToInvoice}>
+          <FileText className="mr-1.5 size-4" />
+          {t("Copy to Invoice")}
+        </Button>
+      )}
+      {onRetryFiscalization &&
+        (retryFiscalizationDisabled && retryFiscalizationTooltip ? (
+          <Tooltip>
+            <TooltipTrigger>
+              <span>
+                <Button variant="outline" size="sm" disabled>
+                  <RefreshCw className="mr-1.5 size-4" />
+                  {t("Retry Fiscalization")}
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>{retryFiscalizationTooltip}</TooltipContent>
+          </Tooltip>
+        ) : (
+          <Button variant="outline" size="sm" onClick={onRetryFiscalization}>
+            <RefreshCw className="mr-1.5 size-4" />
+            {t("Retry Fiscalization")}
+          </Button>
+        ))}
       {onDeselectAll && (
         <Button variant="ghost" size="sm" onClick={onDeselectAll}>
           <X className="mr-1.5 size-4" />

package/src/components/table/table-empty-state.tsx

@@ -6,6 +6,8 @@ type TableEmptyStateProps = {
   resource: string;
   createNewLink?: string;
   createNewTrigger?: React.ReactNode;
+  /** Callback for "Create new" click — enables client-side navigation instead of full page reload */
+  onCreateNew?: () => void;
   /** Number of rows to calculate height (default: 10) */
   rows?: number;
   /** Translation function */
@@ -21,6 +23,7 @@ const ROW_HEIGHT = 53;
 export function TableEmptyState({
   createNewLink,
   createNewTrigger,
+  onCreateNew,
   rows = 10,
   t = (key) => key,
 }: TableEmptyStateProps) {
@@ -32,13 +35,13 @@ export function TableEmptyState({
       <Sprout size={70} strokeWidth={0.35} className="text-muted-foreground" />
       <div className="space-y-1 text-center">
         <p className="font-light text-lg text-muted-foreground">{t("Your list is empty")}</p>
-        {(createNewLink || createNewTrigger) && (
+        {(createNewLink || createNewTrigger || onCreateNew) && (
           <p className="text-muted-foreground text-sm">{t("Get started by creating your first entry")}</p>
         )}
       </div>
       {createNewLink && (
-        <Button variant="default" size="sm" asChild>
-          <a href={createNewLink}>{t("Create new")}</a>
+        <Button variant="default" size="sm" {...(onCreateNew ? { onClick: onCreateNew } : { asChild: true })}>
+          {onCreateNew ? t("Create new") : <a href={createNewLink}>{t("Create new")}</a>}
         </Button>
       )}
       {createNewTrigger && !createNewLink && <div>{createNewTrigger}</div>}

package/src/components/table/table-no-results.tsx

@@ -6,6 +6,8 @@ import { TableCell, TableRow } from "@/ui/components/ui/table";
 type TableNoResultsProps = {
   resource: string;
   search?: (value: null) => void;
+  /** Combined clear handler for both search and filters */
+  onClear?: () => void;
   /** Number of rows to calculate height (default: 10) */
   rows?: number;
   /** Translation function */
@@ -18,10 +20,13 @@ const ROW_HEIGHT = 53;
 /**
  * No results message shown when search returns empty
  */
-export function TableNoResults({ search, rows = 10, t = (key) => key }: TableNoResultsProps) {
+export function TableNoResults({ search, onClear, rows = 10, t = (key) => key }: TableNoResultsProps) {
   // Calculate height based on row count (min 150px)
   const height = Math.max(rows * ROW_HEIGHT, 150);
 
+  const handleClear = onClear ?? (search ? () => search(null) : undefined);
+  const clearLabel = onClear ? t("Clear all") : t("Clear search");
+
   return (
     <TableRow className="hover:bg-transparent">
       <TableCell colSpan={100} className="text-center align-middle" style={{ height }}>
@@ -29,11 +34,11 @@ export function TableNoResults({ search, rows = 10, t = (key) => key }: TableNoR
           <FileX size={32} strokeWidth={1.5} className="text-muted-foreground" />
           <div className="space-y-1">
             <p className="font-medium text-muted-foreground">{t("No results found")}</p>
-            {search && <p className="text-muted-foreground text-sm">{t("Try adjusting your search criteria")}</p>}
+            {handleClear && <p className="text-muted-foreground text-sm">{t("Try adjusting your search criteria")}</p>}
           </div>
-          {search && (
-            <Button variant="link" size="sm" onClick={() => search(null)} className="underline">
-              {t("Clear search")}
+          {handleClear && (
+            <Button variant="link" size="sm" onClick={handleClear} className="underline">
+              {clearLabel}
             </Button>
           )}
         </div>

package/src/components/table/types.ts

@@ -10,10 +10,6 @@ export type Column<T> = {
   header: ReactNode;
   /** Cell renderer function - returns content for each row. Optional when using renderRow. */
   cell?: (item: T) => ReactNode;
-  /** Field name for sorting (if different from id) */
-  sortField?: string;
-  /** Whether this column is sortable */
-  sortable?: boolean;
   /** Text alignment */
   align?: "left" | "center" | "right";
   /** Optional CSS class for the column */
@@ -24,7 +20,6 @@ export type Column<T> = {
  * Query parameters for table data fetching
  */
 export type TableQueryParams = {
-  order_by?: string;
   search?: string;
   prev_cursor?: string;
   next_cursor?: string;

package/src/components/taxes/tax-list-table/locales/de.ts

@@ -14,4 +14,5 @@ export default {
   "No results found": "Keine Steuern gefunden",
   "Try adjusting your search criteria": "Versuchen Sie, Ihre Suchkriterien anzupassen",
   "Clear search": "Suche zurücksetzen",
+  "Clear all": "Alles zurücksetzen",
 };

package/src/components/taxes/tax-list-table/locales/es.ts

@@ -14,4 +14,5 @@ export default {
   "No results found": "No se encontraron impuestos",
   "Try adjusting your search criteria": "Intente ajustar sus criterios de búsqueda",
   "Clear search": "Limpiar búsqueda",
+  "Clear all": "Borrar todo",
 };

package/src/components/taxes/tax-list-table/locales/fr.ts

@@ -14,4 +14,5 @@ export default {
   "No results found": "Aucune taxe trouvée",
   "Try adjusting your search criteria": "Essayez de modifier vos critères de recherche",
   "Clear search": "Effacer la recherche",
+  "Clear all": "Tout effacer",
 };

package/src/components/taxes/tax-list-table/locales/hr.ts

@@ -14,4 +14,5 @@ export default {
   "No results found": "Nisu pronađeni porezi",
   "Try adjusting your search criteria": "Pokušajte prilagoditi kriterije pretrage",
   "Clear search": "Očisti pretragu",
+  "Clear all": "Očisti sve",
 };

package/src/components/taxes/tax-list-table/locales/it.ts

@@ -14,4 +14,5 @@ export default {
   "No results found": "Nessuna tassa trovata",
   "Try adjusting your search criteria": "Prova a modificare i criteri di ricerca",
   "Clear search": "Cancella ricerca",
+  "Clear all": "Cancella tutto",
 };

package/src/components/taxes/tax-list-table/locales/nl.ts

@@ -14,4 +14,5 @@ export default {
   "No results found": "Geen belastingen gevonden",
   "Try adjusting your search criteria": "Probeer uw zoekcriteria aan te passen",
   "Clear search": "Zoekopdracht wissen",
+  "Clear all": "Alles wissen",
 };

package/src/components/taxes/tax-list-table/locales/pl.ts

@@ -14,4 +14,5 @@ export default {
   "No results found": "Nie znaleziono podatków",
   "Try adjusting your search criteria": "Spróbuj dostosować kryteria wyszukiwania",
   "Clear search": "Wyczyść wyszukiwanie",
+  "Clear all": "Wyczyść wszystko",
 };

package/src/components/taxes/tax-list-table/locales/pt.ts

@@ -14,4 +14,5 @@ export default {
   "No results found": "Nenhum imposto encontrado",
   "Try adjusting your search criteria": "Tente ajustar os seus critérios de pesquisa",
   "Clear search": "Limpar pesquisa",
+  "Clear all": "Limpar tudo",
 };

package/src/components/taxes/tax-list-table/locales/sl.ts

@@ -14,4 +14,5 @@ export default {
   "No results found": "Ni najdenih davkov",
   "Try adjusting your search criteria": "Poskusite prilagoditi iskalne kriterije",
   "Clear search": "Počisti iskanje",
+  "Clear all": "Počisti vse",
 };

package/src/components/taxes/tax-list-table/tax-list-header.tsx

@@ -1,27 +1,16 @@
 import { TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
-import { SortableHeader } from "../../table/sortable-header";
 
 type TaxListHeaderProps = {
-  orderBy?: string;
-  onSort?: (order: string | null) => void;
   t: (key: string) => string;
 };
 
-export default function TaxListHeader({ orderBy, onSort, t }: TaxListHeaderProps) {
+export default function TaxListHeader({ t }: TaxListHeaderProps) {
   return (
     <TableHeader>
       <TableRow>
-        <TableHead>
-          <SortableHeader field="name" currentOrder={orderBy} onSort={onSort}>
-            {t("Name")}
-          </SortableHeader>
-        </TableHead>
+        <TableHead>{t("Name")}</TableHead>
         <TableHead>{t("Tax Rates")}</TableHead>
-        <TableHead>
-          <SortableHeader field="created_at" currentOrder={orderBy} onSort={onSort}>
-            {t("Created")}
-          </SortableHeader>
-        </TableHead>
+        <TableHead>{t("Created")}</TableHead>
         <TableHead className="text-right" />
       </TableRow>
     </TableHeader>

package/src/components/taxes/tax-list-table/tax-list-table.tsx

@@ -58,15 +58,15 @@ export default function TaxListTable({
   return (
     <DataTable
       columns={[
-        { id: "name", header: t("Name"), sortable: true },
+        { id: "name", header: t("Name") },
         { id: "tax_rates", header: t("Tax Rates") },
-        { id: "created_at", header: t("Created"), sortable: true },
+        { id: "created_at", header: t("Created") },
         { id: "actions", header: "", align: "right" },
       ]}
       renderRow={(tax) => (
         <TaxListRow tax={tax} key={tax.id} onRowClick={(tax) => onRowClick?.(tax)} onView={onView} t={t} />
       )}
-      renderHeader={(headerProps) => <TaxListHeader orderBy={headerProps.orderBy} onSort={headerProps.onSort} t={t} />}
+      renderHeader={() => <TaxListHeader t={t} />}
       queryParams={queryParams}
       resourceName="tax"
       cacheKey={TAXES_CACHE_KEY}

package/src/components/ui/popover.tsx

@@ -37,11 +37,12 @@ function PopoverContent({
   alignOffset = 0,
   side = "bottom",
   sideOffset = 4,
+  positionMethod = "fixed",
   ...props
 }: PopoverPrimitive.Popup.Props &
   Pick<
     PopoverPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
+    "align" | "alignOffset" | "side" | "sideOffset" | "positionMethod"
   >) {
   return (
     <PopoverPrimitive.Portal>
@@ -50,6 +51,7 @@ function PopoverContent({
         alignOffset={alignOffset}
         side={side}
         sideOffset={sideOffset}
+        positionMethod={positionMethod}
         className="isolate z-50"
       >
         <PopoverPrimitive.Popup

package/src/components/ui/tooltip.tsx

@@ -54,12 +54,13 @@ function TooltipContent({
   sideOffset = 4,
   align = "center",
   alignOffset = 0,
+  positionMethod = "fixed",
   children,
   ...props
 }: TooltipPrimitive.Popup.Props &
   Pick<
     TooltipPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
+    "align" | "alignOffset" | "side" | "sideOffset" | "positionMethod"
   >) {
   return (
     <TooltipPrimitive.Portal>
@@ -68,6 +69,7 @@ function TooltipContent({
         alignOffset={alignOffset}
         side={side}
         sideOffset={sideOffset}
+        positionMethod={positionMethod}
         className="isolate z-50"
       >
         <TooltipPrimitive.Popup

package/src/generated/schemas/index.ts

@@ -13,8 +13,8 @@ export * from './customadvanceinvoice';
 export * from './customcreditnote';
 export * from './customer';
 export * from './customestimate';
-export * from './deliverynote';
 export * from './custominvoice';
+export * from './deliverynote';
 export * from './entity';
 export * from './entityuserrole';
 export * from './estimate';