@cryptlex/web-components 1.6.3 → 2.0.0

package/dist/components/data-table/column-picker.es.js

@@ -33,9 +33,10 @@ import "../ui/sidebar.es.js";
 import "sonner";
 import "../ui/table.es.js";
 import "../ui/tabs.es.js";
+import "../ui/textarea.es.js";
 import "../ui/tooltip.es.js";
 import { getResourceDisplayName as C } from "./table-utils/constants.es.js";
-function oe({ table: r }) {
+function ie({ table: r }) {
   const [t, p] = d(""), m = r.getAllColumns().filter(
     (e) => e.getCanHide() && e.id.toLowerCase().includes(t.toLowerCase())
   );
@@ -73,6 +74,6 @@ function oe({ table: r }) {
   ] });
 }
 export {
-  oe as ColumnPicker
+  ie as ColumnPicker
 };
 //# sourceMappingURL=column-picker.es.js.map

package/dist/components/data-table/column-picker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n  Button,\n  Checkbox,\n  Label,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  SearchInput,\n} from '@/index';\nimport { Table } from '@tanstack/react-table';\nimport { Columns3 } from 'lucide-react';\nimport { useState } from 'react';\nimport { getResourceDisplayName } from './table-utils';\n\nexport function ColumnPicker<TData>({ table }: { table: Table<TData> }) {\n  const [columnsSearch, setColumnsSearch] = useState('');\n\n  const filteredColumns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        column.getCanHide() && column.id.toLowerCase().includes(columnsSearch.toLowerCase()),\n    );\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button icon={Columns3} variant=\"outline\" size=\"sm\">\n          Columns\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"flex flex-col gap-4 divide-y-1\">\n        <div className=\" flex gap-1 justify-center items-center sticky top-0\">\n          <SearchInput value={columnsSearch} onChange={(e) => setColumnsSearch(e)} />\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <Checkbox\n            id=\"selectAll\"\n            checked={table.getIsAllColumnsVisible()}\n            onCheckedChange={() => table.toggleAllColumnsVisible()}\n          />\n          <Label className=\"font-normal cursor-pointer\" htmlFor={'selectAll'}>\n            Show All Columns\n          </Label>\n        </div>\n        {/* Filtered Columns */}\n        <div className=\"flex flex-col gap-3 max-h-96 overflow-auto\">\n          {filteredColumns.map((column) => (\n            <div key={column.id} className=\"flex items-center space-x-2\">\n              <Checkbox\n                id={column.id}\n                checked={column.getIsVisible()}\n                onCheckedChange={(value) => column.toggleVisibility(!!value)}\n              />\n              <Label className=\"font-normal cursor-pointer\" htmlFor={column.id}>\n                {getResourceDisplayName(column.id, 'admin-portal')}\n              </Label>\n            </div>\n          ))}{' '}\n          {/* No columns found */}\n          {filteredColumns.length === 0 && (\n            <p className=\"text-gray-500 text-sm italic\">No matching columns found.</p>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":["ColumnPicker","table","columnsSearch","setColumnsSearch","useState","filteredColumns","column","Popover","jsx","PopoverTrigger","Button","Columns3","jsxs","PopoverContent","SearchInput","Checkbox","Label","value","getResourceDisplayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcgB,SAAAA,GAAoB,EAAE,OAAAC,KAAkC;AACtE,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,EAAE,GAE/CC,IAAkBJ,EACrB,cAAA,EACA;AAAA,IACC,CAACK,MACCA,EAAO,WAAA,KAAgBA,EAAO,GAAG,cAAc,SAASJ,EAAc,YAAa,CAAA;AAAA,EACvF;AAEF,2BACGK,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAe,EAAA,SAAO,IACrB,UAAA,gBAAAD,EAACE,GAAO,EAAA,MAAMC,GAAU,SAAQ,WAAU,MAAK,MAAK,UAAA,UAEpD,CAAA,GACF;AAAA,IACA,gBAAAC,EAACC,GAAe,EAAA,WAAU,kCACxB,UAAA;AAAA,MAAA,gBAAAL,EAAC,OAAI,EAAA,WAAU,wDACb,UAAA,gBAAAA,EAACM,GAAY,EAAA,OAAOZ,GAAe,UAAU,CAAC,MAAMC,EAAiB,CAAC,EAAG,CAAA,GAC3E;AAAA,MACA,gBAAAS,EAAC,OAAI,EAAA,WAAU,+BACb,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAASd,EAAM,uBAAuB;AAAA,YACtC,iBAAiB,MAAMA,EAAM,wBAAwB;AAAA,UAAA;AAAA,QACvD;AAAA,0BACCe,GAAM,EAAA,WAAU,8BAA6B,SAAS,aAAa,UAEpE,mBAAA,CAAA;AAAA,MAAA,GACF;AAAA,MAEA,gBAAAJ,EAAC,OAAI,EAAA,WAAU,8CACZ,UAAA;AAAA,QAAAP,EAAgB,IAAI,CAACC,MACnB,gBAAAM,EAAA,OAAA,EAAoB,WAAU,+BAC7B,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAIT,EAAO;AAAA,cACX,SAASA,EAAO,aAAa;AAAA,cAC7B,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,YAAA;AAAA,UAC7D;AAAA,UACA,gBAAAT,EAACQ,GAAM,EAAA,WAAU,8BAA6B,SAASV,EAAO,IAC3D,UAAuBY,EAAAZ,EAAO,IAAI,cAAc,EACnD,CAAA;AAAA,QAAA,KARQA,EAAO,EASjB,CACD;AAAA,QAAG;AAAA,QAEHD,EAAgB,WAAW,uBACzB,KAAE,EAAA,WAAU,gCAA+B,UAA0B,6BAAA,CAAA;AAAA,MAAA,EAE1E,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"column-picker.es.js","sources":["../../../lib/components/data-table/column-picker.tsx"],"sourcesContent":["import {\n  Button,\n  Checkbox,\n  Label,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  SearchInput,\n} from '@/index';\nimport { Table } from '@tanstack/react-table';\nimport { Columns3 } from 'lucide-react';\nimport { useState } from 'react';\nimport { getResourceDisplayName } from './table-utils';\n\nexport function ColumnPicker<TData>({ table }: { table: Table<TData> }) {\n  const [columnsSearch, setColumnsSearch] = useState('');\n\n  const filteredColumns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        column.getCanHide() && column.id.toLowerCase().includes(columnsSearch.toLowerCase()),\n    );\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button icon={Columns3} variant=\"outline\" size=\"sm\">\n          Columns\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"flex flex-col gap-4 divide-y-1\">\n        <div className=\" flex gap-1 justify-center items-center sticky top-0\">\n          <SearchInput value={columnsSearch} onChange={(e) => setColumnsSearch(e)} />\n        </div>\n        <div className=\"flex items-center space-x-2\">\n          <Checkbox\n            id=\"selectAll\"\n            checked={table.getIsAllColumnsVisible()}\n            onCheckedChange={() => table.toggleAllColumnsVisible()}\n          />\n          <Label className=\"font-normal cursor-pointer\" htmlFor={'selectAll'}>\n            Show All Columns\n          </Label>\n        </div>\n        {/* Filtered Columns */}\n        <div className=\"flex flex-col gap-3 max-h-96 overflow-auto\">\n          {filteredColumns.map((column) => (\n            <div key={column.id} className=\"flex items-center space-x-2\">\n              <Checkbox\n                id={column.id}\n                checked={column.getIsVisible()}\n                onCheckedChange={(value) => column.toggleVisibility(!!value)}\n              />\n              <Label className=\"font-normal cursor-pointer\" htmlFor={column.id}>\n                {getResourceDisplayName(column.id, 'admin-portal')}\n              </Label>\n            </div>\n          ))}{' '}\n          {/* No columns found */}\n          {filteredColumns.length === 0 && (\n            <p className=\"text-gray-500 text-sm italic\">No matching columns found.</p>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"names":["ColumnPicker","table","columnsSearch","setColumnsSearch","useState","filteredColumns","column","Popover","jsx","PopoverTrigger","Button","Columns3","jsxs","PopoverContent","SearchInput","Checkbox","Label","value","getResourceDisplayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcgB,SAAAA,GAAoB,EAAE,OAAAC,KAAkC;AACtE,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,EAAE,GAE/CC,IAAkBJ,EACrB,cAAA,EACA;AAAA,IACC,CAACK,MACCA,EAAO,WAAA,KAAgBA,EAAO,GAAG,cAAc,SAASJ,EAAc,YAAa,CAAA;AAAA,EACvF;AAEF,2BACGK,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAe,EAAA,SAAO,IACrB,UAAA,gBAAAD,EAACE,GAAO,EAAA,MAAMC,GAAU,SAAQ,WAAU,MAAK,MAAK,UAAA,UAEpD,CAAA,GACF;AAAA,IACA,gBAAAC,EAACC,GAAe,EAAA,WAAU,kCACxB,UAAA;AAAA,MAAA,gBAAAL,EAAC,OAAI,EAAA,WAAU,wDACb,UAAA,gBAAAA,EAACM,GAAY,EAAA,OAAOZ,GAAe,UAAU,CAAC,MAAMC,EAAiB,CAAC,EAAG,CAAA,GAC3E;AAAA,MACA,gBAAAS,EAAC,OAAI,EAAA,WAAU,+BACb,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAASd,EAAM,uBAAuB;AAAA,YACtC,iBAAiB,MAAMA,EAAM,wBAAwB;AAAA,UAAA;AAAA,QACvD;AAAA,0BACCe,GAAM,EAAA,WAAU,8BAA6B,SAAS,aAAa,UAEpE,mBAAA,CAAA;AAAA,MAAA,GACF;AAAA,MAEA,gBAAAJ,EAAC,OAAI,EAAA,WAAU,8CACZ,UAAA;AAAA,QAAAP,EAAgB,IAAI,CAACC,MACnB,gBAAAM,EAAA,OAAA,EAAoB,WAAU,+BAC7B,UAAA;AAAA,UAAA,gBAAAJ;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,IAAIT,EAAO;AAAA,cACX,SAASA,EAAO,aAAa;AAAA,cAC7B,iBAAiB,CAACW,MAAUX,EAAO,iBAAiB,CAAC,CAACW,CAAK;AAAA,YAAA;AAAA,UAC7D;AAAA,UACA,gBAAAT,EAACQ,GAAM,EAAA,WAAU,8BAA6B,SAASV,EAAO,IAC3D,UAAuBY,EAAAZ,EAAO,IAAI,cAAc,EACnD,CAAA;AAAA,QAAA,KARQA,EAAO,EASjB,CACD;AAAA,QAAG;AAAA,QAEHD,EAAgB,WAAW,uBACzB,KAAE,EAAA,WAAU,gCAA+B,UAA0B,6BAAA,CAAA;AAAA,MAAA,EAE1E,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/data-table/data-table.es.js

@@ -34,9 +34,10 @@ import "../ui/sidebar.es.js";
 import "sonner";
 import "../ui/table.es.js";
 import "../ui/tabs.es.js";
+import "../ui/textarea.es.js";
 import { TooltipProvider as J, Tooltip as Y, TooltipTrigger as Z, TooltipContent as $ } from "../ui/tooltip.es.js";
 import { useQuery as Q, keepPreviousData as tt } from "@tanstack/react-query";
-import { createColumnHelper as et, useReactTable as ot, getCoreRowModel as it } from "@tanstack/react-table";
+import { createColumnHelper as ot, useReactTable as et, getCoreRowModel as it } from "@tanstack/react-table";
 import { useDebounce as rt } from "use-debounce";
 import { ColumnPicker as nt } from "./column-picker.es.js";
 import { PageSize as at } from "./page-size.es.js";
@@ -46,7 +47,7 @@ import { TableContent as st } from "./table-content.es.js";
 import { TABLE_CHECK_BOX_COLUMN as ct, TABLE_ID_COLUMN as pt, TABLE_DEFAULT_DATE_COLUMNS as ft } from "./table-commons.es.js";
 import { DEFAULT_FILTERABLE_FIELDS as ut } from "./table-utils/constants.es.js";
 const N = "actions_button";
-function ae({
+function lo({
   columns: g,
   fetchFn: O,
   tableName: I,
@@ -69,33 +70,33 @@ function ae({
     pagination: { pageIndex: 0, pageSize: 20 }
     // Pagination state
   }), a = (t) => {
-    R((e) => ({ ...e, ...t }));
+    R((o) => ({ ...o, ...t }));
   }, { sorting: p, columnFilters: w, searching: y, columnVisibility: T, rowSelection: f, pagination: u } = U, [j] = rt(y.trim(), 300);
   X(() => {
     a({
       columnVisibility: { id: !1, updatedAt: !1, ...S }
     });
   }, [S]);
-  const [C, k] = M([]), F = d(() => C.reduce((t, e) => {
-    const { property: r, value: n, operator: l } = e;
+  const [C, k] = M([]), F = d(() => C.reduce((t, o) => {
+    const { property: r, value: n, operator: l } = o;
     return t[r] || (t[r] = {}), t[r][l] = n, t;
-  }, {}), [C]), o = Q({
+  }, {}), [C]), e = Q({
     queryKey: [I, u, p, j, F],
     queryFn: () => O(u, p, y.trim(), F),
     placeholderData: tt,
     // Keep previous data while loading new data
     retry: 0,
     refetchOnWindowFocus: !1
-  }), B = et(), b = d(() => {
+  }), B = ot(), b = d(() => {
     var r;
-    const t = (r = o.data) == null ? void 0 : r.data;
+    const t = (r = e.data) == null ? void 0 : r.data;
     if (!(t != null && t.length)) return [];
-    const e = /* @__PURE__ */ new Set();
+    const o = /* @__PURE__ */ new Set();
     return t.forEach((n) => {
       n.metadata && n.metadata.forEach((l) => {
-        e.add(l.key);
+        o.add(l.key);
       });
-    }), Array.from(e).map(
+    }), Array.from(o).map(
       (n) => B.accessor(
         (l) => {
           var A;
@@ -121,49 +122,49 @@ function ae({
         }
       )
     );
-  }, [(D = o.data) == null ? void 0 : D.data]), _ = d(() => [
+  }, [(D = e.data) == null ? void 0 : D.data]), _ = d(() => [
     ...h.selection ? ct : [],
     ...pt,
-    ...g.filter((e) => e.id !== N),
+    ...g.filter((o) => o.id !== N),
     ...b.length ? b : [],
     ...ft,
-    ...g.filter((e) => e.id === N)
-  ], [g, b, (E = o.data) == null ? void 0 : E.data, h.selection]), K = d(
+    ...g.filter((o) => o.id === N)
+  ], [g, b, (E = e.data) == null ? void 0 : E.data, h.selection]), K = d(
     () => Object.entries(f).map((t) => {
-      var e, r;
-      return (r = (e = o == null ? void 0 : o.data) == null ? void 0 : e.data) == null ? void 0 : r[t[0]];
+      var o, r;
+      return (r = (o = e == null ? void 0 : e.data) == null ? void 0 : o.data) == null ? void 0 : r[t[0]];
     }),
-    [(L = o == null ? void 0 : o.data) == null ? void 0 : L.data, f]
-  ), s = ot({
-    data: ((v = o.data) == null ? void 0 : v.data) ?? [],
+    [(L = e == null ? void 0 : e.data) == null ? void 0 : L.data, f]
+  ), s = et({
+    data: ((v = e.data) == null ? void 0 : v.data) ?? [],
     columns: _,
     getCoreRowModel: it(),
-    rowCount: (x = o.data) == null ? void 0 : x.total,
+    rowCount: (x = e.data) == null ? void 0 : x.total,
     manualPagination: !0,
     // Handle pagination manually since pagination is done server side for data tables
     onPaginationChange: (t) => {
-      const e = typeof t == "function" ? t(u) : t;
-      a({ pagination: e });
+      const o = typeof t == "function" ? t(u) : t;
+      a({ pagination: o });
     },
     manualSorting: !0,
     // Handle sorting manually since sorting is done server side for data tables
     onSortingChange: (t) => {
-      const e = typeof t == "function" ? t(p) : t;
-      a({ sorting: e, rowSelection: {} });
+      const o = typeof t == "function" ? t(p) : t;
+      a({ sorting: o, rowSelection: {} });
     },
     manualFiltering: !0,
     // Handle filtering manually since filtering is done server side for data tables
     onGlobalFilterChange: (t) => {
-      const e = typeof t == "function" ? t(w) : t;
-      a({ columnFilters: e });
+      const o = typeof t == "function" ? t(w) : t;
+      a({ columnFilters: o });
     },
     onColumnVisibilityChange: (t) => {
-      const e = typeof t == "function" ? t(T) : t;
-      a({ columnVisibility: e });
+      const o = typeof t == "function" ? t(T) : t;
+      a({ columnVisibility: o });
     },
     onRowSelectionChange: (t) => {
-      const e = typeof t == "function" ? t(f) : t;
-      a({ rowSelection: e });
+      const o = typeof t == "function" ? t(f) : t;
+      a({ rowSelection: o });
     },
     state: {
       sorting: p,
@@ -173,7 +174,7 @@ function ae({
       rowSelection: f
     },
     meta: {
-      refetch: o.refetch
+      refetch: e.refetch
     }
   }), z = {
     key: "",
@@ -191,25 +192,25 @@ function ae({
     /* @__PURE__ */ i(
       mt,
       {
-        dataQuery: o,
+        dataQuery: e,
         table: s,
         tableActions: h,
         stateToPass: z,
         handleSearching: (t) => a({ searching: t })
       }
     ),
-    /* @__PURE__ */ i("div", { className: "w-full bg-card overflow-auto border-x", children: /* @__PURE__ */ i(st, { table: s, columns: _, dataQuery: o }) }),
+    /* @__PURE__ */ i("div", { className: "w-full bg-card overflow-auto border-x", children: /* @__PURE__ */ i(st, { table: s, columns: _, dataQuery: e }) }),
     /* @__PURE__ */ c("div", { className: "bg-card flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
       /* @__PURE__ */ c("div", { className: "flex gap-4", children: [
         /* @__PURE__ */ i(nt, { table: s }),
         /* @__PURE__ */ i(at, { table: s })
       ] }),
-      /* @__PURE__ */ i(lt, { table: s, rowCount: ((P = o.data) == null ? void 0 : P.total) ?? 0 })
+      /* @__PURE__ */ i(lt, { table: s, rowCount: ((P = e.data) == null ? void 0 : P.total) ?? 0 })
     ] })
   ] });
 }
 export {
   N as ACTIONS_COLUMN_ID,
-  ae as DataTable
+  lo as DataTable
 };
 //# sourceMappingURL=data-table.es.js.map

package/dist/components/data-table/data-table.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["'use client';\nimport { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n  DEFAULT_FILTERABLE_FIELDS,\n  TABLE_CHECK_BOX_COLUMN,\n  TABLE_DEFAULT_DATE_COLUMNS,\n  TABLE_ID_COLUMN,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/index';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  createColumnHelper,\n  getCoreRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useDebounce } from 'use-debounce';\nimport { ColumnPicker } from './column-picker';\nimport { PageSize } from './page-size';\nimport { Paginator } from './paginator';\nimport Actions from './table-actions';\nimport { TableContent } from './table-content';\nimport type { FilterableProperties, MetadataDto, TableActions, TableFetchFn } from './table-utils';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'actions_button';\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData, TValue = any> {\n  columns: ColumnDef<TData, TValue>[]; // Columns for the table\n  tableName: string; // Table name used as query key\n  fetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n  tableActions: TableActions;\n  filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n  columnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends Record<string, any>, TValue = any>({\n  columns,\n  fetchFn,\n  tableName,\n  tableActions,\n  columnsToHideByDefault,\n  filterableFields,\n}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\n\n  //TODO: This is later to be stored in url as params\n  const [tableState, setTableState] = useState({\n    sorting: [] as SortingState, // Sorting state\n    columnFilters: [] as ColumnFiltersState, // Filters for columns\n    searching: '', // Search query state\n    columnVisibility: {} as VisibilityState, // Visibility of columns\n    rowSelection: {}, // Row selection state\n    pagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n  });\n\n  // Update table state with new values\n  const updateTableState = (updates: Partial<typeof tableState>) => {\n    setTableState((prev) => ({ ...prev, ...updates }));\n  };\n\n  // Destructuring the table state for easier access\n  const { sorting, columnFilters, searching, columnVisibility, rowSelection, pagination } =\n    tableState;\n\n  // Debounce the search query to avoid making a request on every keystroke\n  const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n  // Update column visibility when columnsToHideByDefault changes\n  useEffect(() => {\n    updateTableState({\n      columnVisibility: { id: false, updatedAt: false, ...columnsToHideByDefault },\n    });\n  }, [columnsToHideByDefault]);\n  const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n  const formatedFilters = useMemo(() => {\n    return filters.reduce((acc, filter) => {\n      const { property, value, operator } = filter;\n      if (!acc[property]) {\n        acc[property] = {};\n      }\n      acc[property][operator] = value;\n      return acc;\n    }, {} as Record<string, Record<string, any>>);\n  }, [filters]);\n\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const dataQuery = useQuery({\n    queryKey: [tableName, pagination, sorting, debouncedQuery, formatedFilters],\n    queryFn: () => fetchFn(pagination, sorting, searching.trim(), formatedFilters),\n    placeholderData: keepPreviousData, // Keep previous data while loading new data\n    retry: 0,\n    refetchOnWindowFocus: false,\n  });\n\n  // Create column helpers for dynamic column generation\n  const columnHelper = createColumnHelper<TData>();\n  const metadataColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {\n    const data = dataQuery.data?.data;\n    if (!data?.length) return [];\n    // set of all the keys present in a given view\n    const allMetadataKeys = new Set<string>();\n\n    // Collect all unique metadata keys\n    data.forEach((row: TData) => {\n      if (row.metadata) {\n        row.metadata.forEach((meta: MetadataDto) => {\n          allMetadataKeys.add(meta.key);\n        });\n      }\n    });\n\n    // Generate columns for all unique metadata keys\n    return Array.from(allMetadataKeys).map((key) =>\n      columnHelper.accessor(\n        (row: TData) => {\n          // Find the metadata object with the matching key\n          const metadataEntry = row.metadata?.find((meta: MetadataDto) => meta.key === key);\n          return metadataEntry?.value; // Return the value for the specific key\n        },\n        {\n          header: () => (\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <span className=\"flex gap-1 items-center align-middle\">\n                    {key} <Info size={18} strokeWidth={'1px'} />\n                  </span>\n                </TooltipTrigger>\n                <TooltipContent>Metadata Key</TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ), // Use the metadata key as the column header\n          id: key,\n          enableSorting: false,\n          cell: (info) => {\n            const value = info.getValue();\n            // Handle null/undefined values\n            if (value === null || value === undefined) return '';\n            // For primitive types, return the string representation\n            return String(value);\n          },\n        },\n      ),\n    );\n  }, [dataQuery.data?.data]);\n\n  /**\n   * ID,createdAt and updatedAt will be added by default for all tables\n   * If selection is allowed, checkbox will be added\n   * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n   * If there are actions for the table, they will be placed fixed at the right side of table.\n   */\n  const extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n    const _columns = [\n      ...(tableActions.selection ? TABLE_CHECK_BOX_COLUMN : []),\n      ...TABLE_ID_COLUMN,\n      ...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...TABLE_DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n    ];\n\n    return _columns;\n  }, [columns, metadataColumns, dataQuery.data?.data, tableActions.selection]);\n\n  // Get selected row data\n  const rowSelectedData = useMemo(\n    () => Object.entries(rowSelection).map((d: any) => dataQuery?.data?.data?.[d[0]]),\n    [dataQuery?.data?.data, rowSelection],\n  );\n\n  // Use react-table's hook to create the table instance\n  const table = useReactTable({\n    data: dataQuery.data?.data ?? [],\n    columns: extendedColumns,\n    getCoreRowModel: getCoreRowModel(),\n    rowCount: dataQuery.data?.total,\n    manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      // Reset selection when sorting.\n      updateTableState({ sorting: newSorting, rowSelection: {} });\n    },\n    manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n    onGlobalFilterChange: (updater) => {\n      const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n      updateTableState({ columnFilters: newFilters });\n    },\n    onColumnVisibilityChange: (updater) => {\n      const newVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n      updateTableState({ columnVisibility: newVisibility });\n    },\n    onRowSelectionChange: (updater) => {\n      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n      updateTableState({ rowSelection: newSelection });\n    },\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      pagination,\n      rowSelection,\n    },\n    meta: {\n      refetch: dataQuery.refetch,\n    },\n  });\n  const stateToPass = {\n    key: '',\n    stateData: rowSelectedData,\n  };\n\n  return (\n    <>\n      <TableFilter\n        filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n        filters={filters}\n        onFiltersChange={setFilters}\n      />\n\n      {/* Table Actions Section */}\n      <Actions\n        dataQuery={dataQuery}\n        table={table}\n        tableActions={tableActions}\n        stateToPass={stateToPass}\n        handleSearching={(value) => updateTableState({ searching: value })}\n      />\n\n      {/* Table Content Section */}\n      {/* TODO, content tabindex */}\n      {/* TODO set height */}\n      <div className='w-full bg-card overflow-auto border-x'>\n        <TableContent table={table} columns={extendedColumns} dataQuery={dataQuery} />\n      </div>\n\n      {/* Table Footer Section with Pagination and Column Picker */}\n      <div className=\"bg-card flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n        <div className=\"flex gap-4\">\n          <ColumnPicker table={table} />\n          <PageSize table={table} />\n        </div>\n        <Paginator table={table} rowCount={dataQuery.data?.total ?? 0} />\n      </div>\n    </>\n  );\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","filterableFields","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","filters","setFilters","formatedFilters","useMemo","acc","filter","property","value","operator","dataQuery","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","rowSelectedData","d","_c","table","useReactTable","_d","getCoreRowModel","_e","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","stateToPass","Fragment","TableFilter","DEFAULT_FILTERABLE_FIELDS","Actions","TableContent","ColumnPicker","PageSize","Paginator","_f"],"mappings":"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"}
+{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["'use client';\nimport { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n  DEFAULT_FILTERABLE_FIELDS,\n  TABLE_CHECK_BOX_COLUMN,\n  TABLE_DEFAULT_DATE_COLUMNS,\n  TABLE_ID_COLUMN,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/index';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  createColumnHelper,\n  getCoreRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useDebounce } from 'use-debounce';\nimport { ColumnPicker } from './column-picker';\nimport { PageSize } from './page-size';\nimport { Paginator } from './paginator';\nimport Actions from './table-actions';\nimport { TableContent } from './table-content';\nimport type { FilterableProperties, MetadataDto, TableActions, TableFetchFn } from './table-utils';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'actions_button';\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData, TValue = any> {\n  columns: ColumnDef<TData, TValue>[]; // Columns for the table\n  tableName: string; // Table name used as query key\n  fetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n  tableActions: TableActions;\n  filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n  columnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends Record<string, any>, TValue = any>({\n  columns,\n  fetchFn,\n  tableName,\n  tableActions,\n  columnsToHideByDefault,\n  filterableFields,\n}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\n\n  //TODO: This is later to be stored in url as params\n  const [tableState, setTableState] = useState({\n    sorting: [] as SortingState, // Sorting state\n    columnFilters: [] as ColumnFiltersState, // Filters for columns\n    searching: '', // Search query state\n    columnVisibility: {} as VisibilityState, // Visibility of columns\n    rowSelection: {}, // Row selection state\n    pagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n  });\n\n  // Update table state with new values\n  const updateTableState = (updates: Partial<typeof tableState>) => {\n    setTableState((prev) => ({ ...prev, ...updates }));\n  };\n\n  // Destructuring the table state for easier access\n  const { sorting, columnFilters, searching, columnVisibility, rowSelection, pagination } =\n    tableState;\n\n  // Debounce the search query to avoid making a request on every keystroke\n  const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n  // Update column visibility when columnsToHideByDefault changes\n  useEffect(() => {\n    updateTableState({\n      columnVisibility: { id: false, updatedAt: false, ...columnsToHideByDefault },\n    });\n  }, [columnsToHideByDefault]);\n  const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n  const formatedFilters = useMemo(() => {\n    return filters.reduce((acc, filter) => {\n      const { property, value, operator } = filter;\n      if (!acc[property]) {\n        acc[property] = {};\n      }\n      acc[property][operator] = value;\n      return acc;\n    }, {} as Record<string, Record<string, any>>);\n  }, [filters]);\n\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const dataQuery = useQuery({\n    queryKey: [tableName, pagination, sorting, debouncedQuery, formatedFilters],\n    queryFn: () => fetchFn(pagination, sorting, searching.trim(), formatedFilters),\n    placeholderData: keepPreviousData, // Keep previous data while loading new data\n    retry: 0,\n    refetchOnWindowFocus: false,\n  });\n\n  // Create column helpers for dynamic column generation\n  const columnHelper = createColumnHelper<TData>();\n  const metadataColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {\n    const data = dataQuery.data?.data;\n    if (!data?.length) return [];\n    // set of all the keys present in a given view\n    const allMetadataKeys = new Set<string>();\n\n    // Collect all unique metadata keys\n    data.forEach((row: TData) => {\n      if (row.metadata) {\n        row.metadata.forEach((meta: MetadataDto) => {\n          allMetadataKeys.add(meta.key);\n        });\n      }\n    });\n\n    // Generate columns for all unique metadata keys\n    return Array.from(allMetadataKeys).map((key) =>\n      columnHelper.accessor(\n        (row: TData) => {\n          // Find the metadata object with the matching key\n          const metadataEntry = row.metadata?.find((meta: MetadataDto) => meta.key === key);\n          return metadataEntry?.value; // Return the value for the specific key\n        },\n        {\n          header: () => (\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <span className=\"flex gap-1 items-center align-middle\">\n                    {key} <Info size={18} strokeWidth={'1px'} />\n                  </span>\n                </TooltipTrigger>\n                <TooltipContent>Metadata Key</TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ), // Use the metadata key as the column header\n          id: key,\n          enableSorting: false,\n          cell: (info) => {\n            const value = info.getValue();\n            // Handle null/undefined values\n            if (value === null || value === undefined) return '';\n            // For primitive types, return the string representation\n            return String(value);\n          },\n        },\n      ),\n    );\n  }, [dataQuery.data?.data]);\n\n  /**\n   * ID,createdAt and updatedAt will be added by default for all tables\n   * If selection is allowed, checkbox will be added\n   * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n   * If there are actions for the table, they will be placed fixed at the right side of table.\n   */\n  const extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n    const _columns = [\n      ...(tableActions.selection ? TABLE_CHECK_BOX_COLUMN : []),\n      ...TABLE_ID_COLUMN,\n      ...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...TABLE_DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n    ];\n\n    return _columns;\n  }, [columns, metadataColumns, dataQuery.data?.data, tableActions.selection]);\n\n  // Get selected row data\n  const rowSelectedData = useMemo(\n    () => Object.entries(rowSelection).map((d: any) => dataQuery?.data?.data?.[d[0]]),\n    [dataQuery?.data?.data, rowSelection],\n  );\n\n  // Use react-table's hook to create the table instance\n  const table = useReactTable({\n    data: dataQuery.data?.data ?? [],\n    columns: extendedColumns,\n    getCoreRowModel: getCoreRowModel(),\n    rowCount: dataQuery.data?.total,\n    manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      // Reset selection when sorting.\n      updateTableState({ sorting: newSorting, rowSelection: {} });\n    },\n    manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n    onGlobalFilterChange: (updater) => {\n      const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n      updateTableState({ columnFilters: newFilters });\n    },\n    onColumnVisibilityChange: (updater) => {\n      const newVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n      updateTableState({ columnVisibility: newVisibility });\n    },\n    onRowSelectionChange: (updater) => {\n      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n      updateTableState({ rowSelection: newSelection });\n    },\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      pagination,\n      rowSelection,\n    },\n    meta: {\n      refetch: dataQuery.refetch,\n    },\n  });\n  const stateToPass = {\n    key: '',\n    stateData: rowSelectedData,\n  };\n\n  return (\n    <>\n      <TableFilter\n        filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n        filters={filters}\n        onFiltersChange={setFilters}\n      />\n\n      {/* Table Actions Section */}\n      <Actions\n        dataQuery={dataQuery}\n        table={table}\n        tableActions={tableActions}\n        stateToPass={stateToPass}\n        handleSearching={(value) => updateTableState({ searching: value })}\n      />\n\n      {/* Table Content Section */}\n      {/* TODO, content tabindex */}\n      {/* TODO set height */}\n      <div className='w-full bg-card overflow-auto border-x'>\n        <TableContent table={table} columns={extendedColumns} dataQuery={dataQuery} />\n      </div>\n\n      {/* Table Footer Section with Pagination and Column Picker */}\n      <div className=\"bg-card flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n        <div className=\"flex gap-4\">\n          <ColumnPicker table={table} />\n          <PageSize table={table} />\n        </div>\n        <Paginator table={table} rowCount={dataQuery.data?.total ?? 0} />\n      </div>\n    </>\n  );\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","filterableFields","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","filters","setFilters","formatedFilters","useMemo","acc","filter","property","value","operator","dataQuery","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","rowSelectedData","d","_c","table","useReactTable","_d","getCoreRowModel","_e","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","stateToPass","Fragment","TableFilter","DEFAULT_FILTERABLE_FIELDS","Actions","TableContent","ColumnPicker","PageSize","Paginator","_f"],"mappings":"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"}

package/dist/components/data-table/page-size.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-size.es.js","sources":["../../../lib/components/data-table/page-size.tsx"],"sourcesContent":["import { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Table } from '@tanstack/react-table';\nimport { Menu } from 'lucide-react';\n\nexport function PageSize<TData>({ table }: { table: Table<TData> }) {\n  const currentPageSize = table.getState().pagination.pageSize;\n  // TODO: Remove the 2, just for testing purposes\n  const pageSizes = [10, 20, 30, 40, 50];\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button size=\"sm\" icon={Menu} variant=\"outline\">\n          {currentPageSize}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        {pageSizes.map((pageSize) => (\n          <DropdownMenuItem\n            key={pageSize}\n            onSelect={() => table.setPageSize(pageSize)}\n            className={`${pageSize === currentPageSize ? 'bg-neutral-5' : ''}`}\n          >\n            {pageSize}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["PageSize","table","currentPageSize","DropdownMenu","jsx","DropdownMenuTrigger","Button","Menu","DropdownMenuContent","pageSize","DropdownMenuItem"],"mappings":";;;;AAUgB,SAAAA,EAAgB,EAAE,OAAAC,KAAkC;AAClE,QAAMC,IAAkBD,EAAM,SAAS,EAAE,WAAW;AAIpD,2BACGE,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAoB,EAAA,SAAO,IAC1B,UAAA,gBAAAD,EAACE,GAAO,EAAA,MAAK,MAAK,MAAMC,GAAM,SAAQ,WACnC,UAAAL,EACH,CAAA,GACF;AAAA,IACC,gBAAAE,EAAAI,GAAA,EACE,UAVW,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE,EAUpB,IAAI,CAACC,MACd,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,UAAU,MAAMT,EAAM,YAAYQ,CAAQ;AAAA,QAC1C,WAAW,GAAGA,MAAaP,IAAkB,iBAAiB,EAAE;AAAA,QAE/D,UAAAO;AAAA,MAAA;AAAA,MAJIA;AAAA,IAAA,CAMR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"page-size.es.js","sources":["../../../lib/components/data-table/page-size.tsx"],"sourcesContent":["import { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Table } from '@tanstack/react-table';\nimport { Menu } from 'lucide-react';\n\nexport function PageSize<TData>({ table }: { table: Table<TData> }) {\n  const currentPageSize = table.getState().pagination.pageSize;\n  const pageSizes = [10, 20, 30, 40, 50];\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button size=\"sm\" icon={Menu} variant=\"outline\">\n          {currentPageSize}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        {pageSizes.map((pageSize) => (\n          <DropdownMenuItem\n            key={pageSize}\n            onSelect={() => table.setPageSize(pageSize)}\n            className={`${pageSize === currentPageSize ? 'bg-neutral-5' : ''}`}\n          >\n            {pageSize}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["PageSize","table","currentPageSize","DropdownMenu","jsx","DropdownMenuTrigger","Button","Menu","DropdownMenuContent","pageSize","DropdownMenuItem"],"mappings":";;;;AAUgB,SAAAA,EAAgB,EAAE,OAAAC,KAAkC;AAClE,QAAMC,IAAkBD,EAAM,SAAS,EAAE,WAAW;AAGpD,2BACGE,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAoB,EAAA,SAAO,IAC1B,UAAA,gBAAAD,EAACE,GAAO,EAAA,MAAK,MAAK,MAAMC,GAAM,SAAQ,WACnC,UAAAL,EACH,CAAA,GACF;AAAA,IACC,gBAAAE,EAAAI,GAAA,EACE,UAVW,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE,EAUpB,IAAI,CAACC,MACd,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,UAAU,MAAMT,EAAM,YAAYQ,CAAQ;AAAA,QAC1C,WAAW,GAAGA,MAAaP,IAAkB,iBAAiB,EAAE;AAAA,QAE/D,UAAAO;AAAA,MAAA;AAAA,MAJIA;AAAA,IAAA,CAMR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/data-table/table-actions.es.js

@@ -33,8 +33,9 @@ import "../ui/sidebar.es.js";
 import "sonner";
 import "../ui/table.es.js";
 import "../ui/tabs.es.js";
+import "../ui/textarea.es.js";
 import "../ui/tooltip.es.js";
-function or({
+function tr({
   table: i,
   tableActions: r,
   stateToPass: n,
@@ -72,6 +73,6 @@ function or({
   ] });
 }
 export {
-  or as default
+  tr as default
 };
 //# sourceMappingURL=table-actions.es.js.map

package/dist/components/data-table/table-actions.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-actions.es.js","sources":["../../../lib/components/data-table/table-actions.tsx"],"sourcesContent":["import { Link, useRouterState } from '@tanstack/react-router';\n\nimport { Pencil, Plus, RotateCw, Trash } from 'lucide-react';\n\nimport type { TableActions } from '@/components/data-table/table-utils/index';\nimport { Button } from '@/components/ui/button';\nimport { SearchInput } from '@/index';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport { Table } from '@tanstack/react-table';\nimport { useState } from 'react';\n\nexport default function Actions<TData>({\n  table,\n  tableActions,\n  stateToPass,\n  handleSearching,\n  dataQuery,\n}: {\n  table: Table<TData>;\n  tableActions: TableActions;\n  handleSearching: (value: string) => void;\n  // TODO:Improve ts\n  stateToPass: any;\n  dataQuery: UseQueryResult<any, unknown>;\n}) {\n  const { location: { href } = {} } = useRouterState();\n  const [search, setSearch] = useState<string>('');\n  return (\n    <div className=\"flex bg-card justify-between my-0 p-4 border-t border-x gap-4 overflow-auto\">\n      <div className=\"flex gap-4\">\n        <Button\n          loading={dataQuery.isFetching}\n          icon={RotateCw}\n          onClick={() => dataQuery.refetch()}\n          variant={'outline'}\n        />\n        {/* //TODO: we can  show the create, delete button based on permsission */}\n        {/* All the creating routes will be with url /create in host app */}\n        {tableActions.create && table.getSelectedRowModel().rows.length === 0 && (\n          <Link to={`${href}/create`}>\n            <Button disabled={dataQuery.isFetching} icon={Plus}>\n              Create\n            </Button>{' '}\n          </Link>\n        )}\n        {/* All the updating routes will be with url /edit in host app */}\n        {table.getSelectedRowModel().rows.length > 0 && tableActions.update && (\n          <Link to={`${href}/edit`} state={stateToPass}>\n            <Button disabled={dataQuery.isFetching} icon={Pencil}>\n              Update\n            </Button>\n          </Link>\n        )}\n        {table.getSelectedRowModel().rows.length > 0 && tableActions?.delete && (\n          <Link to={`${href}/delete`} state={stateToPass}>\n            <Button disabled={dataQuery.isFetching} icon={Trash} variant={'destructive'}>\n              Delete\n            </Button>\n          </Link>\n        )}\n      </div>\n      {tableActions?.search && (\n        <SearchInput\n          value={search}\n          onChange={(e) => {\n            setSearch(e);\n            handleSearching(e);\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["Actions","table","tableActions","stateToPass","handleSearching","dataQuery","href","useRouterState","search","setSearch","useState","jsxs","jsx","Button","RotateCw","Link","Plus","Pencil","Trash","SearchInput","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,SAAwBA,GAAe;AAAA,EACrC,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACF,GAOG;AACK,QAAA,EAAE,UAAU,EAAE,MAAAC,MAAS,CAAC,EAAA,IAAMC,EAAe,GAC7C,CAACC,GAAQC,CAAS,IAAIC,EAAiB,EAAE;AAE7C,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,+EACb,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASR,EAAU;AAAA,UACnB,MAAMS;AAAA,UACN,SAAS,MAAMT,EAAU,QAAQ;AAAA,UACjC,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAGCH,EAAa,UAAUD,EAAM,oBAAA,EAAsB,KAAK,WAAW,KACjE,gBAAAU,EAAAI,GAAA,EAAK,IAAI,GAAGT,CAAI,WACf,UAAA;AAAA,QAAA,gBAAAM,EAACC,KAAO,UAAUR,EAAU,YAAY,MAAMW,GAAM,UAEpD,UAAA;AAAA,QAAU;AAAA,MAAA,GACZ;AAAA,MAGDf,EAAM,oBAAoB,EAAE,KAAK,SAAS,KAAKC,EAAa,UAC1D,gBAAAU,EAAAG,GAAA,EAAK,IAAI,GAAGT,CAAI,SAAS,OAAOH,GAC/B,UAAA,gBAAAS,EAACC,GAAO,EAAA,UAAUR,EAAU,YAAY,MAAMY,GAAQ,UAAA,SAAA,CAEtD,EACF,CAAA;AAAA,MAEDhB,EAAM,oBAAoB,EAAE,KAAK,SAAS,MAAKC,KAAA,gBAAAA,EAAc,WAC5D,gBAAAU,EAACG,GAAK,EAAA,IAAI,GAAGT,CAAI,WAAW,OAAOH,GACjC,UAAC,gBAAAS,EAAAC,GAAA,EAAO,UAAUR,EAAU,YAAY,MAAMa,GAAO,SAAS,eAAe,UAAA,SAE7E,CAAA,EACF,CAAA;AAAA,IAAA,GAEJ;AAAA,KACChB,KAAA,gBAAAA,EAAc,WACb,gBAAAU;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,OAAOX;AAAA,QACP,UAAU,CAACY,MAAM;AACf,UAAAX,EAAUW,CAAC,GACXhB,EAAgBgB,CAAC;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}
+{"version":3,"file":"table-actions.es.js","sources":["../../../lib/components/data-table/table-actions.tsx"],"sourcesContent":["import { Link, useRouterState } from '@tanstack/react-router';\n\nimport { Pencil, Plus, RotateCw, Trash } from 'lucide-react';\n\nimport type { TableActions } from '@/components/data-table/table-utils/index';\nimport { Button } from '@/components/ui/button';\nimport { SearchInput } from '@/index';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport { Table } from '@tanstack/react-table';\nimport { useState } from 'react';\n\nexport default function Actions<TData>({\n  table,\n  tableActions,\n  stateToPass,\n  handleSearching,\n  dataQuery,\n}: {\n  table: Table<TData>;\n  tableActions: TableActions;\n  handleSearching: (value: string) => void;\n  // TODO:Improve ts\n  stateToPass: any;\n  dataQuery: UseQueryResult<any, unknown>;\n}) {\n  const { location: { href } = {} } = useRouterState();\n  const [search, setSearch] = useState<string>('');\n  return (\n    <div className=\"flex bg-card justify-between my-0 p-4 border-t border-x gap-4 overflow-auto\">\n      <div className=\"flex gap-4\">\n        <Button\n          loading={dataQuery.isFetching}\n          icon={RotateCw}\n          onClick={() => dataQuery.refetch()}\n          variant={'outline'}\n        />\n        {/* //TODO: we can  show the create, delete button based on permsission */}\n        {/* All the creating routes will be with url /create in host app */}\n        {tableActions.create && table.getSelectedRowModel().rows.length === 0 && (\n          <Link to={`${href}/create`}>\n            <Button disabled={dataQuery.isFetching} icon={Plus}>\n              Create\n            </Button>{' '}\n          </Link>\n        )}\n        {/* All the updating routes will be with url /edit in host app */}\n        {table.getSelectedRowModel().rows.length > 0 && tableActions.update && (\n          <Link to={`${href}/edit`} state={stateToPass}>\n            <Button disabled={dataQuery.isFetching} icon={Pencil}>\n              Update\n            </Button>\n          </Link>\n        )}\n        {table.getSelectedRowModel().rows.length > 0 && tableActions?.delete && (\n          <Link to={`${href}/delete`} state={stateToPass}>\n            <Button disabled={dataQuery.isFetching} icon={Trash} variant={'destructive'}>\n              Delete\n            </Button>\n          </Link>\n        )}\n      </div>\n      {tableActions?.search && (\n        <SearchInput\n          value={search}\n          onChange={(e) => {\n            setSearch(e);\n            handleSearching(e);\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["Actions","table","tableActions","stateToPass","handleSearching","dataQuery","href","useRouterState","search","setSearch","useState","jsxs","jsx","Button","RotateCw","Link","Plus","Pencil","Trash","SearchInput","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,SAAwBA,GAAe;AAAA,EACrC,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACF,GAOG;AACK,QAAA,EAAE,UAAU,EAAE,MAAAC,MAAS,CAAC,EAAA,IAAMC,EAAe,GAC7C,CAACC,GAAQC,CAAS,IAAIC,EAAiB,EAAE;AAE7C,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,+EACb,UAAA;AAAA,IAAC,gBAAAA,EAAA,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASR,EAAU;AAAA,UACnB,MAAMS;AAAA,UACN,SAAS,MAAMT,EAAU,QAAQ;AAAA,UACjC,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAGCH,EAAa,UAAUD,EAAM,oBAAA,EAAsB,KAAK,WAAW,KACjE,gBAAAU,EAAAI,GAAA,EAAK,IAAI,GAAGT,CAAI,WACf,UAAA;AAAA,QAAA,gBAAAM,EAACC,KAAO,UAAUR,EAAU,YAAY,MAAMW,GAAM,UAEpD,UAAA;AAAA,QAAU;AAAA,MAAA,GACZ;AAAA,MAGDf,EAAM,oBAAoB,EAAE,KAAK,SAAS,KAAKC,EAAa,UAC1D,gBAAAU,EAAAG,GAAA,EAAK,IAAI,GAAGT,CAAI,SAAS,OAAOH,GAC/B,UAAA,gBAAAS,EAACC,GAAO,EAAA,UAAUR,EAAU,YAAY,MAAMY,GAAQ,UAAA,SAAA,CAEtD,EACF,CAAA;AAAA,MAEDhB,EAAM,oBAAoB,EAAE,KAAK,SAAS,MAAKC,KAAA,gBAAAA,EAAc,WAC5D,gBAAAU,EAACG,GAAK,EAAA,IAAI,GAAGT,CAAI,WAAW,OAAOH,GACjC,UAAC,gBAAAS,EAAAC,GAAA,EAAO,UAAUR,EAAU,YAAY,MAAMa,GAAO,SAAS,eAAe,UAAA,SAE7E,CAAA,EACF,CAAA;AAAA,IAAA,GAEJ;AAAA,KACChB,KAAA,gBAAAA,EAAc,WACb,gBAAAU;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,OAAOX;AAAA,QACP,UAAU,CAACY,MAAM;AACf,UAAAX,EAAUW,CAAC,GACXhB,EAAgBgB,CAAC;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}

package/dist/components/data-table/table-filter.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-filter.es.js","sources":["../../../lib/components/data-table/table-filter.tsx"],"sourcesContent":["import {\n  COMPARISON_OPERATOR_LABELS,\n  FILTER_COMPARISON_OPERATORS,\n  getResourceDisplayName,\n  OPERATORS_FOR_FILTER_TYPE,\n  type FilterableProperties,\n  type FilterablePropertyType,\n} from '@/components/data-table/table-utils';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/components/ui/form';\nimport { Input } from '@/components/ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { cn } from '@/utils';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { format } from 'date-fns';\nimport { FilterIcon, X } from 'lucide-react';\nimport { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport z from 'zod';\nconst filterSchema = z.object({\n  // For identifing  a filter for updation and deletion\n  id: z.string().min(1, 'Field is required'),\n  property: z.string().min(1, 'Field is required.'),\n  operator: z.enum(FILTER_COMPARISON_OPERATORS, {\n    errorMap: () => ({ message: 'Invalid comparison operator' }),\n  }),\n  value: z.string().min(1, 'Field is required.'),\n});\nexport type FilterFormType = z.infer<typeof filterSchema>;\n\ninterface TableFilterProps {\n  filterableProperties: FilterableProperties<any>;\n  filters: FilterFormType[];\n  onFiltersChange: (filters: FilterFormType[]) => void;\n}\n\nexport const TableFilter = ({\n  filterableProperties,\n  filters,\n  onFiltersChange,\n}: TableFilterProps) => {\n  const [editingFilter, setEditingFilter] = useState<string | null>(null);\n  const [isAddingFilter, setIsAddingFilter] = useState(false);\n  const getFilterLabel = (filter: FilterFormType): string => {\n    const property = getResourceDisplayName(filter.property, 'admin-portal');\n    const operatorLabel = COMPARISON_OPERATOR_LABELS[filter.operator];\n    const value = filter.value;\n    return `${property} ${operatorLabel} ${value}`;\n  };\n\n  const removeFilter = (id: string) => {\n    onFiltersChange(filters.filter((filter) => filter.id !== id));\n  };\n\n  interface FilterFormProps {\n    filter?: FilterFormType;\n  }\n  const FilterForm = ({ filter }: FilterFormProps) => {\n    const form = useForm<FilterFormType>({\n      resolver: zodResolver(filterSchema),\n      defaultValues: {\n        property: filter?.property || '',\n        // TODO: Add dynamic default operator as per property type\n        operator: filter?.operator || 'eq',\n        value: filter?.value || '',\n        id: filter?.id || `filter-${Date.now()}-${Math.random().toString(36)}`,\n      },\n      mode: 'all',\n    });\n\n    const watchProperty = form.watch('property');\n    const handleSubmit = (values: FilterFormType) => {\n      const newFilter: FilterFormType = {\n        ...values,\n        operator: values.operator,\n      };\n\n      if (filter) {\n        // Update existing filter\n        onFiltersChange(filters.map((f) => (f.id === filter.id ? newFilter : f)));\n        setEditingFilter(null);\n      } else {\n        // Add new filter\n        onFiltersChange([...filters, newFilter]);\n        setIsAddingFilter(false);\n      }\n    };\n\n    const handleClose = () => {\n      if (filter) {\n        setEditingFilter(null);\n      } else {\n        setIsAddingFilter(false);\n      }\n    };\n\n    return (\n      <Form {...form}>\n        <form onSubmit={form.handleSubmit(handleSubmit)} className=\"flex flex-col gap-2 min-w-60\">\n          <FormField\n            control={form.control}\n            name=\"property\"\n            render={({ field }) => (\n              <FormItem>\n                <FormLabel>Property</FormLabel>\n                <Select\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  disabled={!!filter}\n                >\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent autoFocus>\n                    {Object.entries(filterableProperties).map(([key]) => (\n                      <SelectItem key={key} value={key}>\n                        {getResourceDisplayName(key, 'admin-portal')}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n\n          {watchProperty && (\n            <>\n              <FormField\n                control={form.control}\n                name=\"operator\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Comparison</FormLabel>\n                    <Select onValueChange={field.onChange} defaultValue={field.value}>\n                      <FormControl>\n                        <SelectTrigger>\n                          <SelectValue />\n                        </SelectTrigger>\n                      </FormControl>\n                      <SelectContent>\n                        {filterableProperties[watchProperty] &&\n                          OPERATORS_FOR_FILTER_TYPE[filterableProperties[watchProperty]].map(\n                            (op) => (\n                              <SelectItem key={op} value={op}>\n                                {COMPARISON_OPERATOR_LABELS[op]}\n                              </SelectItem>\n                            ),\n                          )}\n                      </SelectContent>\n                    </Select>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n              {filterableProperties[watchProperty] && (\n                <ValueField\n                  control={form.control}\n                  propertyType={filterableProperties[watchProperty]}\n                />\n              )}\n            </>\n          )}\n\n          <div className=\"flex justify-end gap-2\">\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={handleClose}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" size=\"sm\">\n              Apply Filter\n            </Button>\n          </div>\n        </form>\n      </Form>\n    );\n  };\n\n  return (\n    <div className=\"flex items-center py-2 justify-between gap-4\">\n      <div className=\"flex flex-wrap gap-2 items-center\">\n        {filters.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground\">\n            No filters active. Add a filter to refine the results.\n          </p>\n        ) : (\n          <div className=\"flex flex-wrap gap-2 items-center\">\n            <p className=\"text-sm text-muted-foreground\">Active Filters:</p>\n            <div className=\"flex flex-wrap gap-2 items-center\">\n              {filters.map((filter, index) => {\n                return (\n                  <div key={filter.id} className=\"flex items-center gap-2\">\n                    <div className=\"flex items-center\">\n                      <Popover\n                        open={editingFilter === filter.id}\n                        onOpenChange={(open) => {\n                          if (!open) setEditingFilter(null);\n                        }}\n                      >\n                        <PopoverTrigger>\n                          <Badge\n                            onClick={() => setEditingFilter(filter.id)}\n                          >\n                            {getFilterLabel(filter)}\n                          </Badge>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto\" align=\"start\">\n                          <FilterForm filter={filter} />\n                        </PopoverContent>\n                      </Popover>\n                      <Button\n                        icon={X}\n                        variant=\"destructive\"\n                        size=\"sm\"\n                        onClick={() => removeFilter(filter.id)}\n                      />\n                    </div>\n                    {index < filters.length - 1 && (\n                      <span className=\"text-sm text-muted-foreground\">and</span>\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        )}\n      </div>\n      <Popover open={isAddingFilter} onOpenChange={setIsAddingFilter}>\n        <PopoverTrigger asChild>\n          <Button icon={FilterIcon} variant=\"outline\" />\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-4\" align=\"start\">\n          <FilterForm />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n};\ninterface ValueFieldProps {\n  control: any;\n  propertyType: FilterablePropertyType;\n}\nconst ValueField = ({ control, propertyType }: ValueFieldProps) => {\n  switch (propertyType) {\n    case 'boolean':\n      return (\n        <FormField\n          control={control}\n          name=\"value\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Value</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"true\">True</SelectItem>\n                  <SelectItem value=\"false\">False</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n      );\n\n    case 'objectDate':\n      return (\n        <FormField\n          control={control}\n          name=\"value\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Value</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      className={cn(\n                        'w-full pl-3 text-left font-normal',\n                        !field.value && 'text-muted-foreground',\n                      )}\n                    >\n                      {field.value ? (\n                        format(new Date(field.value), 'PPP')\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value ? new Date(field.value) : undefined}\n                    onSelect={(date) => {\n                      if (date) {\n                        field.onChange(date.toISOString()); // Convert date to ISO\n                      }\n                    }}\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n      );\n\n    case 'role':\n      return (\n        <FormField\n          control={control}\n          name=\"value\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Value</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"user\">User</SelectItem>\n                  <SelectItem value=\"organization-admin\">Organization Admin</SelectItem>\n                  <SelectItem value=\"reseller-admin\">Reseller Admin</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n      );\n    case 'number':\n      return (\n        <FormField\n          control={control}\n          name=\"value\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Value</FormLabel>\n              <FormControl>\n                <Input {...field} type=\"number\" />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n      );\n\n    default:\n      return (\n        <FormField\n          control={control}\n          name=\"value\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Value</FormLabel>\n              <FormControl>\n                <Input {...field} type=\"text\" />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n      );\n  }\n};\n"],"names":["filterSchema","z","FILTER_COMPARISON_OPERATORS","TableFilter","filterableProperties","filters","onFiltersChange","editingFilter","setEditingFilter","useState","isAddingFilter","setIsAddingFilter","getFilterLabel","filter","property","getResourceDisplayName","operatorLabel","COMPARISON_OPERATOR_LABELS","value","removeFilter","id","FilterForm","form","useForm","zodResolver","watchProperty","handleSubmit","values","newFilter","f","handleClose","jsx","Form","jsxs","FormField","field","FormItem","FormLabel","Select","FormControl","SelectTrigger","SelectValue","SelectContent","key","SelectItem","FormMessage","Fragment","OPERATORS_FOR_FILTER_TYPE","op","ValueField","Button","index","Popover","open","PopoverTrigger","Badge","PopoverContent","X","FilterIcon","control","propertyType","cn","format","Calendar","date","Input"],"mappings":"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"}
+{"version":3,"file":"table-filter.es.js","sources":["../../../lib/components/data-table/table-filter.tsx"],"sourcesContent":["import {\n  COMPARISON_OPERATOR_LABELS,\n  FILTER_COMPARISON_OPERATORS,\n  getResourceDisplayName,\n  OPERATORS_FOR_FILTER_TYPE,\n  type FilterableProperties,\n  type FilterablePropertyType,\n} from '@/components/data-table/table-utils';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/components/ui/form';\nimport { Input } from '@/components/ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { cn } from '@/utils';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { format } from 'date-fns';\nimport { FilterIcon, X } from 'lucide-react';\nimport { useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport z from 'zod';\nconst filterSchema = z.object({\n  // For identifing  a filter for updation and deletion\n  id: z.string().min(1, 'Field is required'),\n  property: z.string().min(1, 'Field is required.'),\n  operator: z.enum(FILTER_COMPARISON_OPERATORS, {\n    errorMap: () => ({ message: 'Invalid comparison operator' }),\n  }),\n  value: z.string().min(1, 'Field is required.'),\n});\nexport type FilterFormType = z.infer<typeof filterSchema>;\n\n// TODO (mudasirpandith) make Notion like interface. Define defaults for resources (License table should always have an empty product filter by default)\ninterface TableFilterProps {\n  filterableProperties: FilterableProperties<any>;\n  filters: FilterFormType[];\n  onFiltersChange: (filters: FilterFormType[]) => void;\n}\n\nexport const TableFilter = ({\n  filterableProperties,\n  filters,\n  onFiltersChange,\n}: TableFilterProps) => {\n  const [editingFilter, setEditingFilter] = useState<string | null>(null);\n  const [isAddingFilter, setIsAddingFilter] = useState(false);\n  const getFilterLabel = (filter: FilterFormType): string => {\n    const property = getResourceDisplayName(filter.property, 'admin-portal');\n    const operatorLabel = COMPARISON_OPERATOR_LABELS[filter.operator];\n    const value = filter.value;\n    return `${property} ${operatorLabel} ${value}`;\n  };\n\n  const removeFilter = (id: string) => {\n    onFiltersChange(filters.filter((filter) => filter.id !== id));\n  };\n\n  interface FilterFormProps {\n    filter?: FilterFormType;\n  }\n  const FilterForm = ({ filter }: FilterFormProps) => {\n    const form = useForm<FilterFormType>({\n      resolver: zodResolver(filterSchema),\n      defaultValues: {\n        property: filter?.property || '',\n        // TODO: Add dynamic default operator as per property type\n        operator: filter?.operator || 'eq',\n        value: filter?.value || '',\n        id: filter?.id || `filter-${Date.now()}-${Math.random().toString(36)}`,\n      },\n      mode: 'all',\n    });\n\n    const watchProperty = form.watch('property');\n    const handleSubmit = (values: FilterFormType) => {\n      const newFilter: FilterFormType = {\n        ...values,\n        operator: values.operator,\n      };\n\n      if (filter) {\n        // Update existing filter\n        onFiltersChange(filters.map((f) => (f.id === filter.id ? newFilter : f)));\n        setEditingFilter(null);\n      } else {\n        // Add new filter\n        onFiltersChange([...filters, newFilter]);\n        setIsAddingFilter(false);\n      }\n    };\n\n    const handleClose = () => {\n      if (filter) {\n        setEditingFilter(null);\n      } else {\n        setIsAddingFilter(false);\n      }\n    };\n\n    return (\n      <Form {...form}>\n        <form onSubmit={form.handleSubmit(handleSubmit)} className=\"flex flex-col gap-2 min-w-60\">\n          <FormField\n            control={form.control}\n            name=\"property\"\n            render={({ field }) => (\n              <FormItem>\n                <FormLabel>Property</FormLabel>\n                <Select\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  disabled={!!filter}\n                >\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent autoFocus>\n                    {Object.entries(filterableProperties).map(([key]) => (\n                      <SelectItem key={key} value={key}>\n                        {getResourceDisplayName(key, 'admin-portal')}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            )}\n          />\n\n          {watchProperty && (\n            <>\n              <FormField\n                control={form.control}\n                name=\"operator\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Comparison</FormLabel>\n                    <Select onValueChange={field.onChange} defaultValue={field.value}>\n                      <FormControl>\n                        <SelectTrigger>\n                          <SelectValue />\n                        </SelectTrigger>\n                      </FormControl>\n                      <SelectContent>\n                        {filterableProperties[watchProperty] &&\n                          OPERATORS_FOR_FILTER_TYPE[filterableProperties[watchProperty]].map(\n                            (op) => (\n                              <SelectItem key={op} value={op}>\n                                {COMPARISON_OPERATOR_LABELS[op]}\n                              </SelectItem>\n                            ),\n                          )}\n                      </SelectContent>\n                    </Select>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n              {filterableProperties[watchProperty] && (\n                <ValueField\n                  control={form.control}\n                  propertyType={filterableProperties[watchProperty]}\n                />\n              )}\n            </>\n          )}\n\n          <div className=\"flex justify-end gap-2\">\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={handleClose}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" size=\"sm\">\n              Apply Filter\n            </Button>\n          </div>\n        </form>\n      </Form>\n    );\n  };\n\n  return (\n    <div className=\"flex items-center py-2 justify-between gap-4\">\n      <div className=\"flex flex-wrap gap-2 items-center\">\n        {filters.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground\">\n            No filters active. Add a filter to refine the results.\n          </p>\n        ) : (\n          <div className=\"flex flex-wrap gap-2 items-center\">\n            <p className=\"text-sm text-muted-foreground\">Active Filters:</p>\n            <div className=\"flex flex-wrap gap-2 items-center\">\n              {filters.map((filter, index) => {\n                return (\n                  <div key={filter.id} className=\"flex items-center gap-2\">\n                    <div className=\"flex items-center\">\n                      <Popover\n                        open={editingFilter === filter.id}\n                        onOpenChange={(open) => {\n                          if (!open) setEditingFilter(null);\n                        }}\n                      >\n                        <PopoverTrigger>\n                          <Badge\n                            onClick={() => setEditingFilter(filter.id)}\n                          >\n                            {getFilterLabel(filter)}\n                          </Badge>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"w-auto\" align=\"start\">\n                          <FilterForm filter={filter} />\n                        </PopoverContent>\n                      </Popover>\n                      <Button\n                        icon={X}\n                        variant=\"destructive\"\n                        size=\"sm\"\n                        onClick={() => removeFilter(filter.id)}\n                      />\n                    </div>\n                    {index < filters.length - 1 && (\n                      <span className=\"text-sm text-muted-foreground\">and</span>\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        )}\n      </div>\n      <Popover open={isAddingFilter} onOpenChange={setIsAddingFilter}>\n        <PopoverTrigger asChild>\n          <Button icon={FilterIcon} variant=\"outline\" />\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-4\" align=\"start\">\n          <FilterForm />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n};\ninterface ValueFieldProps {\n  control: any;\n  propertyType: FilterablePropertyType;\n}\nconst ValueField = ({ control, propertyType }: ValueFieldProps) => {\n  switch (propertyType) {\n    case 'boolean':\n      return (\n        <FormField\n          control={control}\n          name=\"value\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Value</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"true\">True</SelectItem>\n                  <SelectItem value=\"false\">False</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n      );\n\n    case 'objectDate':\n      return (\n        <FormField\n          control={control}\n          name=\"value\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Value</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      className={cn(\n                        'w-full pl-3 text-left font-normal',\n                        !field.value && 'text-muted-foreground',\n                      )}\n                    >\n                      {field.value ? (\n                        format(new Date(field.value), 'PPP')\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value ? new Date(field.value) : undefined}\n                    onSelect={(date) => {\n                      if (date) {\n                        field.onChange(date.toISOString()); // Convert date to ISO\n                      }\n                    }}\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n      );\n\n    case 'role':\n      return (\n        <FormField\n          control={control}\n          name=\"value\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Value</FormLabel>\n              <Select onValueChange={field.onChange} defaultValue={field.value}>\n                <FormControl>\n                  <SelectTrigger>\n                    <SelectValue />\n                  </SelectTrigger>\n                </FormControl>\n                <SelectContent>\n                  <SelectItem value=\"user\">User</SelectItem>\n                  <SelectItem value=\"organization-admin\">Organization Admin</SelectItem>\n                  <SelectItem value=\"reseller-admin\">Reseller Admin</SelectItem>\n                </SelectContent>\n              </Select>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n      );\n    case 'number':\n      return (\n        <FormField\n          control={control}\n          name=\"value\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Value</FormLabel>\n              <FormControl>\n                <Input {...field} type=\"number\" />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n      );\n\n    default:\n      return (\n        <FormField\n          control={control}\n          name=\"value\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Value</FormLabel>\n              <FormControl>\n                <Input {...field} type=\"text\" />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n      );\n  }\n};\n"],"names":["filterSchema","z","FILTER_COMPARISON_OPERATORS","TableFilter","filterableProperties","filters","onFiltersChange","editingFilter","setEditingFilter","useState","isAddingFilter","setIsAddingFilter","getFilterLabel","filter","property","getResourceDisplayName","operatorLabel","COMPARISON_OPERATOR_LABELS","value","removeFilter","id","FilterForm","form","useForm","zodResolver","watchProperty","handleSubmit","values","newFilter","f","handleClose","jsx","Form","jsxs","FormField","field","FormItem","FormLabel","Select","FormControl","SelectTrigger","SelectValue","SelectContent","key","SelectItem","FormMessage","Fragment","OPERATORS_FOR_FILTER_TYPE","op","ValueField","Button","index","Popover","open","PopoverTrigger","Badge","PopoverContent","X","FilterIcon","control","propertyType","cn","format","Calendar","date","Input"],"mappings":"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"}

package/dist/components/key-value-card/key-value-card.es.js

@@ -35,9 +35,10 @@ import { Skeleton as y } from "../ui/skeleton.es.js";
 import "sonner";
 import "../ui/table.es.js";
 import "../ui/tabs.es.js";
+import "../ui/textarea.es.js";
 import "../ui/tooltip.es.js";
 import { FormatDate as w } from "../data-table/table-utils/date.es.js";
-const ir = ({ data: n, label: m, fields: s }) => {
+const er = ({ data: n, label: s, fields: m }) => {
   const a = (p, r) => {
     if (p.transform)
       return p.transform(r);
@@ -64,8 +65,8 @@ const ir = ({ data: n, label: m, fields: s }) => {
     }
   };
   return /* @__PURE__ */ e(l, { children: [
-    /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(f, { children: m }) }),
-    /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: n ? s.map((p) => {
+    /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(f, { children: s }) }),
+    /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: n ? m.map((p) => {
       const r = p.accessor ? p.accessor.split(".").reduce(
         (o, i) => o && i in o ? o[i] : void 0,
         n
@@ -81,10 +82,10 @@ const ir = ({ data: n, label: m, fields: s }) => {
         },
         p.display
       );
-    }) : s.map((p, r) => /* @__PURE__ */ t(y, { className: "h-12 w-full" }, r)) }) })
+    }) : m.map((p, r) => /* @__PURE__ */ t(y, { className: "h-12 w-full" }, r)) }) })
   ] });
 };
 export {
-  ir as KeyValueCard
+  er as KeyValueCard
 };
 //# sourceMappingURL=key-value-card.es.js.map

package/dist/components/key-value-card/key-value-card.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"key-value-card.es.js","sources":["../../../lib/components/key-value-card/key-value-card.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CopyButton,\n  FormatDate,\n  Skeleton,\n} from '@/index';\nimport { Link } from '@tanstack/react-router';\n\n// Utility type to handle nested keys (dot notation) in any object\ntype NestedKeyOf<T> = T extends object\n  ? {\n    [K in keyof T]: K extends string | number\n    ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}`\n    : never;\n  }[keyof T]\n  : never;\n\n// DisplayField type that works with nested keys\nexport type DisplayField<T> = {\n  display: string;\n  accessor: NestedKeyOf<T>;\n  type?: 'text' | 'badge' | 'boolean' | 'date' | 'yesno' | 'copyButton' | 'link'; // Field types\n  transform?: (value: any) => React.ReactNode;\n};\n\nexport interface KeyValueCardProps<T> {\n  data: T; // Ensure data is of type T\n  label: string;\n  fields: DisplayField<T>[];\n  className?: string;\n}\n\nexport const KeyValueCard = <T extends {}>({ data, label, fields }: KeyValueCardProps<T>) => {\n  const renderValue = (field: DisplayField<T>, value: any) => {\n    if (field.transform) {\n      return field.transform(value);\n    }\n    if (value === undefined || value === null) {\n      return '-';\n    }\n    switch (field.type) {\n      case 'link':\n        return <Link to={value}>{value}</Link>;\n      case 'copyButton':\n        return <span className='flex items-center gap-2'>{value}<CopyButton value={value} /></span>;\n      case 'date':\n        return <span>{FormatDate(value)}</span>;\n      case 'yesno':\n        return <span>{value ? 'Yes' : 'No'}</span>;\n      case 'badge':\n        return (\n          <div className=\"flex flex-wrap gap-1\">\n            {Array.isArray(value)\n              ? value.map((item, index) => (\n                <Badge key={index}>\n                  {typeof item === 'object' ? item?.name || item?.id : item}\n                </Badge>\n              ))\n              : value}\n          </div>\n        );\n\n      case 'boolean':\n        return <span>{value.toString()}</span>;\n      default:\n        return <span>{value}</span>;\n    }\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>{label}</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-2\">\n          {data\n            ? fields.map((field) => {\n              // TODO: improve this\n              const value = field.accessor\n                ? field.accessor\n                  .split('.')\n                  .reduce(\n                    (obj, key) => (obj && key in obj ? obj[key] : undefined),\n                    data as Record<string, any>,\n                  )\n                : null;\n\n              return (\n                <div\n                  key={field.display}\n                  className=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n                >\n                  <p className=\"text-sm flex w-full justify-start col-span-1\">{field.display}</p>\n                  <div className=\"text-sm flex w-full justify-start text-wrap break-all\">\n                    {renderValue(field, value)}\n                  </div>\n                </div>\n              );\n            })\n            : fields.map((_, index) => <Skeleton key={index} className=\"h-12 w-full\" />)}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":["KeyValueCard","data","label","fields","renderValue","field","value","jsx","Link","jsxs","CopyButton","FormatDate","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","_","Skeleton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,MAAMA,KAAe,CAAe,EAAE,MAAAC,GAAM,OAAAC,GAAO,QAAAC,QAAmC;AACrF,QAAAC,IAAc,CAACC,GAAwBC,MAAe;AAC1D,QAAID,EAAM;AACD,aAAAA,EAAM,UAAUC,CAAK;AAE1B,QAAuBA,KAAU;AAC5B,aAAA;AAET,YAAQD,EAAM,MAAM;AAAA,MAClB,KAAK;AACH,eAAQ,gBAAAE,EAAAC,GAAA,EAAK,IAAIF,GAAQ,UAAMA,GAAA;AAAA,MACjC,KAAK;AACI,eAAA,gBAAAG,EAAC,QAAK,EAAA,WAAU,2BAA2B,UAAA;AAAA,UAAAH;AAAA,UAAM,gBAAAC,EAACG,KAAW,OAAAJ,EAAc,CAAA;AAAA,QAAA,GAAE;AAAA,MACtF,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAWI,EAAAL,CAAK,GAAE;AAAA,MAClC,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAQD,IAAA,QAAQ,MAAK;AAAA,MACrC,KAAK;AAED,eAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,wBACZ,UAAA,MAAM,QAAQD,CAAK,IAChBA,EAAM,IAAI,CAACM,GAAMC,wBAChBC,GACE,EAAA,UAAA,OAAOF,KAAS,YAAWA,KAAA,gBAAAA,EAAM,UAAQA,KAAA,gBAAAA,EAAM,MAAKA,EAD3C,GAAAC,CAEZ,CACD,IACCP,EACN,CAAA;AAAA,MAGJ,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAMD,EAAA,SAAA,GAAW;AAAA,MACjC;AACS,eAAA,gBAAAC,EAAC,UAAM,UAAMD,EAAA,CAAA;AAAA,IAAA;AAAA,EAE1B;AAEA,2BACGS,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAR,EAACS,GACC,EAAA,UAAA,gBAAAT,EAACU,GAAW,EAAA,UAAAf,EAAM,CAAA,GACpB;AAAA,IACA,gBAAAK,EAACW,GACC,EAAA,UAAA,gBAAAX,EAAC,OAAI,EAAA,WAAU,uBACZ,UACGN,IAAAE,EAAO,IAAI,CAACE,MAAU;AAEtB,YAAMC,IAAQD,EAAM,WAChBA,EAAM,SACL,MAAM,GAAG,EACT;AAAA,QACC,CAACc,GAAKC,MAASD,KAAOC,KAAOD,IAAMA,EAAIC,CAAG,IAAI;AAAA,QAC9CnB;AAAA,MAAA,IAEF;AAGF,aAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAF,EAAC,KAAE,EAAA,WAAU,gDAAgD,UAAAF,EAAM,SAAQ;AAAA,8BAC1E,OAAI,EAAA,WAAU,yDACZ,UAAYD,EAAAC,GAAOC,CAAK,EAC3B,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QANKD,EAAM;AAAA,MAOb;AAAA,IAEH,CAAA,IACCF,EAAO,IAAI,CAACkB,GAAGR,MAAW,gBAAAN,EAAAe,GAAA,EAAqB,WAAU,cAAA,GAAjBT,CAA+B,CAAE,EAC/E,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"key-value-card.es.js","sources":["../../../lib/components/key-value-card/key-value-card.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CopyButton,\n  FormatDate,\n  Skeleton,\n} from '@/index';\nimport { Link } from '@tanstack/react-router';\n\n// Utility type to handle nested keys (dot notation) in any object\ntype NestedKeyOf<T> = T extends object\n  ? {\n    [K in keyof T]: K extends string | number\n    ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}`\n    : never;\n  }[keyof T]\n  : never;\n\n// DisplayField type that works with nested keys\nexport type DisplayField<T> = {\n  display: string;\n  accessor: NestedKeyOf<T>;\n  type?: 'text' | 'badge' | 'boolean' | 'date' | 'yesno' | 'copyButton' | 'link'; // Field types\n  transform?: (value: any) => React.ReactNode;\n};\n\nexport interface KeyValueCardProps<T> {\n  data: T; // Ensure data is of type T\n  label: string;\n  fields: DisplayField<T>[];\n  className?: string;\n}\n\nexport const KeyValueCard = <T extends {}>({ data, label, fields }: KeyValueCardProps<T>) => {\n  const renderValue = (field: DisplayField<T>, value: any) => {\n    if (field.transform) {\n      return field.transform(value);\n    }\n    if (value === undefined || value === null) {\n      return '-';\n    }\n    switch (field.type) {\n      case 'link':\n        return <Link to={value}>{value}</Link>;\n      case 'copyButton':\n        return <span className='flex items-center gap-2'>{value}<CopyButton value={value} /></span>;\n      case 'date':\n        return <span>{FormatDate(value)}</span>;\n      case 'yesno':\n        return <span>{value ? 'Yes' : 'No'}</span>;\n      case 'badge':\n        return (\n          <div className=\"flex flex-wrap gap-1\">\n            {Array.isArray(value)\n              ? value.map((item, index) => (\n                <Badge key={index}>\n                  {typeof item === 'object' ? item?.name || item?.id : item}\n                </Badge>\n              ))\n              : value}\n          </div>\n        );\n\n      case 'boolean':\n        return <span>{value.toString()}</span>;\n      default:\n        return <span>{value}</span>;\n    }\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>{label}</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-2\">\n          {data\n            ? fields.map((field) => {\n              // TODO: improve this\n              const value = field.accessor\n                ? field.accessor\n                  .split('.')\n                  .reduce(\n                    (obj, key) => (obj && key in obj ? obj[key] : undefined),\n                    data as Record<string, any>,\n                  )\n                : null;\n\n              return (\n                <div\n                  key={field.display}\n                  className=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n                >\n                  <p className=\"text-sm flex w-full justify-start col-span-1\">{field.display}</p>\n                  <div className=\"text-sm flex w-full justify-start text-wrap break-all\">\n                    {renderValue(field, value)}\n                  </div>\n                </div>\n              );\n            })\n            : fields.map((_, index) => <Skeleton key={index} className=\"h-12 w-full\" />)}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":["KeyValueCard","data","label","fields","renderValue","field","value","jsx","Link","jsxs","CopyButton","FormatDate","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","_","Skeleton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,MAAMA,KAAe,CAAe,EAAE,MAAAC,GAAM,OAAAC,GAAO,QAAAC,QAAmC;AACrF,QAAAC,IAAc,CAACC,GAAwBC,MAAe;AAC1D,QAAID,EAAM;AACD,aAAAA,EAAM,UAAUC,CAAK;AAE1B,QAAuBA,KAAU;AAC5B,aAAA;AAET,YAAQD,EAAM,MAAM;AAAA,MAClB,KAAK;AACH,eAAQ,gBAAAE,EAAAC,GAAA,EAAK,IAAIF,GAAQ,UAAMA,GAAA;AAAA,MACjC,KAAK;AACI,eAAA,gBAAAG,EAAC,QAAK,EAAA,WAAU,2BAA2B,UAAA;AAAA,UAAAH;AAAA,UAAM,gBAAAC,EAACG,KAAW,OAAAJ,EAAc,CAAA;AAAA,QAAA,GAAE;AAAA,MACtF,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAWI,EAAAL,CAAK,GAAE;AAAA,MAClC,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAQD,IAAA,QAAQ,MAAK;AAAA,MACrC,KAAK;AAED,eAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,wBACZ,UAAA,MAAM,QAAQD,CAAK,IAChBA,EAAM,IAAI,CAACM,GAAMC,wBAChBC,GACE,EAAA,UAAA,OAAOF,KAAS,YAAWA,KAAA,gBAAAA,EAAM,UAAQA,KAAA,gBAAAA,EAAM,MAAKA,EAD3C,GAAAC,CAEZ,CACD,IACCP,EACN,CAAA;AAAA,MAGJ,KAAK;AACH,eAAQ,gBAAAC,EAAA,QAAA,EAAM,UAAMD,EAAA,SAAA,GAAW;AAAA,MACjC;AACS,eAAA,gBAAAC,EAAC,UAAM,UAAMD,EAAA,CAAA;AAAA,IAAA;AAAA,EAE1B;AAEA,2BACGS,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAR,EAACS,GACC,EAAA,UAAA,gBAAAT,EAACU,GAAW,EAAA,UAAAf,EAAM,CAAA,GACpB;AAAA,IACA,gBAAAK,EAACW,GACC,EAAA,UAAA,gBAAAX,EAAC,OAAI,EAAA,WAAU,uBACZ,UACGN,IAAAE,EAAO,IAAI,CAACE,MAAU;AAEtB,YAAMC,IAAQD,EAAM,WAChBA,EAAM,SACL,MAAM,GAAG,EACT;AAAA,QACC,CAACc,GAAKC,MAASD,KAAOC,KAAOD,IAAMA,EAAIC,CAAG,IAAI;AAAA,QAC9CnB;AAAA,MAAA,IAEF;AAGF,aAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAF,EAAC,KAAE,EAAA,WAAU,gDAAgD,UAAAF,EAAM,SAAQ;AAAA,8BAC1E,OAAI,EAAA,WAAU,yDACZ,UAAYD,EAAAC,GAAOC,CAAK,EAC3B,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QANKD,EAAM;AAAA,MAOb;AAAA,IAEH,CAAA,IACCF,EAAO,IAAI,CAACkB,GAAGR,MAAW,gBAAAN,EAAAe,GAAA,EAAqB,WAAU,cAAA,GAAjBT,CAA+B,CAAE,EAC/E,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/sidebar/app-layout.es.js

@@ -35,8 +35,9 @@ import "../ui/sheet.es.js";
 import "sonner";
 import "../ui/table.es.js";
 import "../ui/tabs.es.js";
+import "../ui/textarea.es.js";
 import "../ui/tooltip.es.js";
-function mr({ data: e, user: o }) {
+function er({ data: e, user: o }) {
   var t, m;
   return /* @__PURE__ */ r("div", { className: "h-dvh flex", children: /* @__PURE__ */ i(c, { children: [
     /* @__PURE__ */ r(l, { data: e }),
@@ -68,6 +69,6 @@ function mr({ data: e, user: o }) {
   ] }) });
 }
 export {
-  mr as AppLayout
+  er as AppLayout
 };
 //# sourceMappingURL=app-layout.es.js.map

package/dist/components/sidebar/app-layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-layout.es.js","sources":["../../../lib/components/sidebar/app-layout.tsx"],"sourcesContent":["import { BreadCrumbs } from '@/components/sidebar/breadcrumb';\nimport type { NavItem } from '@/components/sidebar/nav-main';\nimport { SideBar } from '@/components/sidebar/sidebar';\nimport { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  logout,\n} from '@/index';\nimport { Outlet } from '@tanstack/react-router';\nimport { LogOutIcon } from 'lucide-react';\n\nexport interface AppLayoutProps {\n  data: NavItem[]; // Navigation items\n  user?: {\n    firstName?: string;\n    lastName?: string;\n    logoUrl?: string;\n  }; // Optional user information\n}\n\nexport function AppLayout({ data, user }: AppLayoutProps) {\n  return (\n    <div className=\"h-dvh flex\">\n      <SidebarProvider>\n        {/* Sidebar */}\n        <SideBar data={data} />\n\n        {/* Main Content */}\n        <div className=\"flex flex-col h-screen w-full overflow-auto\">\n          {/* Header */}\n          <header className=\"h-[7vh] sticky top-0 bg-card flex items-center justify-between p-4 pl-0 border-b z-10\">\n            {/* Sidebar Trigger */}\n            <div className=\"flex gap-1 items-center\">\n              <SidebarTrigger />\n            </div>\n\n            {/* User Dropdown */}\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <div className=\"cursor-pointer\">\n                  <Avatar className=\"justify-center items-center\">\n                    <AvatarImage\n                      src={user?.logoUrl ?? 'https://app.dev.cryptlex.com/favicon.ico'}\n                      alt=\"icon\"\n                    />\n                    <AvatarFallback>\n                      {user?.firstName?.charAt(0)}\n                      {user?.lastName?.charAt(0)}\n                    </AvatarFallback>\n                  </Avatar>\n                </div>\n              </DropdownMenuTrigger>\n\n              <DropdownMenuContent>\n                <DropdownMenuItem icon={LogOutIcon} onClick={() => logout()}>Logout</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </header>\n\n          {/* Scrollable Content */}\n          <div className=\"flex-1 flex flex-col overflow-auto\">\n            <div className=\"p-4 pb-0\">\n              <BreadCrumbs />\n            </div>\n            <div className=\"flex-1 p-4 pt-2\">\n              <Outlet />\n            </div>\n          </div>\n        </div>\n      </SidebarProvider>\n    </div>\n  );\n}\n"],"names":["AppLayout","data","user","jsx","SidebarProvider","SideBar","jsxs","SidebarTrigger","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","_a","_b","DropdownMenuContent","DropdownMenuItem","LogOutIcon","logout","BreadCrumbs","Outlet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BO,SAASA,GAAU,EAAE,MAAAC,GAAM,MAAAC,KAAwB;;AACxD,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAU,cACb,4BAACC,GAEC,EAAA,UAAA;AAAA,IAAA,gBAAAD,EAACE,KAAQ,MAAAJ,GAAY;AAAA,IAGrB,gBAAAK,EAAC,OAAI,EAAA,WAAU,+CAEb,UAAA;AAAA,MAAC,gBAAAA,EAAA,UAAA,EAAO,WAAU,yFAEhB,UAAA;AAAA,QAAA,gBAAAH,EAAC,OAAI,EAAA,WAAU,2BACb,UAAA,gBAAAA,EAACI,IAAe,CAAA,GAClB;AAAA,0BAGCC,GACC,EAAA,UAAA;AAAA,UAAC,gBAAAL,EAAAM,GAAA,EAAoB,SAAO,IAC1B,UAAC,gBAAAN,EAAA,OAAA,EAAI,WAAU,kBACb,UAAA,gBAAAG,EAACI,GAAO,EAAA,WAAU,+BAChB,UAAA;AAAA,YAAA,gBAAAP;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACC,MAAKT,KAAA,gBAAAA,EAAM,YAAW;AAAA,gBACtB,KAAI;AAAA,cAAA;AAAA,YACN;AAAA,8BACCU,GACE,EAAA,UAAA;AAAA,eAAMC,IAAAX,KAAA,gBAAAA,EAAA,cAAA,gBAAAW,EAAW,OAAO;AAAA,eACxBC,IAAAZ,KAAA,gBAAAA,EAAM,aAAN,gBAAAY,EAAgB,OAAO;AAAA,YAAC,EAC3B,CAAA;AAAA,UAAA,EACF,CAAA,EACF,CAAA,GACF;AAAA,UAEA,gBAAAX,EAACY,GACC,EAAA,UAAA,gBAAAZ,EAACa,GAAiB,EAAA,MAAMC,GAAY,SAAS,MAAMC,EAAA,GAAU,UAAA,SAAM,CAAA,EACrE,CAAA;AAAA,QAAA,EACF,CAAA;AAAA,MAAA,GACF;AAAA,MAGA,gBAAAZ,EAAC,OAAI,EAAA,WAAU,sCACb,UAAA;AAAA,QAAA,gBAAAH,EAAC,OAAI,EAAA,WAAU,YACb,UAAA,gBAAAA,EAACgB,IAAY,CAAA,GACf;AAAA,0BACC,OAAI,EAAA,WAAU,mBACb,UAAA,gBAAAhB,EAACiB,KAAO,EACV,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"app-layout.es.js","sources":["../../../lib/components/sidebar/app-layout.tsx"],"sourcesContent":["import { BreadCrumbs } from '@/components/sidebar/breadcrumb';\nimport type { NavItem } from '@/components/sidebar/nav-main';\nimport { SideBar } from '@/components/sidebar/sidebar';\nimport { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  logout,\n} from '@/index';\nimport { Outlet } from '@tanstack/react-router';\nimport { LogOutIcon } from 'lucide-react';\n\nexport interface AppLayoutProps {\n  data: NavItem[]; // Navigation items\n  user?: {\n    firstName?: string;\n    lastName?: string;\n    logoUrl?: string;\n  }; // Optional user information\n}\n\nexport function AppLayout({ data, user }: AppLayoutProps) {\n  return (\n    <div className=\"h-dvh flex\">\n      <SidebarProvider>\n        {/* Sidebar */}\n        <SideBar data={data} />\n\n        {/* Main Content */}\n        <div className=\"flex flex-col h-screen w-full overflow-auto\">\n          {/* Header */}\n          <header className=\"h-[7vh] sticky top-0 bg-card flex items-center justify-between p-4 pl-0 border-b z-10\">\n            {/* Sidebar Trigger */}\n            <div className=\"flex gap-1 items-center\">\n              <SidebarTrigger />\n            </div>\n\n            {/* User Dropdown */}\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <div className=\"cursor-pointer\">\n                  <Avatar className=\"justify-center items-center\">\n                    <AvatarImage\n                      src={user?.logoUrl ?? 'https://app.dev.cryptlex.com/favicon.ico'}\n                      alt=\"icon\"\n                    />\n                    <AvatarFallback>\n                      {user?.firstName?.charAt(0)}\n                      {user?.lastName?.charAt(0)}\n                    </AvatarFallback>\n                  </Avatar>\n                </div>\n              </DropdownMenuTrigger>\n\n              <DropdownMenuContent>\n                <DropdownMenuItem icon={LogOutIcon} onClick={() => logout()}>Logout</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </header>\n\n          {/* Scrollable Content */}\n          <div className=\"flex-1 flex flex-col overflow-auto\">\n            <div className=\"p-4 pb-0\">\n              <BreadCrumbs />\n            </div>\n            <div className=\"flex-1 p-4 pt-2\">\n              <Outlet />\n            </div>\n          </div>\n        </div>\n      </SidebarProvider>\n    </div>\n  );\n}\n"],"names":["AppLayout","data","user","jsx","SidebarProvider","SideBar","jsxs","SidebarTrigger","DropdownMenu","DropdownMenuTrigger","Avatar","AvatarImage","AvatarFallback","_a","_b","DropdownMenuContent","DropdownMenuItem","LogOutIcon","logout","BreadCrumbs","Outlet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BO,SAASA,GAAU,EAAE,MAAAC,GAAM,MAAAC,KAAwB;;AACxD,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAU,cACb,4BAACC,GAEC,EAAA,UAAA;AAAA,IAAA,gBAAAD,EAACE,KAAQ,MAAAJ,GAAY;AAAA,IAGrB,gBAAAK,EAAC,OAAI,EAAA,WAAU,+CAEb,UAAA;AAAA,MAAC,gBAAAA,EAAA,UAAA,EAAO,WAAU,yFAEhB,UAAA;AAAA,QAAA,gBAAAH,EAAC,OAAI,EAAA,WAAU,2BACb,UAAA,gBAAAA,EAACI,IAAe,CAAA,GAClB;AAAA,0BAGCC,GACC,EAAA,UAAA;AAAA,UAAC,gBAAAL,EAAAM,GAAA,EAAoB,SAAO,IAC1B,UAAC,gBAAAN,EAAA,OAAA,EAAI,WAAU,kBACb,UAAA,gBAAAG,EAACI,GAAO,EAAA,WAAU,+BAChB,UAAA;AAAA,YAAA,gBAAAP;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACC,MAAKT,KAAA,gBAAAA,EAAM,YAAW;AAAA,gBACtB,KAAI;AAAA,cAAA;AAAA,YACN;AAAA,8BACCU,GACE,EAAA,UAAA;AAAA,eAAMC,IAAAX,KAAA,gBAAAA,EAAA,cAAA,gBAAAW,EAAW,OAAO;AAAA,eACxBC,IAAAZ,KAAA,gBAAAA,EAAM,aAAN,gBAAAY,EAAgB,OAAO;AAAA,YAAC,EAC3B,CAAA;AAAA,UAAA,EACF,CAAA,EACF,CAAA,GACF;AAAA,UAEA,gBAAAX,EAACY,GACC,EAAA,UAAA,gBAAAZ,EAACa,GAAiB,EAAA,MAAMC,GAAY,SAAS,MAAMC,EAAA,GAAU,UAAA,SAAM,CAAA,EACrE,CAAA;AAAA,QAAA,EACF,CAAA;AAAA,MAAA,GACF;AAAA,MAGA,gBAAAZ,EAAC,OAAI,EAAA,WAAU,sCACb,UAAA;AAAA,QAAA,gBAAAH,EAAC,OAAI,EAAA,WAAU,YACb,UAAA,gBAAAA,EAACgB,IAAY,CAAA,GACf;AAAA,0BACC,OAAI,EAAA,WAAU,mBACb,UAAA,gBAAAhB,EAACiB,KAAO,EACV,CAAA;AAAA,MAAA,EACF,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;"}