@underverse-ui/underverse 0.1.25 → 0.1.28

package/dist/index.cjs

@@ -87,6 +87,7 @@ __export(index_exports, {
   NotificationBadge: () => NotificationBadge,
   NotificationModal: () => NotificationModal_default,
   NumberInput: () => NumberInput,
+  OverlayControls: () => OverlayControls,
   PageLoading: () => PageLoading,
   Pagination: () => Pagination,
   PasswordInput: () => PasswordInput,
@@ -5901,6 +5902,8 @@ var Slider = React24.forwardRef(
     step = 1,
     onChange,
     onValueChange,
+    onMouseUp,
+    onTouchEnd,
     label,
     labelClassName,
     containerClassName,
@@ -5954,6 +5957,8 @@ var Slider = React24.forwardRef(
             step,
             value: currentValue,
             onChange: handleChange,
+            onMouseUp,
+            onTouchEnd,
             disabled,
             className: cn(
               // Base styles
@@ -6005,13 +6010,444 @@ var Slider = React24.forwardRef(
 );
 Slider.displayName = "Slider";
 
-// ../../components/ui/CategoryTreeSelect.tsx
-var import_react15 = require("react");
+// ../../components/ui/OverlayControls.tsx
 var import_lucide_react16 = require("lucide-react");
+var import_react15 = __toESM(require("react"), 1);
 var import_jsx_runtime31 = require("react/jsx-runtime");
+function OverlayControls({
+  mode,
+  value,
+  max,
+  step = 0.1,
+  onChange,
+  onCommit,
+  playing = false,
+  onTogglePlay,
+  onGoLive,
+  volume,
+  muted,
+  onVolumeChange,
+  onToggleMute,
+  rate = 1,
+  onChangeRate,
+  onToggleFullscreen,
+  showOnHover = false,
+  className,
+  showTime,
+  skipSeconds = 10,
+  onSkip,
+  onSeekPreview,
+  autoHide = false,
+  autoHideDelay = 3e3,
+  enableKeyboardShortcuts = true
+}) {
+  const hoverClasses = showOnHover ? "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto" : "opacity-100 pointer-events-auto";
+  const showControlsBar = mode === "review";
+  const [rateOpen, setRateOpen] = import_react15.default.useState(false);
+  const rateWrapRef = import_react15.default.useRef(null);
+  const [controlsVisible, setControlsVisible] = import_react15.default.useState(true);
+  const hideTimerRef = import_react15.default.useRef(null);
+  const [previewData, setPreviewData] = import_react15.default.useState(null);
+  const sliderRef = import_react15.default.useRef(null);
+  const [isDragging, setIsDragging] = import_react15.default.useState(false);
+  const [dragValue, setDragValue] = import_react15.default.useState(value);
+  import_react15.default.useEffect(() => {
+    if (!isDragging) {
+      setDragValue(value);
+    }
+  }, [value, isDragging]);
+  const [keyboardFeedback, setKeyboardFeedback] = import_react15.default.useState(null);
+  const feedbackTimerRef = import_react15.default.useRef(null);
+  const seekAccumulatorRef = import_react15.default.useRef(0);
+  const seekAccumulatorTimerRef = import_react15.default.useRef(null);
+  import_react15.default.useEffect(() => {
+    const onDocDown = (e) => {
+      if (!rateOpen) return;
+      const wrap = rateWrapRef.current;
+      if (wrap && !wrap.contains(e.target)) {
+        setRateOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDocDown);
+    return () => document.removeEventListener("mousedown", onDocDown);
+  }, [rateOpen]);
+  import_react15.default.useEffect(() => {
+    if (!autoHide || showOnHover) return;
+    const resetTimer = () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+      setControlsVisible(true);
+      hideTimerRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, autoHideDelay);
+    };
+    const handleMouseMove = () => resetTimer();
+    const handleMouseLeave = () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+      hideTimerRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, autoHideDelay);
+    };
+    resetTimer();
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+      document.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [autoHide, autoHideDelay, showOnHover]);
+  const showFeedback = (type, value2) => {
+    if (feedbackTimerRef.current) clearTimeout(feedbackTimerRef.current);
+    setKeyboardFeedback({ type, value: value2 });
+    feedbackTimerRef.current = setTimeout(() => {
+      setKeyboardFeedback(null);
+    }, 800);
+  };
+  const accumulateSeek = (seconds) => {
+    if (seekAccumulatorTimerRef.current) clearTimeout(seekAccumulatorTimerRef.current);
+    seekAccumulatorRef.current += seconds;
+    showFeedback("seek", seekAccumulatorRef.current);
+    seekAccumulatorTimerRef.current = setTimeout(() => {
+      seekAccumulatorRef.current = 0;
+    }, 1e3);
+  };
+  import_react15.default.useEffect(() => {
+    if (!enableKeyboardShortcuts) return;
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      switch (e.key) {
+        case " ":
+        case "k":
+          e.preventDefault();
+          onTogglePlay?.();
+          showFeedback(playing ? "pause" : "play");
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          if (e.shiftKey) {
+            onSkip?.(-skipSeconds);
+            accumulateSeek(-skipSeconds);
+          } else {
+            {
+              const newTime = Math.max(0, value - 5);
+              onChange(newTime);
+              onCommit?.(newTime);
+            }
+            accumulateSeek(-5);
+          }
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          if (e.shiftKey) {
+            onSkip?.(skipSeconds);
+            accumulateSeek(skipSeconds);
+          } else {
+            {
+              const newTime = Math.min(max, value + 5);
+              onChange(newTime);
+              onCommit?.(newTime);
+            }
+            accumulateSeek(5);
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (onVolumeChange && volume !== void 0) {
+            const newVolume = Math.min(1, volume + 0.05);
+            onVolumeChange(newVolume);
+            showFeedback("volume", Math.round(newVolume * 100));
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (onVolumeChange && volume !== void 0) {
+            const newVolume = Math.max(0, volume - 0.05);
+            onVolumeChange(newVolume);
+            showFeedback("volume", Math.round(newVolume * 100));
+          }
+          break;
+        case "f":
+        case "F":
+          e.preventDefault();
+          onToggleFullscreen?.();
+          break;
+        case "m":
+        case "M":
+          e.preventDefault();
+          onToggleMute?.();
+          showFeedback(muted ? "unmute" : "mute");
+          break;
+        case "j":
+          e.preventDefault();
+          onSkip?.(-skipSeconds);
+          accumulateSeek(-skipSeconds);
+          break;
+        case "l":
+          e.preventDefault();
+          onSkip?.(skipSeconds);
+          accumulateSeek(skipSeconds);
+          break;
+        default:
+          if (e.key >= "0" && e.key <= "9") {
+            e.preventDefault();
+            const percent = parseInt(e.key) * 10;
+            const newTime = percent / 100 * max;
+            onChange(newTime);
+            onCommit?.(newTime);
+          }
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [
+    enableKeyboardShortcuts,
+    mode,
+    onTogglePlay,
+    onSkip,
+    skipSeconds,
+    onChange,
+    value,
+    max,
+    onVolumeChange,
+    volume,
+    onToggleFullscreen,
+    onToggleMute,
+    playing,
+    muted
+  ]);
+  const formatTime2 = (sec) => {
+    if (!isFinite(sec) || sec < 0) return "0:00";
+    const h = Math.floor(sec / 3600);
+    const m = Math.floor(sec % 3600 / 60);
+    const s = Math.floor(sec % 60);
+    if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    return `${m}:${String(s).padStart(2, "0")}`;
+  };
+  const handleSliderMouseMove = (e) => {
+    if (!sliderRef.current) return;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percent = Math.max(0, Math.min(1, x / rect.width));
+    const time = percent * max;
+    const thumbnailUrl = onSeekPreview ? onSeekPreview(time) : void 0;
+    setPreviewData({ time, x: e.clientX - rect.left, url: thumbnailUrl });
+  };
+  const handleSliderMouseLeave = () => {
+    setPreviewData(null);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    keyboardFeedback && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 flex items-center pointer-events-none z-50",
+          keyboardFeedback.type === "seek" && (keyboardFeedback.value ?? 0) > 0 ? "justify-end pr-32" : keyboardFeedback.type === "seek" && (keyboardFeedback.value ?? 0) < 0 ? "justify-start pl-32" : "justify-center"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "bg-black/50 backdrop-blur-sm rounded-xl px-6 py-4 shadow-xl border border-white/10 animate-in fade-in zoom-in duration-200", children: [
+          keyboardFeedback.type === "play" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Play, { className: "w-16 h-16 text-white", fill: "white" }),
+          keyboardFeedback.type === "pause" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Pause, { className: "w-16 h-16 text-white", fill: "white" }),
+          keyboardFeedback.type === "seek" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-3", children: [
+            (keyboardFeedback.value ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.RotateCw, { className: "w-12 h-12 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.RotateCcw, { className: "w-12 h-12 text-white" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-3xl font-bold text-white", children: [
+              keyboardFeedback.value && keyboardFeedback.value > 0 ? "+" : "",
+              keyboardFeedback.value,
+              "s"
+            ] })
+          ] }),
+          keyboardFeedback.type === "volume" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Volume2, { className: "w-12 h-12 text-white" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-2xl font-bold text-white", children: [
+                keyboardFeedback.value,
+                "%"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-32 h-1.5 bg-white/30 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-full bg-white rounded-full transition-all", style: { width: `${keyboardFeedback.value}%` } }) })
+            ] })
+          ] }),
+          keyboardFeedback.type === "mute" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.VolumeX, { className: "w-16 h-16 text-white" }),
+          keyboardFeedback.type === "unmute" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Volume2, { className: "w-16 h-16 text-white" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "div",
+      {
+        className: cn(
+          "absolute bottom-0 left-0 right-0 pb-2 pt-8 bg-gradient-to-t from-black/40 to-transparent z-20 transition-opacity duration-200",
+          hoverClasses,
+          autoHide && !controlsVisible && "opacity-0 pointer-events-none",
+          className
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "px-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref: sliderRef, onMouseMove: handleSliderMouseMove, onMouseLeave: handleSliderMouseLeave, className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              Slider,
+              {
+                min: 0,
+                max: max || 0,
+                step,
+                value: dragValue,
+                onValueChange: (v) => {
+                  setIsDragging(true);
+                  setDragValue(v);
+                  onChange(v);
+                },
+                onMouseUp: () => {
+                  onCommit?.(dragValue);
+                  setIsDragging(false);
+                },
+                onTouchEnd: () => {
+                  onCommit?.(dragValue);
+                  setIsDragging(false);
+                },
+                trackClassName: "bg-muted",
+                size: "sm",
+                noFocus: true
+              }
+            ),
+            previewData && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute bottom-full mb-2 transform -translate-x-1/2 pointer-events-none z-30", style: { left: `${previewData.x}px` }, children: previewData.url ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "bg-background/95 backdrop-blur rounded-md border border-border shadow-lg overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: previewData.url, alt: "Preview", className: "w-40 h-24 object-cover" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-2 py-1 text-xs font-mono text-center bg-background/80", children: formatTime2(previewData.time) })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-3 py-1.5 rounded-md bg-background/90 backdrop-blur border border-border shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs font-mono text-center", children: formatTime2(previewData.time) }) }) })
+          ] }),
+          showControlsBar && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: onTogglePlay,
+                  title: playing ? "T\u1EA1m d\u1EEBng" : "Ph\xE1t",
+                  className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
+                  children: playing ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Pause, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Play, { className: "w-4 h-4" })
+                }
+              ),
+              onSkip && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: () => onSkip(-skipSeconds),
+                  title: `L\xF9i ${skipSeconds}s`,
+                  className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.RotateCcw, { className: "w-4 h-4" })
+                }
+              ),
+              onSkip && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: () => onSkip(skipSeconds),
+                  title: `Tua ${skipSeconds}s`,
+                  className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.RotateCw, { className: "w-4 h-4" })
+                }
+              ),
+              (showTime ?? true) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "px-3 py-1 rounded-full text-xs font-mono bg-background/60 text-foreground shadow-sm border border-border whitespace-nowrap", children: [
+                formatTime2(dragValue),
+                " / ",
+                formatTime2(max)
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  Button_default,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    onClick: onToggleMute,
+                    title: muted ? "B\u1EADt ti\u1EBFng" : "T\u1EAFt ti\u1EBFng",
+                    className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
+                    children: muted || (volume ?? 1) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.VolumeX, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Volume2, { className: "w-4 h-4" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-24", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  Slider,
+                  {
+                    min: 0,
+                    max: 1,
+                    step: 0.05,
+                    value: Math.max(0, Math.min(volume ?? 1, 1)),
+                    onValueChange: (v) => onVolumeChange?.(v),
+                    trackClassName: "bg-muted",
+                    size: "sm",
+                    noFocus: true
+                  }
+                ) })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 relative", children: [
+              onGoLive && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onGoLive,
+                  title: "Tr\u1EF1c ti\u1EBFp (v\u1EC1 Live)",
+                  className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Dot, { className: "w-10 h-10 text-destructive" }),
+                    "Tr\u1EF1c ti\u1EBFp"
+                  ]
+                }
+              ),
+              onChangeRate && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", ref: rateWrapRef, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                  Button_default,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: () => setRateOpen((o) => !o),
+                    title: "T\u1ED1c \u0111\u1ED9 ph\xE1t",
+                    className: "bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
+                    children: [
+                      rate,
+                      "x"
+                    ]
+                  }
+                ),
+                rateOpen && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute bottom-9 right-0 bg-background/90 backdrop-blur rounded-md border border-border shadow-lg p-1 z-30", children: [0.5, 0.75, 1, 1.25, 1.5].map((r) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                  "button",
+                  {
+                    onClick: () => {
+                      onChangeRate(r);
+                      setRateOpen(false);
+                    },
+                    className: cn("block w-full text-left px-3 py-1 text-sm rounded hover:bg-accent", rate === r && "bg-accent"),
+                    children: [
+                      r,
+                      "x"
+                    ]
+                  },
+                  r
+                )) })
+              ] }),
+              onToggleFullscreen && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                Button_default,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onToggleFullscreen,
+                  title: "To\xE0n m\xE0n h\xECnh",
+                  className: "px-3 bg-background/60 hover:bg-background/80 border-transparent shadow-sm outline-none focus:outline-none focus:ring-0",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Maximize2, { className: "w-4 h-4" })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/CategoryTreeSelect.tsx
+var import_react16 = require("react");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1ECDn danh m\u1EE5c", disabled }) {
-  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
-  const [expandedNodes, setExpandedNodes] = (0, import_react15.useState)(/* @__PURE__ */ new Set());
+  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
+  const [expandedNodes, setExpandedNodes] = (0, import_react16.useState)(/* @__PURE__ */ new Set());
   const parentCategories = categories.filter((c) => !c.parent_id);
   const childrenMap = /* @__PURE__ */ new Map();
   categories.forEach((cat) => {
@@ -6050,8 +6486,8 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
     const hasChildren = children.length > 0;
     const isExpanded = expandedNodes.has(category.id);
     const isSelected = value.includes(category.id);
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "div",
         {
           className: cn(
@@ -6061,7 +6497,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
           ),
           style: { paddingLeft: `${level * 1.5 + 0.75}rem` },
           children: [
-            hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "button",
               {
                 type: "button",
@@ -6070,39 +6506,39 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
                   toggleExpand(category.id);
                 },
                 className: "p-0.5 hover:bg-accent rounded",
-                children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.ChevronRight, { className: "w-4 h-4" })
+                children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.ChevronRight, { className: "w-4 h-4" })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "w-5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "w-5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
               "div",
               {
                 onClick: () => handleSelect(category.id, category),
                 className: "flex items-center gap-2 flex-1",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     "div",
                     {
                       className: cn(
                         "w-4 h-4 border-2 rounded flex items-center justify-center transition-colors",
                         isSelected ? "bg-primary border-primary" : "border-muted-foreground/30"
                       ),
-                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Check, { className: "w-3 h-3 text-primary-foreground" })
+                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.Check, { className: "w-3 h-3 text-primary-foreground" })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn("text-sm", isSelected && "font-medium text-primary"), children: category.name })
                 ]
               }
             )
           ]
         }
       ),
-      hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: children.map((child) => renderCategory(child, level + 1)) })
+      hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: children.map((child) => renderCategory(child, level + 1)) })
     ] }, category.id);
   };
   const selectedCount = value.length;
   const displayText = selectedCount > 0 ? `\u0110\xE3 ch\u1ECDn ${selectedCount} danh m\u1EE5c` : placeholder;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "button",
       {
         type: "button",
@@ -6115,22 +6551,22 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
           isOpen && "border-primary ring-1 ring-primary"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.ChevronDown, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn("text-sm", selectedCount === 0 && "text-muted-foreground"), children: displayText }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.ChevronDown, { className: cn("w-4 h-4 transition-transform", isOpen && "transform rotate-180") })
         ]
       }
     ),
-    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute z-20 mt-1 w-full max-h-80 overflow-auto bg-background border rounded-md shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Kh\xF4ng c\xF3 danh m\u1EE5c n\xE0o" }) : parentCategories.map((cat) => renderCategory(cat)) }) })
+    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute z-20 mt-1 w-full max-h-80 overflow-auto bg-background border rounded-md shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-1", children: parentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Kh\xF4ng c\xF3 danh m\u1EE5c n\xE0o" }) : parentCategories.map((cat) => renderCategory(cat)) }) })
     ] })
   ] });
 }
 
 // ../../components/ui/SmartImage.tsx
 var import_image = __toESM(require("next/image"), 1);
-var import_react16 = __toESM(require("react"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react17 = __toESM(require("react"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var DEFAULT_FALLBACK = "/images/products/hoa-hong-do.png";
 function SmartImage({
   src,
@@ -6154,7 +6590,7 @@ function SmartImage({
     }
     return input;
   };
-  const [resolvedSrc, setResolvedSrc] = import_react16.default.useState(() => normalize(src));
+  const [resolvedSrc, setResolvedSrc] = import_react17.default.useState(() => normalize(src));
   const handleError = () => {
     if (resolvedSrc.endsWith(".jpg")) {
       setResolvedSrc(resolvedSrc.replace(/\.jpg($|\?)/, ".png$1"));
@@ -6162,9 +6598,9 @@ function SmartImage({
       setResolvedSrc(fallbackSrc);
     }
   };
-  const Wrapper = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("relative overflow-hidden bg-muted/30", ratioClass, roundedClass, className), children });
+  const Wrapper = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("relative overflow-hidden bg-muted/30", ratioClass, roundedClass, className), children });
   if (fill) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       import_image.default,
       {
         src: resolvedSrc,
@@ -6178,7 +6614,7 @@ function SmartImage({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("relative overflow-hidden bg-muted/30", roundedClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("relative overflow-hidden bg-muted/30", roundedClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_image.default,
     {
       src: resolvedSrc,
@@ -6195,10 +6631,10 @@ function SmartImage({
 }
 
 // ../../components/ui/ImageUpload.tsx
-var import_react17 = require("react");
-var import_lucide_react17 = require("lucide-react");
+var import_react18 = require("react");
+var import_lucide_react18 = require("lucide-react");
 var import_next_intl6 = require("next-intl");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function ImageUpload({
   onUpload,
   onRemove,
@@ -6214,10 +6650,10 @@ function ImageUpload({
   browseText,
   supportedFormatsText
 }) {
-  const [isDragging, setIsDragging] = (0, import_react17.useState)(false);
-  const [uploading, setUploading] = (0, import_react17.useState)(false);
-  const [uploadedImages, setUploadedImages] = (0, import_react17.useState)([]);
-  const fileInputRef = (0, import_react17.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react18.useState)(false);
+  const [uploading, setUploading] = (0, import_react18.useState)(false);
+  const [uploadedImages, setUploadedImages] = (0, import_react18.useState)([]);
+  const fileInputRef = (0, import_react18.useRef)(null);
   const { addToast } = useToast();
   const t = (0, import_next_intl6.useTranslations)("OCR.imageUpload");
   const previewSizes = {
@@ -6225,17 +6661,17 @@ function ImageUpload({
     md: "w-24 h-24",
     lg: "w-32 h-32"
   };
-  const handleDragOver = (0, import_react17.useCallback)((e) => {
+  const handleDragOver = (0, import_react18.useCallback)((e) => {
     e.preventDefault();
     if (!disabled) {
       setIsDragging(true);
     }
   }, [disabled]);
-  const handleDragLeave = (0, import_react17.useCallback)((e) => {
+  const handleDragLeave = (0, import_react18.useCallback)((e) => {
     e.preventDefault();
     setIsDragging(false);
   }, []);
-  const handleFiles = (0, import_react17.useCallback)(async (files) => {
+  const handleFiles = (0, import_react18.useCallback)(async (files) => {
     if (files.length === 0) return;
     const validFiles = files.filter((file) => {
       if (file.size > maxSize * 1024 * 1024) {
@@ -6299,14 +6735,14 @@ function ImageUpload({
       setUploading(false);
     }
   }, [maxSize, addToast, onUpload]);
-  const handleDrop = (0, import_react17.useCallback)((e) => {
+  const handleDrop = (0, import_react18.useCallback)((e) => {
     e.preventDefault();
     setIsDragging(false);
     if (disabled) return;
     const files = Array.from(e.dataTransfer.files);
     handleFiles(files);
   }, [disabled, handleFiles]);
-  const handleFileSelect = (0, import_react17.useCallback)((e) => {
+  const handleFileSelect = (0, import_react18.useCallback)((e) => {
     const files = Array.from(e.target.files || []);
     handleFiles(files);
     if (fileInputRef.current) {
@@ -6320,8 +6756,8 @@ function ImageUpload({
   const handleBrowseClick = () => {
     fileInputRef.current?.click();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "div",
       {
         className: cn(
@@ -6334,15 +6770,15 @@ function ImageUpload({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          uploading && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Loader2, { className: "w-6 h-6 animate-spin text-primary" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-sm font-medium", children: "Uploading..." })
+          uploading && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Loader2, { className: "w-6 h-6 animate-spin text-primary" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-sm font-medium", children: "Uploading..." })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Upload, { className: "w-6 h-6 text-primary" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-muted-foreground", children: dragDropText || t("dragDropText") }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Upload, { className: "w-6 h-6 text-primary" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-muted-foreground", children: dragDropText || t("dragDropText") }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 Button_default,
                 {
                   type: "button",
@@ -6354,9 +6790,9 @@ function ImageUpload({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs text-muted-foreground", children: supportedFormatsText || t("supportedFormats") })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xs text-muted-foreground", children: supportedFormatsText || t("supportedFormats") })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -6371,25 +6807,25 @@ function ImageUpload({
         ]
       }
     ),
-    showPreview && uploadedImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    showPreview && uploadedImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h4", { className: "text-sm font-medium", children: "Uploaded Images" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4", children: uploadedImages.map((image) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
           className: "relative group bg-card border border-border rounded-lg p-3",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               Button_default,
               {
                 variant: "danger",
                 size: "icon",
                 className: "absolute -top-2 -right-2 w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity z-10",
                 onClick: () => handleRemoveImage(image.id),
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.X, { className: "w-3 h-3" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.X, { className: "w-3 h-3" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-md", previewSizes[previewSize]), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("mx-auto mb-2 overflow-hidden rounded-md", previewSizes[previewSize]), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 "img",
                 {
                   src: image.url,
@@ -6402,18 +6838,18 @@ function ImageUpload({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "hidden w-full h-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Image, { className: "w-8 h-8 text-muted-foreground" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "hidden w-full h-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Image, { className: "w-8 h-8 text-muted-foreground" }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs font-medium truncate", title: image.originalName, children: image.originalName }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs text-muted-foreground", children: image.formattedSize }),
-              image.width && image.height && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xs font-medium truncate", title: image.originalName, children: image.originalName }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xs text-muted-foreground", children: image.formattedSize }),
+              image.width && image.height && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
                 image.width,
                 " \xD7 ",
                 image.height
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute top-1 left-1 w-5 h-5 bg-success rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Check, { className: "w-3 h-3 text-success-foreground" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute top-1 left-1 w-5 h-5 bg-success rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Check, { className: "w-3 h-3 text-success-foreground" }) })
           ]
         },
         image.id
@@ -6423,51 +6859,51 @@ function ImageUpload({
 }
 
 // ../../components/ui/Carousel.tsx
-var React27 = __toESM(require("react"), 1);
-var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var React28 = __toESM(require("react"), 1);
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Carousel({ children, autoScroll = true, autoScrollInterval = 5e3 }) {
-  const [currentIndex, setCurrentIndex] = React27.useState(0);
-  const totalSlides = React27.Children.count(children);
-  const [isPaused, setIsPaused] = React27.useState(false);
-  const scrollPrev = React27.useCallback(() => {
+  const [currentIndex, setCurrentIndex] = React28.useState(0);
+  const totalSlides = React28.Children.count(children);
+  const [isPaused, setIsPaused] = React28.useState(false);
+  const scrollPrev = React28.useCallback(() => {
     setCurrentIndex((prev) => prev > 0 ? prev - 1 : totalSlides - 1);
   }, [totalSlides]);
-  const scrollNext = React27.useCallback(() => {
+  const scrollNext = React28.useCallback(() => {
     setCurrentIndex((prev) => prev < totalSlides - 1 ? prev + 1 : 0);
   }, [totalSlides]);
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     if (!autoScroll || isPaused || totalSlides <= 1) return;
     const interval = setInterval(() => {
       scrollNext();
     }, autoScrollInterval);
     return () => clearInterval(interval);
   }, [autoScroll, isPaused, totalSlides, autoScrollInterval, scrollNext]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative w-full overflow-hidden", onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex transition-transform duration-500 ease-in-out", style: { transform: `translateX(-${currentIndex * 100}%)` }, children: React27.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-shrink-0 w-full h-full", children: child }, idx)) }),
-    totalSlides > 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative w-full overflow-hidden", onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex transition-transform duration-500 ease-in-out", style: { transform: `translateX(-${currentIndex * 100}%)` }, children: React28.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-shrink-0 w-full h-full", children: child }, idx)) }),
+    totalSlides > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Button_default,
         {
           onClick: scrollPrev,
           variant: "outline",
           size: "icon",
-          icon: import_lucide_react18.ArrowLeft,
+          icon: import_lucide_react19.ArrowLeft,
           className: "absolute left-4 top-1/2 -translate-y-1/2 hover:-translate-y-1/2 z-10 rounded-full will-change-transform bg-background/80 hover:bg-background border-border/50 hover:border-border text-foreground"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Button_default,
         {
           onClick: scrollNext,
           variant: "outline",
           size: "icon",
-          icon: import_lucide_react18.ArrowRight,
+          icon: import_lucide_react19.ArrowRight,
           className: "absolute right-4 top-1/2 -translate-y-1/2 hover:-translate-y-1/2 z-10 rounded-full will-change-transform bg-background/80 hover:bg-background border-border/50 hover:border-border text-foreground"
         }
       )
     ] }),
-    totalSlides > 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: Array.from({ length: totalSlides }, (_, idx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    totalSlides > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: Array.from({ length: totalSlides }, (_, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "button",
       {
         onClick: () => setCurrentIndex(idx),
@@ -6480,22 +6916,22 @@ function Carousel({ children, autoScroll = true, autoScrollInterval = 5e3 }) {
 }
 
 // ../../components/ui/ClientOnly.tsx
-var import_react18 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function ClientOnly({ children, fallback = null }) {
-  const [hasMounted, setHasMounted] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const [hasMounted, setHasMounted] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: fallback });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
 }
 
 // ../../components/ui/Loading.tsx
-var import_lucide_react19 = require("lucide-react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_lucide_react20 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var LoadingSpinner = ({
   size = "md",
   className,
@@ -6511,8 +6947,8 @@ var LoadingSpinner = ({
     foreground: "text-foreground",
     muted: "text-muted-foreground"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_lucide_react19.Activity,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_lucide_react20.Activity,
     {
       className: cn(
         "animate-spin",
@@ -6532,7 +6968,7 @@ var LoadingDots = ({
     foreground: "bg-foreground",
     muted: "bg-muted-foreground"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       className: cn(
@@ -6554,7 +6990,7 @@ var LoadingBar = ({
   label
 }) => {
   const pct = progress ? Math.min(Math.max(progress, 0), 100) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       className: cn("w-full bg-muted rounded-full h-2", className),
@@ -6563,7 +6999,7 @@ var LoadingBar = ({
       "aria-valuemax": pct === void 0 ? void 0 : 100,
       "aria-valuenow": pct === void 0 ? void 0 : Math.round(pct),
       "aria-label": label || "Loading",
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "div",
         {
           className: cn(
@@ -6580,10 +7016,10 @@ var LoadingBar = ({
 };
 
 // ../../components/ui/Table.tsx
-var import_react19 = __toESM(require("react"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Table = import_react19.default.forwardRef(
-  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var import_react20 = __toESM(require("react"), 1);
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var Table = import_react20.default.forwardRef(
+  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       className: cn(
@@ -6593,7 +7029,7 @@ var Table = import_react19.default.forwardRef(
         "backdrop-blur-sm transition-all duration-300",
         containerClassName
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "table",
         {
           ref,
@@ -6605,8 +7041,8 @@ var Table = import_react19.default.forwardRef(
   )
 );
 Table.displayName = "Table";
-var TableHeader = import_react19.default.forwardRef(
-  ({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+var TableHeader = import_react20.default.forwardRef(
+  ({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "thead",
     {
       ref,
@@ -6624,7 +7060,7 @@ var TableHeader = import_react19.default.forwardRef(
   )
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = import_react19.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableBody = import_react20.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "tbody",
   {
     ref,
@@ -6633,7 +7069,7 @@ var TableBody = import_react19.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = import_react19.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableFooter = import_react20.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "tfoot",
   {
     ref,
@@ -6645,7 +7081,7 @@ var TableFooter = import_react19.default.forwardRef(({ className, ...props }, re
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = import_react19.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableRow = import_react20.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "tr",
   {
     ref,
@@ -6659,7 +7095,7 @@ var TableRow = import_react19.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = import_react19.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableHead = import_react20.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "th",
   {
     ref,
@@ -6671,7 +7107,7 @@ var TableHead = import_react19.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = import_react19.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableCell = import_react20.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "td",
   {
     ref,
@@ -6680,7 +7116,7 @@ var TableCell = import_react19.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = import_react19.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableCaption = import_react20.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "caption",
   {
     ref,
@@ -6691,13 +7127,13 @@ var TableCaption = import_react19.default.forwardRef(({ className, ...props }, r
 TableCaption.displayName = "TableCaption";
 
 // ../../components/ui/DataTable.tsx
-var import_lucide_react20 = require("lucide-react");
-var import_react20 = __toESM(require("react"), 1);
+var import_lucide_react21 = require("lucide-react");
+var import_react21 = __toESM(require("react"), 1);
 var import_next_intl7 = require("next-intl");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = import_react20.default.useState(value);
-  import_react20.default.useEffect(() => {
+  const [debounced, setDebounced] = import_react21.default.useState(value);
+  import_react21.default.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -6711,6 +7147,7 @@ function DataTable({
   total = 0,
   page = 1,
   pageSize = 20,
+  pageSizeOptions,
   onQueryChange,
   caption,
   toolbar,
@@ -6722,14 +7159,20 @@ function DataTable({
   labels
 }) {
   const t = (0, import_next_intl7.useTranslations)("Common");
-  const [visibleCols, setVisibleCols] = import_react20.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
-  const [filters, setFilters] = import_react20.default.useState({});
-  const [sort, setSort] = import_react20.default.useState(null);
-  const [density, setDensity] = import_react20.default.useState("normal");
-  const [curPage, setCurPage] = import_react20.default.useState(page);
-  const [curPageSize, setCurPageSize] = import_react20.default.useState(pageSize);
+  const [visibleCols, setVisibleCols] = import_react21.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
+  const [filters, setFilters] = import_react21.default.useState({});
+  const [sort, setSort] = import_react21.default.useState(null);
+  const [density, setDensity] = import_react21.default.useState("normal");
+  const [curPage, setCurPage] = import_react21.default.useState(page);
+  const [curPageSize, setCurPageSize] = import_react21.default.useState(pageSize);
   const debouncedFilters = useDebounced(filters, 350);
-  import_react20.default.useEffect(() => {
+  import_react21.default.useEffect(() => {
+    setCurPage(page);
+  }, [page]);
+  import_react21.default.useEffect(() => {
+    setCurPageSize(pageSize);
+  }, [pageSize]);
+  import_react21.default.useEffect(() => {
     if (!onQueryChange) return;
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
   }, [debouncedFilters, sort, curPage, curPageSize]);
@@ -6748,7 +7191,7 @@ function DataTable({
       className: "h-8 w-full text-sm"
     };
     if (col.filter.type === "text") {
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Input_default,
         {
           ...commonProps,
@@ -6763,7 +7206,7 @@ function DataTable({
     }
     if (col.filter.type === "select") {
       const options = col.filter.options || [];
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Combobox,
         {
           options: ["", ...options],
@@ -6779,7 +7222,7 @@ function DataTable({
       );
     }
     if (col.filter.type === "date") {
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         DatePicker,
         {
           placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
@@ -6793,15 +7236,15 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TableRow, { children: visibleColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: visibleColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     TableHead,
     {
       style: { width: col.width },
       className: cn(col.align === "right" && "text-right", col.align === "center" && "text-center"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
-          col.sortable && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between gap-2 select-none min-h-[2.5rem]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
+          col.sortable && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "button",
             {
               className: cn(
@@ -6818,8 +7261,8 @@ function DataTable({
               },
               "aria-label": "Sort",
               title: `Sort by ${String(col.title)}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   "path",
                   {
                     d: "M7 8l3-3 3 3",
@@ -6830,7 +7273,7 @@ function DataTable({
                     opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   "path",
                   {
                     d: "M7 12l3 3 3-3",
@@ -6845,11 +7288,11 @@ function DataTable({
             }
           )
         ] }),
-        col.filter && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        col.filter && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           Popover,
           {
             placement: "bottom-start",
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "button",
               {
                 className: cn(
@@ -6859,16 +7302,16 @@ function DataTable({
                 ),
                 "aria-label": "Filter",
                 title: "Filter",
-                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react20.Filter, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react21.Filter, { className: "h-4 w-4" })
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "w-48 p-2 space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-48 p-2 space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
                 "Filter ",
                 col.title
               ] }),
               renderFilterControl(col),
-              filters[col.key] && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              filters[col.key] && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 "button",
                 {
                   onClick: () => {
@@ -6890,15 +7333,21 @@ function DataTable({
     },
     col.key
   )) });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
-        enableDensityToggle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  const isServerMode = Boolean(onQueryChange);
+  const displayedData = isServerMode ? data : import_react21.default.useMemo(() => {
+    const start = (curPage - 1) * curPageSize;
+    return data.slice(start, start + curPageSize);
+  }, [data, curPage, curPageSize]);
+  const totalItems = isServerMode ? total : data.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
+        enableDensityToggle && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
               labels?.density || t("density")
             ] }),
             items: [
@@ -6908,11 +7357,11 @@ function DataTable({
             ]
           }
         ),
-        enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -6923,15 +7372,15 @@ function DataTable({
               ) }),
               labels?.columns || t("columns")
             ] }),
-            children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+            children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
               DropdownMenuItem,
               {
                 onClick: () => {
                   setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "truncate", children: c.title })
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "truncate", children: c.title })
                 ]
               },
               c.key
@@ -6941,17 +7390,17 @@ function DataTable({
         toolbar
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn("relative rounded-lg border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("relative rounded-lg border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       Table,
       {
         containerClassName: "border-0 rounded-none shadow-none",
         className: "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-[5] [&_thead]:bg-background [&_thead]:backdrop-blur-sm",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TableHeader, { children: renderHeader }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableHeader, { children: renderHeader }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 "path",
                 {
                   className: "opacity-75",
@@ -6960,10 +7409,10 @@ function DataTable({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !data || data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : data.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-sm", children: "Loading..." })
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/30"), children: visibleColumns.map((col) => {
             const value = col.dataIndex ? row[col.dataIndex] : void 0;
-            return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               TableCell,
               {
                 className: cn(
@@ -6981,16 +7430,21 @@ function DataTable({
         ]
       }
     ) }),
-    total > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-lg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Pagination,
       {
         page: curPage,
-        totalPages: Math.ceil(total / curPageSize),
+        totalPages: Math.ceil(totalItems / curPageSize),
         onChange: (p) => setCurPage(p),
         className: "",
         showInfo: true,
-        totalItems: total,
-        pageSize: curPageSize
+        totalItems,
+        pageSize: curPageSize,
+        pageSizeOptions,
+        onPageSizeChange: (s) => {
+          setCurPage(1);
+          setCurPageSize(s);
+        }
       }
     ) })
   ] });
@@ -6998,10 +7452,10 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // ../../components/ui/Form.tsx
-var React31 = __toESM(require("react"), 1);
+var React32 = __toESM(require("react"), 1);
 
 // ../../node_modules/react-hook-form/dist/index.esm.mjs
-var import_react21 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 var isCheckBoxInput = (element) => element.type === "checkbox";
 var isDateObject = (value) => value instanceof Date;
 var isNullOrUndefined = (value) => value == null;
@@ -7089,12 +7543,12 @@ var INPUT_VALIDATION_RULES = {
   required: "required",
   validate: "validate"
 };
-var HookFormContext = import_react21.default.createContext(null);
+var HookFormContext = import_react22.default.createContext(null);
 HookFormContext.displayName = "HookFormContext";
-var useFormContext = () => import_react21.default.useContext(HookFormContext);
+var useFormContext = () => import_react22.default.useContext(HookFormContext);
 var FormProvider = (props) => {
   const { children, ...data } = props;
-  return import_react21.default.createElement(HookFormContext.Provider, { value: data }, children);
+  return import_react22.default.createElement(HookFormContext.Provider, { value: data }, children);
 };
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
   const result = {
@@ -7114,12 +7568,12 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
   }
   return result;
 };
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react21.default.useLayoutEffect : import_react21.default.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react22.default.useLayoutEffect : import_react22.default.useEffect;
 function useFormState(props) {
   const methods = useFormContext();
   const { control = methods.control, disabled, name, exact } = props || {};
-  const [formState, updateFormState] = import_react21.default.useState(control._formState);
-  const _localProxyFormState = import_react21.default.useRef({
+  const [formState, updateFormState] = import_react22.default.useState(control._formState);
+  const _localProxyFormState = import_react22.default.useRef({
     isDirty: false,
     isLoading: false,
     dirtyFields: false,
@@ -7140,10 +7594,10 @@ function useFormState(props) {
       });
     }
   }), [name, disabled, exact]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     _localProxyFormState.current.isValid && control._setValid(true);
   }, [control]);
-  return import_react21.default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+  return import_react22.default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 var isString = (value) => typeof value === "string";
 var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
@@ -7192,12 +7646,12 @@ function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new Wea
 function useWatch(props) {
   const methods = useFormContext();
   const { control = methods.control, name, defaultValue, disabled, exact, compute } = props || {};
-  const _defaultValue = import_react21.default.useRef(defaultValue);
-  const _compute = import_react21.default.useRef(compute);
-  const _computeFormValues = import_react21.default.useRef(void 0);
+  const _defaultValue = import_react22.default.useRef(defaultValue);
+  const _compute = import_react22.default.useRef(compute);
+  const _computeFormValues = import_react22.default.useRef(void 0);
   _compute.current = compute;
-  const defaultValueMemo = import_react21.default.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
-  const [value, updateValue] = import_react21.default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
+  const defaultValueMemo = import_react22.default.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
+  const [value, updateValue] = import_react22.default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
   useIsomorphicLayoutEffect(() => control._subscribe({
     name,
     formState: {
@@ -7219,14 +7673,14 @@ function useWatch(props) {
       }
     }
   }), [control, disabled, name, exact]);
-  import_react21.default.useEffect(() => control._removeUnmounted());
+  import_react22.default.useEffect(() => control._removeUnmounted());
   return value;
 }
 function useController(props) {
   const methods = useFormContext();
   const { name, disabled, control = methods.control, shouldUnregister, defaultValue } = props;
   const isArrayField = isNameInFieldArray(control._names.array, name);
-  const defaultValueMemo = import_react21.default.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
+  const defaultValueMemo = import_react22.default.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
   const value = useWatch({
     control,
     name,
@@ -7238,15 +7692,15 @@ function useController(props) {
     name,
     exact: true
   });
-  const _props = import_react21.default.useRef(props);
-  const _previousNameRef = import_react21.default.useRef(void 0);
-  const _registerProps = import_react21.default.useRef(control.register(name, {
+  const _props = import_react22.default.useRef(props);
+  const _previousNameRef = import_react22.default.useRef(void 0);
+  const _registerProps = import_react22.default.useRef(control.register(name, {
     ...props.rules,
     value,
     ...isBoolean(props.disabled) ? { disabled: props.disabled } : {}
   }));
   _props.current = props;
-  const fieldState = import_react21.default.useMemo(() => Object.defineProperties({}, {
+  const fieldState = import_react22.default.useMemo(() => Object.defineProperties({}, {
     invalid: {
       enumerable: true,
       get: () => !!get(formState.errors, name)
@@ -7268,21 +7722,21 @@ function useController(props) {
       get: () => get(formState.errors, name)
     }
   }), [formState, name]);
-  const onChange = import_react21.default.useCallback((event) => _registerProps.current.onChange({
+  const onChange = import_react22.default.useCallback((event) => _registerProps.current.onChange({
     target: {
       value: getEventValue(event),
       name
     },
     type: EVENTS.CHANGE
   }), [name]);
-  const onBlur = import_react21.default.useCallback(() => _registerProps.current.onBlur({
+  const onBlur = import_react22.default.useCallback(() => _registerProps.current.onBlur({
     target: {
       value: get(control._formValues, name),
       name
     },
     type: EVENTS.BLUR
   }), [name, control._formValues]);
-  const ref = import_react21.default.useCallback((elm) => {
+  const ref = import_react22.default.useCallback((elm) => {
     const field2 = get(control._fields, name);
     if (field2 && elm) {
       field2._f.ref = {
@@ -7293,7 +7747,7 @@ function useController(props) {
       };
     }
   }, [control._fields, name]);
-  const field = import_react21.default.useMemo(() => ({
+  const field = import_react22.default.useMemo(() => ({
     name,
     value,
     ...isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {},
@@ -7301,7 +7755,7 @@ function useController(props) {
     onBlur,
     ref
   }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
     const previousName = _previousNameRef.current;
     if (previousName && previousName !== name && !isArrayField) {
@@ -7331,13 +7785,13 @@ function useController(props) {
       (isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
     };
   }, [name, control, isArrayField, shouldUnregister]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     control._setDisabledField({
       disabled,
       name
     });
   }, [disabled, name, control]);
-  return import_react21.default.useMemo(() => ({
+  return import_react22.default.useMemo(() => ({
     field,
     formState,
     fieldState
@@ -8656,9 +9110,9 @@ function createFormControl(props = {}) {
   };
 }
 function useForm(props = {}) {
-  const _formControl = import_react21.default.useRef(void 0);
-  const _values = import_react21.default.useRef(void 0);
-  const [formState, updateFormState] = import_react21.default.useState({
+  const _formControl = import_react22.default.useRef(void 0);
+  const _values = import_react22.default.useRef(void 0);
+  const [formState, updateFormState] = import_react22.default.useState({
     isDirty: false,
     isValidating: false,
     isLoading: isFunction(props.defaultValues),
@@ -8707,8 +9161,8 @@ function useForm(props = {}) {
     control._formState.isReady = true;
     return sub;
   }, [control]);
-  import_react21.default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+  import_react22.default.useEffect(() => {
     if (props.mode) {
       control._options.mode = props.mode;
     }
@@ -8716,18 +9170,18 @@ function useForm(props = {}) {
       control._options.reValidateMode = props.reValidateMode;
     }
   }, [control, props.mode, props.reValidateMode]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (props.errors) {
       control._setErrors(props.errors);
       control._focusError();
     }
   }, [control, props.errors]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     props.shouldUnregister && control._subjects.state.next({
       values: control._getWatch()
     });
   }, [control, props.shouldUnregister]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (control._proxyFormState.isDirty) {
       const isDirty = control._getDirty();
       if (isDirty !== formState.isDirty) {
@@ -8737,7 +9191,7 @@ function useForm(props = {}) {
       }
     }
   }, [control, formState.isDirty]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (props.values && !deepEqual(props.values, _values.current)) {
       control._reset(props.values, {
         keepFieldsRef: true,
@@ -8749,7 +9203,7 @@ function useForm(props = {}) {
       control._resetDefaultValues();
     }
   }, [control, props.values]);
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     if (!control._state.mount) {
       control._setValid();
       control._state.mount = true;
@@ -8766,8 +9220,8 @@ function useForm(props = {}) {
 
 // ../../components/ui/Form.tsx
 var import_next_intl8 = require("next-intl");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var FormConfigContext = React31.createContext({ size: "md" });
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var FormConfigContext = React32.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -8780,24 +9234,24 @@ var FormWrapper = ({
   const methods = useForm({
     defaultValues: initialValues
   });
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
   }, [JSON.stringify(initialValues)]);
   const { validationSchema: _, ...formProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React31.createContext({});
+var FormFieldContext = React32.createContext({});
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Controller, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React31.useContext(FormFieldContext);
-  const itemContext = React31.useContext(FormItemContext);
+  const fieldContext = React32.useContext(FormFieldContext);
+  const itemContext = React32.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   if (!fieldContext) {
     try {
@@ -8818,22 +9272,22 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React31.createContext({});
-var FormItem = React31.forwardRef(({ className, ...props }, ref) => {
-  const id = React31.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
+var FormItemContext = React32.createContext({});
+var FormItem = React32.forwardRef(({ className, ...props }, ref) => {
+  const id = React32.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React31.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React32.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
-  const config = React31.useContext(FormConfigContext);
+  const config = React32.useContext(FormConfigContext);
   const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props });
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React31.forwardRef(({ ...props }, ref) => {
+var FormControl = React32.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       ref,
@@ -8845,37 +9299,37 @@ var FormControl = React31.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React31.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React32.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React31.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React32.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_runtime39.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React31.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var FormInput = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(FormItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormMessage, {})
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormMessage, {})
     ] })
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React31.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var FormCheckbox = React32.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(FormItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         Checkbox,
         {
           ref,
@@ -8889,20 +9343,20 @@ var FormCheckbox = React31.forwardRef(({ name, ...props }, ref) => /* @__PURE__
           ...props
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormMessage, {})
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormMessage, {})
     ] })
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React31.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
+var FormSubmitButton = React32.forwardRef(({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) }));
 FormSubmitButton.displayName = "FormSubmitButton";
 
 // ../../components/ui/NotificationModal.tsx
-var import_lucide_react21 = require("lucide-react");
+var import_lucide_react22 = require("lucide-react");
 var import_next_intl9 = require("next-intl");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function NotificationModal({ isOpen, onClose, notification, titleText, openLinkText, closeText }) {
   const t = (0, import_next_intl9.useTranslations)("Common");
   if (!notification) return null;
@@ -8923,26 +9377,26 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
       onClose();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     Modal_default,
     {
       isOpen,
       onClose,
       title: titleText || t("notifications"),
       size: "md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn(
             "w-2 h-2 rounded-full",
             !notification.is_read ? "bg-primary" : "bg-border"
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
         ] }),
-        notification.title && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
-        notification.body && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime2(notification.created_at) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
-          hasLink && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        notification.title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
+        notification.body && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime2(notification.created_at) }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
+          hasLink && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             Button_default,
             {
               variant: "primary",
@@ -8950,12 +9404,12 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
               onClick: handleLinkClick,
               className: "gap-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react21.ExternalLink, { className: "w-4 h-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react22.ExternalLink, { className: "w-4 h-4" }),
                 openLinkText || t("openLink")
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             Button_default,
             {
               variant: "ghost",
@@ -8974,13 +9428,13 @@ var NotificationModal_default = NotificationModal;
 // ../../components/ui/FloatingContacts.tsx
 var import_link2 = __toESM(require("next/link"), 1);
 var import_navigation = require("next/navigation");
-var import_lucide_react22 = require("lucide-react");
+var import_lucide_react23 = require("lucide-react");
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
-var import_react23 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 
 // ../../node_modules/react-icons/lib/iconContext.mjs
-var import_react22 = __toESM(require("react"), 1);
+var import_react23 = __toESM(require("react"), 1);
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -8988,7 +9442,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = import_react22.default.createContext && /* @__PURE__ */ import_react22.default.createContext(DefaultContext);
+var IconContext = import_react23.default.createContext && /* @__PURE__ */ import_react23.default.createContext(DefaultContext);
 
 // ../../node_modules/react-icons/lib/iconBase.mjs
 var _excluded = ["attr", "size", "title"];
@@ -9077,12 +9531,12 @@ function _toPrimitive(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 function Tree2Element(tree) {
-  return tree && tree.map((node, i) => /* @__PURE__ */ import_react23.default.createElement(node.tag, _objectSpread({
+  return tree && tree.map((node, i) => /* @__PURE__ */ import_react24.default.createElement(node.tag, _objectSpread({
     key: i
   }, node.attr), Tree2Element(node.child)));
 }
 function GenIcon(data) {
-  return (props) => /* @__PURE__ */ import_react23.default.createElement(IconBase, _extends({
+  return (props) => /* @__PURE__ */ import_react24.default.createElement(IconBase, _extends({
     attr: _objectSpread({}, data.attr)
   }, props), Tree2Element(data.child));
 }
@@ -9097,7 +9551,7 @@ function IconBase(props) {
     var className;
     if (conf.className) className = conf.className;
     if (props.className) className = (className ? className + " " : "") + props.className;
-    return /* @__PURE__ */ import_react23.default.createElement("svg", _extends({
+    return /* @__PURE__ */ import_react24.default.createElement("svg", _extends({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -9109,9 +9563,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && /* @__PURE__ */ import_react23.default.createElement("title", null, title), props.children);
+    }), title && /* @__PURE__ */ import_react24.default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? /* @__PURE__ */ import_react23.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+  return IconContext !== void 0 ? /* @__PURE__ */ import_react24.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
 }
 
 // ../../node_modules/react-icons/fa/index.mjs
@@ -9125,9 +9579,9 @@ function SiZalo(props) {
 }
 
 // ../../components/ui/FloatingContacts.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function MessengerIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.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",
@@ -9136,10 +9590,10 @@ function MessengerIcon(props) {
   ) });
 }
 function ZaloIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SiZalo, { size: 20, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SiZalo, { size: 20, ...props });
 }
 function InstagramIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FaInstagram, { size: 20, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FaInstagram, { size: 20, ...props });
 }
 function FloatingContacts({ className }) {
   const pathname = (0, import_navigation.usePathname)();
@@ -9174,8 +9628,8 @@ function FloatingContacts({ className }) {
       external: true
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42.jsx)(
       import_link2.default,
       {
         href: `tel:${hotline.replace(/\D/g, "")}`,
@@ -9186,10 +9640,10 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           "bg-[#22c55e]"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react22.Phone, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react23.Phone, { className: "w-6 h-6" })
       }
     ),
-    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       import_link2.default,
       {
         href,
@@ -9201,7 +9655,7 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           bg
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { className: "w-6 h-6" })
       },
       key
     ))
@@ -9209,17 +9663,17 @@ function FloatingContacts({ className }) {
 }
 
 // ../../components/ui/AccessDenied.tsx
-var import_lucide_react23 = require("lucide-react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_lucide_react24 = require("lucide-react");
+var import_jsx_runtime43 = 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" },
   info: { bg: "bg-info/5", border: "border-info/20", text: "text-info" }
 };
 var DEFAULT_ICONS = {
-  destructive: import_lucide_react23.ShieldAlert,
-  warning: import_lucide_react23.Ban,
-  info: import_lucide_react23.Lock
+  destructive: import_lucide_react24.ShieldAlert,
+  warning: import_lucide_react24.Ban,
+  info: import_lucide_react24.Lock
 };
 function AccessDenied({
   title = "Access Restricted",
@@ -9231,36 +9685,36 @@ function AccessDenied({
 }) {
   const styles = VARIANT_STYLES[variant];
   const UsedIcon = Icon || DEFAULT_ICONS[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
     ] }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
+    children && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
   ] }) });
 }
 
 // ../../components/ui/ThemeToggleHeadless.tsx
-var import_lucide_react24 = require("lucide-react");
-var import_react24 = require("react");
+var import_lucide_react25 = require("lucide-react");
+var import_react25 = require("react");
 var import_react_dom9 = require("react-dom");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function ThemeToggleHeadless({
   theme,
   onChange,
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
-  const [mounted, setMounted] = (0, import_react24.useState)(false);
-  const triggerRef = (0, import_react24.useRef)(null);
-  const [dropdownPosition, setDropdownPosition] = (0, import_react24.useState)(null);
-  (0, import_react24.useEffect)(() => setMounted(true), []);
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const [mounted, setMounted] = (0, import_react25.useState)(false);
+  const triggerRef = (0, import_react25.useRef)(null);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react25.useState)(null);
+  (0, import_react25.useEffect)(() => setMounted(true), []);
   const themes = [
-    { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react24.Sun },
-    { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react24.Moon },
-    { value: "system", label: labels?.system ?? "System", icon: import_lucide_react24.Monitor }
+    { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react25.Sun },
+    { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react25.Moon },
+    { value: "system", label: labels?.system ?? "System", icon: import_lucide_react25.Monitor }
   ];
   const current = mounted ? themes.find((t) => t.value === theme) || themes[2] : themes[2];
   const CurrentIcon = current.icon;
@@ -9274,8 +9728,8 @@ function ThemeToggleHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Button_default,
       {
         variant: "ghost",
@@ -9293,25 +9747,25 @@ function ThemeToggleHeadless({
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Theme",
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CurrentIcon, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom9.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom9.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && (0, import_react_dom9.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime43.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime44.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime43.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
                   Button_default,
                   {
                     variant: "ghost",
@@ -9327,9 +9781,9 @@ function ThemeToggleHeadless({
                     role: "menuitemradio",
                     "aria-checked": active,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
-                      active && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
+                      active && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
                     ]
                   },
                   opt.value
@@ -9345,10 +9799,10 @@ function ThemeToggleHeadless({
 }
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_dom10 = require("react-dom");
-var import_lucide_react25 = require("lucide-react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_lucide_react26 = require("lucide-react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -9356,9 +9810,9 @@ function LanguageSwitcherHeadless({
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
-  const [dropdownPosition, setDropdownPosition] = (0, import_react25.useState)(null);
-  const triggerButtonRef = (0, import_react25.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react26.useState)(null);
+  const triggerButtonRef = (0, import_react26.useRef)(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();
@@ -9370,8 +9824,8 @@ function LanguageSwitcherHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Button_default,
       {
         variant: "ghost",
@@ -9390,22 +9844,22 @@ function LanguageSwitcherHeadless({
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Language",
         title: labels?.heading ?? "Language",
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react25.Globe, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react26.Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && (0, import_react_dom10.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime44.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsxs)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -9418,9 +9872,9 @@ function LanguageSwitcherHeadless({
                   role: "menuitemradio",
                   "aria-checked": currentLocale === language.code,
                   children: [
-                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-lg", children: language.flag }),
-                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "flex-1 text-left", children: language.name }),
-                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-lg", children: language.flag }),
+                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "flex-1 text-left", children: language.name }),
+                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
                   ]
                 },
                 language.code
@@ -9624,6 +10078,7 @@ function getUnderverseMessages(locale = "en") {
   NotificationBadge,
   NotificationModal,
   NumberInput,
+  OverlayControls,
   PageLoading,
   Pagination,
   PasswordInput,