@underverse-ui/underverse 0.2.72 → 0.2.74

package/dist/index.cjs

@@ -2129,6 +2129,7 @@ function SmartImage({
   src,
   alt,
   className,
+  imageClassName,
   ratioClass,
   roundedClass = "rounded-2xl md:rounded-3xl",
   fill = true,
@@ -2197,7 +2198,8 @@ function SmartImage({
         onError: handleError,
         priority,
         quality,
-        style: { objectFit: fit, objectPosition }
+        style: { objectFit: fit, objectPosition },
+        className: cn("transition-all duration-300", imageClassName)
       }
     ) });
   }
@@ -2221,7 +2223,8 @@ function SmartImage({
           onError: handleError,
           priority,
           quality,
-          style: { objectFit: fit, objectPosition, width: "100%", height: "100%" }
+          style: { objectFit: fit, objectPosition, width: "100%", height: "100%" },
+          className: cn("transition-all duration-300", imageClassName)
         }
       )
     }
@@ -13048,10 +13051,183 @@ TableCell.displayName = "TableCell";
 var TableCaption = import_react31.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
 TableCaption.displayName = "TableCaption";
 
-// ../../components/ui/DataTable.tsx
+// ../../components/ui/DataTable/DataTable.tsx
 var import_lucide_react27 = require("lucide-react");
-var import_react32 = __toESM(require("react"), 1);
+var import_react35 = __toESM(require("react"), 1);
+
+// ../../components/ui/DataTable/components/Pagination.tsx
 var import_jsx_runtime57 = require("react/jsx-runtime");
+function DataTablePagination({
+  totalItems,
+  curPage,
+  curPageSize,
+  setCurPage,
+  pageSizeOptions,
+  setCurPageSize
+}) {
+  const totalPages = Math.ceil(totalItems / curPageSize);
+  if (!(totalItems > 0 && totalPages > 1)) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between gap-2 px-1 pt-3 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "tabular-nums", children: [
+      (curPage - 1) * curPageSize + 1,
+      "-",
+      Math.min(curPage * curPageSize, totalItems),
+      "/",
+      totalItems
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        Button_default,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "h-7 w-7 p-0 rounded-full",
+          onClick: () => setCurPage(Math.max(1, curPage - 1)),
+          disabled: curPage === 1,
+          children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+        }
+      ),
+      (() => {
+        const pages = [];
+        if (totalPages <= 5) {
+          for (let i = 1; i <= totalPages; i++) pages.push(i);
+        } else {
+          pages.push(1);
+          if (curPage > 3) pages.push("...");
+          const start = Math.max(2, curPage - 1);
+          const end = Math.min(totalPages - 1, curPage + 1);
+          for (let i = start; i <= end; i++) pages.push(i);
+          if (curPage < totalPages - 2) pages.push("...");
+          pages.push(totalPages);
+        }
+        return pages.map(
+          (p, i) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "px-1 text-muted-foreground/60", children: "\u2026" }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "button",
+            {
+              onClick: () => setCurPage(p),
+              className: cn(
+                "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors",
+                curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"
+              ),
+              children: p
+            },
+            p
+          )
+        );
+      })(),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        Button_default,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "h-7 w-7 p-0 rounded-full",
+          onClick: () => setCurPage(Math.min(totalPages, curPage + 1)),
+          disabled: curPage === totalPages,
+          children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+        }
+      )
+    ] }),
+    pageSizeOptions && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      Combobox,
+      {
+        options: pageSizeOptions.map(String),
+        value: String(curPageSize),
+        onChange: (v) => {
+          setCurPage(1);
+          setCurPageSize(Number(v));
+        },
+        size: "sm",
+        className: "w-20"
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/DataTable/components/Toolbar.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function DataTableToolbar({
+  caption,
+  toolbar,
+  columns,
+  visibleCols,
+  setVisibleCols,
+  enableDensityToggle,
+  enableColumnVisibilityToggle,
+  enableHeaderAlignToggle,
+  density,
+  setDensity,
+  setHeaderAlign,
+  labels,
+  t
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2", children: [
+      enableDensityToggle && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        DropdownMenu_default,
+        {
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+            labels?.density || t("density")
+          ] }),
+          items: [
+            { label: labels?.compact || t("compact"), onClick: () => setDensity("compact") },
+            { label: labels?.normal || t("normal"), onClick: () => setDensity("normal") },
+            { label: labels?.comfortable || t("comfortable"), onClick: () => setDensity("comfortable") }
+          ]
+        }
+      ),
+      enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        DropdownMenu_default,
+        {
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
+              }
+            ) }),
+            labels?.columns || t("columns")
+          ] }),
+          children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+            DropdownMenuItem,
+            {
+              onClick: () => {
+                setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "truncate", children: c.title })
+              ]
+            },
+            c.key
+          ))
+        }
+      ),
+      enableHeaderAlignToggle && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        DropdownMenu_default,
+        {
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
+            labels?.headerAlign || t("headerAlign")
+          ] }),
+          items: [
+            { label: labels?.alignLeft || t("alignLeft"), onClick: () => setHeaderAlign("left") },
+            { label: labels?.alignCenter || t("alignCenter"), onClick: () => setHeaderAlign("center") },
+            { label: labels?.alignRight || t("alignRight"), onClick: () => setHeaderAlign("right") }
+          ]
+        }
+      ),
+      toolbar
+    ] })
+  ] });
+}
+
+// ../../components/ui/DataTable/hooks/useDebounced.ts
+var import_react32 = __toESM(require("react"), 1);
 function useDebounced(value, delay = 300) {
   const [debounced, setDebounced] = import_react32.default.useState(value);
   import_react32.default.useEffect(() => {
@@ -13060,40 +13236,12 @@ function useDebounced(value, delay = 300) {
   }, [value, delay]);
   return debounced;
 }
-function DataTable({
-  columns,
-  data,
-  rowKey,
-  loading: loading2,
-  total = 0,
-  page = 1,
-  pageSize = 20,
-  pageSizeOptions,
-  onQueryChange,
-  caption,
-  toolbar,
-  enableColumnVisibilityToggle = true,
-  enableDensityToggle = true,
-  enableHeaderAlignToggle = false,
-  striped = true,
-  // Mặc định bật màu nền sẽn kẽ cho các dòng
-  columnDividers = false,
-  className,
-  storageKey,
-  stickyHeader = true,
-  maxHeight = 500,
-  labels
-}) {
-  const t = useTranslations("Common");
-  const [headerAlign, setHeaderAlign] = import_react32.default.useState("left");
-  const [visibleCols, setVisibleCols] = import_react32.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
-  const [filters, setFilters] = import_react32.default.useState({});
-  const [sort, setSort] = import_react32.default.useState(null);
-  const [density, setDensity] = import_react32.default.useState("normal");
-  const [curPage, setCurPage] = import_react32.default.useState(page);
-  const hasMounted = import_react32.default.useRef(false);
-  const loadedFromStorage = import_react32.default.useRef(false);
-  const [curPageSize, setCurPageSize] = import_react32.default.useState(() => {
+
+// ../../components/ui/DataTable/hooks/usePageSizeStorage.ts
+var import_react33 = __toESM(require("react"), 1);
+function usePageSizeStorage({ pageSize, storageKey }) {
+  const loadedFromStorage = import_react33.default.useRef(false);
+  const [curPageSize, setCurPageSize] = import_react33.default.useState(() => {
     if (typeof window === "undefined" || !storageKey) return pageSize;
     try {
       const saved = localStorage.getItem(`datatable_${storageKey}_pageSize`);
@@ -13108,7 +13256,11 @@ function DataTable({
     }
     return pageSize;
   });
-  import_react32.default.useEffect(() => {
+  const hasMounted = import_react33.default.useRef(false);
+  import_react33.default.useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+  import_react33.default.useEffect(() => {
     if (typeof window === "undefined" || !storageKey) return;
     if (!hasMounted.current) return;
     try {
@@ -13116,49 +13268,33 @@ function DataTable({
     } catch {
     }
   }, [curPageSize, storageKey]);
-  import_react32.default.useEffect(() => {
-    const newColKeys = columns.filter((c) => c.visible !== false).map((c) => c.key);
-    setVisibleCols((prev) => {
-      const uniqueKeys = /* @__PURE__ */ new Set([...prev, ...newColKeys]);
-      return [...uniqueKeys].filter((k) => columns.some((c) => c.key === k));
-    });
-  }, [columns]);
-  const debouncedFilters = useDebounced(filters, 350);
-  import_react32.default.useEffect(() => {
-    setCurPage(page);
-  }, [page]);
-  import_react32.default.useEffect(() => {
-    if (storageKey && loadedFromStorage.current) {
-      return;
-    }
+  import_react33.default.useEffect(() => {
+    if (storageKey && loadedFromStorage.current) return;
     setCurPageSize(pageSize);
   }, [pageSize, storageKey]);
-  import_react32.default.useEffect(() => {
-    if (!onQueryChange) return;
-    if (!hasMounted.current) {
-      hasMounted.current = true;
-      return;
-    }
-    onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
-  }, [debouncedFilters, sort, curPage, curPageSize]);
-  const densityRowClass = density === "compact" ? "h-9" : density === "comfortable" ? "h-14" : "h-12";
-  const cellPadding = density === "compact" ? "py-1.5 px-3" : density === "comfortable" ? "py-3 px-4" : "py-2.5 px-4";
-  const visibleColsSet = import_react32.default.useMemo(() => new Set(visibleCols), [visibleCols]);
-  const visibleColumns = columns.filter((c) => visibleColsSet.has(c.key));
-  const totalColumnsWidth = import_react32.default.useMemo(() => {
-    return visibleColumns.reduce((sum, col) => {
-      const colWidth = typeof col.width === "number" ? col.width : parseInt(String(col.width) || "150", 10);
-      return sum + colWidth;
-    }, 0);
-  }, [visibleColumns]);
-  const stickyPositions = import_react32.default.useMemo(() => {
+  return { curPageSize, setCurPageSize, loadedFromStorage };
+}
+
+// ../../components/ui/DataTable/hooks/useStickyColumns.ts
+var import_react34 = __toESM(require("react"), 1);
+
+// ../../components/ui/DataTable/utils/columns.ts
+function getColumnWidth(col, fallback = 150) {
+  if (typeof col.width === "number") return col.width;
+  const raw = col.width ? String(col.width) : String(fallback);
+  const parsed = parseInt(raw, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+
+// ../../components/ui/DataTable/hooks/useStickyColumns.ts
+function useStickyColumns(visibleColumns) {
+  const stickyPositions = import_react34.default.useMemo(() => {
     const positions = {};
     let leftOffset = 0;
     for (const col of visibleColumns) {
       if (col.fixed === "left") {
         positions[col.key] = { left: leftOffset };
-        const colWidth = typeof col.width === "number" ? col.width : parseInt(String(col.width) || "150", 10);
-        leftOffset += colWidth;
+        leftOffset += getColumnWidth(col);
       }
     }
     let rightOffset = 0;
@@ -13166,30 +13302,105 @@ function DataTable({
       const col = visibleColumns[i];
       if (col.fixed === "right") {
         positions[col.key] = { right: rightOffset };
-        const colWidth = typeof col.width === "number" ? col.width : parseInt(String(col.width) || "150", 10);
-        rightOffset += colWidth;
+        rightOffset += getColumnWidth(col);
       }
     }
     return positions;
   }, [visibleColumns]);
-  const getStickyColumnClass = (col, isHeader = false) => {
+  const getStickyColumnStyle = import_react34.default.useCallback(
+    (col) => {
+      if (!col.fixed) return {};
+      const pos = stickyPositions[col.key];
+      return {
+        ...pos?.left !== void 0 && { left: pos.left },
+        ...pos?.right !== void 0 && { right: pos.right }
+      };
+    },
+    [stickyPositions]
+  );
+  const getStickyHeaderClass = import_react34.default.useCallback((col) => {
     if (!col.fixed) return "";
     return cn(
       "sticky",
       col.fixed === "left" && "left-0 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.15)]",
       col.fixed === "right" && "right-0 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.15)]",
-      // Header fixed column cần z-index cao hơn thead (z-30) để không bị che
-      isHeader ? "z-50 bg-muted!" : "z-10 bg-card!"
+      "z-50 bg-muted!"
     );
-  };
-  const getStickyColumnStyle = (col) => {
-    if (!col.fixed) return {};
-    const pos = stickyPositions[col.key];
-    return {
-      ...pos?.left !== void 0 && { left: pos.left },
-      ...pos?.right !== void 0 && { right: pos.right }
-    };
-  };
+  }, []);
+  const getStickyCellClass = import_react34.default.useCallback((col, isStripedRow) => {
+    if (!col.fixed) return "";
+    return cn(
+      "sticky z-10",
+      col.fixed === "left" && "left-0 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.15)]",
+      col.fixed === "right" && "right-0 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.15)]",
+      isStripedRow ? "bg-muted!" : "bg-card!"
+    );
+  }, []);
+  return { getStickyColumnStyle, getStickyHeaderClass, getStickyCellClass };
+}
+
+// ../../components/ui/DataTable/DataTable.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+function DataTable({
+  columns,
+  data,
+  rowKey,
+  loading: loading2,
+  total = 0,
+  page = 1,
+  pageSize = 20,
+  pageSizeOptions,
+  onQueryChange,
+  caption,
+  toolbar,
+  enableColumnVisibilityToggle = true,
+  enableDensityToggle = true,
+  enableHeaderAlignToggle = false,
+  striped = true,
+  columnDividers = false,
+  className,
+  storageKey,
+  stickyHeader = true,
+  maxHeight = 500,
+  labels
+}) {
+  const t = useTranslations("Common");
+  const [headerAlign, setHeaderAlign] = import_react35.default.useState("left");
+  const [visibleCols, setVisibleCols] = import_react35.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
+  const [filters, setFilters] = import_react35.default.useState({});
+  const [sort, setSort] = import_react35.default.useState(null);
+  const [density, setDensity] = import_react35.default.useState("normal");
+  const [curPage, setCurPage] = import_react35.default.useState(page);
+  const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
+  import_react35.default.useEffect(() => {
+    const newColKeys = columns.filter((c) => c.visible !== false).map((c) => c.key);
+    setVisibleCols((prev) => {
+      const uniqueKeys = /* @__PURE__ */ new Set([...prev, ...newColKeys]);
+      return [...uniqueKeys].filter((k) => columns.some((c) => c.key === k));
+    });
+  }, [columns]);
+  const debouncedFilters = useDebounced(filters, 350);
+  import_react35.default.useEffect(() => {
+    setCurPage(page);
+  }, [page]);
+  const isServerMode = Boolean(onQueryChange);
+  const hasEmittedQuery = import_react35.default.useRef(false);
+  import_react35.default.useEffect(() => {
+    if (!onQueryChange) return;
+    if (!hasEmittedQuery.current) {
+      hasEmittedQuery.current = true;
+      return;
+    }
+    onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
+  }, [debouncedFilters, sort, curPage, curPageSize, onQueryChange]);
+  const densityRowClass = density === "compact" ? "h-9" : density === "comfortable" ? "h-14" : "h-12";
+  const cellPadding = density === "compact" ? "py-1.5 px-3" : density === "comfortable" ? "py-3 px-4" : "py-2.5 px-4";
+  const visibleColsSet = import_react35.default.useMemo(() => new Set(visibleCols), [visibleCols]);
+  const visibleColumns = columns.filter((c) => visibleColsSet.has(c.key));
+  const totalColumnsWidth = import_react35.default.useMemo(() => {
+    return visibleColumns.reduce((sum, col) => sum + getColumnWidth(col), 0);
+  }, [visibleColumns]);
+  const { getStickyCellClass, getStickyColumnStyle, getStickyHeaderClass } = useStickyColumns(visibleColumns);
   const getRowKey = (row, idx) => {
     if (!rowKey) return String(idx);
     if (typeof rowKey === "function") return String(rowKey(row));
@@ -13198,11 +13409,9 @@ function DataTable({
   const renderFilterControl = (col) => {
     if (!col.filter) return null;
     const k = col.key;
-    const commonProps = {
-      className: "h-8 w-full text-sm"
-    };
+    const commonProps = { className: "h-8 w-full text-sm" };
     if (col.filter.type === "text") {
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         Input_default,
         {
           ...commonProps,
@@ -13217,7 +13426,7 @@ function DataTable({
     }
     if (col.filter.type === "select") {
       const options = col.filter.options || [];
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         Combobox,
         {
           options: ["", ...options],
@@ -13233,7 +13442,7 @@ function DataTable({
       );
     }
     if (col.filter.type === "date") {
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         DatePicker,
         {
           placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
@@ -13247,122 +13456,105 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => {
+  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => {
     const prevCol = colIdx > 0 ? visibleColumns[colIdx - 1] : null;
     const isAfterFixedLeft = prevCol?.fixed === "left";
     const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       TableHead,
       {
         style: { width: col.width, ...getStickyColumnStyle(col) },
         className: cn(
-          // Use column-specific align if defined, otherwise use global headerAlign
           (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
           (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
           showBorderLeft && "border-l border-border/60",
-          getStickyColumnClass(col, true)
+          getStickyHeaderClass(col)
         ),
         children: (() => {
           const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
           const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
-          const titleContent = /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-            "div",
-            {
-              className: cn(
-                "flex items-center gap-1",
-                // Cột fixed không cần shrink vì đã có width cố định
-                !col.fixed && "min-w-0 shrink"
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: cn("font-medium text-sm", !col.fixed && "truncate"), children: col.title }),
-                col.sortable && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  "button",
-                  {
-                    className: cn(
-                      "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
-                      sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
-                    ),
-                    onClick: () => {
-                      setCurPage(1);
-                      setSort((s) => {
-                        if (!s || s.key !== col.key) return { key: col.key, order: "asc" };
-                        if (s.order === "asc") return { key: col.key, order: "desc" };
-                        return null;
-                      });
-                    },
-                    "aria-label": "Sort",
-                    title: `Sort by ${String(col.title)}`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                        "path",
-                        {
-                          d: "M7 8l3-3 3 3",
-                          stroke: "currentColor",
-                          strokeWidth: "1.5",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                        "path",
-                        {
-                          d: "M7 12l3 3 3-3",
-                          stroke: "currentColor",
-                          strokeWidth: "1.5",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
-                        }
-                      )
-                    ] })
-                  }
-                )
-              ]
-            }
-          );
-          const filterContent = col.filter && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          const titleContent = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("flex items-center gap-1", !col.fixed && "min-w-0 shrink"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: cn("font-medium text-sm", !col.fixed && "truncate"), children: col.title }),
+            col.sortable && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "button",
+              {
+                className: cn(
+                  "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
+                  sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
+                ),
+                onClick: () => {
+                  setCurPage(1);
+                  setSort((s) => {
+                    if (!s || s.key !== col.key) return { key: col.key, order: "asc" };
+                    if (s.order === "asc") return { key: col.key, order: "desc" };
+                    return null;
+                  });
+                },
+                "aria-label": "Sort",
+                title: `Sort by ${String(col.title)}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                    "path",
+                    {
+                      d: "M7 8l3-3 3 3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                    "path",
+                    {
+                      d: "M7 12l3 3 3-3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
+                    }
+                  )
+                ] })
+              }
+            )
+          ] });
+          const filterContent = col.filter ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             Popover,
             {
-              placement: isRightAlign ? "bottom-end" : "bottom-start",
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              placement: "bottom-start",
+              trigger: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 "button",
                 {
                   className: cn(
-                    "p-1.5 rounded-lg hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-                    filters[col.key] && "bg-accent text-foreground"
+                    "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
+                    filters[col.key] ? "bg-accent text-primary" : "text-muted-foreground"
                   ),
                   "aria-label": "Filter",
-                  title: "Filter",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react27.Filter, { className: "h-4 w-4" })
+                  title: `Filter by ${String(col.title)}`,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react27.Filter, { className: "w-4 h-4" })
                 }
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "w-48 p-2 space-y-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
-                  "Filter ",
-                  col.title
+              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "p-3 w-64 space-y-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-sm font-medium", children: col.title }),
+                  filters[col.key] !== void 0 && filters[col.key] !== null && filters[col.key] !== "" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                    "button",
+                    {
+                      onClick: () => {
+                        setCurPage(1);
+                        setFilters((f) => ({ ...f, [col.key]: void 0 }));
+                      },
+                      className: "text-xs text-destructive hover:underline",
+                      children: t("clearFilter")
+                    }
+                  )
                 ] }),
-                renderFilterControl(col),
-                filters[col.key] && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  "button",
-                  {
-                    onClick: () => {
-                      setCurPage(1);
-                      setFilters((f) => {
-                        const newFilters = { ...f };
-                        delete newFilters[col.key];
-                        return newFilters;
-                      });
-                    },
-                    className: "text-xs text-destructive hover:underline",
-                    children: t("clearFilter")
-                  }
-                )
+                renderFilterControl(col)
               ] })
             }
-          );
-          return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          ) : null;
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             "div",
             {
               className: cn(
@@ -13371,10 +13563,10 @@ function DataTable({
                 isCenterAlign && "justify-center",
                 !isRightAlign && !isCenterAlign && "justify-start"
               ),
-              children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+              children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
                 filterContent,
                 titleContent
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
                 titleContent,
                 filterContent
               ] })
@@ -13385,13 +13577,12 @@ function DataTable({
       col.key
     );
   }) });
-  const isServerMode = Boolean(onQueryChange);
-  const processedData = import_react32.default.useMemo(() => {
+  const processedData = import_react35.default.useMemo(() => {
     if (isServerMode) return data;
     let result = [...data];
     if (Object.keys(filters).length > 0) {
-      result = result.filter((row) => {
-        return Object.entries(filters).every(([key, value]) => {
+      result = result.filter(
+        (row) => Object.entries(filters).every(([key, value]) => {
           if (value === void 0 || value === null || value === "") return true;
           const col = columns.find((c) => c.key === key);
           const rowValue = col?.dataIndex ? row[col.dataIndex] : row[key];
@@ -13399,8 +13590,8 @@ function DataTable({
             return new Date(rowValue).toDateString() === value.toDateString();
           }
           return String(rowValue ?? "").toLowerCase().includes(String(value).toLowerCase());
-        });
-      });
+        })
+      );
     }
     if (sort) {
       result.sort((a, b) => {
@@ -13418,78 +13609,30 @@ function DataTable({
     return result;
   }, [data, isServerMode, filters, sort, columns]);
   const totalItems = isServerMode ? total : processedData.length;
-  const displayedData = isServerMode ? data : import_react32.default.useMemo(() => {
+  const displayedData = isServerMode ? data : import_react35.default.useMemo(() => {
     const start = (curPage - 1) * curPageSize;
-    if (start >= processedData.length && curPage > 1) {
-    }
     return processedData.slice(start, start + curPageSize);
   }, [processedData, curPage, curPageSize]);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-2", children: [
-        enableDensityToggle && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          DropdownMenu_default,
-          {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
-              labels?.density || t("density")
-            ] }),
-            items: [
-              { label: labels?.compact || t("compact"), onClick: () => setDensity("compact") },
-              { label: labels?.normal || t("normal"), onClick: () => setDensity("normal") },
-              { label: labels?.comfortable || t("comfortable"), onClick: () => setDensity("comfortable") }
-            ]
-          }
-        ),
-        enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          DropdownMenu_default,
-          {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
-                }
-              ) }),
-              labels?.columns || t("columns")
-            ] }),
-            children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-              DropdownMenuItem,
-              {
-                onClick: () => {
-                  setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "truncate", children: c.title })
-                ]
-              },
-              c.key
-            ))
-          }
-        ),
-        enableHeaderAlignToggle && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          DropdownMenu_default,
-          {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
-              labels?.headerAlign || t("headerAlign")
-            ] }),
-            items: [
-              { label: labels?.alignLeft || t("alignLeft"), onClick: () => setHeaderAlign("left") },
-              { label: labels?.alignCenter || t("alignCenter"), onClick: () => setHeaderAlign("center") },
-              { label: labels?.alignRight || t("alignRight"), onClick: () => setHeaderAlign("right") }
-            ]
-          }
-        ),
-        toolbar
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      DataTableToolbar,
+      {
+        caption,
+        toolbar,
+        columns,
+        visibleCols,
+        setVisibleCols,
+        enableDensityToggle,
+        enableColumnVisibilityToggle,
+        enableHeaderAlignToggle,
+        density,
+        setDensity,
+        setHeaderAlign,
+        labels,
+        t
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "div",
       {
         className: cn("relative rounded-2xl md:rounded-3xl border border-border/50", loading2 && "opacity-60 pointer-events-none"),
@@ -13498,7 +13641,7 @@ function DataTable({
           overflowY: "auto",
           overflowX: "auto"
         } : { overflowX: "auto" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           Table,
           {
             containerClassName: cn("border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent", "overflow-visible"),
@@ -13508,11 +13651,11 @@ function DataTable({
             ),
             style: { minWidth: totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableHeader, { children: renderHeader }),
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableHeader, { children: renderHeader }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                     "path",
                     {
                       className: "opacity-75",
@@ -13521,18 +13664,17 @@ function DataTable({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "text-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "text-sm", children: [
                   t("loading"),
                   "\u2026"
                 ] })
-              ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
+              ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
                 const isLastRow = idx === displayedData.length - 1;
-                return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   TableRow,
                   {
                     className: cn(densityRowClass),
                     style: {
-                      // content-visibility: auto for rendering performance (skip off-screen rows)
                       contentVisibility: "auto",
                       containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
                     },
@@ -13542,7 +13684,7 @@ function DataTable({
                       const prevCol = colIdx > 0 ? visibleColumns[colIdx - 1] : null;
                       const isAfterFixedLeft = prevCol?.fixed === "left";
                       const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
-                      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                         TableCell,
                         {
                           style: getStickyColumnStyle(col),
@@ -13553,13 +13695,8 @@ function DataTable({
                             showBorderLeft && "border-l border-border/60",
                             isLastRow && col === visibleColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
                             isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
-                            // Cột cố định cần solid background
-                            col.fixed ? cn(
-                              "sticky z-10",
-                              col.fixed === "left" && "left-0 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.15)]",
-                              col.fixed === "right" && "right-0 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.15)]",
-                              isStripedRow ? "bg-muted!" : "bg-card!"
-                            ) : isStripedRow && "bg-muted/50"
+                            getStickyCellClass(col, isStripedRow),
+                            !col.fixed && isStripedRow && "bg-muted/50"
                           ),
                           children: col.render ? col.render(value, row, idx) : String(value ?? "")
                         },
@@ -13575,90 +13712,26 @@ function DataTable({
         )
       }
     ),
-    totalItems > 0 && Math.ceil(totalItems / curPageSize) > 1 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between gap-2 px-1 pt-3 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "tabular-nums", children: [
-        (curPage - 1) * curPageSize + 1,
-        "-",
-        Math.min(curPage * curPageSize, totalItems),
-        "/",
-        totalItems
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          Button_default,
-          {
-            variant: "ghost",
-            size: "sm",
-            className: "h-7 w-7 p-0 rounded-full",
-            onClick: () => setCurPage(Math.max(1, curPage - 1)),
-            disabled: curPage === 1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
-          }
-        ),
-        (() => {
-          const totalPages = Math.ceil(totalItems / curPageSize);
-          const pages = [];
-          if (totalPages <= 5) {
-            for (let i = 1; i <= totalPages; i++) pages.push(i);
-          } else {
-            pages.push(1);
-            if (curPage > 3) pages.push("...");
-            const start = Math.max(2, curPage - 1);
-            const end = Math.min(totalPages - 1, curPage + 1);
-            for (let i = start; i <= end; i++) pages.push(i);
-            if (curPage < totalPages - 2) pages.push("...");
-            pages.push(totalPages);
-          }
-          return pages.map(
-            (p, i) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "px-1 text-muted-foreground/60", children: "\u2026" }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              "button",
-              {
-                onClick: () => setCurPage(p),
-                className: cn(
-                  "h-7 min-w-7 px-2 rounded-full text-xs font-medium transition-colors",
-                  curPage === p ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground"
-                ),
-                children: p
-              },
-              p
-            )
-          );
-        })(),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          Button_default,
-          {
-            variant: "ghost",
-            size: "sm",
-            className: "h-7 w-7 p-0 rounded-full",
-            onClick: () => setCurPage(Math.min(Math.ceil(totalItems / curPageSize), curPage + 1)),
-            disabled: curPage === Math.ceil(totalItems / curPageSize),
-            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
-          }
-        )
-      ] }),
-      pageSizeOptions && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-        Combobox,
-        {
-          options: pageSizeOptions.map(String),
-          value: String(curPageSize),
-          onChange: (v) => {
-            setCurPage(1);
-            setCurPageSize(Number(v));
-          },
-          size: "sm",
-          className: "w-20"
-        }
-      )
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      DataTablePagination,
+      {
+        totalItems,
+        curPage,
+        curPageSize,
+        setCurPage,
+        pageSizeOptions,
+        setCurPageSize
+      }
+    )
   ] });
 }
 var DataTable_default = DataTable;
 
 // ../../components/ui/Form.tsx
-var React49 = __toESM(require("react"), 1);
+var React52 = __toESM(require("react"), 1);
 var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var FormConfigContext = React49.createContext({ size: "md" });
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var FormConfigContext = React52.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -13671,24 +13744,24 @@ var FormWrapper = ({
   const methods = (0, import_react_hook_form.useForm)({
     defaultValues: initialValues
   });
-  React49.useEffect(() => {
+  React52.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
   }, [JSON.stringify(initialValues)]);
   const { validationSchema: _, ...formProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React49.createContext({});
+var FormFieldContext = React52.createContext({});
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_hook_form.Controller, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_hook_form.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React49.useContext(FormFieldContext);
-  const itemContext = React49.useContext(FormItemContext);
+  const fieldContext = React52.useContext(FormFieldContext);
+  const itemContext = React52.useContext(FormItemContext);
   const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
   if (!fieldContext) {
     try {
@@ -13709,27 +13782,27 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React49.createContext({});
-var FormItem = React49.forwardRef(({ className, ...props }, ref) => {
-  const id = React49.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
+var FormItemContext = React52.createContext({});
+var FormItem = React52.forwardRef(({ className, ...props }, ref) => {
+  const id = React52.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React49.forwardRef(
+var FormLabel = React52.forwardRef(
   ({ className, children, required, ...props }, ref) => {
     const { error, formItemId } = useFormField();
-    const config = React49.useContext(FormConfigContext);
+    const config = React52.useContext(FormConfigContext);
     const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
       children,
-      required && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-destructive ml-1", children: "*" })
     ] });
   }
 );
 FormLabel.displayName = "FormLabel";
-var FormControl = React49.forwardRef(({ ...props }, ref) => {
+var FormControl = React52.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
       ref,
@@ -13741,37 +13814,37 @@ var FormControl = React49.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React49.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React52.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React49.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React52.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React49.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+var FormInput = React52.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(FormItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormMessage, {})
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormMessage, {})
     ] })
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React49.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+var FormCheckbox = React52.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(FormItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         Checkbox,
         {
           ref,
@@ -13785,21 +13858,21 @@ var FormCheckbox = React49.forwardRef(({ name, ...props }, ref) => /* @__PURE__
           ...props
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormMessage, {})
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormMessage, {})
     ] })
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React49.forwardRef(
-  ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
+var FormSubmitButton = React52.forwardRef(
+  ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
 );
 FormSubmitButton.displayName = "FormSubmitButton";
 
 // ../../components/ui/NotificationModal.tsx
 var import_lucide_react28 = require("lucide-react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function NotificationModal({ isOpen, onClose, notification, titleText, openLinkText, closeText }) {
   const t = useTranslations("Common");
   if (!notification) return null;
@@ -13820,20 +13893,20 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
       onClose();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Modal_default, { isOpen, onClose, title: titleText || t("notifications"), size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: cn("w-2 h-2 rounded-full", !notification.is_read ? "bg-primary" : "bg-border") }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Modal_default, { isOpen, onClose, title: titleText || t("notifications"), size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: cn("w-2 h-2 rounded-full", !notification.is_read ? "bg-primary" : "bg-border") }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
     ] }),
-    notification.title && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
-    notification.body && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
-      hasLink && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Button_default, { variant: "primary", size: "sm", onClick: handleLinkClick, className: "gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react28.ExternalLink, { className: "w-4 h-4" }),
+    notification.title && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
+    notification.body && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
+      hasLink && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Button_default, { variant: "primary", size: "sm", onClick: handleLinkClick, className: "gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react28.ExternalLink, { className: "w-4 h-4" }),
         openLinkText || t("openLink")
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: onClose, children: closeText || t("close") })
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: onClose, children: closeText || t("close") })
     ] })
   ] }) });
 }
@@ -13843,9 +13916,9 @@ var NotificationModal_default = NotificationModal;
 var import_link2 = __toESM(require("next/link"), 1);
 var import_navigation = require("next/navigation");
 var import_lucide_react29 = require("lucide-react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function MessengerIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "path",
     {
       d: "M12 2C6.477 2 2 6.145 2 11.235c0 2.93 1.35 5.542 3.464 7.25v3.515l3.344-1.836c.894.247 1.843.375 2.192.375 5.523 0 10-4.145 10-9.235S17.523 2 12 2zm.994 12.444l-2.563-2.73-5.004 2.73 5.507-5.84 2.626 2.729 4.942-2.729-5.508 5.84z",
@@ -13854,7 +13927,7 @@ function MessengerIcon(props) {
   ) });
 }
 function ZaloIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", { viewBox: "0 0 48 48", width: 20, height: 20, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { viewBox: "0 0 48 48", width: 20, height: 20, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "path",
     {
       fill: "white",
@@ -13863,7 +13936,7 @@ function ZaloIcon(props) {
   ) });
 }
 function InstagramIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", { viewBox: "0 0 24 24", width: 20, height: 20, "aria-hidden": "true", fill: "white", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { viewBox: "0 0 24 24", width: 20, height: 20, "aria-hidden": "true", fill: "white", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) });
 }
 function FloatingContacts({ className }) {
   const pathname = (0, import_navigation.usePathname)();
@@ -13898,8 +13971,8 @@ function FloatingContacts({ className }) {
       external: true
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: cn("fixed bottom-6 right-4 z-100000", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cn("fixed bottom-6 right-4 z-100000", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       import_link2.default,
       {
         href: `tel:${hotline.replace(/\D/g, "")}`,
@@ -13910,10 +13983,10 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           "bg-[#22c55e]"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react29.Phone, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react29.Phone, { className: "w-6 h-6" })
       }
     ),
-    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       import_link2.default,
       {
         href,
@@ -13925,7 +13998,7 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           bg
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { className: "w-6 h-6" })
       },
       key
     ))
@@ -13934,7 +14007,7 @@ function FloatingContacts({ className }) {
 
 // ../../components/ui/AccessDenied.tsx
 var import_lucide_react30 = require("lucide-react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var VARIANT_STYLES = {
   destructive: { bg: "bg-destructive/5", border: "border-destructive/20", text: "text-destructive" },
   warning: { bg: "bg-warning/5", border: "border-warning/20", text: "text-warning" },
@@ -13955,32 +14028,32 @@ function AccessDenied({
 }) {
   const styles = VARIANT_STYLES[variant];
   const UsedIcon = Icon || DEFAULT_ICONS[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
     ] }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
+    children && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
   ] }) });
 }
 
 // ../../components/ui/ThemeToggleHeadless.tsx
 var import_lucide_react31 = require("lucide-react");
-var import_react33 = require("react");
+var import_react36 = require("react");
 var import_react_dom7 = require("react-dom");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function ThemeToggleHeadless({
   theme,
   onChange,
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react33.useState)(false);
-  const [mounted, setMounted] = (0, import_react33.useState)(false);
-  const triggerRef = (0, import_react33.useRef)(null);
-  const [dropdownPosition, setDropdownPosition] = (0, import_react33.useState)(null);
-  (0, import_react33.useEffect)(() => setMounted(true), []);
+  const [isOpen, setIsOpen] = (0, import_react36.useState)(false);
+  const [mounted, setMounted] = (0, import_react36.useState)(false);
+  const triggerRef = (0, import_react36.useRef)(null);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react36.useState)(null);
+  (0, import_react36.useEffect)(() => setMounted(true), []);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react31.Sun },
     { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react31.Moon },
@@ -13998,8 +14071,8 @@ function ThemeToggleHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       Button_default,
       {
         variant: "ghost",
@@ -14017,25 +14090,25 @@ function ThemeToggleHeadless({
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Theme",
-        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CurrentIcon, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && (0, import_react_dom7.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           "div",
           {
             className: "z-9999 bg-card border border-border rounded-lg shadow-lg overflow-hidden",
             style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
-            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Theme" }),
               themes.map((opt) => {
                 const Icon = opt.icon;
                 const active = theme === opt.value;
-                return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
                   Button_default,
                   {
                     variant: "ghost",
@@ -14051,9 +14124,9 @@ function ThemeToggleHeadless({
                     role: "menuitemradio",
                     "aria-checked": active,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
-                      active && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
+                      active && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
                     ]
                   },
                   opt.value
@@ -14069,10 +14142,10 @@ function ThemeToggleHeadless({
 }
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
-var import_react34 = require("react");
+var import_react37 = require("react");
 var import_react_dom8 = require("react-dom");
 var import_lucide_react32 = require("lucide-react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -14080,9 +14153,9 @@ function LanguageSwitcherHeadless({
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
-  const [dropdownPosition, setDropdownPosition] = (0, import_react34.useState)(null);
-  const triggerButtonRef = (0, import_react34.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react37.useState)(false);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react37.useState)(null);
+  const triggerButtonRef = (0, import_react37.useRef)(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();
@@ -14094,8 +14167,8 @@ function LanguageSwitcherHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       Button_default,
       {
         variant: "ghost",
@@ -14114,22 +14187,22 @@ function LanguageSwitcherHeadless({
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Language",
         title: labels?.heading ?? "Language",
-        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react32.Globe, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react32.Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && (0, import_react_dom8.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           "div",
           {
             className: "z-9999 bg-card border border-border rounded-lg shadow-lg overflow-hidden",
             style: { position: "absolute", top: dropdownPosition.top, left: dropdownPosition.left, width: dropdownPosition.width },
             onMouseDown: (e) => e.stopPropagation(),
             role: "menu",
-            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
-              locales.map((language) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
+              locales.map((language) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -14142,9 +14215,9 @@ function LanguageSwitcherHeadless({
                   role: "menuitemradio",
                   "aria-checked": currentLocale === language.code,
                   children: [
-                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-lg", children: language.flag }),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "flex-1 text-left", children: language.name }),
-                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-lg", children: language.flag }),
+                    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "flex-1 text-left", children: language.name }),
+                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
                   ]
                 },
                 language.code
@@ -14574,7 +14647,7 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // src/contexts/TranslationContext.tsx
-var React51 = __toESM(require("react"), 1);
+var React54 = __toESM(require("react"), 1);
 
 // locales/en.json
 var en_default = {
@@ -14877,16 +14950,16 @@ var ja_default = {
 };
 
 // src/contexts/TranslationContext.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var defaultTranslations2 = {
   en: en_default,
   vi: vi_default,
   ko: ko_default,
   ja: ja_default
 };
-var TranslationContext2 = React51.createContext(null);
+var TranslationContext2 = React54.createContext(null);
 var TranslationProvider = ({ children, locale = "en", translations }) => {
-  const t = React51.useCallback(
+  const t = React54.useCallback(
     (namespace) => {
       return (key) => {
         const mergedTranslations = {
@@ -14911,10 +14984,10 @@ var TranslationProvider = ({ children, locale = "en", translations }) => {
     },
     [locale, translations]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(TranslationContext2.Provider, { value: { locale, t }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TranslationContext2.Provider, { value: { locale, t }, children });
 };
 var useUnderverseTranslations = (namespace) => {
-  const context = React51.useContext(TranslationContext2);
+  const context = React54.useContext(TranslationContext2);
   if (!context) {
     return (key) => {
       const parts = namespace.split(".");
@@ -14936,13 +15009,13 @@ var useUnderverseTranslations = (namespace) => {
   return context.t(namespace);
 };
 var useUnderverseLocale = () => {
-  const context = React51.useContext(TranslationContext2);
+  const context = React54.useContext(TranslationContext2);
   return context?.locale || "en";
 };
 
 // src/hooks/useSmartTranslations.tsx
-var React52 = __toESM(require("react"), 1);
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var React55 = __toESM(require("react"), 1);
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var nextIntlHooks = null;
 try {
   const nextIntl = require("next-intl");
@@ -14953,12 +15026,12 @@ try {
 } catch {
   nextIntlHooks = null;
 }
-var ForceInternalContext = React52.createContext(false);
+var ForceInternalContext = React55.createContext(false);
 var ForceInternalTranslationsProvider = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ForceInternalContext.Provider, { value: true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ForceInternalContext.Provider, { value: true, children });
 };
 function useSmartTranslations(namespace) {
-  const forceInternal = React52.useContext(ForceInternalContext);
+  const forceInternal = React55.useContext(ForceInternalContext);
   const internalT = useUnderverseTranslations(namespace);
   if (forceInternal || !nextIntlHooks?.useTranslations) {
     return internalT;
@@ -14971,7 +15044,7 @@ function useSmartTranslations(namespace) {
   }
 }
 function useSmartLocale() {
-  const forceInternal = React52.useContext(ForceInternalContext);
+  const forceInternal = React55.useContext(ForceInternalContext);
   const internalLocale = useUnderverseLocale();
   if (forceInternal || !nextIntlHooks?.useLocale) {
     return internalLocale;