@algorithm-shift/design-system 1.2.65 → 1.2.66

package/dist/index.mjs

@@ -157,7 +157,7 @@ function TabList({
 }
 
 // src/components/Layout/TabGroup.tsx
-import { useMemo } from "react";
+import { useEffect as useEffect2, useMemo } from "react";
 import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 function TabGroupComponent({
   children,
@@ -167,6 +167,11 @@ function TabGroupComponent({
   activeTab,
   onTabChange
 }) {
+  useEffect2(() => {
+    if (list && list.length > 0 && !activeTab && onTabChange) {
+      onTabChange(list[0]?.tabId);
+    }
+  }, [list, activeTab, onTabChange]);
   const formatedList = useMemo(
     () => Array.isArray(list) ? [...list].sort((a, b) => (a.orderNumber ?? 0) - (b.orderNumber ?? 0)) : [],
     [list]
@@ -26820,7 +26825,7 @@ var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize
 var Icon_default = Icon2;
 
 // src/components/Inputs/TextInput/TextInput.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 
 // src/components/ui/input.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
@@ -26849,7 +26854,7 @@ var TextInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect2(() => {
+  useEffect3(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -26883,7 +26888,7 @@ var TextInput = ({ className, style, ...props }) => {
 var TextInput_default = TextInput;
 
 // src/components/Inputs/NumberInput/NumberInput.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var NumberInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -26891,7 +26896,7 @@ var NumberInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect3(() => {
+  useEffect4(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -26929,7 +26934,7 @@ var NumberInput = ({ className, style, ...props }) => {
 var NumberInput_default = NumberInput;
 
 // src/components/Inputs/EmailInput/EmailInput.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var EmailInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -26937,7 +26942,7 @@ var EmailInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect4(() => {
+  useEffect5(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -26974,7 +26979,7 @@ var EmailInput = ({ className, style, ...props }) => {
 var EmailInput_default = EmailInput;
 
 // src/components/Inputs/PasswordInput/PasswordInput.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 var PasswordInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -26982,7 +26987,7 @@ var PasswordInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect5(() => {
+  useEffect6(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27020,7 +27025,7 @@ var PasswordInput = ({ className, style, ...props }) => {
 var PasswordInput_default = PasswordInput;
 
 // src/components/Inputs/Textarea/Textarea.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 
 // src/components/ui/textarea.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -27046,7 +27051,7 @@ var Textarea2 = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect6(() => {
+  useEffect7(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27080,7 +27085,7 @@ var Textarea2 = ({ className, style, ...props }) => {
 var Textarea_default = Textarea2;
 
 // src/components/Inputs/UrlInput/UrlInput.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 var UrlInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27088,7 +27093,7 @@ var UrlInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect7(() => {
+  useEffect8(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27126,7 +27131,7 @@ var UrlInput = ({ className, style, ...props }) => {
 var UrlInput_default = UrlInput;
 
 // src/components/Inputs/Checkbox/Checkbox.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 
 // src/components/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
@@ -27182,7 +27187,7 @@ var CheckboxInput = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const text = props.text ? props.text : "Subscribe";
-  useEffect8(() => {
+  useEffect9(() => {
     if (props.value) {
       handleChange(props.value);
     }
@@ -27209,7 +27214,7 @@ var CheckboxInput = ({ className, style, ...props }) => {
 var Checkbox_default = CheckboxInput;
 
 // src/components/Inputs/RadioInput/RadioInput.tsx
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 
 // src/components/ui/radio-group.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
@@ -27269,7 +27274,7 @@ var RadioInput = ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
-  useEffect9(() => {
+  useEffect10(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -27299,7 +27304,7 @@ var RadioInput = ({
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-import { useCallback, useEffect as useEffect10, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect11, useState as useState2 } from "react";
 import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 var MultiCheckbox = ({
   className,
@@ -27318,7 +27323,7 @@ var MultiCheckbox = ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
   }));
-  useEffect10(() => {
+  useEffect11(() => {
     if (propValue !== void 0) {
       onChange?.(propValue);
     }
@@ -27359,7 +27364,7 @@ var MultiCheckbox = ({
 var MultiCheckbox_default = MultiCheckbox;
 
 // src/components/Inputs/RichText/RichText.tsx
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 
 // src/components/Global/TinyMceEditor.tsx
 import { useMemo as useMemo2, useRef } from "react";
@@ -27435,7 +27440,7 @@ function MyEditor({
 // src/components/Inputs/RichText/RichText.tsx
 import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
 function RichText({ className, style, ...props }) {
-  useEffect11(() => {
+  useEffect12(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -27460,7 +27465,7 @@ function RichText({ className, style, ...props }) {
 }
 
 // src/components/Inputs/Dropdown/Dropdown.tsx
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 
 // src/components/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
@@ -27596,7 +27601,7 @@ var Dropdown = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
-  useEffect12(() => {
+  useEffect13(() => {
     if (props.value !== void 0) {
       handleChange(props.value);
     }
@@ -27637,7 +27642,7 @@ var Dropdown = ({ className, style, ...props }) => {
 var Dropdown_default = Dropdown;
 
 // src/components/Inputs/SwitchToggle/SwitchToggle.tsx
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 
 // src/components/ui/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
@@ -27673,7 +27678,7 @@ import { Fragment as Fragment11, jsx as jsx37, jsxs as jsxs19 } from "react/jsx-
 var SwitchToggle = ({ className, style, ...props }) => {
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  useEffect13(() => {
+  useEffect14(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -27700,7 +27705,7 @@ var SwitchToggle = ({ className, style, ...props }) => {
 var SwitchToggle_default = SwitchToggle;
 
 // src/components/Inputs/PhoneInput/PhoneInput.tsx
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect15 } from "react";
 import { PhoneInput as PhoneInputField } from "react-international-phone";
 import "react-international-phone/style.css";
 import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -27708,7 +27713,7 @@ var PhoneInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Enter phone number";
   const isEditable = props.isEditable ?? true;
   const isDisabled = props.isDisabled ?? false;
-  useEffect14(() => {
+  useEffect15(() => {
     if (props.value !== void 0) {
       handleChange?.(props.value);
     }
@@ -27724,7 +27729,7 @@ var PhoneInput = ({ className, style, ...props }) => {
         name: props.name,
         value: props.value || "",
         className: cn(
-          "rounded-md",
+          "rounded-md border-1",
           className,
           props.errorMessage ? "border-red-500" : ""
         ),
@@ -27747,7 +27752,7 @@ var PhoneInput = ({ className, style, ...props }) => {
 var PhoneInput_default = PhoneInput;
 
 // src/components/Inputs/SearchInput/SearchInput.tsx
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 var SearchInput = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27755,7 +27760,7 @@ var SearchInput = ({ className, style, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect15(() => {
+  useEffect16(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27793,11 +27798,11 @@ var SearchInput = ({ className, style, ...props }) => {
 var SearchInput_default = SearchInput;
 
 // src/components/Inputs/FileInput/FileInput.tsx
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
 var FileInput2 = ({ className, style, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
-  useEffect16(() => {
+  useEffect17(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -27830,7 +27835,7 @@ var FileInput2 = ({ className, style, ...props }) => {
 var FileInput_default = FileInput2;
 
 // src/components/Inputs/DatePicker/DatePicker.tsx
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 function DatePicker({ className, style, ...props }) {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -27856,7 +27861,7 @@ function DatePicker({ className, style, ...props }) {
   };
   const minDate = resolveDate(minimumDate, customMinimumDate);
   const maxDate = resolveDate(maximumDate, customMaximumDate);
-  useEffect17(() => {
+  useEffect18(() => {
     if (props.value !== void 0) {
       handleChange(props.value);
     }
@@ -27902,7 +27907,7 @@ function DatePicker({ className, style, ...props }) {
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-import React5, { useEffect as useEffect19 } from "react";
+import React5, { useEffect as useEffect20 } from "react";
 import { addDays, format } from "date-fns";
 
 // src/components/ui/calendar.tsx
@@ -28130,7 +28135,7 @@ var DateRange = ({ className, style, ...props }) => {
       to: addDays(/* @__PURE__ */ new Date(), 7)
     }
   );
-  useEffect19(() => {
+  useEffect20(() => {
     if (props.value && isDateRange(props.value)) {
       handleChange?.(props.value);
     }
@@ -28177,7 +28182,7 @@ var DateRange = ({ className, style, ...props }) => {
 var DateRange_default = DateRange;
 
 // src/components/Inputs/TextInputGroup/TextInputGroup.tsx
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const placeholder = props.placeholder ?? "Placeholder text";
@@ -28185,7 +28190,7 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
   const isDisabled = props.isDisabled ?? false;
   const isReadonly = props.isReadonly ?? false;
   const isAutocomplete = props.isAutocomplete ?? false;
-  useEffect20(() => {
+  useEffect21(() => {
     if (props.value !== void 0) {
       const e = { target: { value: props.value } };
       handleChange?.(e);
@@ -28245,7 +28250,6 @@ import {
   flexRender,
   getCoreRowModel,
   getPaginationRowModel,
-  getSortedRowModel,
   getFilteredRowModel,
   useReactTable
 } from "@tanstack/react-table";
@@ -28346,16 +28350,20 @@ function DataTable({
   onPageChange,
   pageSize = 10,
   paginationMode = "client",
-  totalRecords = 0
+  totalRecords = 0,
+  onSortChange,
+  onFilterChange,
+  onGlobalSearch,
+  globalSearch
 }) {
-  const [sorting, setSorting] = React6.useState([]);
   const [columnFilters, setColumnFilters] = React6.useState([]);
   const [columnVisibility, setColumnVisibility] = React6.useState({});
+  const [manualSort, setManualSort] = React6.useState(null);
+  const [searchTerm, setSearchTerm] = React6.useState("");
   const table = useReactTable({
     data,
     columns,
     state: {
-      sorting,
       columnFilters,
       columnVisibility,
       pagination: {
@@ -28363,11 +28371,9 @@ function DataTable({
         pageSize
       }
     },
-    onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: pagination && paginationMode === "client" ? getPaginationRowModel() : void 0,
     manualPagination: paginationMode === "server",
@@ -28397,68 +28403,105 @@ function DataTable({
     }
     return [];
   };
-  return /* @__PURE__ */ jsxs26("div", { className: "overflow-hidden rounded-md border w-full", children: [
-    /* @__PURE__ */ jsx47("div", { className: "flex justify-end p-2", children: /* @__PURE__ */ jsxs26(Popover, { children: [
-      /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          className: "px-3 py-1 text-xs cursor-pointer",
-          children: "Manage Columns"
-        }
-      ) }),
-      /* @__PURE__ */ jsxs26(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
-        /* @__PURE__ */ jsx47("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
-        /* @__PURE__ */ jsxs26("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+  return /* @__PURE__ */ jsxs26("div", { className: "overflow-hidden rounded-md w-full", children: [
+    /* @__PURE__ */ jsxs26("div", { className: `flex ${globalSearch ? "justify-between" : "justify-end"} p-2 border-b bg-gray-50`, children: [
+      globalSearch && /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2 w-full max-w-sm", children: [
+        /* @__PURE__ */ jsxs26("div", { className: "relative w-full", children: [
           /* @__PURE__ */ jsx47(
             "input",
             {
-              type: "checkbox",
-              checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
-              ref: (input) => {
-                if (input) {
-                  input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
+              type: "text",
+              placeholder: "Search...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && onGlobalSearch) {
+                  onGlobalSearch(searchTerm.trim());
                 }
               },
-              onChange: (e) => {
-                table.getAllLeafColumns().forEach(
-                  (col) => col.toggleVisibility(e.target.checked)
-                );
-              }
+              className: "border border-gray-300 rounded-md text-sm px-3 py-2 pl-8 w-full focus:outline-none focus:ring-1 focus:ring-[#12715B]"
             }
           ),
-          "Toggle All"
+          /* @__PURE__ */ jsx47(Search, { className: "absolute left-2 top-2.5 text-gray-400", size: 16 })
         ] }),
-        table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsxs26("label", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ jsx47(
-            "input",
-            {
-              type: "checkbox",
-              checked: column.getIsVisible(),
-              onChange: (e) => column.toggleVisibility(e.target.checked)
-            }
-          ),
-          column.columnDef.header?.toString() ?? column.id
-        ] }, column.id))
+        /* @__PURE__ */ jsx47(
+          Button,
+          {
+            size: "sm",
+            className: "bg-[#12715B] text-white text-xs h-auto py-2 px-3",
+            onClick: () => onGlobalSearch?.(searchTerm.trim()),
+            children: "Search"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs26(Popover, { children: [
+        /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "px-3 py-1 text-xs cursor-pointer",
+            children: "Manage Columns"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs26(PopoverContent, { align: "end", className: "w-48 p-3 space-y-2", children: [
+          /* @__PURE__ */ jsx47("div", { className: "text-sm font-medium mb-2", children: "Show / Hide Columns" }),
+          /* @__PURE__ */ jsxs26("label", { className: "flex items-center gap-2 text-sm font-semibold border-b pb-2 mb-2", children: [
+            /* @__PURE__ */ jsx47(
+              "input",
+              {
+                type: "checkbox",
+                checked: table.getAllLeafColumns().every((col) => col.getIsVisible()),
+                ref: (input) => {
+                  if (input) {
+                    input.indeterminate = table.getAllLeafColumns().some((col) => col.getIsVisible()) && !table.getAllLeafColumns().every((col) => col.getIsVisible());
+                  }
+                },
+                onChange: (e) => {
+                  table.getAllLeafColumns().forEach(
+                    (col) => col.toggleVisibility(e.target.checked)
+                  );
+                }
+              }
+            ),
+            "Toggle All"
+          ] }),
+          table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsxs26("label", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx47(
+              "input",
+              {
+                type: "checkbox",
+                checked: column.getIsVisible(),
+                onChange: (e) => column.toggleVisibility(e.target.checked)
+              }
+            ),
+            column.columnDef.header?.toString() ?? column.id
+          ] }, column.id))
+        ] })
       ] })
-    ] }) }),
+    ] }),
     /* @__PURE__ */ jsxs26(Table3, { children: [
       /* @__PURE__ */ jsx47(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx47(TableRow, { children: hg.headers.map((header) => {
         const canSort = header.column.getCanSort();
         const canFilter = header.column.getCanFilter();
+        const sortDir = manualSort?.key === header.column.id ? manualSort.dir : null;
         return /* @__PURE__ */ jsx47(TableHead, { className: "relative select-none", children: /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs26(
             "span",
             {
               className: `flex items-center gap-1 ${canSort ? "cursor-pointer" : ""}`,
-              onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
+              onClick: () => {
+                if (!canSort) return;
+                const newDir = manualSort?.key === header.column.id && manualSort.dir === "asc" ? "desc" : "asc";
+                setManualSort({ key: header.column.id, dir: newDir });
+                onSortChange?.(header.column.id, newDir);
+              },
               children: [
                 flexRender(header.column.columnDef.header, header.getContext()),
                 canSort && /* @__PURE__ */ jsxs26(Fragment17, { children: [
-                  header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx47(ArrowUp, { size: 14, className: "text-gray-500" }),
-                  header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx47(ArrowDown, { size: 14, className: "text-gray-500" }),
-                  !header.column.getIsSorted() && /* @__PURE__ */ jsx47(ArrowUpDown, { size: 14, className: "text-gray-400" })
+                  sortDir === "asc" && /* @__PURE__ */ jsx47(ArrowUp, { size: 14, className: "text-gray-500" }),
+                  sortDir === "desc" && /* @__PURE__ */ jsx47(ArrowDown, { size: 14, className: "text-gray-500" }),
+                  !sortDir && /* @__PURE__ */ jsx47(ArrowUpDown, { size: 14, className: "text-gray-400" })
                 ] })
               ]
             }
@@ -28476,8 +28519,8 @@ function DataTable({
             /* @__PURE__ */ jsx47(
               PopoverContent,
               {
-                align: "start",
-                sideOffset: 4,
+                align: "center",
+                sideOffset: 14,
                 className: "w-50 p-3 z-[200] border-gray-300",
                 avoidCollisions: true,
                 children: /* @__PURE__ */ jsxs26(
@@ -28486,8 +28529,10 @@ function DataTable({
                     onSubmit: (e) => {
                       e.preventDefault();
                       const formData = new FormData(e.currentTarget);
-                      const value = formData.get("filter");
-                      header.column.setFilterValue(value || void 0);
+                      const value = formData.get("filter") || "";
+                      if (onFilterChange && value) {
+                        onFilterChange({ columnKey: header.column.id, columnTerm: value });
+                      }
                     },
                     className: "space-y-2",
                     children: [
@@ -28577,9 +28622,13 @@ var Table4 = ({
   paginationMode = "client",
   itemsPerPage = 10,
   onPageChange,
+  onSortChange,
+  onFilterChange,
+  onGlobalSearch,
   page,
   loading = false,
   totalRecords = 0,
+  globalSearch = false,
   ...props
 }) => {
   const rawColumns = Array.isArray(columns) ? columns : [];
@@ -28600,7 +28649,11 @@ var Table4 = ({
         onPageChange?.({ page: pageIndex + 1, itemsPerPage: pageSize });
       },
       paginationMode,
-      totalRecords
+      totalRecords,
+      onSortChange: (col, dir) => onSortChange?.({ sort_by: col, sort_order: dir }),
+      onFilterChange: (filters) => onFilterChange?.({ columnKey: filters.columnKey, columnTerm: filters.columnTerm }),
+      onGlobalSearch: (term) => onGlobalSearch?.({ searchTerm: term }),
+      globalSearch
     }
   ) });
 };
@@ -28997,20 +29050,20 @@ function Navbar({
   userName = "Guest User"
 }) {
   const isMobileView = canvasMode === "mobile" || canvasMode === "tablet";
-  return /* @__PURE__ */ jsx58("nav", { className: "w-full border-b bg-white shadow-sm", style, children: /* @__PURE__ */ jsxs33("div", { className: "mx-auto flex max-w-7xl items-center justify-between px-4 py-4", children: [
+  return /* @__PURE__ */ jsx58("nav", { className: "w-full border-b border-b-white dark:border-b-gray-800 dark:bg-gray-800 bg-white shadow-sm", style, children: /* @__PURE__ */ jsxs33("div", { className: "mx-auto flex max-w-[90%] items-center justify-between px-4 py-4", children: [
     /* @__PURE__ */ jsx58(Link6, { href: "/", className: "flex items-center space-x-2", children: imageUrl ? /* @__PURE__ */ jsx58(Image3, { src: imageUrl, alt: altText, width: 200, height: 200 }) : /* @__PURE__ */ jsx58("span", { className: "font-semibold text-blue-700", children: "Logo" }) }),
     !isMobileView && /* @__PURE__ */ jsx58("div", { className: "flex items-center space-x-6 sm:hidden md:flex", children: list.map((item) => /* @__PURE__ */ jsx58(
       Link6,
       {
         href: item.url || "#",
-        className: "text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors",
+        className: "text-sm font-medium dark:text-white text-gray-600 hover:text-gray-900 transition-colors",
         children: item.header
       },
       item.id
     )) }),
     /* @__PURE__ */ jsxs33("div", { className: "flex items-center space-x-3", children: [
       !isMobileView ? /* @__PURE__ */ jsx58("div", { className: "flex-1 px-6", children: /* @__PURE__ */ jsxs33("div", { className: "relative w-full max-w-md border border-gray-300 rounded-md", children: [
-        /* @__PURE__ */ jsx58(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
+        /* @__PURE__ */ jsx58(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dark:text-white text-gray-400" }),
         /* @__PURE__ */ jsx58(Input, { placeholder: "Search", className: "pl-9 text-gray-400" })
       ] }) }) : /* @__PURE__ */ jsx58(
         Button,
@@ -29021,13 +29074,13 @@ function Navbar({
           children: /* @__PURE__ */ jsx58(Search, { className: "h-5 w-5 text-gray-400" })
         }
       ),
-      /* @__PURE__ */ jsxs33("div", { className: "relative bg-[#E9E9E9] rounded-md", children: [
-        /* @__PURE__ */ jsx58(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx58(Bell, { className: "h-5 w-5 text-[#1C1B1F]" }) }),
+      /* @__PURE__ */ jsxs33("div", { className: "relative bg-[#E9E9E9] dark:bg-gray-700 rounded-md", children: [
+        /* @__PURE__ */ jsx58(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx58(Bell, { className: "h-5 w-5 text-[#1C1B1F] dark:text-gray-400" }) }),
         badgeType === "number" && !(hideBadgeWhenZero && badgeCount === 0) && Number(badgeCount) > 0 ? /* @__PURE__ */ jsx58("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white leading-8", children: badgeCount }) : /* @__PURE__ */ jsx58("span", { className: "absolute -top-1 -right-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500" })
       ] }),
       /* @__PURE__ */ jsxs33(DropdownMenu, { children: [
         /* @__PURE__ */ jsx58(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center space-x-2", children: [
-          !isMobileView && showName && /* @__PURE__ */ jsx58("h4", { className: "text-[#000000] text-[13px] font-[500] mb-0", children: userName }),
+          !isMobileView && showName && /* @__PURE__ */ jsx58("h4", { className: "text-[#000000] dark:text-gray-300 text-[13px] font-[500] mb-0", children: userName }),
           !isMobileView ? /* @__PURE__ */ jsxs33(Fragment18, { children: [
             /* @__PURE__ */ jsx58(Avatar, { className: "cursor-pointer h-8 w-8 text-gray-900", children: profileType === "avatar" ? /* @__PURE__ */ jsx58(
               AvatarImage,
@@ -29041,7 +29094,7 @@ function Navbar({
               {
                 variant: "ghost",
                 size: "icon",
-                className: "text-gray-900 md:hidden",
+                className: "text-gray-900 md:hidden dark:invert",
                 children: /* @__PURE__ */ jsx58(Menu, { className: "h-6 w-6" })
               }
             )
@@ -29050,16 +29103,16 @@ function Navbar({
             {
               variant: "ghost",
               size: "icon",
-              className: "text-gray-900",
+              className: "text-gray-900 dark:invert",
               children: /* @__PURE__ */ jsx58(Menu, { className: "h-6 w-6" })
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxs33(DropdownMenuContent, { align: "end", className: "bg-white", children: [
-          profileMenu && profileMenu.length > 0 && /* @__PURE__ */ jsx58(Fragment18, { children: profileMenu.map((item) => /* @__PURE__ */ jsx58(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ jsx58(Link6, { href: item.url || "#", children: item.header }) }, item.id)) }),
+        /* @__PURE__ */ jsxs33(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-gray-800", children: [
+          profileMenu && profileMenu.length > 0 && /* @__PURE__ */ jsx58(Fragment18, { children: profileMenu.map((item) => /* @__PURE__ */ jsx58(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx58(Link6, { href: item.url || "#", children: item.header }) }, item.id)) }),
           /* @__PURE__ */ jsxs33("div", { className: "md:hidden", children: [
             /* @__PURE__ */ jsx58(DropdownMenuSeparator, {}),
-            list && list.length > 0 && /* @__PURE__ */ jsx58(Fragment18, { children: list.map((item) => /* @__PURE__ */ jsx58(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ jsx58(Link6, { href: item.url || "#", children: item.header }) }, item.id)) })
+            list && list.length > 0 && /* @__PURE__ */ jsx58(Fragment18, { children: list.map((item) => /* @__PURE__ */ jsx58(DropdownMenuItem, { className: "text-black dark:invert", children: /* @__PURE__ */ jsx58(Link6, { href: item.url || "#", children: item.header }) }, item.id)) })
           ] })
         ] })
       ] })