erp-pos-ecommerce-shared 0.1.2 → 0.1.4

package/dist/components.d.ts

@@ -1,12 +1,13 @@
 import React$1, { ReactNode } from 'react';
 import { e as IField, b as IButton } from './form.interface-CqnTdmc8.js';
 import { ReactFormExtendedApi, FormValidateOrFn, FormAsyncValidateOrFn } from '@tanstack/react-form';
-import { UseMutationResult } from '@tanstack/react-query';
+import { UseMutationResult, UseQueryOptions } from '@tanstack/react-query';
 import { s as TblProductsImage, o as ITableFilterConfig, g as IFilterSelectOption } from './filters.interface-Cx-AXMPz.js';
 import * as z from 'zod';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ColumnDef, Row, useReactTable } from '@tanstack/react-table';
+import { ColumnDef, useReactTable, Row } from '@tanstack/react-table';
 import { D as DataTableConfig, S as ServerTableState } from './datatable.interface-DFSQWdXd.js';
+import { T as TableQueryParams } from './types-CiX8AkJA.js';
 
 interface CreateEditFormProps<T> {
     fields: IField[];
@@ -151,8 +152,18 @@ interface DataTableProps$1<TData> {
         onClick: () => void;
         Icon?: React.ElementType;
     }[];
+    /** Called when a row is clicked */
+    onRowClick?: (row: TData) => void;
+    /** Called when a row is hovered */
+    onRowHover?: (row: TData) => void;
+    /** Empty state to display when no data is available */
+    emptyState?: React.ReactNode;
+    /** Table instance */
+    table?: ReturnType<typeof useReactTable<TData>>;
+    /** Custom Header component */
+    CustomHeader?: React.ReactNode;
 }
-declare const DataTable: <TData>({ data, columns, config, filters, totalRowCount, onStateChange, loading, enableRowCheck: canCheck, onSelectionChange, headerBgColor, columnActions, listMenuActions, }: DataTableProps$1<TData>) => react_jsx_runtime.JSX.Element;
+declare const DataTable: <TData>({ data, columns, config, filters, totalRowCount, onStateChange, loading, enableRowCheck: canCheck, onSelectionChange, headerBgColor, columnActions, listMenuActions, onRowClick, onRowHover, emptyState, table: ExternalTable, CustomHeader, }: DataTableProps$1<TData>) => react_jsx_runtime.JSX.Element;
 
 interface EmptyStateProps {
     title?: string;
@@ -241,8 +252,18 @@ interface DataTableProps<TData> {
     }[];
     /** Header background color. Use light-dark(light, dark) for theme-aware colors */
     headerBgColor?: string;
+    /** Whether the table is loading (shows skeleton rows instead of data) */
+    loading?: boolean;
+    /** Number of skeleton rows to show when loading */
+    skeletonRowCount?: number;
+    /** Called when a row is clicked */
+    onRowClick?: (row: TData) => void;
+    /** Called when a row is hovered */
+    onRowHover?: (row: TData) => void;
+    /** Empty state to display when no data is available */
+    emptyState?: React$1.ReactNode;
 }
-declare const SimpleDataTable: <TData>({ table, withBorder, borderRadius, SortIcon, SortIconAsc, SortIconDesc, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, canCheck, columnActions, listMenuActions, headerBgColor, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const SimpleDataTable: <TData>({ table, withBorder, borderRadius, SortIcon, SortIconAsc, SortIconDesc, canCheck, columnActions, listMenuActions, headerBgColor, loading, skeletonRowCount, onRowClick, onRowHover, emptyState, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface TableSkeletonProps {
     /** Number of skeleton rows to show */
@@ -260,4 +281,82 @@ interface TableSkeletonProps {
 }
 declare const TableSkeleton: ({ rows, columns, canCheck, withBorder, borderRadius, rowHeight, }: TableSkeletonProps) => react_jsx_runtime.JSX.Element;
 
-export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, type FilterDateProps, FilterSelect, type FilterSelectProps, FormGenerator, type FormInstance, type FormValues, ImageForm, SearchInput, SimpleDataTable, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };
+/** Shape that the query must return for TablePage to work correctly. */
+interface PaginatedResponse<TRow> {
+    data: TRow[];
+    total: number;
+}
+interface TablePageProps<TRow> {
+    /**
+     * Factory that receives the current pagination/filter params and returns
+     * the query options. Called every time the table state changes.
+     */
+    getQueryOptions: (params: TableQueryParams) => UseQueryOptions<PaginatedResponse<TRow>>;
+    /**
+     * Title of the table
+     */
+    title: string;
+    /**
+     * Columns of the table
+     */
+    columns: ColumnDef<TRow>[];
+    /**
+     * Filters of the table
+     */
+    filters?: ITableFilterConfig[];
+    /**
+     * Whether the table is loading externally
+     */
+    isLoadingExternal?: boolean;
+    /**
+     * Called when a row is clicked
+     */
+    onRowClick?: (row: TRow) => void;
+    /**
+     * Called when a row is hovered
+     */
+    onRowHover?: (row: TRow) => void;
+    /**
+     * Empty state of the table
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * Table instance
+     */
+    table?: ReturnType<typeof useReactTable<TRow>>;
+    /**
+     * Whether to enable row selection
+     */
+    enableRowSelection?: boolean;
+    /**
+     * Header background color
+     */
+    headerBgColor?: string;
+    /**
+     * Column actions to display per row
+     */
+    columnActions?: (row: TRow) => React.ReactNode;
+    /**
+     * List menu actions to display per row
+     */
+    listMenuActions?: (row: TRow) => {
+        label: string;
+        onClick: () => void;
+        Icon?: React.ElementType;
+    }[];
+    /**
+     * Called when row selection changes
+     */
+    onSelectionChange?: (selectedRows: TRow[]) => void;
+    /**
+     * Configuration for the table
+     */
+    config?: Partial<DataTableConfig>;
+    /**
+     * Custom Header component
+     */
+    CustomHeader?: React.ReactNode;
+}
+declare const TablePage: <TRow>({ getQueryOptions, title, columns, filters, isLoadingExternal, onRowClick, onRowHover, emptyState, table, enableRowSelection, headerBgColor, columnActions, listMenuActions, onSelectionChange, config, CustomHeader, }: TablePageProps<TRow>) => react_jsx_runtime.JSX.Element;
+
+export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, type FilterDateProps, FilterSelect, type FilterSelectProps, FormGenerator, type FormInstance, type FormValues, ImageForm, type PaginatedResponse, SearchInput, SimpleDataTable, TablePage, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };

package/dist/components.js

@@ -1,8 +1,8 @@
-import { useMutation } from '@tanstack/react-query';
-import { Text, Group, Box, rem, Button, ScrollArea, Image, ActionIcon, TagsInput, Switch, MultiSelect, Select, NumberInput, PasswordInput, TextInput, LoadingOverlay, Stepper, Flex, Container, Title, Card, Pagination, Stack, Paper, Table, Menu, Popover, Skeleton, Checkbox, UnstyledButton } from '@mantine/core';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { Text, Group, Box, rem, Button, ScrollArea, Image, ActionIcon, TagsInput, Switch, MultiSelect, Select, NumberInput, PasswordInput, TextInput, LoadingOverlay, Stepper, Flex, Container, Title, Card, Pagination, Stack, Paper, Table, Skeleton, Menu, Popover, Checkbox, UnstyledButton } from '@mantine/core';
 import { useForm } from '@tanstack/react-form';
 import axios, { isAxiosError } from 'axios';
-import { useRef, useMemo, useState, useEffect } from 'react';
+import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import { DatePickerInput, DatePicker } from '@mantine/dates';
 import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
 import { modals } from '@mantine/modals';
@@ -1363,60 +1363,77 @@ var TableBody = ({
   canCheck = false,
   columnActions,
   MenuIcon = MoreVertical,
-  listMenuActions
+  listMenuActions,
+  onRowClick,
+  onRowHover
 }) => {
-  return /* @__PURE__ */ jsx(Table.Tbody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
-    canCheck && /* @__PURE__ */ jsx(
-      Table.Td,
-      {
-        styles: {
-          td: {
-            padding: "0 0 0 6px"
-          }
-        },
-        children: /* @__PURE__ */ jsx(
-          Checkbox,
+  return /* @__PURE__ */ jsx(Table.Tbody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(
+    Table.Tr,
+    {
+      style: onRowClick ? { cursor: "pointer" } : void 0,
+      onMouseEnter: () => onRowHover?.(row.original),
+      children: [
+        canCheck && /* @__PURE__ */ jsx(
+          Table.Td,
           {
-            size: "xs",
             styles: {
-              root: {
-                width: 5
+              td: {
+                padding: "0 0 0 6px"
               }
             },
-            checked: row.getIsSelected(),
-            onChange: row.getToggleSelectedHandler(),
-            disabled: !row.getCanSelect(),
-            "aria-label": "Select row"
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                size: "xs",
+                styles: {
+                  root: {
+                    width: 5
+                  }
+                },
+                checked: row.getIsSelected(),
+                onChange: row.getToggleSelectedHandler(),
+                disabled: !row.getCanSelect(),
+                "aria-label": "Select row"
+              }
+            )
           }
-        )
-      }
-    ),
-    row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
-      Text,
-      {
-        size: "sm",
-        style: {
-          color: "light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-1))"
-        },
-        children: flexRender(cell.column.columnDef.cell, cell.getContext())
-      }
-    ) }, cell.id)),
-    /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", align: "center", gap: "sm", children: [
-      columnActions?.(row.original),
-      listMenuActions && /* @__PURE__ */ jsxs(Menu, { variant: "subtle", children: [
-        /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", children: /* @__PURE__ */ jsx(MenuIcon, { size: 16 }) }) }),
-        /* @__PURE__ */ jsx(Menu.Dropdown, { children: listMenuActions(row.original).map((action) => /* @__PURE__ */ jsx(
-          Menu.Item,
+        ),
+        row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+          Table.Td,
           {
-            onClick: action.onClick,
-            rightSection: action.Icon && /* @__PURE__ */ jsx(action.Icon, {}),
-            children: action.label
+            onClick: () => onRowClick?.(row.original),
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "sm",
+                style: {
+                  color: "light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-1))"
+                },
+                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+              }
+            )
           },
-          action.label
-        )) })
-      ] })
-    ] }) })
-  ] }, row.id)) });
+          cell.id
+        )),
+        /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", align: "center", gap: "sm", children: [
+          columnActions?.(row.original),
+          listMenuActions && /* @__PURE__ */ jsxs(Menu, { variant: "subtle", children: [
+            /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", children: /* @__PURE__ */ jsx(MenuIcon, { size: 16 }) }) }),
+            /* @__PURE__ */ jsx(Menu.Dropdown, { children: listMenuActions(row.original).map((action) => /* @__PURE__ */ jsx(
+              Menu.Item,
+              {
+                onClick: action.onClick,
+                rightSection: action.Icon && /* @__PURE__ */ jsx(action.Icon, {}),
+                children: action.label
+              },
+              action.label
+            )) })
+          ] })
+        ] }) })
+      ]
+    },
+    row.id
+  )) });
 };
 var EmptyState = ({
   title = "No hay datos disponibles",
@@ -1505,14 +1522,25 @@ var SimpleDataTable = ({
   SortIcon = ArrowUpDown,
   SortIconAsc = ArrowUp,
   SortIconDesc = ArrowDown,
-  EmptyStateIcon = FileX,
-  EmptyStateTitle = "No data found",
-  EmptyStateDescription = "No data found",
   canCheck = false,
   columnActions,
   listMenuActions,
-  headerBgColor
+  headerBgColor,
+  loading = false,
+  skeletonRowCount = 10,
+  onRowClick,
+  onRowHover,
+  emptyState = /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      title: "No data found",
+      description: "No data found",
+      icon: /* @__PURE__ */ jsx(FileX, { size: 32, color: "var(--mantine-color-gray-6)" })
+    }
+  )
 }) => {
+  const dataColumnsCount = table.getAllLeafColumns().length;
+  const hasActionsColumn = !!(columnActions || listMenuActions);
   return /* @__PURE__ */ jsx(Paper, { withBorder, radius: borderRadius, children: /* @__PURE__ */ jsxs(Table, { children: [
     /* @__PURE__ */ jsx(
       TableHeader,
@@ -1522,13 +1550,33 @@ var SimpleDataTable = ({
         SortIcon,
         SortIconAsc,
         SortIconDesc,
-        hasActionsColumn: !!(columnActions || listMenuActions),
+        hasActionsColumn,
         headerBgColor
       }
     ),
-    table.getRowCount() > 0 ? /* @__PURE__ */ jsx(
+    loading ? /* @__PURE__ */ jsx(Table.Tbody, { children: Array.from({ length: skeletonRowCount }).map((_, rowIdx) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+      canCheck && /* @__PURE__ */ jsx(Table.Td, { style: { minHeight: 40, verticalAlign: "middle" }, children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 18, radius: "sm" }) }),
+      Array.from({ length: dataColumnsCount }).map((_2, colIdx) => /* @__PURE__ */ jsx(
+        Table.Td,
+        {
+          style: { minHeight: 40, verticalAlign: "middle" },
+          children: /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              height: 16,
+              width: colIdx === dataColumnsCount - 1 ? 40 : `${60 + colIdx % 2 * 15}%`,
+              radius: "sm"
+            }
+          )
+        },
+        colIdx
+      )),
+      hasActionsColumn && /* @__PURE__ */ jsx(Table.Td, { style: { minHeight: 40, verticalAlign: "middle" }, children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 32, radius: "sm" }) })
+    ] }, rowIdx)) }) : table.getRowCount() > 0 ? /* @__PURE__ */ jsx(
       TableBody,
       {
+        onRowClick,
+        onRowHover,
         table,
         canCheck,
         columnActions,
@@ -1544,20 +1592,7 @@ var SimpleDataTable = ({
             justify: "center",
             align: "center",
             style: { minHeight: 200 },
-            children: /* @__PURE__ */ jsx(
-              EmptyState,
-              {
-                title: EmptyStateTitle,
-                description: EmptyStateDescription,
-                icon: /* @__PURE__ */ jsx(
-                  EmptyStateIcon,
-                  {
-                    size: 32,
-                    color: "var(--mantine-color-gray-6)"
-                  }
-                )
-              }
-            )
+            children: emptyState
           }
         )
       }
@@ -1788,10 +1823,15 @@ var DataTable = ({
   onSelectionChange,
   headerBgColor,
   columnActions,
-  listMenuActions
+  listMenuActions,
+  onRowClick,
+  onRowHover,
+  emptyState,
+  table: ExternalTable,
+  CustomHeader
 }) => {
   const {
-    table,
+    table: internalTable,
     globalFilter,
     setGlobalFilter,
     columnFilters,
@@ -1806,6 +1846,7 @@ var DataTable = ({
     totalRowCount,
     onStateChange
   });
+  const table = ExternalTable ?? internalTable;
   useEffect(() => {
     if (canCheck && onSelectionChange) {
       onSelectionChange(selectedRows);
@@ -1813,80 +1854,54 @@ var DataTable = ({
   }, [canCheck, onSelectionChange, selectedRows]);
   const getFilterValue = (columnId) => columnFilters.find((f) => f.id === columnId)?.value ?? null;
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "md", children: [
-    /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "wrap", children: [
-      mergedConfig.enableGlobalFilter && /* @__PURE__ */ jsx(
-        SearchInput,
-        {
-          value: globalFilter,
-          onChange: setGlobalFilter,
-          placeholder: mergedConfig.searchPlaceholder
-        }
-      ),
-      filters?.map(
-        (f) => f.type === "date" ? /* @__PURE__ */ jsx(
-          FilterDate,
+    /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "wrap", children: [
+        mergedConfig.enableGlobalFilter && /* @__PURE__ */ jsx(
+          SearchInput,
           {
-            columnId: f.columnId,
-            value: getFilterValue(f.columnId),
-            onChange: setColumnFilter,
-            placeholder: f.placeholder
-          },
-          f.columnId
-        ) : /* @__PURE__ */ jsx(
-          FilterSelect,
-          {
-            columnId: f.columnId,
-            options: f.options ?? [],
-            onChange: setColumnFilter,
-            placeholder: f.placeholder ?? "Todos"
-          },
-          f.columnId
-        )
-      )
-    ] }),
-    loading ? /* @__PURE__ */ jsx(Paper, { withBorder: true, radius: "md", children: /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(
-        TableHeader,
-        {
-          table,
-          canCheck,
-          SortIcon: ArrowUpDown,
-          SortIconAsc: ArrowUp,
-          SortIconDesc: ArrowDown,
-          hasActionsColumn: !!(columnActions || listMenuActions),
-          headerBgColor
-        }
-      ),
-      /* @__PURE__ */ jsx(Table.Tbody, { children: Array.from({ length: mergedConfig.defaultPageSize }).map(
-        (_, rowIdx) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
-          canCheck && /* @__PURE__ */ jsx(Table.Td, { style: { minHeight: 40, verticalAlign: "middle" }, children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 18, radius: "sm" }) }),
-          Array.from({ length: columns.length }).map((_2, colIdx) => /* @__PURE__ */ jsx(
-            Table.Td,
+            value: globalFilter,
+            onChange: setGlobalFilter,
+            placeholder: mergedConfig.searchPlaceholder
+          }
+        ),
+        filters?.map(
+          (f) => f.type === "date" ? /* @__PURE__ */ jsx(
+            FilterDate,
             {
-              style: { minHeight: 40, verticalAlign: "middle" },
-              children: /* @__PURE__ */ jsx(
-                Skeleton,
-                {
-                  height: 16,
-                  width: colIdx === columns.length - 1 ? 40 : `${60 + colIdx % 2 * 15}%`,
-                  radius: "sm"
-                }
-              )
+              columnId: f.columnId,
+              value: getFilterValue(f.columnId),
+              onChange: setColumnFilter,
+              placeholder: f.placeholder
             },
-            colIdx
-          )),
-          (columnActions ?? listMenuActions) && /* @__PURE__ */ jsx(Table.Td, { style: { minHeight: 40, verticalAlign: "middle" }, children: /* @__PURE__ */ jsx(Skeleton, { height: 16, width: 32, radius: "sm" }) })
-        ] }, rowIdx)
-      ) })
-    ] }) }) : /* @__PURE__ */ jsxs(Paper, { withBorder: true, radius: "md", style: { overflow: "hidden" }, children: [
+            f.columnId
+          ) : /* @__PURE__ */ jsx(
+            FilterSelect,
+            {
+              columnId: f.columnId,
+              options: f.options ?? [],
+              onChange: setColumnFilter,
+              placeholder: f.placeholder ?? "Todos"
+            },
+            f.columnId
+          )
+        )
+      ] }),
+      CustomHeader
+    ] }),
+    /* @__PURE__ */ jsxs(Paper, { withBorder: true, radius: "md", style: { overflow: "hidden" }, children: [
       /* @__PURE__ */ jsx(
         SimpleDataTable,
         {
+          onRowClick,
+          onRowHover,
           table,
           canCheck,
           columnActions,
           listMenuActions,
-          headerBgColor
+          headerBgColor,
+          loading,
+          skeletonRowCount: mergedConfig.defaultPageSize,
+          emptyState
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1926,7 +1941,65 @@ var TableSkeleton = ({
     ) }, colIdx)) }, rowIdx)) })
   ] }) });
 };
+var TablePage = ({
+  getQueryOptions,
+  title,
+  columns,
+  filters,
+  isLoadingExternal,
+  onRowClick,
+  onRowHover,
+  emptyState,
+  table,
+  enableRowSelection,
+  headerBgColor,
+  columnActions,
+  listMenuActions,
+  onSelectionChange,
+  config,
+  CustomHeader
+}) => {
+  const [tableParams, setTableParams] = useState({
+    skip: 0,
+    limit: 10,
+    query: void 0
+  });
+  const handleStateChange = useCallback((state) => {
+    setTableParams({
+      skip: state.pageIndex * state.pageSize,
+      limit: state.pageSize,
+      query: state.globalFilter || void 0,
+      columnFilters: state.columnFilters.length > 0 ? state.columnFilters : void 0
+    });
+  }, []);
+  const { data, isLoading } = useQuery(getQueryOptions(tableParams));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Title, { order: 1, children: title }),
+    /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        emptyState,
+        table,
+        onRowClick: (row) => onRowClick?.(row),
+        onRowHover: (row) => onRowHover?.(row),
+        totalRowCount: data?.total,
+        data: data?.data ?? [],
+        loading: isLoading || isLoadingExternal,
+        columns,
+        filters,
+        onStateChange: handleStateChange,
+        enableRowCheck: enableRowSelection,
+        headerBgColor,
+        columnActions,
+        listMenuActions,
+        onSelectionChange,
+        config,
+        CustomHeader
+      }
+    )
+  ] });
+};
 
-export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, FilterSelect, FormGenerator, ImageForm, SearchInput, SimpleDataTable, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };
+export { BottomPagination, CreateEditForm, DataTable, EmptyState, FilterDate, FilterSelect, FormGenerator, ImageForm, SearchInput, SimpleDataTable, TablePage, TableSkeleton, configureImageFormIcons, dateGteFilterFn, fieldGenerator, generateFormSchema };
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map