@prediktif/ui 0.1.18 → 0.1.20

package/dist/index.mjs

@@ -496,6 +496,57 @@ function DropdownMenuItem(_a) {
     }, props)
   );
 }
+function DropdownMenuCheckboxItem(_a) {
+  var _b = _a, {
+    className,
+    children,
+    checked,
+    inset
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "checked",
+    "inset"
+  ]);
+  return /* @__PURE__ */ jsxs3(
+    MenuPrimitive.CheckboxItem,
+    __spreadProps(__spreadValues({
+      "data-slot": "dropdown-menu-checkbox-item",
+      "data-inset": inset,
+      className: cn5(
+        "relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      ),
+      checked
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: "pointer-events-none absolute right-2 flex items-center justify-center",
+            "data-slot": "dropdown-menu-checkbox-item-indicator",
+            children: /* @__PURE__ */ jsx5(MenuPrimitive.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx5(CheckIcon, {}) })
+          }
+        ),
+        children
+      ]
+    })
+  );
+}
+function DropdownMenuSeparator(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx5(
+    MenuPrimitive.Separator,
+    __spreadValues({
+      "data-slot": "dropdown-menu-separator",
+      className: cn5("-mx-1 my-1 h-px bg-border/50", className)
+    }, props)
+  );
+}
 
 // src/components/ui/separator.tsx
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
@@ -534,6 +585,20 @@ import * as React2 from "react";
 import { Input as InputPrimitive } from "@base-ui/react/input";
 import { cn as cn7 } from "cn";
 import { jsx as jsx7 } from "react/jsx-runtime";
+function Input(_a) {
+  var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
+  return /* @__PURE__ */ jsx7(
+    InputPrimitive,
+    __spreadValues({
+      type,
+      "data-slot": "input",
+      className: cn7(
+        "h-7 w-full min-w-0 rounded-md border border-input bg-input/20 px-2 py-0.5 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )
+    }, props)
+  );
+}
 
 // src/components/ui/sheet.tsx
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
@@ -1406,155 +1471,28 @@ var AppSidebar = memo(function AppSidebar2({
   ] });
 });
 
-// src/components/composed/header-tabs.tsx
-import Link2 from "next/link";
-import { usePathname as usePathname2 } from "next/navigation";
+// src/components/composed/data-table/data-table.tsx
+import {
+  flexRender as flexRender3,
+  useTable
+} from "@tanstack/react-table";
+import { FolderOpenIcon } from "lucide-react";
+import { useMemo as useMemo3, useState as useState5 } from "react";
+
+// src/components/composed/state-empty.tsx
 import { memo as memo2 } from "react";
 
-// src/components/ui/tabs.tsx
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+// src/components/ui/empty.tsx
 import { cva as cva3 } from "class-variance-authority";
 import { cn as cn12 } from "cn";
 import { jsx as jsx13 } from "react/jsx-runtime";
-function Tabs(_a) {
-  var _b = _a, {
-    className,
-    orientation = "horizontal"
-  } = _b, props = __objRest(_b, [
-    "className",
-    "orientation"
-  ]);
-  return /* @__PURE__ */ jsx13(
-    TabsPrimitive.Root,
-    __spreadValues({
-      "data-slot": "tabs",
-      "data-orientation": orientation,
-      className: cn12(
-        "group/tabs flex gap-2 data-horizontal:flex-col",
-        className
-      )
-    }, props)
-  );
-}
-var tabsListVariants = cva3(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function TabsList(_a) {
-  var _b = _a, {
-    className,
-    variant = "default"
-  } = _b, props = __objRest(_b, [
-    "className",
-    "variant"
-  ]);
-  return /* @__PURE__ */ jsx13(
-    TabsPrimitive.List,
-    __spreadValues({
-      "data-slot": "tabs-list",
-      "data-variant": variant,
-      className: cn12(tabsListVariants({ variant }), className)
-    }, props)
-  );
-}
-function TabsTrigger(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx13(
-    TabsPrimitive.Tab,
-    __spreadValues({
-      "data-slot": "tabs-trigger",
-      className: cn12(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-        className
-      )
-    }, props)
-  );
-}
-
-// src/components/composed/header-tabs.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-function renderTabIcon(icon) {
-  if (!icon) return null;
-  if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
-    const IconComp = icon;
-    return /* @__PURE__ */ jsx14(IconComp, {});
-  }
-  return icon;
-}
-var HeaderTabs = memo2(function HeaderTabs2({
-  items,
-  value,
-  onValueChange,
-  children
-}) {
-  var _a, _b;
-  const pathname = usePathname2();
-  const matchedItem = pathname ? items.find(
-    (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__ */ jsxs8(Tabs, { value: activeTab, onValueChange, className: "space-y-4", children: [
-    /* @__PURE__ */ jsx14("div", { className: "w-full overflow-x-auto overflow-y-hidden border-b no-scrollbar", children: /* @__PURE__ */ jsx14(TabsList, { variant: "line", className: "inline-flex w-max justify-start", children: items.map(({ title, value: tabValue, url, icon }) => /* @__PURE__ */ jsxs8(
-      TabsTrigger,
-      {
-        nativeButton: false,
-        render: /* @__PURE__ */ jsx14(Link2, { href: url }),
-        value: tabValue,
-        children: [
-          renderTabIcon(icon),
-          title
-        ]
-      },
-      tabValue
-    )) }) }),
-    children
-  ] });
-});
-
-// src/components/composed/header-title.tsx
-import { memo as memo3 } from "react";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-var HeaderTitle = memo3(function HeaderTitle2({
-  title,
-  subtitle,
-  children
-}) {
-  return /* @__PURE__ */ jsxs9("div", { className: "w-full space-y-4", children: [
-    /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx15("h1", { className: "font-semibold", children: title }),
-      /* @__PURE__ */ jsx15("p", { className: "text-xs text-muted-foreground", children: subtitle })
-    ] }),
-    children
-  ] });
-});
-
-// src/components/composed/state-empty.tsx
-import { memo as memo4 } from "react";
-
-// src/components/ui/empty.tsx
-import { cva as cva4 } from "class-variance-authority";
-import { cn as cn13 } from "cn";
-import { jsx as jsx16 } from "react/jsx-runtime";
 function Empty(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx13(
     "div",
     __spreadValues({
       "data-slot": "empty",
-      className: cn13(
+      className: cn12(
         "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
         className
       )
@@ -1563,15 +1501,15 @@ function Empty(_a) {
 }
 function EmptyHeader(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx13(
     "div",
     __spreadValues({
       "data-slot": "empty-header",
-      className: cn13("flex max-w-sm flex-col items-center gap-1", className)
+      className: cn12("flex max-w-sm flex-col items-center gap-1", className)
     }, props)
   );
 }
-var emptyMediaVariants = cva4(
+var emptyMediaVariants = cva3(
   "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
@@ -1593,22 +1531,22 @@ function EmptyMedia(_a) {
     "className",
     "variant"
   ]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx13(
     "div",
     __spreadValues({
       "data-slot": "empty-icon",
       "data-variant": variant,
-      className: cn13(emptyMediaVariants({ variant, className }))
+      className: cn12(emptyMediaVariants({ variant, className }))
     }, props)
   );
 }
 function EmptyTitle(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx13(
     "div",
     __spreadValues({
       "data-slot": "empty-title",
-      className: cn13(
+      className: cn12(
         "font-heading text-sm font-medium tracking-tight",
         className
       )
@@ -1617,11 +1555,11 @@ function EmptyTitle(_a) {
 }
 function EmptyDescription(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx13(
     "div",
     __spreadValues({
       "data-slot": "empty-description",
-      className: cn13(
+      className: cn12(
         "text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )
@@ -1630,11 +1568,11 @@ function EmptyDescription(_a) {
 }
 function EmptyContent(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx13(
     "div",
     __spreadValues({
       "data-slot": "empty-content",
-      className: cn13(
+      className: cn12(
         "flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance",
         className
       )
@@ -1642,43 +1580,1959 @@ function EmptyContent(_a) {
   );
 }
 
+// src/lib/utils.ts
+import { cn as cn13 } from "cn";
+
 // src/components/composed/state-empty.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function renderStateIcon(icon) {
   if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
     const IconComp = icon;
-    return /* @__PURE__ */ jsx17(IconComp, {});
+    return /* @__PURE__ */ jsx14(IconComp, {});
   }
   return icon;
 }
-var StateEmpty = memo4(function StateEmpty2({
+var StateEmpty = memo2(function StateEmpty2({
   icon,
   title,
   description,
   buttonText,
-  render
+  onClick,
+  render,
+  state = "default"
 }) {
-  return /* @__PURE__ */ jsxs10(Empty, { className: "w-full border border-dashed", children: [
-    /* @__PURE__ */ jsxs10(EmptyHeader, { children: [
-      /* @__PURE__ */ jsx17(EmptyMedia, { variant: "icon", children: renderStateIcon(icon) }),
-      /* @__PURE__ */ jsx17(EmptyTitle, { children: title }),
-      /* @__PURE__ */ jsx17(EmptyDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ jsx17(EmptyContent, { children: /* @__PURE__ */ jsx17(
-      Button,
-      {
-        variant: "outline",
-        size: "sm",
-        nativeButton: !render,
-        render,
-        children: buttonText
+  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: 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 cn14 } from "cn";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Table(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ jsx15(
+        "table",
+        __spreadValues({
+          "data-slot": "table",
+          className: cn14("w-full caption-bottom text-xs", className)
+        }, props)
+      )
+    }
+  );
+}
+function TableHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx15(
+    "thead",
+    __spreadValues({
+      "data-slot": "table-header",
+      className: cn14("[&_tr]:border-b", className)
+    }, props)
+  );
+}
+function TableBody(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx15(
+    "tbody",
+    __spreadValues({
+      "data-slot": "table-body",
+      className: cn14("[&_tr:last-child]:border-0", className)
+    }, props)
+  );
+}
+function TableRow(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx15(
+    "tr",
+    __spreadValues({
+      "data-slot": "table-row",
+      className: cn14(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )
+    }, props)
+  );
+}
+function TableHead(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx15(
+    "th",
+    __spreadValues({
+      "data-slot": "table-head",
+      className: cn14(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )
+    }, props)
+  );
+}
+function TableCell(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx15(
+    "td",
+    __spreadValues({
+      "data-slot": "table-cell",
+      className: cn14(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/components/composed/data-table/data-table-features.ts
+import {
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures
+} from "@tanstack/react-table";
+var features = tableFeatures({
+  // Filter features
+  columnFilteringFeature,
+  globalFilteringFeature,
+  // Visibility & selection features
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  // Pagination & sorting features
+  rowPaginationFeature,
+  rowSortingFeature,
+  // Row models
+  filteredRowModel: createFilteredRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  // Custom/standard functions
+  filterFns: {
+    includesString: filterFn_includesString
+  },
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text
+  }
+});
+
+// src/components/composed/data-table/table-content-body.tsx
+import {
+  flexRender
+} from "@tanstack/react-table";
+import { SearchXIcon } from "lucide-react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function DataTableContentBody({
+  table,
+  columns
+}) {
+  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-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 { 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) => /* @__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 jsxs9 } from "react/jsx-runtime";
+function DataTableFooterEntries({
+  table
+}) {
+  var _a, _b, _c;
+  const pagination = (_a = table.options.state) == null ? void 0 : _a.pagination;
+  const pageIndex = (_b = pagination == null ? void 0 : pagination.pageIndex) != null ? _b : 0;
+  const pageSize = (_c = pagination == null ? void 0 : pagination.pageSize) != null ? _c : 10;
+  const totalRows = table.getFilteredRowModel().rows.length;
+  const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+  return /* @__PURE__ */ jsxs9("div", { className: "flex-1 text-xs text-muted-foreground", children: [
+    "Showing",
+    " ",
+    /* @__PURE__ */ jsxs9("span", { className: "font-medium text-foreground", children: [
+      startRow,
+      "-",
+      endRow
+    ] }),
+    " ",
+    "of ",
+    /* @__PURE__ */ jsx18("span", { className: "font-medium text-foreground", children: totalRows }),
+    " ",
+    "entries."
+  ] });
+}
+
+// src/components/composed/data-table/table-footer-pagination.tsx
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon as ChevronRightIcon3,
+  ChevronsLeftIcon,
+  ChevronsRightIcon
+} from "lucide-react";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+function DataTableFooterPagination({
+  table
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxs10(Tooltip, { children: [
+      /* @__PURE__ */ jsx19(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx19(
+            Button,
+            {
+              variant: "outline",
+              size: "icon-xs",
+              onClick: () => table.firstPage(),
+              disabled: !table.getCanPreviousPage(),
+              children: /* @__PURE__ */ jsx19(ChevronsLeftIcon, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx19(TooltipContent, { children: "Go to first page" })
+    ] }),
+    /* @__PURE__ */ jsxs10(Tooltip, { children: [
+      /* @__PURE__ */ jsx19(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx19(
+            Button,
+            {
+              variant: "outline",
+              size: "icon-xs",
+              onClick: () => table.previousPage(),
+              disabled: !table.getCanPreviousPage(),
+              children: /* @__PURE__ */ jsx19(ChevronLeftIcon, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx19(TooltipContent, { children: "Go to previous page" })
+    ] }),
+    /* @__PURE__ */ jsxs10(Tooltip, { children: [
+      /* @__PURE__ */ jsx19(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx19(
+            Button,
+            {
+              variant: "outline",
+              size: "icon-xs",
+              onClick: () => table.nextPage(),
+              disabled: !table.getCanNextPage(),
+              children: /* @__PURE__ */ jsx19(ChevronRightIcon3, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx19(TooltipContent, { children: "Go to next page" })
+    ] }),
+    /* @__PURE__ */ jsxs10(Tooltip, { children: [
+      /* @__PURE__ */ jsx19(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx19(
+            Button,
+            {
+              variant: "outline",
+              size: "icon-xs",
+              onClick: () => table.lastPage(),
+              disabled: !table.getCanNextPage(),
+              children: /* @__PURE__ */ jsx19(ChevronsRightIcon, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx19(TooltipContent, { children: "Go to last page" })
+    ] })
+  ] });
+}
+
+// src/components/composed/data-table/table-header-add.tsx
+import { PlusIcon } from "lucide-react";
+import { Fragment, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+function DataTableHeaderAdd({
+  onAdd,
+  addLabel
+}) {
+  return /* @__PURE__ */ jsxs11(Fragment, { children: [
+    /* @__PURE__ */ jsxs11(Tooltip, { children: [
+      /* @__PURE__ */ jsx20(
+        TooltipTrigger,
+        {
+          className: "flex sm:hidden",
+          render: /* @__PURE__ */ jsx20(Button, { variant: "default", size: "icon", onClick: onAdd, children: /* @__PURE__ */ jsx20(PlusIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ jsx20(TooltipContent, { children: addLabel != null ? addLabel : "Add" })
+    ] }),
+    /* @__PURE__ */ jsxs11(Button, { variant: "default", onClick: onAdd, className: "hidden sm:flex", children: [
+      /* @__PURE__ */ jsx20(PlusIcon, {}),
+      addLabel != null ? addLabel : "Add"
+    ] })
+  ] });
+}
+
+// src/components/composed/data-table/table-header-download.tsx
+import {
+  DownloadIcon,
+  FileCodeIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  PrinterIcon
+} from "lucide-react";
+
+// src/components/composed/data-table/export.ts
+import * as XLSX from "xlsx";
+function normalizeRows(rows) {
+  return rows.map((row) => {
+    var _a, _b, _c;
+    const flat = {};
+    for (const [key, value] of Object.entries(row)) {
+      if (value === null || value === void 0) {
+        flat[key] = "";
+      } else if (Array.isArray(value)) {
+        flat[key] = value.map((item) => {
+          var _a2, _b2, _c2;
+          if (item === null || item === void 0) return "";
+          if (typeof item === "object") {
+            const record = item;
+            return (_c2 = (_b2 = (_a2 = record.name) != null ? _a2 : record.label) != null ? _b2 : record.email) != null ? _c2 : JSON.stringify(item);
+          }
+          return String(item);
+        }).filter(Boolean).join(", ");
+      } else if (typeof value === "object") {
+        const record = value;
+        flat[key] = (_c = (_b = (_a = record.name) != null ? _a : record.label) != null ? _b : record.email) != null ? _c : JSON.stringify(value);
+      } else {
+        flat[key] = String(value);
+      }
+    }
+    return flat;
+  });
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function exportToXLSX(rows, filename = "data-export") {
+  const normalized = normalizeRows(rows);
+  const worksheet = XLSX.utils.json_to_sheet(normalized);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+  const finalFilename = filename.endsWith(".xlsx") ? filename : `${filename}.xlsx`;
+  XLSX.writeFile(workbook, finalFilename);
+}
+function exportToCSV(rows, filename = "data-export") {
+  const normalized = normalizeRows(rows);
+  const worksheet = XLSX.utils.json_to_sheet(normalized);
+  const csvString = XLSX.utils.sheet_to_csv(worksheet);
+  const blob = new Blob([`\uFEFF${csvString}`], {
+    type: "text/csv;charset=utf-8;"
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  const finalFilename = filename.endsWith(".csv") ? filename : `${filename}.csv`;
+  link.setAttribute("download", finalFilename);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  setTimeout(() => {
+    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) {
+    tableHtml += `<th style="border:1px solid #ddd; padding:8px; background-color:#f8f9fa; text-align:left;">${escapeHtml(header)}</th>`;
+  }
+  tableHtml += `</tr></thead><tbody>`;
+  for (const row of rows) {
+    tableHtml += `<tr>`;
+    for (const cell of row) {
+      tableHtml += `<td style="border:1px solid #ddd; padding:8px;">${escapeHtml(cell != null ? cell : "")}</td>`;
+    }
+    tableHtml += `</tr>`;
+  }
+  tableHtml += `</tbody></table>`;
+  const printWindow = window.open("", "_blank");
+  if (!printWindow) return;
+  printWindow.document.write(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>${escapeHtml(title)}</title>
+        <style>
+          body { font-family: sans-serif; padding: 20px; color: #333; }
+          h2 { margin-bottom: 6px; font-size: 18px; }
+          .meta { font-size: 11px; color: #666; margin-bottom: 16px; }
+          @page { size: auto; margin: 15mm; }
+        </style>
+      </head>
+      <body>
+        <h2>${escapeHtml(title)}</h2>
+        <div class="meta">Generated on ${(/* @__PURE__ */ new Date()).toLocaleString()}</div>
+        ${tableHtml}
+      </body>
+    </html>
+  `);
+  printWindow.document.close();
+  printWindow.focus();
+  setTimeout(() => {
+    printWindow.print();
+    printWindow.close();
+  }, 250);
+}
+
+// src/components/composed/data-table/table-header-download.tsx
+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()
+  );
+  const headers = columns.map(
+    (col) => typeof col.columnDef.header === "string" ? col.columnDef.header : col.id
+  );
+  const filteredRows = table.getFilteredRowModel().rows;
+  const rows = filteredRows.map(
+    (row) => headers.map((_, i) => {
+      var _a, _b;
+      const col = columns[i];
+      const value = row.getValue(col.id);
+      if (value === null || value === void 0) return "";
+      if (Array.isArray(value)) {
+        return value.map(
+          (item) => {
+            var _a2, _b2;
+            return typeof item === "object" && item !== null ? (_b2 = (_a2 = item.name) != null ? _a2 : item.email) != null ? _b2 : JSON.stringify(item) : String(item);
+          }
+        ).join(", ");
+      }
+      if (typeof value === "object") {
+        return (_b = (_a = value.name) != null ? _a : value.email) != null ? _b : JSON.stringify(value);
+      }
+      return String(value);
+    })
+  );
+  const rowObjects = filteredRows.map((_, rowIndex) => {
+    const obj = {};
+    for (let i = 0; i < columns.length; i++) {
+      obj[headers[i]] = rows[rowIndex][i];
+    }
+    return obj;
+  });
+  return { headers, rows, rowObjects };
+}
+function DataTableHeaderDownload({
+  table,
+  exportFilename,
+  onDownload
+}) {
+  return /* @__PURE__ */ jsxs12(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs12(Tooltip, { children: [
+      /* @__PURE__ */ jsx21(
+        DropdownMenuTrigger,
+        {
+          render: /* @__PURE__ */ jsx21(
+            TooltipTrigger,
+            {
+              render: /* @__PURE__ */ jsx21(Button, { variant: "outline", size: "icon", children: /* @__PURE__ */ jsx21(DownloadIcon, {}) })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx21(TooltipContent, { children: "Download options" })
+    ] }),
+    /* @__PURE__ */ jsx21(DropdownMenuContent, { align: "end", className: "w-48", children: /* @__PURE__ */ jsxs12(DropdownMenuGroup, { children: [
+      /* @__PURE__ */ jsx21(DropdownMenuLabel, { children: "Download data" }),
+      /* @__PURE__ */ jsx21(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs12(
+        DropdownMenuItem,
+        {
+          className: "hover:cursor-pointer",
+          onClick: async () => {
+            const { headers, rows } = getTableExportData(table);
+            await exportToPDF(headers, rows, exportFilename);
+            onDownload == null ? void 0 : onDownload();
+          },
+          children: [
+            /* @__PURE__ */ jsx21(FileTextIcon, {}),
+            "Download PDF"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs12(
+        DropdownMenuItem,
+        {
+          className: "hover:cursor-pointer",
+          onClick: () => {
+            const { rowObjects } = getTableExportData(table);
+            exportToXLSX(rowObjects, exportFilename);
+            onDownload == null ? void 0 : onDownload();
+          },
+          children: [
+            /* @__PURE__ */ jsx21(FileSpreadsheetIcon, {}),
+            "Download Excel"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs12(
+        DropdownMenuItem,
+        {
+          className: "hover:cursor-pointer",
+          onClick: () => {
+            const { rowObjects } = getTableExportData(table);
+            exportToCSV(rowObjects, exportFilename);
+            onDownload == null ? void 0 : onDownload();
+          },
+          children: [
+            /* @__PURE__ */ jsx21(FileCodeIcon, {}),
+            "Download CSV"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx21(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs12(
+        DropdownMenuItem,
+        {
+          className: "hover:cursor-pointer",
+          onClick: () => {
+            const { headers, rows } = getTableExportData(table);
+            printTable(headers, rows, exportFilename);
+          },
+          children: [
+            /* @__PURE__ */ jsx21(PrinterIcon, {}),
+            "Print Table"
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/components/composed/data-table/table-header-filter.tsx
+import { format } from "date-fns";
+import { CalendarIcon, ListFilterIcon } from "lucide-react";
+import { useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/components/ui/calendar.tsx
+import { cn as cn15 } from "cn";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon as ChevronLeftIcon2,
+  ChevronRightIcon as ChevronRightIcon4
+} from "lucide-react";
+import * as React3 from "react";
+import {
+  DayPicker,
+  getDefaultClassNames
+} from "react-day-picker";
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Calendar(_a) {
+  var _b = _a, {
+    className,
+    classNames,
+    showOutsideDays = true,
+    captionLayout = "label",
+    buttonVariant = "ghost",
+    locale,
+    formatters,
+    components
+  } = _b, props = __objRest(_b, [
+    "className",
+    "classNames",
+    "showOutsideDays",
+    "captionLayout",
+    "buttonVariant",
+    "locale",
+    "formatters",
+    "components"
+  ]);
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx22(
+    DayPicker,
+    __spreadValues({
+      showOutsideDays,
+      className: cn15(
+        "group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      locale,
+      formatters: __spreadValues({
+        formatMonthDropdown: (date) => date.toLocaleString(locale == null ? void 0 : locale.code, { month: "short" })
+      }, formatters),
+      classNames: __spreadValues({
+        root: cn15("w-fit", defaultClassNames.root),
+        months: cn15(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn15("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn15(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn15(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn15(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn15(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn15(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn15(
+          "relative rounded-(--cell-radius)",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn15(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn15(
+          "font-medium select-none",
+          captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        month_grid: cn15("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn15("flex", defaultClassNames.weekdays),
+        weekday: cn15(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn15("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn15(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn15(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn15(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn15(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn15("rounded-none", defaultClassNames.range_middle),
+        range_end: cn15(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn15(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn15(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn15(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn15("invisible", defaultClassNames.hidden)
+      }, classNames),
+      components: __spreadValues({
+        Root: (_a2) => {
+          var _b2 = _a2, { className: className2, rootRef } = _b2, props2 = __objRest(_b2, ["className", "rootRef"]);
+          return /* @__PURE__ */ jsx22(
+            "div",
+            __spreadValues({
+              "data-slot": "calendar",
+              ref: rootRef,
+              className: cn15(className2)
+            }, props2)
+          );
+        },
+        Chevron: (_c) => {
+          var _d = _c, { className: className2, orientation } = _d, props2 = __objRest(_d, ["className", "orientation"]);
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsx22(ChevronLeftIcon2, __spreadValues({ className: cn15("size-4", className2) }, props2));
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsx22(
+              ChevronRightIcon4,
+              __spreadValues({
+                className: cn15("size-4", className2)
+              }, props2)
+            );
+          }
+          return /* @__PURE__ */ jsx22(ChevronDownIcon, __spreadValues({ className: cn15("size-4", className2) }, props2));
+        },
+        DayButton: (_e) => {
+          var props2 = __objRest(_e, []);
+          return /* @__PURE__ */ jsx22(CalendarDayButton, __spreadValues({ locale }, props2));
+        },
+        WeekNumber: (_f) => {
+          var _g = _f, { children } = _g, props2 = __objRest(_g, ["children"]);
+          return /* @__PURE__ */ jsx22("td", __spreadProps(__spreadValues({}, props2), { children: /* @__PURE__ */ jsx22("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) }));
+        }
+      }, components)
+    }, props)
+  );
+}
+function CalendarDayButton(_a) {
+  var _b = _a, {
+    className,
+    day,
+    modifiers,
+    locale
+  } = _b, props = __objRest(_b, [
+    "className",
+    "day",
+    "modifiers",
+    "locale"
+  ]);
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React3.useRef(null);
+  React3.useEffect(() => {
+    var _a2;
+    if (modifiers.focused) (_a2 = ref.current) == null ? void 0 : _a2.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx22(
+    Button,
+    __spreadValues({
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(locale == null ? void 0 : locale.code),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn15(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )
+    }, props)
+  );
+}
+
+// src/components/ui/popover.tsx
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cn as cn16 } from "cn";
+import { jsx as jsx23 } from "react/jsx-runtime";
+function Popover(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx23(PopoverPrimitive.Root, __spreadValues({ "data-slot": "popover" }, props));
+}
+function PopoverTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx23(PopoverPrimitive.Trigger, __spreadValues({ "data-slot": "popover-trigger" }, props));
+}
+function PopoverContent(_a) {
+  var _b = _a, {
+    className,
+    align = "center",
+    alignOffset = 0,
+    side = "bottom",
+    sideOffset = 4
+  } = _b, props = __objRest(_b, [
+    "className",
+    "align",
+    "alignOffset",
+    "side",
+    "sideOffset"
+  ]);
+  return /* @__PURE__ */ jsx23(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx23(
+    PopoverPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsx23(
+        PopoverPrimitive.Popup,
+        __spreadValues({
+          "data-slot": "popover-content",
+          className: cn16(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-lg bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )
+        }, props)
+      )
+    }
+  ) });
+}
+
+// src/components/ui/select.tsx
+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 jsxs13 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+function SelectValue(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx24(
+    SelectPrimitive.Value,
+    __spreadValues({
+      "data-slot": "select-value",
+      className: cn17("flex flex-1 text-left", className)
+    }, props)
+  );
+}
+function SelectTrigger(_a) {
+  var _b = _a, {
+    className,
+    size = "default",
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "size",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs13(
+    SelectPrimitive.Trigger,
+    __spreadProps(__spreadValues({
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn17(
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-input/20 px-2 py-1.5 text-xs/relaxed whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx24(
+          SelectPrimitive.Icon,
+          {
+            render: /* @__PURE__ */ jsx24(ChevronDownIcon2, { className: "pointer-events-none size-3.5 text-muted-foreground" })
+          }
+        )
+      ]
+    })
+  );
+}
+function SelectContent(_a) {
+  var _b = _a, {
+    className,
+    children,
+    side = "bottom",
+    sideOffset = 4,
+    align = "center",
+    alignOffset = 0,
+    alignItemWithTrigger = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "side",
+    "sideOffset",
+    "align",
+    "alignOffset",
+    "alignItemWithTrigger"
+  ]);
+  return /* @__PURE__ */ jsx24(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx24(
+    SelectPrimitive.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      alignItemWithTrigger,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs13(
+        SelectPrimitive.Popup,
+        __spreadProps(__spreadValues({
+          "data-slot": "select-content",
+          "data-align-trigger": alignItemWithTrigger,
+          className: cn17(
+            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsx24(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx24(SelectPrimitive.List, { children }),
+            /* @__PURE__ */ jsx24(SelectScrollDownButton, {})
+          ]
+        })
+      )
+    }
+  ) });
+}
+function SelectItem(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs13(
+    SelectPrimitive.Item,
+    __spreadProps(__spreadValues({
+      "data-slot": "select-item",
+      className: cn17(
+        "relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx24(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children }),
+        /* @__PURE__ */ jsx24(
+          SelectPrimitive.ItemIndicator,
+          {
+            render: /* @__PURE__ */ jsx24("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center" }),
+            children: /* @__PURE__ */ jsx24(CheckIcon2, { className: "pointer-events-none" })
+          }
+        )
+      ]
+    })
+  );
+}
+function SelectScrollUpButton(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx24(
+    SelectPrimitive.ScrollUpArrow,
+    __spreadProps(__spreadValues({
+      "data-slot": "select-scroll-up-button",
+      className: cn17(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx24(ChevronUpIcon, {})
+    })
+  );
+}
+function SelectScrollDownButton(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx24(
+    SelectPrimitive.ScrollDownArrow,
+    __spreadProps(__spreadValues({
+      "data-slot": "select-scroll-down-button",
+      className: cn17(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx24(ChevronDownIcon2, {})
+    })
+  );
+}
+
+// src/components/composed/data-table/table-header-filter.tsx
+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") {
+    return true;
+  }
+  const rowValue = row.getValue(columnId);
+  if (rowValue === void 0 || rowValue === null) {
+    return false;
+  }
+  if (typeof rowValue === "boolean" || filterValue === "true" || filterValue === "false") {
+    const rowBool = typeof rowValue === "boolean" ? rowValue : String(rowValue).toLowerCase() === "true" || rowValue === 1 || rowValue === "1";
+    const targetBool = String(filterValue).toLowerCase() === "true";
+    return rowBool === targetBool;
+  }
+  const isFilterDateString = typeof filterValue === "string" && /^\d{4}-\d{2}-\d{2}/.test(filterValue);
+  const isFilterDateObj = filterValue instanceof Date;
+  if (isFilterDateString || isFilterDateObj) {
+    const targetDateStr = isFilterDateObj ? format(filterValue, "yyyy-MM-dd") : filterValue.slice(0, 10);
+    let rowDateStr = "";
+    if (rowValue instanceof Date) {
+      rowDateStr = format(rowValue, "yyyy-MM-dd");
+    } else if (typeof rowValue === "string" || typeof rowValue === "number") {
+      const parsed = new Date(rowValue);
+      if (!Number.isNaN(parsed.getTime())) {
+        rowDateStr = format(parsed, "yyyy-MM-dd");
+      }
+    }
+    if (rowDateStr) {
+      return rowDateStr === targetDateStr;
+    }
+  }
+  if (Array.isArray(rowValue)) {
+    const targetStr2 = String(filterValue).toLowerCase();
+    return rowValue.some((item) => {
+      var _a2, _b2, _c2;
+      if (item === null || item === void 0) return false;
+      const itemStr = typeof item === "object" ? String(
+        (_c2 = (_b2 = (_a2 = item.name) != null ? _a2 : item.label) != null ? _b2 : item.email) != null ? _c2 : JSON.stringify(item)
+      ) : String(item);
+      return itemStr.toLowerCase().includes(targetStr2);
+    });
+  }
+  if (typeof rowValue === "object" && !(rowValue instanceof Date)) {
+    const objStr = String(
+      (_c = (_b = (_a = rowValue.name) != null ? _a : rowValue.label) != null ? _b : rowValue.email) != null ? _c : JSON.stringify(rowValue)
+    );
+    return objStr.toLowerCase().includes(String(filterValue).toLowerCase());
+  }
+  const rowStr = String(rowValue).toLowerCase();
+  const targetStr = String(filterValue).toLowerCase();
+  return rowStr.includes(targetStr);
+}
+function getColumnUniqueOptions(column, table) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const meta = column.columnDef.meta;
+  if ((meta == null ? void 0 : meta.selectOptions) && meta.selectOptions.length > 0) {
+    return meta.selectOptions;
+  }
+  const rows = (_d = (_c = (_a = table.getCoreRowModel) == null ? void 0 : _a.call(table).rows) != null ? _c : (_b = table.getPreFilteredRowModel) == null ? void 0 : _b.call(table).rows) != null ? _d : [];
+  const uniqueSet = /* @__PURE__ */ new Set();
+  const labelMap = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const value = row.getValue(column.id);
+    if (value === null || value === void 0 || value === "") continue;
+    if (typeof value === "boolean") {
+      const str = String(value);
+      if (!uniqueSet.has(str)) {
+        uniqueSet.add(str);
+        labelMap.set(str, value ? "True / Yes" : "False / No");
+      }
+    } else if (Array.isArray(value)) {
+      for (const item of value) {
+        if (item === null || item === void 0 || item === "") continue;
+        const itemStr = typeof item === "object" ? String(
+          (_g = (_f = (_e = item.name) != null ? _e : item.label) != null ? _f : item.email) != null ? _g : JSON.stringify(item)
+        ) : String(item);
+        if (!uniqueSet.has(itemStr)) {
+          uniqueSet.add(itemStr);
+          labelMap.set(itemStr, itemStr);
+        }
+      }
+    } else if (typeof value === "object") {
+      const objStr = String(
+        (_j = (_i = (_h = value.name) != null ? _h : value.label) != null ? _i : value.email) != null ? _j : JSON.stringify(value)
+      );
+      if (!uniqueSet.has(objStr)) {
+        uniqueSet.add(objStr);
+        labelMap.set(objStr, objStr);
+      }
+    } else {
+      const str = String(value);
+      if (!uniqueSet.has(str)) {
+        uniqueSet.add(str);
+        labelMap.set(str, str);
+      }
+    }
+    if (uniqueSet.size >= 100) break;
+  }
+  return Array.from(uniqueSet).map((val) => {
+    var _a2;
+    return {
+      value: String(val),
+      label: String((_a2 = labelMap.get(val)) != null ? _a2 : val)
+    };
+  });
+}
+function getFilterVariant(column, table) {
+  var _a, _b, _c, _d;
+  const meta = column.columnDef.meta;
+  if (meta == null ? void 0 : meta.filterVariant) return meta.filterVariant;
+  const rows = (_d = (_c = (_a = table.getCoreRowModel) == null ? void 0 : _a.call(table).rows) != null ? _c : (_b = table.getPreFilteredRowModel) == null ? void 0 : _b.call(table).rows) != null ? _d : [];
+  const sampleValues = [];
+  for (const row of rows) {
+    const val = row.getValue(column.id);
+    if (val !== null && val !== void 0 && val !== "") {
+      sampleValues.push(val);
+    }
+    if (sampleValues.length >= 100) break;
+  }
+  if (sampleValues.length === 0) return "text";
+  const first = sampleValues[0];
+  if (typeof first === "boolean" || sampleValues.every(
+    (v) => typeof v === "boolean" || v === "true" || v === "false"
+  )) {
+    return "boolean";
+  }
+  if (first instanceof Date || typeof first === "string" && (first.match(/^\d{4}-\d{2}-\d{2}/) || !Number.isNaN(Date.parse(first)) && first.length >= 10 && (first.includes("-") || first.includes("/")))) {
+    return "date";
+  }
+  const uniqueCount = new Set(sampleValues.map((v) => String(v))).size;
+  if (uniqueCount > 0 && uniqueCount <= 20 && uniqueCount < sampleValues.length) {
+    return "select";
+  }
+  return "text";
+}
+function ColumnFilterInput({
+  column,
+  table,
+  headerText
+}) {
+  const [calendarOpen, setCalendarOpen] = useState3(false);
+  const filterValue = column.getFilterValue();
+  const variant = useMemo2(
+    () => getFilterVariant(column, table),
+    [column, table]
+  );
+  const options = useMemo2(() => {
+    if (variant === "boolean") {
+      return [
+        { label: "True / Yes", value: "true" },
+        { label: "False / No", value: "false" }
+      ];
+    }
+    if (variant === "select") {
+      return getColumnUniqueOptions(column, table);
+    }
+    return [];
+  }, [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__ */ jsxs14(
+      Select,
+      {
+        value: currentValue,
+        onValueChange: (val) => {
+          if (val === "all") {
+            column.setFilterValue(void 0);
+          } else {
+            column.setFilterValue(val);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx25(
+            SelectTrigger,
+            {
+              className: "w-full",
+              onKeyDown: (e) => e.stopPropagation(),
+              onPointerDown: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx25(
+                SelectValue,
+                {
+                  placeholder: `Select ${headerText.toLowerCase()}...`,
+                  className: "capitalize"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs14(SelectContent, { align: "start", children: [
+            /* @__PURE__ */ jsx25(SelectItem, { value: "all", children: "All" }),
+            options.map((opt) => /* @__PURE__ */ jsx25(
+              SelectItem,
+              {
+                value: opt.value,
+                className: "capitalize",
+                children: opt.label
+              },
+              opt.value
+            ))
+          ] })
+        ]
+      }
+    ) });
+  }
+  if (variant === "date") {
+    let dateObj;
+    if (filterValue) {
+      if (filterValue instanceof Date) {
+        dateObj = filterValue;
+      } else if (typeof filterValue === "string") {
+        const parsed = new Date(filterValue);
+        if (!Number.isNaN(parsed.getTime())) {
+          dateObj = parsed;
+        }
+      }
+    }
+    const formattedDateLabel = dateObj ? format(dateObj, "yyyy-MM-dd") : "";
+    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__ */ jsxs14(
+            Button,
+            {
+              variant: "outline",
+              className: cn13(
+                "w-full justify-start",
+                !formattedDateLabel && "text-muted-foreground"
+              ),
+              onKeyDown: (e) => e.stopPropagation(),
+              onPointerDown: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx25(CalendarIcon, { className: "mr-1 size-3 shrink-0" }),
+                /* @__PURE__ */ jsx25("span", { className: "truncate", children: formattedDateLabel || `Pick ${headerText.toLowerCase()}...` })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx25(
+        PopoverContent,
+        {
+          className: "w-auto p-0",
+          align: "start",
+          onPointerDown: (e) => e.stopPropagation(),
+          onKeyDown: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsx25(
+            Calendar,
+            {
+              mode: "single",
+              selected: dateObj,
+              onSelect: (date) => {
+                if (date) {
+                  column.setFilterValue(format(date, "yyyy-MM-dd"));
+                } else {
+                  column.setFilterValue(void 0);
+                }
+                setCalendarOpen(false);
+              }
+            }
+          )
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx25("div", { className: "relative flex items-center w-full", children: /* @__PURE__ */ jsx25(
+    Input,
+    {
+      id: `filter-${column.id}`,
+      placeholder: `Filter ${headerText.toLowerCase()}...`,
+      value: filterValue != null ? filterValue : "",
+      onChange: (e) => column.setFilterValue(e.target.value || void 0),
+      onKeyDown: (e) => e.stopPropagation(),
+      onKeyUp: (e) => e.stopPropagation(),
+      onPointerDown: (e) => e.stopPropagation()
+    }
+  ) });
+}
+function DataTableHeaderFilter({
+  table,
+  columnFilters
+}) {
+  const filterableColumns = useMemo2(
+    () => table.getAllColumns().filter(
+      (column) => typeof column.accessorFn !== "undefined" && column.getCanFilter()
+    ),
+    [table]
+  );
+  if (filterableColumns.length === 0) return null;
+  return /* @__PURE__ */ jsxs14(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs14(Tooltip, { children: [
+      /* @__PURE__ */ jsx25(
+        DropdownMenuTrigger,
+        {
+          render: /* @__PURE__ */ jsx25(
+            TooltipTrigger,
+            {
+              render: /* @__PURE__ */ jsx25(
+                Button,
+                {
+                  variant: columnFilters.length > 0 ? "secondary" : "outline",
+                  size: "icon",
+                  children: /* @__PURE__ */ jsx25(ListFilterIcon, {})
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx25(TooltipContent, { children: "Filter options" })
+    ] }),
+    /* @__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__ */ jsxs14(
+          "div",
+          {
+            className: "flex items-center justify-between px-1",
+            children: [
+              /* @__PURE__ */ jsx25(
+                "label",
+                {
+                  htmlFor: `filter-${column.id}`,
+                  className: "capitalize shrink-0 min-w-20 text-xs font-medium text-muted-foreground",
+                  children: headerText
+                }
+              ),
+              /* @__PURE__ */ jsx25("div", { className: "flex-1", children: /* @__PURE__ */ jsx25(
+                ColumnFilterInput,
+                {
+                  column,
+                  table,
+                  headerText
+                }
+              ) })
+            ]
+          },
+          column.id
+        );
+      }) }),
+      columnFilters.length > 0 && /* @__PURE__ */ jsxs14(Fragment2, { children: [
+        /* @__PURE__ */ jsx25(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx25(
+          DropdownMenuItem,
+          {
+            className: "hover:cursor-pointer text-destructive focus:text-destructive",
+            onClick: () => table.resetColumnFilters(),
+            children: "Clear Filters"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/composed/data-table/table-header-refresh.tsx
+import { RotateCwIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState as useState4 } from "react";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+function DataTableHeaderRefresh({
+  onRefresh
+}) {
+  const router = useRouter();
+  const [isRefreshing, setIsRefreshing] = useState4(false);
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    if (onRefresh) {
+      onRefresh();
+    } else {
+      router.refresh();
+    }
+    setTimeout(() => {
+      setIsRefreshing(false);
+    }, 750);
+  };
+  return /* @__PURE__ */ jsxs15(Tooltip, { children: [
+    /* @__PURE__ */ jsx26(
+      TooltipTrigger,
+      {
+        render: /* @__PURE__ */ jsx26(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            onClick: handleRefresh,
+            disabled: isRefreshing,
+            children: /* @__PURE__ */ jsx26(
+              RotateCwIcon,
+              {
+                className: cn13(
+                  "transition-transform duration-750",
+                  isRefreshing && "animate-spin"
+                )
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx26(TooltipContent, { children: "Refresh data" })
+  ] });
+}
+
+// src/components/composed/data-table/table-header-search.tsx
+import { XIcon as XIcon2 } from "lucide-react";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+function DataTableHeaderSearch({
+  value = "",
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs16("div", { className: "relative flex items-center max-w-sm w-full", children: [
+    /* @__PURE__ */ jsx27(
+      Input,
+      {
+        placeholder: "Search...",
+        value: value != null ? value : "",
+        onChange: (event) => onChange(event.target.value),
+        className: "pr-7"
+      }
+    ),
+    Boolean(value) && /* @__PURE__ */ jsx27(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(""),
+        className: "absolute right-2 text-muted-foreground hover:text-foreground p-0.5 rounded cursor-pointer",
+        "aria-label": "Clear search text",
+        children: /* @__PURE__ */ jsx27(XIcon2, { className: "size-3.5" })
+      }
+    )
+  ] });
+}
+
+// src/components/composed/data-table/table-header-sort.tsx
+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__ */ jsxs17(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs17(Tooltip, { children: [
+      /* @__PURE__ */ jsx28(
+        DropdownMenuTrigger,
+        {
+          render: /* @__PURE__ */ jsx28(
+            TooltipTrigger,
+            {
+              render: /* @__PURE__ */ jsx28(
+                Button,
+                {
+                  variant: sorting.length > 0 ? "secondary" : "outline",
+                  size: "icon",
+                  children: /* @__PURE__ */ jsx28(ArrowUpDownIcon, {})
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx28(TooltipContent, { children: "Sort options" })
+    ] }),
+    /* @__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__ */ jsxs17(
+          DropdownMenuItem,
+          {
+            className: "flex items-center justify-between hover:cursor-pointer capitalize",
+            onClick: () => {
+              if (isSorted === "asc") {
+                column.toggleSorting(true);
+              } else if (isSorted === "desc") {
+                column.clearSorting();
+              } else {
+                column.toggleSorting(false);
+              }
+            },
+            children: [
+              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__ */ jsxs17(Fragment3, { children: [
+        /* @__PURE__ */ jsx28(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx28(
+          DropdownMenuItem,
+          {
+            className: "hover:cursor-pointer text-destructive focus:text-destructive",
+            onClick: () => table.resetSorting(),
+            children: "Clear sorting"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/composed/data-table/table-header-toggle.tsx
+import { Columns3CogIcon } from "lucide-react";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+function DataTableHeaderToggle({
+  table
+}) {
+  return /* @__PURE__ */ jsxs18(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs18(Tooltip, { children: [
+      /* @__PURE__ */ jsx29(
+        DropdownMenuTrigger,
+        {
+          render: /* @__PURE__ */ jsx29(
+            TooltipTrigger,
+            {
+              render: /* @__PURE__ */ jsx29(Button, { variant: "outline", size: "icon", children: /* @__PURE__ */ jsx29(Columns3CogIcon, {}) })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx29(TooltipContent, { children: "Toggle columns" })
+    ] }),
+    /* @__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(
+        (column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
+      ).map((column) => {
+        const headerText = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+        return /* @__PURE__ */ jsx29(
+          DropdownMenuCheckboxItem,
+          {
+            className: "capitalize hover:cursor-pointer",
+            checked: column.getIsVisible(),
+            onCheckedChange: (value) => column.toggleVisibility(!!value),
+            children: headerText
+          },
+          column.id
+        );
+      })
+    ] }) })
+  ] });
+}
+
+// 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 jsxs19 } from "react/jsx-runtime";
+function RowActions({
+  label = "Actions",
+  items = [],
+  triggerIcon,
+  triggerLabel = "Open action menu",
+  align = "end",
+  containerClassName,
+  contentClassName
+}) {
+  const visibleItems = items.filter((item) => !item.hidden);
+  if (visibleItems.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx30(
+    "div",
+    {
+      className: cn13("flex items-center justify-end w-full", containerClassName),
+      children: /* @__PURE__ */ jsxs19(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx30(
+          DropdownMenuTrigger,
+          {
+            render: /* @__PURE__ */ jsx30(Button, { variant: "ghost", size: "icon-xs", "aria-label": triggerLabel, children: triggerIcon != null ? triggerIcon : /* @__PURE__ */ jsx30(MoreHorizontal, { className: "size-4" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx30(
+          DropdownMenuContent,
+          {
+            align,
+            className: cn13("w-40", contentClassName),
+            children: /* @__PURE__ */ jsxs19(DropdownMenuGroup, { children: [
+              label && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+                /* @__PURE__ */ jsx30(DropdownMenuLabel, { children: label }),
+                /* @__PURE__ */ jsx30(DropdownMenuSeparator, {})
+              ] }),
+              visibleItems.map((item, index) => {
+                var _a;
+                const itemKey = (_a = item.id) != null ? _a : `${item.label}-${index}`;
+                const isDestructive = item.variant === "destructive";
+                return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+                  item.separatorBefore && /* @__PURE__ */ jsx30(DropdownMenuSeparator, {}),
+                  /* @__PURE__ */ jsxs19(
+                    DropdownMenuItem,
+                    {
+                      onClick: item.onClick,
+                      disabled: item.disabled,
+                      className: cn13(
+                        "hover:cursor-pointer flex items-center gap-2",
+                        isDestructive && "text-destructive focus:text-destructive",
+                        item.className
+                      ),
+                      children: [
+                        item.icon && /* @__PURE__ */ jsx30("span", { className: "size-4 shrink-0 flex items-center justify-center", children: item.icon }),
+                        /* @__PURE__ */ jsx30("span", { children: item.label })
+                      ]
+                    }
+                  ),
+                  item.separatorAfter && /* @__PURE__ */ jsx30(DropdownMenuSeparator, {})
+                ] }, itemKey);
+              })
+            ] })
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/composed/data-table/data-table.tsx
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  data,
+  initialColumnVisibility,
+  renderCreateDialog,
+  addLabel,
+  onRefresh,
+  onDownload,
+  exportFilename = "data-export",
+  showSearchInput = true,
+  showRefreshButton = true,
+  showSortButton = true,
+  showFilterButton = true,
+  showDownloadButton = true,
+  showColumnToggleButton = true,
+  showAddButton = true
+}) {
+  const [createOpen, setCreateOpen] = useState5(false);
+  const [sorting, setSorting] = useState5([]);
+  const [columnFilters, setColumnFilters] = useState5([]);
+  const [columnVisibility, setColumnVisibility] = useState5(initialColumnVisibility != null ? initialColumnVisibility : {});
+  const [globalFilter, setGlobalFilter] = useState5("");
+  const columnsWithSmartFilters = useMemo3(() => {
+    return columns.map((col) => __spreadValues({
+      filterFn: smartFilterFn
+    }, col));
+  }, [columns]);
+  const table = useTable({
+    features,
+    data,
+    columns: columnsWithSmartFilters,
+    initialState: {
+      globalFilter: ""
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: (updater) => {
+      setGlobalFilter((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        return next != null ? next : "";
+      });
+    },
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      globalFilter: globalFilter != null ? globalFilter : ""
+    }
+  });
+  if (data.length === 0) {
+    const hasCreateAction = Boolean(renderCreateDialog);
+    const hasRefreshAction = Boolean(onRefresh);
+    return /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx31(
+        StateEmpty,
+        {
+          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__ */ 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
+        }
+      ) : /* @__PURE__ */ jsx31("div", {}),
+      /* @__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(
+          DataTableHeaderFilter,
+          {
+            table,
+            columnFilters
+          }
+        ),
+        showDownloadButton && /* @__PURE__ */ jsx31(
+          DataTableHeaderDownload,
+          {
+            table,
+            exportFilename,
+            onDownload
+          }
+        ),
+        showColumnToggleButton && /* @__PURE__ */ jsx31(DataTableHeaderToggle, { table }),
+        showAddButton && renderCreateDialog && /* @__PURE__ */ jsx31(
+          DataTableHeaderAdd,
+          {
+            onAdd: () => setCreateOpen(true),
+            addLabel
+          }
+        )
+      ] })
+    ] }),
+    renderCreateDialog == null ? void 0 : renderCreateDialog(createOpen, setCreateOpen),
+    /* @__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 })
+    ] }) }),
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ jsx31(DataTableFooterEntries, { table }),
+      /* @__PURE__ */ jsx31(DataTableFooterPagination, { table })
+    ] })
+  ] });
+}
+
+// src/components/composed/header-tabs.tsx
+import Link2 from "next/link";
+import { usePathname as usePathname2 } from "next/navigation";
+import { memo as memo3 } from "react";
+
+// src/components/ui/tabs.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva as cva4 } from "class-variance-authority";
+import { cn as cn18 } from "cn";
+import { jsx as jsx32 } from "react/jsx-runtime";
+function Tabs(_a) {
+  var _b = _a, {
+    className,
+    orientation = "horizontal"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "orientation"
+  ]);
+  return /* @__PURE__ */ jsx32(
+    TabsPrimitive.Root,
+    __spreadValues({
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn18(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )
+    }, props)
+  );
+}
+var tabsListVariants = cva4(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList(_a) {
+  var _b = _a, {
+    className,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant"
+  ]);
+  return /* @__PURE__ */ jsx32(
+    TabsPrimitive.List,
+    __spreadValues({
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn18(tabsListVariants({ variant }), className)
+    }, props)
+  );
+}
+function TabsTrigger(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx32(
+    TabsPrimitive.Tab,
+    __spreadValues({
+      "data-slot": "tabs-trigger",
+      className: cn18(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/components/composed/header-tabs.tsx
+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) {
+    const IconComp = icon;
+    return /* @__PURE__ */ jsx33(IconComp, {});
+  }
+  return icon;
+}
+var HeaderTabs = memo3(function HeaderTabs2({
+  items,
+  value,
+  onValueChange,
+  children
+}) {
+  var _a, _b;
+  const pathname = usePathname2();
+  const matchedItem = pathname ? items.find(
+    (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__ */ 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,
+        render: /* @__PURE__ */ jsx33(Link2, { href: url }),
+        value: tabValue,
+        children: [
+          renderTabIcon(icon),
+          title
+        ]
+      },
+      tabValue
+    )) }) }),
+    children
+  ] });
+});
+
+// src/components/composed/header-title.tsx
+import { memo as memo4 } from "react";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+var HeaderTitle = memo4(function HeaderTitle2({
+  title,
+  subtitle,
+  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 })
+    ] }),
+    children
   ] });
 });
 export {
   AppSidebar,
+  DataTable,
+  DataTableContentBody,
+  DataTableContentHeader,
+  DataTableFooterEntries,
+  DataTableFooterPagination,
+  DataTableHeaderAdd,
+  DataTableHeaderDownload,
+  DataTableHeaderFilter,
+  DataTableHeaderRefresh,
+  DataTableHeaderSearch,
+  DataTableHeaderSort,
+  DataTableHeaderToggle,
   HeaderTabs,
   HeaderTitle,
-  StateEmpty
+  RowActions,
+  StateEmpty,
+  exportToCSV,
+  exportToPDF,
+  exportToXLSX,
+  features,
+  flexRender3 as flexRender,
+  getTableExportData,
+  printTable,
+  smartFilterFn,
+  useTable
 };