@prediktif/ui 0.1.19 → 0.1.20

package/dist/index.mjs

@@ -716,16 +716,6 @@ function SheetDescription(_a) {
 // src/components/ui/skeleton.tsx
 import { cn as cn9 } from "cn";
 import { jsx as jsx9 } from "react/jsx-runtime";
-function Skeleton(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx9(
-    "div",
-    __spreadValues({
-      "data-slot": "skeleton",
-      className: cn9("animate-pulse rounded-md bg-muted", className)
-    }, props)
-  );
-}
 
 // src/components/ui/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
@@ -1590,6 +1580,9 @@ function EmptyContent(_a) {
   );
 }
 
+// src/lib/utils.ts
+import { cn as cn13 } from "cn";
+
 // src/components/composed/state-empty.tsx
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function renderStateIcon(icon) {
@@ -1605,31 +1598,41 @@ var StateEmpty = memo2(function StateEmpty2({
   description,
   buttonText,
   onClick,
-  render
+  render,
+  state = "default"
 }) {
+  const isFunctionAction = typeof render === "function";
+  const actionHandler = isFunctionAction ? render : onClick;
+  const buttonRender = isFunctionAction ? void 0 : render;
   const hasAction = Boolean(buttonText || render || onClick);
-  return /* @__PURE__ */ jsxs8(Empty, { className: "w-full border border-dashed", children: [
-    /* @__PURE__ */ jsxs8(EmptyHeader, { children: [
-      /* @__PURE__ */ jsx14(EmptyMedia, { variant: "icon", children: renderStateIcon(icon) }),
-      /* @__PURE__ */ jsx14(EmptyTitle, { children: title }),
-      /* @__PURE__ */ jsx14(EmptyDescription, { children: description })
-    ] }),
-    hasAction && /* @__PURE__ */ jsx14(EmptyContent, { children: /* @__PURE__ */ jsx14(
-      Button,
-      {
-        variant: "outline",
-        size: "sm",
-        nativeButton: !render,
-        onClick,
-        render,
-        children: buttonText
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs8(
+    Empty,
+    {
+      className: cn13("w-full", state === "outline" && "border border-dashed"),
+      children: [
+        /* @__PURE__ */ jsxs8(EmptyHeader, { children: [
+          /* @__PURE__ */ jsx14(EmptyMedia, { variant: "icon", children: renderStateIcon(icon) }),
+          /* @__PURE__ */ jsx14(EmptyTitle, { children: title }),
+          /* @__PURE__ */ jsx14(EmptyDescription, { children: description })
+        ] }),
+        hasAction && /* @__PURE__ */ jsx14(EmptyContent, { children: /* @__PURE__ */ jsx14(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            nativeButton: !buttonRender,
+            onClick: actionHandler,
+            render: buttonRender,
+            children: buttonText
+          }
+        ) })
+      ]
+    }
+  );
 });
 
 // src/components/ui/table.tsx
-import { cn as cn13 } from "cn";
+import { cn as cn14 } from "cn";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function Table(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -1642,7 +1645,7 @@ function Table(_a) {
         "table",
         __spreadValues({
           "data-slot": "table",
-          className: cn13("w-full caption-bottom text-xs", className)
+          className: cn14("w-full caption-bottom text-xs", className)
         }, props)
       )
     }
@@ -1654,7 +1657,7 @@ function TableHeader(_a) {
     "thead",
     __spreadValues({
       "data-slot": "table-header",
-      className: cn13("[&_tr]:border-b", className)
+      className: cn14("[&_tr]:border-b", className)
     }, props)
   );
 }
@@ -1664,7 +1667,7 @@ function TableBody(_a) {
     "tbody",
     __spreadValues({
       "data-slot": "table-body",
-      className: cn13("[&_tr:last-child]:border-0", className)
+      className: cn14("[&_tr:last-child]:border-0", className)
     }, props)
   );
 }
@@ -1674,7 +1677,7 @@ function TableRow(_a) {
     "tr",
     __spreadValues({
       "data-slot": "table-row",
-      className: cn13(
+      className: cn14(
         "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
         className
       )
@@ -1687,7 +1690,7 @@ function TableHead(_a) {
     "th",
     __spreadValues({
       "data-slot": "table-head",
-      className: cn13(
+      className: cn14(
         "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
         className
       )
@@ -1700,7 +1703,7 @@ function TableCell(_a) {
     "td",
     __spreadValues({
       "data-slot": "table-cell",
-      className: cn13(
+      className: cn14(
         "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
         className
       )
@@ -1753,92 +1756,44 @@ import {
   flexRender
 } from "@tanstack/react-table";
 import { SearchXIcon } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
-var SKELETON_ROWS = ["sk-1", "sk-2", "sk-3", "sk-4", "sk-5"];
+import { jsx as jsx16 } from "react/jsx-runtime";
 function DataTableContentBody({
   table,
-  columns,
-  isLoading
+  columns
 }) {
-  if (isLoading) {
-    return /* @__PURE__ */ jsx16(TableBody, { children: SKELETON_ROWS.map((rowKey) => /* @__PURE__ */ jsx16(TableRow, { children: columns.map((col, idx) => {
-      var _a;
-      const colKey = (_a = col.id) != null ? _a : typeof col.accessorKey === "string" ? col.accessorKey : `col-${idx}`;
-      return /* @__PURE__ */ jsx16(TableCell, { className: "py-3", children: /* @__PURE__ */ jsx16(Skeleton, { className: "h-4 w-full" }) }, `${rowKey}-${colKey}`);
-    }) }, rowKey)) });
-  }
   const rows = table.getRowModel().rows;
   if (rows == null ? void 0 : rows.length) {
     return /* @__PURE__ */ jsx16(TableBody, { children: rows.map((row) => /* @__PURE__ */ jsx16(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx16(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) });
   }
-  return /* @__PURE__ */ jsx16(TableBody, { children: /* @__PURE__ */ jsx16(TableRow, { children: /* @__PURE__ */ jsx16(TableCell, { colSpan: columns.length, className: "h-36 text-center", children: /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center justify-center gap-1.5 py-4 text-muted-foreground", children: [
-    /* @__PURE__ */ jsx16(SearchXIcon, { className: "size-6 text-muted-foreground/60" }),
-    /* @__PURE__ */ jsx16("p", { className: "text-xs font-medium text-foreground", children: "No matching results" }),
-    /* @__PURE__ */ jsx16("p", { className: "text-xs text-muted-foreground max-w-xs", children: "No records matched your search query or filter criteria." }),
-    /* @__PURE__ */ jsx16(
-      Button,
-      {
-        variant: "outline",
-        size: "xs",
-        className: "mt-1",
-        onClick: () => {
-          table.resetGlobalFilter();
-          table.resetColumnFilters();
-        },
-        children: "Clear search & filters"
+  return /* @__PURE__ */ jsx16(TableBody, { children: /* @__PURE__ */ jsx16(TableRow, { children: /* @__PURE__ */ jsx16(TableCell, { colSpan: columns.length, className: "h-48 text-center", children: /* @__PURE__ */ jsx16(
+    StateEmpty,
+    {
+      icon: /* @__PURE__ */ jsx16(SearchXIcon, {}),
+      title: "No matching results",
+      description: "No records matched your search query or filter criteria.",
+      buttonText: "Clear search & filters",
+      render: () => {
+        table.setGlobalFilter("");
+        table.resetColumnFilters();
       }
-    )
-  ] }) }) }) });
+    }
+  ) }) }) });
 }
 
 // src/components/composed/data-table/table-content-header.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
-
-// src/lib/utils.ts
-import { cn as cn14 } from "cn";
-
-// src/components/composed/data-table/table-content-header.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function DataTableContentHeader({
   table
 }) {
-  return /* @__PURE__ */ jsx17(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx17(TableRow, { children: headerGroup.headers.map((header) => {
-    if (header.isPlaceholder) {
-      return /* @__PURE__ */ jsx17(TableHead, {}, header.id);
-    }
-    const canSort = header.column.getCanSort();
-    const isSorted = header.column.getIsSorted();
-    if (!canSort) {
-      return /* @__PURE__ */ jsx17(TableHead, { children: flexRender2(
-        header.column.columnDef.header,
-        header.getContext()
-      ) }, header.id);
-    }
-    return /* @__PURE__ */ jsx17(TableHead, { className: "select-none", children: /* @__PURE__ */ jsxs10(
-      "button",
-      {
-        type: "button",
-        className: cn14(
-          "flex items-center gap-1.5 -ml-1 px-1 py-1 rounded hover:bg-muted/50 cursor-pointer font-medium text-xs transition-colors",
-          isSorted && "text-foreground font-semibold"
-        ),
-        onClick: header.column.getToggleSortingHandler(),
-        "aria-label": `Sort by ${typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : header.id}`,
-        children: [
-          /* @__PURE__ */ jsx17("span", { children: flexRender2(
-            header.column.columnDef.header,
-            header.getContext()
-          ) }),
-          isSorted === "asc" ? /* @__PURE__ */ jsx17(ArrowUpIcon, { className: "size-3 text-foreground shrink-0" }) : isSorted === "desc" ? /* @__PURE__ */ jsx17(ArrowDownIcon, { className: "size-3 text-foreground shrink-0" }) : /* @__PURE__ */ jsx17(ArrowUpDownIcon, { className: "size-3 text-muted-foreground/40 hover:text-muted-foreground shrink-0" })
-        ]
-      }
-    ) }, header.id);
-  }) }, headerGroup.id)) });
+  return /* @__PURE__ */ jsx17(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx17(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx17(TableHead, { children: header.isPlaceholder ? null : flexRender2(
+    header.column.columnDef.header,
+    header.getContext()
+  ) }, header.id)) }, headerGroup.id)) });
 }
 
 // src/components/composed/data-table/table-footer-entries.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function DataTableFooterEntries({
   table
 }) {
@@ -1849,10 +1804,10 @@ function DataTableFooterEntries({
   const totalRows = table.getFilteredRowModel().rows.length;
   const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
   const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
-  return /* @__PURE__ */ jsxs11("div", { className: "flex-1 text-xs text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "flex-1 text-xs text-muted-foreground", children: [
     "Showing",
     " ",
-    /* @__PURE__ */ jsxs11("span", { className: "font-medium text-foreground", children: [
+    /* @__PURE__ */ jsxs9("span", { className: "font-medium text-foreground", children: [
       startRow,
       "-",
       endRow
@@ -1872,12 +1827,12 @@ import {
   ChevronsLeftIcon,
   ChevronsRightIcon
 } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function DataTableFooterPagination({
   table
 }) {
-  return /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
-    /* @__PURE__ */ jsxs12(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxs10(Tooltip, { children: [
       /* @__PURE__ */ jsx19(
         TooltipTrigger,
         {
@@ -1895,7 +1850,7 @@ function DataTableFooterPagination({
       ),
       /* @__PURE__ */ jsx19(TooltipContent, { children: "Go to first page" })
     ] }),
-    /* @__PURE__ */ jsxs12(Tooltip, { children: [
+    /* @__PURE__ */ jsxs10(Tooltip, { children: [
       /* @__PURE__ */ jsx19(
         TooltipTrigger,
         {
@@ -1913,7 +1868,7 @@ function DataTableFooterPagination({
       ),
       /* @__PURE__ */ jsx19(TooltipContent, { children: "Go to previous page" })
     ] }),
-    /* @__PURE__ */ jsxs12(Tooltip, { children: [
+    /* @__PURE__ */ jsxs10(Tooltip, { children: [
       /* @__PURE__ */ jsx19(
         TooltipTrigger,
         {
@@ -1931,7 +1886,7 @@ function DataTableFooterPagination({
       ),
       /* @__PURE__ */ jsx19(TooltipContent, { children: "Go to next page" })
     ] }),
-    /* @__PURE__ */ jsxs12(Tooltip, { children: [
+    /* @__PURE__ */ jsxs10(Tooltip, { children: [
       /* @__PURE__ */ jsx19(
         TooltipTrigger,
         {
@@ -1954,13 +1909,13 @@ function DataTableFooterPagination({
 
 // src/components/composed/data-table/table-header-add.tsx
 import { PlusIcon } from "lucide-react";
-import { Fragment, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function DataTableHeaderAdd({
   onAdd,
   addLabel
 }) {
-  return /* @__PURE__ */ jsxs13(Fragment, { children: [
-    /* @__PURE__ */ jsxs13(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment, { children: [
+    /* @__PURE__ */ jsxs11(Tooltip, { children: [
       /* @__PURE__ */ jsx20(
         TooltipTrigger,
         {
@@ -1970,7 +1925,7 @@ function DataTableHeaderAdd({
       ),
       /* @__PURE__ */ jsx20(TooltipContent, { children: addLabel != null ? addLabel : "Add" })
     ] }),
-    /* @__PURE__ */ jsxs13(Button, { variant: "default", onClick: onAdd, className: "hidden sm:flex", children: [
+    /* @__PURE__ */ jsxs11(Button, { variant: "default", onClick: onAdd, className: "hidden sm:flex", children: [
       /* @__PURE__ */ jsx20(PlusIcon, {}),
       addLabel != null ? addLabel : "Add"
     ] })
@@ -2045,6 +2000,41 @@ function exportToCSV(rows, filename = "data-export") {
     URL.revokeObjectURL(url);
   }, 1e3);
 }
+async function exportToPDF(headers, rows, filename = "data-export", title = "Data Export") {
+  const [{ jsPDF }, autoTableMod] = await Promise.all([
+    import("jspdf"),
+    import("jspdf-autotable")
+  ]);
+  const autoTable = autoTableMod.autoTable || autoTableMod.default;
+  const orientation = headers.length > 5 ? "landscape" : "portrait";
+  const doc = new jsPDF({ orientation });
+  doc.setFontSize(14);
+  doc.setFont("helvetica", "bold");
+  doc.text(title, 14, 15);
+  doc.setFontSize(8);
+  doc.setFont("helvetica", "normal");
+  doc.setTextColor(120);
+  doc.text(`Generated on ${(/* @__PURE__ */ new Date()).toLocaleString()}`, 14, 20);
+  autoTable(doc, {
+    head: [headers],
+    body: rows,
+    startY: 24,
+    styles: {
+      fontSize: 8,
+      cellPadding: 2.5
+    },
+    headStyles: {
+      fillColor: [40, 40, 40],
+      textColor: [255, 255, 255],
+      fontStyle: "bold"
+    },
+    alternateRowStyles: {
+      fillColor: [248, 248, 248]
+    }
+  });
+  const finalFilename = filename.endsWith(".pdf") ? filename : `${filename}.pdf`;
+  doc.save(finalFilename);
+}
 function printTable(headers, rows, title = "Data Export") {
   let tableHtml = `<table style="width:100%; border-collapse:collapse; font-family:sans-serif; font-size:12px;"><thead><tr>`;
   for (const header of headers) {
@@ -2089,7 +2079,7 @@ function printTable(headers, rows, title = "Data Export") {
 }
 
 // src/components/composed/data-table/table-header-download.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function getTableExportData(table) {
   const columns = table.getAllColumns().filter(
     (col) => typeof col.accessorFn !== "undefined" && col.getIsVisible()
@@ -2132,8 +2122,8 @@ function DataTableHeaderDownload({
   exportFilename,
   onDownload
 }) {
-  return /* @__PURE__ */ jsxs14(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs14(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs12(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs12(Tooltip, { children: [
       /* @__PURE__ */ jsx21(
         DropdownMenuTrigger,
         {
@@ -2147,16 +2137,16 @@ function DataTableHeaderDownload({
       ),
       /* @__PURE__ */ jsx21(TooltipContent, { children: "Download options" })
     ] }),
-    /* @__PURE__ */ jsx21(DropdownMenuContent, { align: "end", className: "w-48", children: /* @__PURE__ */ jsxs14(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsx21(DropdownMenuContent, { align: "end", className: "w-48", children: /* @__PURE__ */ jsxs12(DropdownMenuGroup, { children: [
       /* @__PURE__ */ jsx21(DropdownMenuLabel, { children: "Download data" }),
       /* @__PURE__ */ jsx21(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsxs12(
         DropdownMenuItem,
         {
           className: "hover:cursor-pointer",
-          onClick: () => {
+          onClick: async () => {
             const { headers, rows } = getTableExportData(table);
-            printTable(headers, rows, exportFilename);
+            await exportToPDF(headers, rows, exportFilename);
             onDownload == null ? void 0 : onDownload();
           },
           children: [
@@ -2165,7 +2155,7 @@ function DataTableHeaderDownload({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsxs12(
         DropdownMenuItem,
         {
           className: "hover:cursor-pointer",
@@ -2180,7 +2170,7 @@ function DataTableHeaderDownload({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsxs12(
         DropdownMenuItem,
         {
           className: "hover:cursor-pointer",
@@ -2196,7 +2186,7 @@ function DataTableHeaderDownload({
         }
       ),
       /* @__PURE__ */ jsx21(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsxs12(
         DropdownMenuItem,
         {
           className: "hover:cursor-pointer",
@@ -2481,7 +2471,7 @@ function PopoverContent(_a) {
 import { Select as SelectPrimitive } from "@base-ui/react/select";
 import { cn as cn17 } from "cn";
 import { CheckIcon as CheckIcon2, ChevronDownIcon as ChevronDownIcon2, ChevronUpIcon } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 function SelectValue(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -2503,7 +2493,7 @@ function SelectTrigger(_a) {
     "size",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs13(
     SelectPrimitive.Trigger,
     __spreadProps(__spreadValues({
       "data-slot": "select-trigger",
@@ -2552,7 +2542,7 @@ function SelectContent(_a) {
       alignOffset,
       alignItemWithTrigger,
       className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs15(
+      children: /* @__PURE__ */ jsxs13(
         SelectPrimitive.Popup,
         __spreadProps(__spreadValues({
           "data-slot": "select-content",
@@ -2580,7 +2570,7 @@ function SelectItem(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs13(
     SelectPrimitive.Item,
     __spreadProps(__spreadValues({
       "data-slot": "select-item",
@@ -2642,7 +2632,7 @@ function SelectScrollDownButton(_a) {
 }
 
 // src/components/composed/data-table/table-header-filter.tsx
-import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function smartFilterFn(row, columnId, filterValue) {
   var _a, _b, _c;
   if (filterValue === void 0 || filterValue === null || filterValue === "" || filterValue === "all") {
@@ -2803,7 +2793,7 @@ function ColumnFilterInput({
   }, [column, table, variant]);
   if (variant === "boolean" || variant === "select") {
     const currentValue = filterValue === void 0 || filterValue === null || filterValue === "" ? "all" : String(filterValue);
-    return /* @__PURE__ */ jsx25("div", { className: "relative flex items-center w-full", children: /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsx25("div", { className: "relative flex items-center w-full", children: /* @__PURE__ */ jsxs14(
       Select,
       {
         value: currentValue,
@@ -2830,7 +2820,7 @@ function ColumnFilterInput({
               )
             }
           ),
-          /* @__PURE__ */ jsxs16(SelectContent, { align: "start", children: [
+          /* @__PURE__ */ jsxs14(SelectContent, { align: "start", children: [
             /* @__PURE__ */ jsx25(SelectItem, { value: "all", children: "All" }),
             options.map((opt) => /* @__PURE__ */ jsx25(
               SelectItem,
@@ -2859,15 +2849,15 @@ function ColumnFilterInput({
       }
     }
     const formattedDateLabel = dateObj ? format(dateObj, "yyyy-MM-dd") : "";
-    return /* @__PURE__ */ jsx25("div", { className: "relative flex items-center w-full", children: /* @__PURE__ */ jsxs16(Popover, { open: calendarOpen, onOpenChange: setCalendarOpen, children: [
+    return /* @__PURE__ */ jsx25("div", { className: "relative flex items-center w-full", children: /* @__PURE__ */ jsxs14(Popover, { open: calendarOpen, onOpenChange: setCalendarOpen, children: [
       /* @__PURE__ */ jsx25(
         PopoverTrigger,
         {
-          render: /* @__PURE__ */ jsxs16(
+          render: /* @__PURE__ */ jsxs14(
             Button,
             {
               variant: "outline",
-              className: cn14(
+              className: cn13(
                 "w-full justify-start",
                 !formattedDateLabel && "text-muted-foreground"
               ),
@@ -2931,8 +2921,8 @@ function DataTableHeaderFilter({
     [table]
   );
   if (filterableColumns.length === 0) return null;
-  return /* @__PURE__ */ jsxs16(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs16(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs14(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs14(Tooltip, { children: [
       /* @__PURE__ */ jsx25(
         DropdownMenuTrigger,
         {
@@ -2953,12 +2943,12 @@ function DataTableHeaderFilter({
       ),
       /* @__PURE__ */ jsx25(TooltipContent, { children: "Filter options" })
     ] }),
-    /* @__PURE__ */ jsx25(DropdownMenuContent, { align: "end", className: "w-80", children: /* @__PURE__ */ jsxs16(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsx25(DropdownMenuContent, { align: "end", className: "w-80", children: /* @__PURE__ */ jsxs14(DropdownMenuGroup, { children: [
       /* @__PURE__ */ jsx25(DropdownMenuLabel, { children: "Filter by column" }),
       /* @__PURE__ */ jsx25(DropdownMenuSeparator, {}),
       /* @__PURE__ */ jsx25("div", { className: "max-h-64 overflow-y-auto space-y-2.5 p-1", children: filterableColumns.map((column) => {
         const headerText = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
-        return /* @__PURE__ */ jsxs16(
+        return /* @__PURE__ */ jsxs14(
           "div",
           {
             className: "flex items-center justify-between px-1",
@@ -2984,7 +2974,7 @@ function DataTableHeaderFilter({
           column.id
         );
       }) }),
-      columnFilters.length > 0 && /* @__PURE__ */ jsxs16(Fragment2, { children: [
+      columnFilters.length > 0 && /* @__PURE__ */ jsxs14(Fragment2, { children: [
         /* @__PURE__ */ jsx25(DropdownMenuSeparator, {}),
         /* @__PURE__ */ jsx25(
           DropdownMenuItem,
@@ -3003,7 +2993,7 @@ function DataTableHeaderFilter({
 import { RotateCwIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState as useState4 } from "react";
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function DataTableHeaderRefresh({
   onRefresh
 }) {
@@ -3020,7 +3010,7 @@ function DataTableHeaderRefresh({
       setIsRefreshing(false);
     }, 750);
   };
-  return /* @__PURE__ */ jsxs17(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs15(Tooltip, { children: [
     /* @__PURE__ */ jsx26(
       TooltipTrigger,
       {
@@ -3034,7 +3024,7 @@ function DataTableHeaderRefresh({
             children: /* @__PURE__ */ jsx26(
               RotateCwIcon,
               {
-                className: cn14(
+                className: cn13(
                   "transition-transform duration-750",
                   isRefreshing && "animate-spin"
                 )
@@ -3050,23 +3040,22 @@ function DataTableHeaderRefresh({
 
 // src/components/composed/data-table/table-header-search.tsx
 import { XIcon as XIcon2 } from "lucide-react";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function DataTableHeaderSearch({
-  value,
-  onChange,
-  placeholder = "Search..."
+  value = "",
+  onChange
 }) {
-  return /* @__PURE__ */ jsxs18("div", { className: "relative flex items-center max-w-sm w-full", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: "relative flex items-center max-w-sm w-full", children: [
     /* @__PURE__ */ jsx27(
       Input,
       {
-        placeholder,
-        value,
+        placeholder: "Search...",
+        value: value != null ? value : "",
         onChange: (event) => onChange(event.target.value),
         className: "pr-7"
       }
     ),
-    value && /* @__PURE__ */ jsx27(
+    Boolean(value) && /* @__PURE__ */ jsx27(
       "button",
       {
         type: "button",
@@ -3080,15 +3069,15 @@ function DataTableHeaderSearch({
 }
 
 // src/components/composed/data-table/table-header-sort.tsx
-import { ArrowDownIcon as ArrowDownIcon2, ArrowUpDownIcon as ArrowUpDownIcon2, ArrowUpIcon as ArrowUpIcon2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function DataTableHeaderSort({
   table,
   sorting
 }) {
   const sortableColumns = table.getAllColumns().filter((column) => column.getCanSort());
-  return /* @__PURE__ */ jsxs19(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs19(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs17(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs17(Tooltip, { children: [
       /* @__PURE__ */ jsx28(
         DropdownMenuTrigger,
         {
@@ -3100,7 +3089,7 @@ function DataTableHeaderSort({
                 {
                   variant: sorting.length > 0 ? "secondary" : "outline",
                   size: "icon",
-                  children: /* @__PURE__ */ jsx28(ArrowUpDownIcon2, {})
+                  children: /* @__PURE__ */ jsx28(ArrowUpDownIcon, {})
                 }
               )
             }
@@ -3109,13 +3098,13 @@ function DataTableHeaderSort({
       ),
       /* @__PURE__ */ jsx28(TooltipContent, { children: "Sort options" })
     ] }),
-    /* @__PURE__ */ jsx28(DropdownMenuContent, { align: "end", className: "w-48", children: /* @__PURE__ */ jsxs19(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsx28(DropdownMenuContent, { align: "end", className: "w-48", children: /* @__PURE__ */ jsxs17(DropdownMenuGroup, { children: [
       /* @__PURE__ */ jsx28(DropdownMenuLabel, { children: "Sort by column" }),
       /* @__PURE__ */ jsx28(DropdownMenuSeparator, {}),
       sortableColumns.map((column) => {
         const isSorted = column.getIsSorted();
         const headerText = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
-        return /* @__PURE__ */ jsxs19(
+        return /* @__PURE__ */ jsxs17(
           DropdownMenuItem,
           {
             className: "flex items-center justify-between hover:cursor-pointer capitalize",
@@ -3129,22 +3118,22 @@ function DataTableHeaderSort({
               }
             },
             children: [
-              /* @__PURE__ */ jsx28("span", { children: headerText }),
-              isSorted === "asc" && /* @__PURE__ */ jsx28(ArrowUpIcon2, { className: "size-3.5" }),
-              isSorted === "desc" && /* @__PURE__ */ jsx28(ArrowDownIcon2, { className: "size-3.5" })
+              headerText,
+              isSorted === "asc" && /* @__PURE__ */ jsx28(ArrowUpIcon, { className: "size-3.5" }),
+              isSorted === "desc" && /* @__PURE__ */ jsx28(ArrowDownIcon, { className: "size-3.5" })
             ]
           },
           column.id
         );
       }),
-      sorting.length > 0 && /* @__PURE__ */ jsxs19(Fragment3, { children: [
+      sorting.length > 0 && /* @__PURE__ */ jsxs17(Fragment3, { children: [
         /* @__PURE__ */ jsx28(DropdownMenuSeparator, {}),
         /* @__PURE__ */ jsx28(
           DropdownMenuItem,
           {
             className: "hover:cursor-pointer text-destructive focus:text-destructive",
             onClick: () => table.resetSorting(),
-            children: "Clear Sorting"
+            children: "Clear sorting"
           }
         )
       ] })
@@ -3154,12 +3143,12 @@ function DataTableHeaderSort({
 
 // src/components/composed/data-table/table-header-toggle.tsx
 import { Columns3CogIcon } from "lucide-react";
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 function DataTableHeaderToggle({
   table
 }) {
-  return /* @__PURE__ */ jsxs20(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs20(Tooltip, { children: [
+  return /* @__PURE__ */ jsxs18(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs18(Tooltip, { children: [
       /* @__PURE__ */ jsx29(
         DropdownMenuTrigger,
         {
@@ -3173,7 +3162,7 @@ function DataTableHeaderToggle({
       ),
       /* @__PURE__ */ jsx29(TooltipContent, { children: "Toggle columns" })
     ] }),
-    /* @__PURE__ */ jsx29(DropdownMenuContent, { align: "end", className: "w-48", children: /* @__PURE__ */ jsxs20(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsx29(DropdownMenuContent, { align: "end", className: "w-48", children: /* @__PURE__ */ jsxs18(DropdownMenuGroup, { children: [
       /* @__PURE__ */ jsx29(DropdownMenuLabel, { children: "Toggle columns" }),
       /* @__PURE__ */ jsx29(DropdownMenuSeparator, {}),
       table.getAllColumns().filter(
@@ -3198,7 +3187,7 @@ function DataTableHeaderToggle({
 // src/components/composed/data-table/data-row-actions.tsx
 import { MoreHorizontal } from "lucide-react";
 import { Fragment as Fragment4 } from "react";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function RowActions({
   label = "Actions",
   items = [],
@@ -3215,8 +3204,8 @@ function RowActions({
   return /* @__PURE__ */ jsx30(
     "div",
     {
-      className: cn14("flex items-center justify-end w-full", containerClassName),
-      children: /* @__PURE__ */ jsxs21(DropdownMenu, { children: [
+      className: cn13("flex items-center justify-end w-full", containerClassName),
+      children: /* @__PURE__ */ jsxs19(DropdownMenu, { children: [
         /* @__PURE__ */ jsx30(
           DropdownMenuTrigger,
           {
@@ -3227,9 +3216,9 @@ function RowActions({
           DropdownMenuContent,
           {
             align,
-            className: cn14("w-40", contentClassName),
-            children: /* @__PURE__ */ jsxs21(DropdownMenuGroup, { children: [
-              label && /* @__PURE__ */ jsxs21(Fragment5, { children: [
+            className: cn13("w-40", contentClassName),
+            children: /* @__PURE__ */ jsxs19(DropdownMenuGroup, { children: [
+              label && /* @__PURE__ */ jsxs19(Fragment5, { children: [
                 /* @__PURE__ */ jsx30(DropdownMenuLabel, { children: label }),
                 /* @__PURE__ */ jsx30(DropdownMenuSeparator, {})
               ] }),
@@ -3237,14 +3226,14 @@ function RowActions({
                 var _a;
                 const itemKey = (_a = item.id) != null ? _a : `${item.label}-${index}`;
                 const isDestructive = item.variant === "destructive";
-                return /* @__PURE__ */ jsxs21(Fragment4, { children: [
+                return /* @__PURE__ */ jsxs19(Fragment4, { children: [
                   item.separatorBefore && /* @__PURE__ */ jsx30(DropdownMenuSeparator, {}),
-                  /* @__PURE__ */ jsxs21(
+                  /* @__PURE__ */ jsxs19(
                     DropdownMenuItem,
                     {
                       onClick: item.onClick,
                       disabled: item.disabled,
-                      className: cn14(
+                      className: cn13(
                         "hover:cursor-pointer flex items-center gap-2",
                         isDestructive && "text-destructive focus:text-destructive",
                         item.className
@@ -3267,7 +3256,7 @@ function RowActions({
 }
 
 // src/components/composed/data-table/data-table.tsx
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -3277,22 +3266,13 @@ function DataTable({
   onRefresh,
   onDownload,
   exportFilename = "data-export",
-  isLoading = false,
-  searchPlaceholder = "Search...",
   showSearchInput = true,
   showRefreshButton = true,
   showSortButton = true,
   showFilterButton = true,
   showDownloadButton = true,
   showColumnToggleButton = true,
-  showAddButton = true,
-  emptyIcon,
-  emptyTitle,
-  emptyDescription,
-  emptyButtonText,
-  emptyRender,
-  onEmptyAction,
-  renderEmptyState
+  showAddButton = true
 }) {
   const [createOpen, setCreateOpen] = useState5(false);
   const [sorting, setSorting] = useState5([]);
@@ -3308,46 +3288,53 @@ function DataTable({
     features,
     data,
     columns: columnsWithSmartFilters,
+    initialState: {
+      globalFilter: ""
+    },
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
-    onGlobalFilterChange: setGlobalFilter,
-    state: { sorting, columnFilters, columnVisibility, globalFilter }
-  });
-  if (data.length === 0 && !isLoading) {
-    if (renderEmptyState) {
-      return /* @__PURE__ */ jsxs22("div", { className: "space-y-2", children: [
-        renderEmptyState(),
-        renderCreateDialog == null ? void 0 : renderCreateDialog(createOpen, setCreateOpen)
-      ] });
+    onGlobalFilterChange: (updater) => {
+      setGlobalFilter((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        return next != null ? next : "";
+      });
+    },
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      globalFilter: globalFilter != null ? globalFilter : ""
     }
-    const defaultEmptyAction = renderCreateDialog ? () => setCreateOpen(true) : onRefresh != null ? onRefresh : void 0;
-    return /* @__PURE__ */ jsxs22("div", { className: "space-y-2", children: [
+  });
+  if (data.length === 0) {
+    const hasCreateAction = Boolean(renderCreateDialog);
+    const hasRefreshAction = Boolean(onRefresh);
+    return /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx31(
         StateEmpty,
         {
-          icon: emptyIcon != null ? emptyIcon : /* @__PURE__ */ jsx31(FolderOpenIcon, { className: "size-6 text-muted-foreground" }),
-          title: emptyTitle != null ? emptyTitle : "No records found",
-          description: emptyDescription != null ? emptyDescription : "There are currently no records available. Create a new record to get started.",
-          buttonText: emptyButtonText != null ? emptyButtonText : renderCreateDialog ? addLabel != null ? addLabel : "Add Record" : onRefresh ? "Refresh" : void 0,
-          onClick: onEmptyAction != null ? onEmptyAction : defaultEmptyAction,
-          render: emptyRender
+          state: "outline",
+          icon: /* @__PURE__ */ jsx31(FolderOpenIcon, { className: "size-6 text-muted-foreground" }),
+          title: "No Data Available",
+          description: "There are currently no records to display. Create a new record to get started.",
+          buttonText: hasCreateAction ? addLabel != null ? addLabel : "Add Record" : hasRefreshAction ? "Refresh" : void 0,
+          render: hasCreateAction ? () => setCreateOpen(true) : hasRefreshAction ? onRefresh : void 0
         }
       ),
       renderCreateDialog == null ? void 0 : renderCreateDialog(createOpen, setCreateOpen)
     ] });
   }
-  return /* @__PURE__ */ jsxs22("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs22("div", { className: "flex flex-row items-center justify-between gap-1", children: [
+  return /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex flex-row items-center justify-between gap-1", children: [
       showSearchInput ? /* @__PURE__ */ jsx31(
         DataTableHeaderSearch,
         {
           value: globalFilter,
-          onChange: setGlobalFilter,
-          placeholder: searchPlaceholder
+          onChange: setGlobalFilter
         }
       ) : /* @__PURE__ */ jsx31("div", {}),
-      /* @__PURE__ */ jsxs22("div", { className: "flex flex-row items-center gap-1", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex flex-row items-center gap-1", children: [
         showRefreshButton && /* @__PURE__ */ jsx31(DataTableHeaderRefresh, { onRefresh }),
         showSortButton && /* @__PURE__ */ jsx31(DataTableHeaderSort, { table, sorting }),
         showFilterButton && /* @__PURE__ */ jsx31(
@@ -3376,18 +3363,11 @@ function DataTable({
       ] })
     ] }),
     renderCreateDialog == null ? void 0 : renderCreateDialog(createOpen, setCreateOpen),
-    /* @__PURE__ */ jsx31("div", { className: "overflow-hidden rounded-md border [&_[data-slot=table-container]]:no-scrollbar", children: /* @__PURE__ */ jsxs22(Table, { children: [
+    /* @__PURE__ */ jsx31("div", { className: "overflow-hidden rounded-md border [&_[data-slot=table-container]]:no-scrollbar", children: /* @__PURE__ */ jsxs20(Table, { children: [
       /* @__PURE__ */ jsx31(DataTableContentHeader, { table }),
-      /* @__PURE__ */ jsx31(
-        DataTableContentBody,
-        {
-          table,
-          columns,
-          isLoading
-        }
-      )
+      /* @__PURE__ */ jsx31(DataTableContentBody, { table, columns })
     ] }) }),
-    /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-2", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between px-2", children: [
       /* @__PURE__ */ jsx31(DataTableFooterEntries, { table }),
       /* @__PURE__ */ jsx31(DataTableFooterPagination, { table })
     ] })
@@ -3473,7 +3453,7 @@ function TabsTrigger(_a) {
 }
 
 // src/components/composed/header-tabs.tsx
-import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 function renderTabIcon(icon) {
   if (!icon) return null;
   if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
@@ -3494,8 +3474,8 @@ var HeaderTabs = memo3(function HeaderTabs2({
     (item) => item.url === pathname || pathname.endsWith(item.url) || pathname.split("/").includes(item.value)
   ) : void 0;
   const activeTab = (_b = value != null ? value : matchedItem == null ? void 0 : matchedItem.value) != null ? _b : (_a = items[0]) == null ? void 0 : _a.value;
-  return /* @__PURE__ */ jsxs23(Tabs, { value: activeTab, onValueChange, className: "space-y-4", children: [
-    /* @__PURE__ */ jsx33("div", { className: "w-full overflow-x-auto overflow-y-hidden border-b no-scrollbar", children: /* @__PURE__ */ jsx33(TabsList, { variant: "line", className: "inline-flex w-max justify-start", children: items.map(({ title, value: tabValue, url, icon }) => /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs21(Tabs, { value: activeTab, onValueChange, className: "space-y-4", children: [
+    /* @__PURE__ */ jsx33("div", { className: "w-full overflow-x-auto overflow-y-hidden border-b no-scrollbar", children: /* @__PURE__ */ jsx33(TabsList, { variant: "line", className: "inline-flex w-max justify-start", children: items.map(({ title, value: tabValue, url, icon }) => /* @__PURE__ */ jsxs21(
       TabsTrigger,
       {
         nativeButton: false,
@@ -3514,14 +3494,14 @@ var HeaderTabs = memo3(function HeaderTabs2({
 
 // src/components/composed/header-title.tsx
 import { memo as memo4 } from "react";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 var HeaderTitle = memo4(function HeaderTitle2({
   title,
   subtitle,
   children
 }) {
-  return /* @__PURE__ */ jsxs24("div", { className: "w-full space-y-4", children: [
-    /* @__PURE__ */ jsxs24("div", { children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ jsxs22("div", { children: [
       /* @__PURE__ */ jsx34("h1", { className: "font-semibold", children: title }),
       /* @__PURE__ */ jsx34("p", { className: "text-xs text-muted-foreground", children: subtitle })
     ] }),
@@ -3547,6 +3527,7 @@ export {
   RowActions,
   StateEmpty,
   exportToCSV,
+  exportToPDF,
   exportToXLSX,
   features,
   flexRender3 as flexRender,