@underverse-ui/underverse 0.2.39 → 0.2.40

package/dist/index.cjs

@@ -32,9 +32,11 @@ var index_exports = {};
 __export(index_exports, {
   AccessDenied: () => AccessDenied,
   Alert: () => Alert_default,
+  AreaChart: () => AreaChart,
   Avatar: () => Avatar_default,
   Badge: () => Badge_default,
   BadgeBase: () => Badge,
+  BarChart: () => BarChart,
   BatteryProgress: () => BatteryProgress,
   BottomSheet: () => BottomSheet,
   Breadcrumb: () => Breadcrumb_default,
@@ -72,6 +74,7 @@ __export(index_exports, {
   FormLabel: () => FormLabel,
   FormMessage: () => FormMessage,
   FormSubmitButton: () => FormSubmitButton,
+  GaugeChart: () => GaugeChart,
   GlobalLoading: () => GlobalLoading,
   GradientBadge: () => GradientBadge,
   Grid: () => Grid_default,
@@ -83,6 +86,7 @@ __export(index_exports, {
   Label: () => Label,
   LanguageSwitcher: () => LanguageSwitcherHeadless,
   LanguageSwitcherHeadless: () => LanguageSwitcherHeadless,
+  LineChart: () => LineChart,
   List: () => List_default,
   ListItem: () => ListItem,
   LoadingBar: () => LoadingBar,
@@ -99,10 +103,12 @@ __export(index_exports, {
   PageLoading: () => PageLoading,
   Pagination: () => Pagination,
   PasswordInput: () => PasswordInput,
+  PieChart: () => PieChart,
   PillTabs: () => PillTabs,
   Popover: () => Popover,
   Progress: () => Progress,
   PulseBadge: () => PulseBadge,
+  RadarChart: () => RadarChart,
   RadioGroup: () => RadioGroup,
   RadioGroupItem: () => RadioGroupItem,
   SIZE_STYLES_BTN: () => SIZE_STYLES_BTN,
@@ -127,6 +133,7 @@ __export(index_exports, {
   SlideOver: () => SlideOver,
   Slider: () => Slider,
   SmartImage: () => SmartImage,
+  Sparkline: () => Sparkline,
   StatusBadge: () => StatusBadge,
   StepProgress: () => StepProgress,
   Switch: () => Switch_default,
@@ -10439,23 +10446,1387 @@ GridItem.displayName = "Grid.Item";
 var Grid = Object.assign(GridRoot, { Item: GridItem });
 var Grid_default = Grid;
 
-// ../../components/ui/ClientOnly.tsx
+// ../../components/ui/LineChart.tsx
+var import_react23 = require("react");
+
+// ../../components/ui/ChartTooltip.tsx
 var import_react22 = require("react");
+var import_react_dom10 = require("react-dom");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-function ClientOnly({ children, fallback = null }) {
-  const [hasMounted, setHasMounted] = (0, import_react22.useState)(false);
+function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, secondaryValue, items, containerRef }) {
+  const [isMounted, setIsMounted] = (0, import_react22.useState)(false);
+  const [position, setPosition] = (0, import_react22.useState)(null);
+  (0, import_react22.useEffect)(() => {
+    setIsMounted(true);
+  }, []);
   (0, import_react22.useEffect)(() => {
+    if (visible && containerRef?.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setPosition({
+        top: rect.top + y,
+        left: rect.left + x
+      });
+    }
+  }, [visible, x, y, containerRef]);
+  if (!visible || !isMounted || !position) return null;
+  const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: position.top,
+        left: position.left + 12,
+        zIndex: 99999,
+        pointerEvents: "none",
+        animation: "chartTooltipFadeIn 0.15s ease-out"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          "div",
+          {
+            className: cn("bg-popover text-popover-foreground border border-border", "rounded-lg shadow-xl px-3 py-2 text-sm", "backdrop-blur-sm"),
+            style: {
+              minWidth: "80px",
+              width: "max-content",
+              boxShadow: "0 10px 25px -3px rgba(0, 0, 0, 0.5), 0 4px 10px -2px rgba(0, 0, 0, 0.3)"
+            },
+            children: [
+              label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-muted-foreground text-xs mb-1", children: label }),
+              items && items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex flex-col gap-1", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2", children: [
+                item.color && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: item.color } }),
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "text-muted-foreground", children: [
+                  item.label,
+                  ":"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "font-semibold ml-auto", children: item.value })
+              ] }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  color && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: color } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "font-semibold", children: value })
+                ] }),
+                secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "text-muted-foreground text-xs mt-1", children: [
+                  secondaryLabel,
+                  ": ",
+                  secondaryValue
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("style", { children: `
+        @keyframes chartTooltipFadeIn {
+          from { opacity: 0; transform: translateX(-5px); }
+          to { opacity: 1; transform: translateX(0); }
+        }
+      ` })
+      ]
+    }
+  );
+  return (0, import_react_dom10.createPortal)(tooltipContent, document.body);
+}
+
+// ../../components/ui/LineChart.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function LineChart({
+  data,
+  width = 400,
+  height = 200,
+  color = "currentColor",
+  fillColor,
+  showDots = true,
+  showGrid = true,
+  showLabels = true,
+  showValues = false,
+  animated = true,
+  curved = true,
+  className = ""
+}) {
+  const svgRef = (0, import_react23.useRef)(null);
+  const padding = { top: 20, right: 20, bottom: 40, left: 40 };
+  const chartWidth = width - padding.left - padding.right;
+  const chartHeight = height - padding.top - padding.bottom;
+  const [hoveredPoint, setHoveredPoint] = (0, import_react23.useState)(null);
+  const { minValue, maxValue, points, linePath, areaPath } = (0, import_react23.useMemo)(() => {
+    if (!data.length) return { minValue: 0, maxValue: 0, points: [], linePath: "", areaPath: "" };
+    const values = data.map((d) => d.value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min || 1;
+    const pts = data.map((d, i) => ({
+      x: padding.left + i / (data.length - 1 || 1) * chartWidth,
+      y: padding.top + chartHeight - (d.value - min) / range * chartHeight,
+      ...d
+    }));
+    let path = "";
+    let area = "";
+    if (curved && pts.length > 2) {
+      path = `M ${pts[0].x} ${pts[0].y}`;
+      area = `M ${pts[0].x} ${padding.top + chartHeight} L ${pts[0].x} ${pts[0].y}`;
+      for (let i = 0; i < pts.length - 1; i++) {
+        const p0 = pts[Math.max(0, i - 1)];
+        const p1 = pts[i];
+        const p2 = pts[i + 1];
+        const p3 = pts[Math.min(pts.length - 1, i + 2)];
+        const cp1x = p1.x + (p2.x - p0.x) / 6;
+        const cp1y = p1.y + (p2.y - p0.y) / 6;
+        const cp2x = p2.x - (p3.x - p1.x) / 6;
+        const cp2y = p2.y - (p3.y - p1.y) / 6;
+        path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+        area += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+      }
+      area += ` L ${pts[pts.length - 1].x} ${padding.top + chartHeight} Z`;
+    } else {
+      path = pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+      area = `M ${pts[0].x} ${padding.top + chartHeight} ` + pts.map((p) => `L ${p.x} ${p.y}`).join(" ") + ` L ${pts[pts.length - 1].x} ${padding.top + chartHeight} Z`;
+    }
+    return { minValue: min, maxValue: max, points: pts, linePath: path, areaPath: area };
+  }, [data, chartWidth, chartHeight, curved, padding.left, padding.top]);
+  const gridLines = (0, import_react23.useMemo)(() => {
+    const lines = [];
+    const steps = 5;
+    for (let i = 0; i <= steps; i++) {
+      const y = padding.top + i / steps * chartHeight;
+      const value = maxValue - i / steps * (maxValue - minValue);
+      lines.push({ y, value });
+    }
+    return lines;
+  }, [minValue, maxValue, chartHeight, padding.top]);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+      showGrid && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", fill: "currentColor", className: "text-muted-foreground", children: line.value.toFixed(0) })
+      ] }, i)) }),
+      fillColor && areaPath && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: areaPath, fill: fillColor, opacity: 0.2, className: animated ? "animate-[fadeIn_0.6s_ease-out]" : "" }),
+      linePath && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        "path",
+        {
+          d: linePath,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: animated ? "animate-[drawLine_1s_ease-out]" : "",
+          style: animated ? {
+            strokeDasharray: 1e3,
+            strokeDashoffset: 0,
+            animation: "drawLine 1s ease-out forwards"
+          } : void 0
+        }
+      ),
+      showDots && points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+        "g",
+        {
+          onMouseEnter: () => setHoveredPoint({ x: point.x, y: point.y, label: point.label, value: point.value }),
+          onMouseLeave: () => setHoveredPoint(null),
+          className: "cursor-pointer",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              "circle",
+              {
+                cx: point.x,
+                cy: point.y,
+                r: hoveredPoint?.x === point.x ? 6 : 4,
+                fill: color,
+                className: `transition-all duration-150 ${animated ? "animate-[scaleIn_0.3s_ease-out]" : ""}`,
+                style: animated ? { animationDelay: `${i * 0.05}s`, animationFillMode: "both" } : void 0
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: point.x, cy: point.y, r: 16, fill: "transparent" }),
+            showValues && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("text", { x: point.x, y: point.y - 12, textAnchor: "middle", fontSize: "10", fontWeight: "500", className: "text-foreground", fill: "currentColor", children: point.value })
+          ]
+        },
+        i
+      )),
+      hoveredPoint && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("g", { className: "pointer-events-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "line",
+          {
+            x1: hoveredPoint.x,
+            y1: padding.top,
+            x2: hoveredPoint.x,
+            y2: padding.top + chartHeight,
+            stroke: color,
+            strokeWidth: 1,
+            strokeDasharray: "4 4",
+            opacity: 0.5
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          "line",
+          {
+            x1: padding.left,
+            y1: hoveredPoint.y,
+            x2: padding.left + chartWidth,
+            y2: hoveredPoint.y,
+            stroke: color,
+            strokeWidth: 1,
+            strokeDasharray: "4 4",
+            opacity: 0.5
+          }
+        )
+      ] }),
+      showLabels && points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("text", { x: point.x, y: height - 10, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: point.label }, i)),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("style", { children: `
+          @keyframes drawLine {
+            from { stroke-dashoffset: 1000; }
+            to { stroke-dashoffset: 0; }
+          }
+          @keyframes scaleIn {
+            from { transform: scale(0); opacity: 0; }
+            to { transform: scale(1); opacity: 1; }
+          }
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 0.2; }
+          }
+        ` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      ChartTooltip,
+      {
+        x: hoveredPoint?.x ?? 0,
+        y: hoveredPoint?.y ?? 0,
+        visible: !!hoveredPoint,
+        label: hoveredPoint?.label,
+        value: hoveredPoint?.value,
+        color,
+        containerRef: svgRef
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/BarChart.tsx
+var import_react24 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function BarChart({
+  data,
+  width = 400,
+  height = 200,
+  color = "currentColor",
+  showLabels = true,
+  showValues = true,
+  showGrid = true,
+  horizontal = false,
+  animated = true,
+  barRadius = 4,
+  barGap = 0.3,
+  className = ""
+}) {
+  const svgRef = (0, import_react24.useRef)(null);
+  const padding = horizontal ? { top: 20, right: 40, bottom: 20, left: 80 } : { top: 20, right: 20, bottom: 40, left: 40 };
+  const chartWidth = width - padding.left - padding.right;
+  const chartHeight = height - padding.top - padding.bottom;
+  const [hoveredBar, setHoveredBar] = (0, import_react24.useState)(null);
+  const { maxValue, bars, gridLines } = (0, import_react24.useMemo)(() => {
+    if (!data.length) return { maxValue: 0, bars: [], gridLines: [] };
+    const max = Math.max(...data.map((d) => d.value));
+    const barCount = data.length;
+    const barsData = data.map((d, i) => {
+      if (horizontal) {
+        const barHeight = chartHeight / barCount * (1 - barGap);
+        const gap = chartHeight / barCount * barGap;
+        return {
+          x: padding.left,
+          y: padding.top + i * (barHeight + gap) + gap / 2,
+          width: d.value / max * chartWidth,
+          height: barHeight,
+          ...d
+        };
+      } else {
+        const barWidth = chartWidth / barCount * (1 - barGap);
+        const gap = chartWidth / barCount * barGap;
+        return {
+          x: padding.left + i * (barWidth + gap) + gap / 2,
+          y: padding.top + chartHeight - d.value / max * chartHeight,
+          width: barWidth,
+          height: d.value / max * chartHeight,
+          ...d
+        };
+      }
+    });
+    const lines = [];
+    const steps = 5;
+    for (let i = 0; i <= steps; i++) {
+      const value = i / steps * max;
+      if (horizontal) {
+        lines.push({
+          x: padding.left + i / steps * chartWidth,
+          y1: padding.top,
+          y2: height - padding.bottom,
+          value
+        });
+      } else {
+        lines.push({
+          y: padding.top + chartHeight - i / steps * chartHeight,
+          x1: padding.left,
+          x2: width - padding.right,
+          value
+        });
+      }
+    }
+    return { maxValue: max, bars: barsData, gridLines: lines };
+  }, [data, chartWidth, chartHeight, horizontal, barGap, padding, width, height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+      showGrid && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("g", { children: horizontal ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("line", { x1: line.x, y1: line.y1, x2: line.x, y2: line.y2, stroke: "currentColor", strokeDasharray: "4 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("text", { x: line.x, y: height - 8, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("line", { x1: line.x1, y1: line.y, x2: line.x2, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
+      ] }) }, i)) }),
+      bars.map((bar, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        "g",
+        {
+          onMouseEnter: () => setHoveredBar({
+            x: horizontal ? bar.x + bar.width : bar.x + bar.width / 2,
+            y: horizontal ? bar.y + bar.height / 2 : bar.y,
+            label: bar.label,
+            value: bar.value,
+            color: bar.color || color
+          }),
+          onMouseLeave: () => setHoveredBar(null),
+          className: "cursor-pointer",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+              "rect",
+              {
+                x: bar.x,
+                y: horizontal ? bar.y : bar.y,
+                width: animated && !horizontal ? 0 : bar.width,
+                height: animated && horizontal ? bar.height : horizontal ? bar.height : 0,
+                rx: barRadius,
+                ry: barRadius,
+                fill: bar.color || color,
+                className: `transition-all duration-150 ${hoveredBar?.label === bar.label ? "opacity-80" : ""}`,
+                style: animated ? {
+                  animation: horizontal ? `growWidth 0.5s ease-out ${i * 0.1}s forwards` : `growHeight 0.5s ease-out ${i * 0.1}s forwards`,
+                  ...horizontal ? { width: 0 } : { height: 0, y: padding.top + chartHeight }
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    "animate",
+                    {
+                      attributeName: horizontal ? "width" : "height",
+                      from: "0",
+                      to: horizontal ? bar.width : bar.height,
+                      dur: "0.5s",
+                      begin: `${i * 0.1}s`,
+                      fill: "freeze"
+                    }
+                  ),
+                  !horizontal && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("animate", { attributeName: "y", from: padding.top + chartHeight, to: bar.y, dur: "0.5s", begin: `${i * 0.1}s`, fill: "freeze" })
+                ]
+              }
+            ),
+            showValues && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "text",
+              {
+                x: horizontal ? bar.x + bar.width + 8 : bar.x + bar.width / 2,
+                y: horizontal ? bar.y + bar.height / 2 + 4 : bar.y - 8,
+                textAnchor: horizontal ? "start" : "middle",
+                fontSize: "11",
+                fontWeight: "500",
+                className: "text-foreground",
+                fill: "currentColor",
+                style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.3}s forwards` } : void 0,
+                children: bar.value
+              }
+            ),
+            showLabels && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "text",
+              {
+                x: horizontal ? padding.left - 8 : bar.x + bar.width / 2,
+                y: horizontal ? bar.y + bar.height / 2 + 4 : height - 10,
+                textAnchor: horizontal ? "end" : "middle",
+                fontSize: "10",
+                className: "text-muted-foreground",
+                fill: "currentColor",
+                children: bar.label
+              }
+            )
+          ]
+        },
+        i
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("style", { children: `
+          @keyframes growHeight {
+            from { height: 0; }
+          }
+          @keyframes growWidth {
+            from { width: 0; }
+          }
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+        ` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      ChartTooltip,
+      {
+        x: hoveredBar?.x ?? 0,
+        y: hoveredBar?.y ?? 0,
+        visible: !!hoveredBar,
+        label: hoveredBar?.label,
+        value: hoveredBar?.value,
+        color: hoveredBar?.color,
+        containerRef: svgRef
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/PieChart.tsx
+var import_react25 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function PieChart({
+  data,
+  size = 200,
+  donut = false,
+  donutWidth = 40,
+  showLabels = true,
+  showLegend = true,
+  showPercentage = true,
+  animated = true,
+  startAngle = -90,
+  className = ""
+}) {
+  const containerRef = (0, import_react25.useRef)(null);
+  const center = size / 2;
+  const radius = size / 2 - 10;
+  const innerRadius = donut ? radius - donutWidth : 0;
+  const { segments, total } = (0, import_react25.useMemo)(() => {
+    if (!data.length) return { segments: [], total: 0 };
+    const sum = data.reduce((acc, d) => acc + d.value, 0);
+    let currentAngle = startAngle;
+    const segs = data.map((d, i) => {
+      const percentage = d.value / sum;
+      const angle = percentage * 360;
+      const startRad = currentAngle * Math.PI / 180;
+      const endRad = (currentAngle + angle) * Math.PI / 180;
+      const midRad = (currentAngle + angle / 2) * Math.PI / 180;
+      const largeArc = angle > 180 ? 1 : 0;
+      const x1 = center + radius * Math.cos(startRad);
+      const y1 = center + radius * Math.sin(startRad);
+      const x2 = center + radius * Math.cos(endRad);
+      const y2 = center + radius * Math.sin(endRad);
+      const x3 = center + innerRadius * Math.cos(endRad);
+      const y3 = center + innerRadius * Math.sin(endRad);
+      const x4 = center + innerRadius * Math.cos(startRad);
+      const y4 = center + innerRadius * Math.sin(startRad);
+      const labelRadius = radius + 20;
+      const labelX = center + labelRadius * Math.cos(midRad);
+      const labelY = center + labelRadius * Math.sin(midRad);
+      let path;
+      if (donut) {
+        path = [
+          `M ${x1} ${y1}`,
+          `A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`,
+          `L ${x3} ${y3}`,
+          `A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${x4} ${y4}`,
+          "Z"
+        ].join(" ");
+      } else {
+        path = [`M ${center} ${center}`, `L ${x1} ${y1}`, `A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`, "Z"].join(" ");
+      }
+      currentAngle += angle;
+      return {
+        path,
+        ...d,
+        percentage,
+        labelX,
+        labelY,
+        midAngle: currentAngle - angle / 2
+      };
+    });
+    return { segments: segs, total: sum };
+  }, [data, center, radius, innerRadius, donut, startAngle]);
+  const [hoveredSegment, setHoveredSegment] = (0, import_react25.useState)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ref: containerRef, className: `relative flex items-center gap-6 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("svg", { width: size + 40, height: size + 40, className: "overflow-visible", style: { fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("g", { transform: `translate(20, 20)`, children: [
+        segments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          "g",
+          {
+            onMouseEnter: () => setHoveredSegment({
+              x: seg.labelX + 20,
+              y: seg.labelY + 20,
+              label: seg.label,
+              value: seg.value,
+              percentage: seg.percentage,
+              color: seg.color
+            }),
+            onMouseLeave: () => setHoveredSegment(null),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                "path",
+                {
+                  d: seg.path,
+                  fill: seg.color,
+                  className: `transition-all duration-150 cursor-pointer ${hoveredSegment?.label === seg.label ? "opacity-80" : ""}`,
+                  style: {
+                    transformOrigin: `${center}px ${center}px`,
+                    transform: hoveredSegment?.label === seg.label ? "scale(1.05)" : "scale(1)",
+                    ...animated ? {
+                      opacity: hoveredSegment?.label === seg.label ? 0.8 : 0,
+                      animation: `pieSlice 0.5s ease-out ${i * 0.1}s forwards`
+                    } : void 0
+                  }
+                }
+              ),
+              showLabels && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                "text",
+                {
+                  x: seg.labelX,
+                  y: seg.labelY,
+                  textAnchor: seg.labelX > center ? "start" : "end",
+                  fontSize: "10",
+                  className: "text-foreground",
+                  fill: "currentColor",
+                  style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.3}s forwards` } : void 0,
+                  children: showPercentage ? `${(seg.percentage * 100).toFixed(0)}%` : seg.value
+                }
+              )
+            ]
+          },
+          i
+        )),
+        donut && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("text", { x: center, y: center - 5, textAnchor: "middle", fontSize: "12", className: "text-muted-foreground", fill: "currentColor", children: "Total" }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("text", { x: center, y: center + 15, textAnchor: "middle", fontSize: "18", fontWeight: "600", className: "text-foreground", fill: "currentColor", children: total })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("style", { children: `
+          @keyframes pieSlice {
+            from {
+              opacity: 0;
+              transform: scale(0);
+            }
+            to {
+              opacity: 1;
+              transform: scale(1);
+            }
+          }
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+        ` })
+    ] }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-col gap-2", children: segments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      "div",
+      {
+        className: "flex items-center gap-2 text-sm",
+        style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.3}s forwards` } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "w-3 h-3 rounded-sm shrink-0", style: { backgroundColor: seg.color } }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-muted-foreground", children: seg.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-foreground font-medium ml-auto", children: showPercentage ? `${(seg.percentage * 100).toFixed(0)}%` : seg.value })
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      ChartTooltip,
+      {
+        x: hoveredSegment?.x ?? center,
+        y: hoveredSegment?.y ?? center,
+        visible: !!hoveredSegment,
+        label: hoveredSegment?.label,
+        value: `${hoveredSegment?.value} (${((hoveredSegment?.percentage ?? 0) * 100).toFixed(1)}%)`,
+        color: hoveredSegment?.color,
+        containerRef
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/AreaChart.tsx
+var import_react26 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function getCatmullRomSpline(points) {
+  if (points.length < 2) return "";
+  if (points.length === 2) {
+    return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+  }
+  let path = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[Math.max(0, i - 1)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(points.length - 1, i + 2)];
+    const tension = 0.5;
+    const cp1x = p1.x + (p2.x - p0.x) * tension / 6;
+    const cp1y = p1.y + (p2.y - p0.y) * tension / 6;
+    const cp2x = p2.x - (p3.x - p1.x) * tension / 6;
+    const cp2y = p2.y - (p3.y - p1.y) * tension / 6;
+    path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+  }
+  return path;
+}
+function AreaChart({
+  series,
+  width = 400,
+  height = 200,
+  showDots = true,
+  showGrid = true,
+  showLabels = true,
+  showLegend = true,
+  animated = true,
+  stacked = false,
+  curved = true,
+  className = ""
+}) {
+  const containerRef = (0, import_react26.useRef)(null);
+  const padding = { top: 20, right: 20, bottom: 40, left: 50 };
+  const chartWidth = width - padding.left - padding.right;
+  const chartHeight = height - padding.top - padding.bottom;
+  const [hoveredPoint, setHoveredPoint] = (0, import_react26.useState)(null);
+  const { processedSeries, gridLines, maxValue, labels } = (0, import_react26.useMemo)(() => {
+    if (!series.length || !series[0]?.data?.length) {
+      return { processedSeries: [], gridLines: [], maxValue: 0, labels: [] };
+    }
+    const allLabels = series[0].data.map((d) => d.label);
+    const dataLength = series[0].data.length;
+    let max = 0;
+    if (stacked) {
+      for (let i = 0; i < dataLength; i++) {
+        const stackedValue = series.reduce((sum, s) => sum + (s.data[i]?.value || 0), 0);
+        max = Math.max(max, stackedValue);
+      }
+    } else {
+      max = Math.max(...series.flatMap((s) => s.data.map((d) => d.value)));
+    }
+    const processed = series.map((s, seriesIndex) => {
+      const points = s.data.map((d, i) => {
+        const x = padding.left + i / (dataLength - 1) * chartWidth;
+        let y;
+        if (stacked && seriesIndex > 0) {
+          const stackedBase = series.slice(0, seriesIndex).reduce((sum, prevS) => sum + (prevS.data[i]?.value || 0), 0);
+          const stackedValue = stackedBase + d.value;
+          y = padding.top + chartHeight - stackedValue / max * chartHeight;
+        } else {
+          y = padding.top + chartHeight - d.value / max * chartHeight;
+        }
+        return { x, y, value: d.value, label: d.label };
+      });
+      const linePath = curved ? getCatmullRomSpline(points) : `M ${points.map((p) => `${p.x} ${p.y}`).join(" L ")}`;
+      let areaPath;
+      if (stacked && seriesIndex > 0) {
+        const prevSeriesPoints = series.slice(0, seriesIndex).reduce((acc, prevS) => {
+          return prevS.data.map((d, i) => {
+            const prevVal = acc[i] || 0;
+            return prevVal + d.value;
+          });
+        }, []).map((val, i) => ({
+          x: padding.left + i / (dataLength - 1) * chartWidth,
+          y: padding.top + chartHeight - val / max * chartHeight
+        }));
+        const reversedPrevPoints = [...prevSeriesPoints].reverse();
+        areaPath = `${linePath} L ${reversedPrevPoints.map((p) => `${p.x} ${p.y}`).join(" L ")} Z`;
+      } else {
+        areaPath = `${linePath} L ${padding.left + chartWidth} ${padding.top + chartHeight} L ${padding.left} ${padding.top + chartHeight} Z`;
+      }
+      return {
+        ...s,
+        points,
+        linePath,
+        areaPath,
+        lineLength: points.reduce((acc, p, i) => {
+          if (i === 0) return 0;
+          const prev = points[i - 1];
+          return acc + Math.sqrt(Math.pow(p.x - prev.x, 2) + Math.pow(p.y - prev.y, 2));
+        }, 0)
+      };
+    });
+    const lines = [];
+    const steps = 5;
+    for (let i = 0; i <= steps; i++) {
+      const value = i / steps * max;
+      lines.push({
+        y: padding.top + chartHeight - i / steps * chartHeight,
+        value
+      });
+    }
+    return { processedSeries: processed, gridLines: lines, maxValue: max, labels: allLabels };
+  }, [series, chartWidth, chartHeight, padding, stacked, curved]);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ref: containerRef, className: `relative flex flex-col gap-4 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("svg", { width, height, className: "overflow-visible", style: { fontFamily: "inherit" }, children: [
+      showGrid && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
+      ] }, i)) }),
+      [...processedSeries].reverse().map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "path",
+        {
+          d: s.areaPath,
+          fill: s.color,
+          fillOpacity: s.fillOpacity ?? 0.3,
+          className: "transition-all duration-300",
+          style: animated ? {
+            opacity: 0,
+            animation: `fadeIn 0.5s ease-out ${i * 0.1}s forwards`
+          } : void 0
+        },
+        `area-${i}`
+      )),
+      processedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "path",
+        {
+          d: s.linePath,
+          fill: "none",
+          stroke: s.color,
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          style: animated ? {
+            strokeDasharray: s.lineLength,
+            strokeDashoffset: s.lineLength,
+            animation: `drawLine 1s ease-out ${i * 0.1}s forwards`
+          } : void 0
+        },
+        `line-${i}`
+      )),
+      showDots && processedSeries.map(
+        (s, seriesIdx) => s.points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+          "g",
+          {
+            onMouseEnter: () => {
+              const items = processedSeries.map((ps) => ({
+                label: ps.name,
+                value: ps.points[i]?.value ?? 0,
+                color: ps.color
+              }));
+              setHoveredPoint({
+                x: point.x,
+                y: point.y,
+                label: point.label,
+                items
+              });
+            },
+            onMouseLeave: () => setHoveredPoint(null),
+            className: "cursor-pointer",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                "circle",
+                {
+                  cx: point.x,
+                  cy: point.y,
+                  r: hoveredPoint?.x === point.x ? 6 : 4,
+                  fill: s.color,
+                  className: "transition-all duration-150",
+                  style: animated ? {
+                    transform: "scale(0)",
+                    opacity: 0,
+                    transformOrigin: `${point.x}px ${point.y}px`,
+                    animation: `dotPop 0.3s ease-out ${seriesIdx * 0.1 + i * 0.05 + 0.5}s forwards`
+                  } : void 0
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: point.x, cy: point.y, r: 12, fill: "transparent" })
+            ]
+          },
+          `dot-${seriesIdx}-${i}`
+        ))
+      ),
+      showLabels && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("g", { className: "text-muted-foreground", children: labels.map((label, i) => {
+        const x = padding.left + i / (labels.length - 1) * chartWidth;
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("text", { x, y: height - 10, textAnchor: "middle", fontSize: "10", fill: "currentColor", children: label }, i);
+      }) }),
+      hoveredPoint && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("g", { className: "pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "line",
+        {
+          x1: hoveredPoint.x,
+          y1: padding.top,
+          x2: hoveredPoint.x,
+          y2: padding.top + chartHeight,
+          stroke: "currentColor",
+          strokeWidth: 1,
+          strokeDasharray: "4 4",
+          opacity: 0.3,
+          className: "text-foreground"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("style", { children: `
+          @keyframes drawLine {
+            to {
+              stroke-dashoffset: 0;
+            }
+          }
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          @keyframes dotPop {
+            from {
+              transform: scale(0);
+              opacity: 0;
+            }
+            to {
+              transform: scale(1);
+              opacity: 1;
+            }
+          }
+        ` })
+    ] }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-center justify-center gap-6", children: series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      "div",
+      {
+        className: "flex items-center gap-2 text-sm",
+        style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.5}s forwards` } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: s.color } }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-muted-foreground", children: s.name })
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      ChartTooltip,
+      {
+        x: hoveredPoint?.x ?? 0,
+        y: hoveredPoint?.y ?? 0,
+        visible: !!hoveredPoint,
+        label: hoveredPoint?.label,
+        items: hoveredPoint?.items,
+        containerRef
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/Sparkline.tsx
+var import_react27 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function getCatmullRomSpline2(points) {
+  if (points.length < 2) return "";
+  if (points.length === 2) {
+    return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+  }
+  let path = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[Math.max(0, i - 1)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(points.length - 1, i + 2)];
+    const tension = 0.5;
+    const cp1x = p1.x + (p2.x - p0.x) * tension / 6;
+    const cp1y = p1.y + (p2.y - p0.y) * tension / 6;
+    const cp2x = p2.x - (p3.x - p1.x) * tension / 6;
+    const cp2y = p2.y - (p3.y - p1.y) * tension / 6;
+    path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+  }
+  return path;
+}
+function Sparkline({
+  data,
+  width = 100,
+  height = 30,
+  color = "currentColor",
+  fillColor,
+  showFill = true,
+  showDots = false,
+  showEndDot = true,
+  animated = true,
+  curved = true,
+  strokeWidth = 2,
+  className = ""
+}) {
+  const padding = 4;
+  const chartWidth = width - padding * 2;
+  const chartHeight = height - padding * 2;
+  const { points, linePath, areaPath, lineLength, trend } = (0, import_react27.useMemo)(() => {
+    const normalizedData = data.map((d) => typeof d === "number" ? d : d.value);
+    if (!normalizedData.length) {
+      return { points: [], linePath: "", areaPath: "", lineLength: 0, trend: 0 };
+    }
+    const min = Math.min(...normalizedData);
+    const max = Math.max(...normalizedData);
+    const range = max - min || 1;
+    const pts = normalizedData.map((value, i) => ({
+      x: padding + i / (normalizedData.length - 1) * chartWidth,
+      y: padding + chartHeight - (value - min) / range * chartHeight,
+      value
+    }));
+    const line = curved ? getCatmullRomSpline2(pts) : `M ${pts.map((p) => `${p.x} ${p.y}`).join(" L ")}`;
+    const area = `${line} L ${padding + chartWidth} ${padding + chartHeight} L ${padding} ${padding + chartHeight} Z`;
+    const length = pts.reduce((acc, p, i) => {
+      if (i === 0) return 0;
+      const prev = pts[i - 1];
+      return acc + Math.sqrt(Math.pow(p.x - prev.x, 2) + Math.pow(p.y - prev.y, 2));
+    }, 0);
+    const trendValue = normalizedData[normalizedData.length - 1] - normalizedData[0];
+    return { points: pts, linePath: line, areaPath: area, lineLength: length, trend: trendValue };
+  }, [data, chartWidth, chartHeight, padding, curved]);
+  const effectiveFillColor = fillColor || color;
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("svg", { width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+    showFill && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "path",
+      {
+        d: areaPath,
+        fill: effectiveFillColor,
+        fillOpacity: 0.1,
+        style: animated ? { opacity: 0, animation: "fadeIn 0.5s ease-out 0.3s forwards" } : void 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "path",
+      {
+        d: linePath,
+        fill: "none",
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: animated ? {
+          strokeDasharray: lineLength,
+          strokeDashoffset: lineLength,
+          animation: "drawLine 0.8s ease-out forwards"
+        } : void 0
+      }
+    ),
+    showDots && points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "circle",
+      {
+        cx: point.x,
+        cy: point.y,
+        r: 2,
+        fill: color,
+        style: animated ? {
+          opacity: 0,
+          animation: `fadeIn 0.3s ease-out ${i * 0.05 + 0.5}s forwards`
+        } : void 0
+      },
+      i
+    )),
+    showEndDot && !showDots && points.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "circle",
+      {
+        cx: points[points.length - 1].x,
+        cy: points[points.length - 1].y,
+        r: 3,
+        fill: color,
+        style: animated ? {
+          opacity: 0,
+          transform: "scale(0)",
+          transformOrigin: `${points[points.length - 1].x}px ${points[points.length - 1].y}px`,
+          animation: "dotPop 0.3s ease-out 0.6s forwards"
+        } : void 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("style", { children: `
+        @keyframes drawLine {
+          to {
+            stroke-dashoffset: 0;
+          }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes dotPop {
+          from {
+            transform: scale(0);
+            opacity: 0;
+          }
+          to {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+      ` })
+  ] });
+}
+
+// ../../components/ui/RadarChart.tsx
+var import_react28 = require("react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+function RadarChart({
+  series,
+  size = 300,
+  levels = 5,
+  showLabels = true,
+  showLegend = true,
+  showValues = false,
+  animated = true,
+  className = ""
+}) {
+  const containerRef = (0, import_react28.useRef)(null);
+  const center = size / 2;
+  const radius = size / 2 - 40;
+  const [hoveredPoint, setHoveredPoint] = (0, import_react28.useState)(null);
+  const { axes, processedSeries, levelPaths } = (0, import_react28.useMemo)(() => {
+    if (!series.length || !series[0]?.data?.length) {
+      return { axes: [], processedSeries: [], levelPaths: [] };
+    }
+    const axisLabels = series[0].data.map((d) => d.axis);
+    const axisCount = axisLabels.length;
+    const angleStep = 2 * Math.PI / axisCount;
+    const maxValue = Math.max(...series.flatMap((s) => s.data.map((d) => d.value)));
+    const axesData = axisLabels.map((label, i) => {
+      const angle = i * angleStep - Math.PI / 2;
+      const x = center + radius * Math.cos(angle);
+      const y = center + radius * Math.sin(angle);
+      const labelX = center + (radius + 20) * Math.cos(angle);
+      const labelY = center + (radius + 20) * Math.sin(angle);
+      return { label, x, y, labelX, labelY, angle };
+    });
+    const levelsData = [];
+    for (let l = 1; l <= levels; l++) {
+      const levelRadius = l / levels * radius;
+      const points = axisLabels.map((_, i) => {
+        const angle = i * angleStep - Math.PI / 2;
+        return {
+          x: center + levelRadius * Math.cos(angle),
+          y: center + levelRadius * Math.sin(angle)
+        };
+      });
+      levelsData.push({
+        path: `M ${points.map((p) => `${p.x} ${p.y}`).join(" L ")} Z`,
+        level: l,
+        value: l / levels * maxValue
+      });
+    }
+    const processed = series.map((s) => {
+      const points = s.data.map((d, i) => {
+        const angle = i * angleStep - Math.PI / 2;
+        const r = d.value / maxValue * radius;
+        return {
+          x: center + r * Math.cos(angle),
+          y: center + r * Math.sin(angle),
+          value: d.value
+        };
+      });
+      return {
+        ...s,
+        points,
+        path: `M ${points.map((p) => `${p.x} ${p.y}`).join(" L ")} Z`
+      };
+    });
+    return { axes: axesData, processedSeries: processed, levelPaths: levelsData };
+  }, [series, center, radius, levels]);
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref: containerRef, className: `relative flex flex-col gap-4 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("svg", { width: size, height: size, className: "overflow-visible", style: { fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("g", { className: "text-muted-foreground/20", children: levelPaths.map((level, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: level.path, fill: "none", stroke: "currentColor", strokeWidth: 1 }, i)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("g", { className: "text-muted-foreground/30", children: axes.map((axis, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("line", { x1: center, y1: center, x2: axis.x, y2: axis.y, stroke: "currentColor", strokeWidth: 1 }, i)) }),
+      processedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          "path",
+          {
+            d: s.path,
+            fill: s.color,
+            fillOpacity: s.fillOpacity ?? 0.2,
+            stroke: s.color,
+            strokeWidth: 2,
+            strokeLinejoin: "round",
+            className: "transition-all duration-300",
+            style: animated ? {
+              opacity: 0,
+              transform: "scale(0)",
+              transformOrigin: `${center}px ${center}px`,
+              animation: `radarPop 0.5s ease-out ${i * 0.15}s forwards`
+            } : void 0
+          }
+        ),
+        s.points.map((point, j) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+          "g",
+          {
+            onMouseEnter: () => {
+              const items = processedSeries.map((ps) => ({
+                label: ps.name,
+                value: ps.points[j]?.value ?? 0,
+                color: ps.color
+              }));
+              setHoveredPoint({
+                x: point.x,
+                y: point.y,
+                axis: series[0]?.data[j]?.axis ?? "",
+                items
+              });
+            },
+            onMouseLeave: () => setHoveredPoint(null),
+            className: "cursor-pointer",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                "circle",
+                {
+                  cx: point.x,
+                  cy: point.y,
+                  r: hoveredPoint?.axis === series[0]?.data[j]?.axis ? 6 : 4,
+                  fill: s.color,
+                  className: "transition-all duration-150",
+                  style: animated ? {
+                    opacity: 0,
+                    transform: "scale(0)",
+                    transformOrigin: `${point.x}px ${point.y}px`,
+                    animation: `dotPop 0.3s ease-out ${i * 0.15 + j * 0.05 + 0.3}s forwards`
+                  } : void 0
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { cx: point.x, cy: point.y, r: 12, fill: "transparent" })
+            ]
+          },
+          j
+        )),
+        showValues && s.points.map((point, j) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          "text",
+          {
+            x: point.x,
+            y: point.y - 10,
+            textAnchor: "middle",
+            fontSize: "10",
+            fontWeight: "500",
+            className: "text-foreground",
+            fill: "currentColor",
+            style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.15 + 0.5}s forwards` } : void 0,
+            children: point.value
+          },
+          `val-${j}`
+        ))
+      ] }, i)),
+      showLabels && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("g", { className: "text-muted-foreground", children: axes.map((axis, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("text", { x: axis.labelX, y: axis.labelY, textAnchor: "middle", dominantBaseline: "middle", fontSize: "11", fill: "currentColor", children: axis.label }, i)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("style", { children: `
+          @keyframes radarPop {
+            from {
+              opacity: 0;
+              transform: scale(0);
+            }
+            to {
+              opacity: 1;
+              transform: scale(1);
+            }
+          }
+          @keyframes dotPop {
+            from {
+              transform: scale(0);
+              opacity: 0;
+            }
+            to {
+              transform: scale(1);
+              opacity: 1;
+            }
+          }
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+        ` })
+    ] }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex items-center justify-center gap-6", children: series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      "div",
+      {
+        className: "flex items-center gap-2 text-sm",
+        style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.5}s forwards` } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: s.color } }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-muted-foreground", children: s.name })
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      ChartTooltip,
+      {
+        x: hoveredPoint?.x ?? 0,
+        y: hoveredPoint?.y ?? 0,
+        visible: !!hoveredPoint,
+        label: hoveredPoint?.axis,
+        items: hoveredPoint?.items,
+        containerRef
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/GaugeChart.tsx
+var import_react29 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+function GaugeChart({
+  value,
+  min = 0,
+  max = 100,
+  size = 200,
+  thickness = 20,
+  color = "currentColor",
+  backgroundColor,
+  showValue = true,
+  showMinMax = true,
+  label,
+  animated = true,
+  startAngle = -135,
+  endAngle = 135,
+  className = ""
+}) {
+  const center = size / 2;
+  const radius = center - thickness / 2 - 10;
+  const { backgroundPath, valuePath, percentage, needleAngle } = (0, import_react29.useMemo)(() => {
+    const normalizedValue = Math.min(Math.max(value, min), max);
+    const pct = (normalizedValue - min) / (max - min);
+    const totalAngle = endAngle - startAngle;
+    const currentAngle = startAngle + pct * totalAngle;
+    const polarToCartesian = (angle) => {
+      const radians = angle * Math.PI / 180;
+      return {
+        x: center + radius * Math.cos(radians),
+        y: center + radius * Math.sin(radians)
+      };
+    };
+    const createArc = (start, end) => {
+      const startPoint = polarToCartesian(start);
+      const endPoint = polarToCartesian(end);
+      const largeArc = Math.abs(end - start) > 180 ? 1 : 0;
+      return `M ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArc} 1 ${endPoint.x} ${endPoint.y}`;
+    };
+    return {
+      backgroundPath: createArc(startAngle, endAngle),
+      valuePath: createArc(startAngle, currentAngle),
+      percentage: pct,
+      needleAngle: currentAngle
+    };
+  }, [value, min, max, center, radius, startAngle, endAngle]);
+  const needleLength = radius - 10;
+  const needleAngleRad = needleAngle * Math.PI / 180;
+  const needleX = center + needleLength * Math.cos(needleAngleRad);
+  const needleY = center + needleLength * Math.sin(needleAngleRad);
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("svg", { width: size, height: size * 0.7, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "path",
+      {
+        d: backgroundPath,
+        fill: "none",
+        stroke: backgroundColor || "currentColor",
+        strokeWidth: thickness,
+        strokeLinecap: "round",
+        className: !backgroundColor ? "text-muted-foreground/20" : ""
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "path",
+      {
+        d: valuePath,
+        fill: "none",
+        stroke: color,
+        strokeWidth: thickness,
+        strokeLinecap: "round",
+        style: animated ? {
+          strokeDasharray: "1000",
+          strokeDashoffset: 1e3,
+          animation: "drawArc 1s ease-out forwards"
+        } : void 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+      "g",
+      {
+        style: animated ? {
+          transform: `rotate(${startAngle}deg)`,
+          transformOrigin: `${center}px ${center}px`,
+          animation: `needleRotate 1s ease-out forwards`,
+          ["--needle-end"]: `${needleAngle}deg`
+        } : {
+          transform: `rotate(${needleAngle}deg)`,
+          transformOrigin: `${center}px ${center}px`
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("line", { x1: center, y1: center, x2: center + needleLength, y2: center, stroke: color, strokeWidth: 3, strokeLinecap: "round" }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: center, cy: center, r: 8, fill: color }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("circle", { cx: center, cy: center, r: 4, className: "text-background", fill: "currentColor" })
+        ]
+      }
+    ),
+    showMinMax && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("g", { className: "text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        "text",
+        {
+          x: center + (radius + 20) * Math.cos(startAngle * Math.PI / 180),
+          y: center + (radius + 20) * Math.sin(startAngle * Math.PI / 180) + 5,
+          textAnchor: "middle",
+          fontSize: "10",
+          fill: "currentColor",
+          children: min
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        "text",
+        {
+          x: center + (radius + 20) * Math.cos(endAngle * Math.PI / 180),
+          y: center + (radius + 20) * Math.sin(endAngle * Math.PI / 180) + 5,
+          textAnchor: "middle",
+          fontSize: "10",
+          fill: "currentColor",
+          children: max
+        }
+      )
+    ] }),
+    showValue && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        "text",
+        {
+          x: center,
+          y: center + 35,
+          textAnchor: "middle",
+          fontSize: "24",
+          fontWeight: "600",
+          className: "text-foreground",
+          fill: "currentColor",
+          style: animated ? { opacity: 0, animation: "fadeIn 0.5s ease-out 0.5s forwards" } : void 0,
+          children: value
+        }
+      ),
+      label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        "text",
+        {
+          x: center,
+          y: center + 55,
+          textAnchor: "middle",
+          fontSize: "12",
+          className: "text-muted-foreground",
+          fill: "currentColor",
+          style: animated ? { opacity: 0, animation: "fadeIn 0.5s ease-out 0.6s forwards" } : void 0,
+          children: label
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("style", { children: `
+        @keyframes drawArc {
+          to {
+            stroke-dashoffset: 0;
+          }
+        }
+        @keyframes needleRotate {
+          to {
+            transform: rotate(var(--needle-end));
+          }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+      ` })
+  ] });
+}
+
+// ../../components/ui/ClientOnly.tsx
+var import_react30 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+function ClientOnly({ children, fallback = null }) {
+  const [hasMounted, setHasMounted] = (0, import_react30.useState)(false);
+  (0, import_react30.useEffect)(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: fallback });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children });
 }
 
 // ../../components/ui/Loading.tsx
 var import_lucide_react25 = require("lucide-react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var LoadingSpinner = ({
   size = "md",
   className,
@@ -10471,7 +11842,7 @@ var LoadingSpinner = ({
     foreground: "text-foreground",
     muted: "text-muted-foreground"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     import_lucide_react25.Activity,
     {
       className: cn(
@@ -10492,7 +11863,7 @@ var LoadingDots = ({
     foreground: "bg-foreground",
     muted: "bg-muted-foreground"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
       className: cn(
@@ -10514,7 +11885,7 @@ var LoadingBar = ({
   label
 }) => {
   const pct = progress ? Math.min(Math.max(progress, 0), 100) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
       className: cn("w-full bg-muted rounded-full h-2", className),
@@ -10523,7 +11894,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_runtime46.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "div",
         {
           className: cn(
@@ -10540,9 +11911,9 @@ var LoadingBar = ({
 };
 
 // ../../components/ui/Table.tsx
-var import_react23 = __toESM(require("react"), 1);
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var Table = import_react23.default.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var import_react31 = __toESM(require("react"), 1);
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var Table = import_react31.default.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   "div",
   {
     className: cn(
@@ -10552,20 +11923,20 @@ var Table = import_react23.default.forwardRef(({ className, containerClassName,
       "backdrop-blur-sm transition-all duration-300",
       containerClassName
     ),
-    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
+    children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
   }
 ));
 Table.displayName = "Table";
-var TableHeader = import_react23.default.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted/50", className), ...props, children: [
+var TableHeader = import_react31.default.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted/50", className), ...props, children: [
   children,
   filterRow
 ] }));
 TableHeader.displayName = "TableHeader";
-var TableBody = import_react23.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+var TableBody = import_react31.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = import_react23.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
+var TableFooter = import_react31.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
 TableFooter.displayName = "TableFooter";
-var TableRow = import_react23.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var TableRow = import_react31.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   "tr",
   {
     ref,
@@ -10579,7 +11950,7 @@ var TableRow = import_react23.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = import_react23.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var TableHead = import_react31.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   "th",
   {
     ref,
@@ -10588,18 +11959,18 @@ var TableHead = import_react23.default.forwardRef(({ className, ...props }, ref)
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = import_react23.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props }));
+var TableCell = import_react31.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props }));
 TableCell.displayName = "TableCell";
-var TableCaption = import_react23.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+var TableCaption = import_react31.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
 TableCaption.displayName = "TableCaption";
 
 // ../../components/ui/DataTable.tsx
 var import_lucide_react26 = require("lucide-react");
-var import_react24 = __toESM(require("react"), 1);
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react32 = __toESM(require("react"), 1);
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = import_react24.default.useState(value);
-  import_react24.default.useEffect(() => {
+  const [debounced, setDebounced] = import_react32.default.useState(value);
+  import_react32.default.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -10628,15 +11999,15 @@ function DataTable({
   labels
 }) {
   const t = useTranslations("Common");
-  const [headerAlign, setHeaderAlign] = import_react24.default.useState("left");
-  const [visibleCols, setVisibleCols] = import_react24.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
-  const [filters, setFilters] = import_react24.default.useState({});
-  const [sort, setSort] = import_react24.default.useState(null);
-  const [density, setDensity] = import_react24.default.useState("normal");
-  const [curPage, setCurPage] = import_react24.default.useState(page);
-  const hasMounted = import_react24.default.useRef(false);
-  const loadedFromStorage = import_react24.default.useRef(false);
-  const getInitialPageSize = import_react24.default.useCallback(() => {
+  const [headerAlign, setHeaderAlign] = import_react32.default.useState("left");
+  const [visibleCols, setVisibleCols] = import_react32.default.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
+  const [filters, setFilters] = import_react32.default.useState({});
+  const [sort, setSort] = import_react32.default.useState(null);
+  const [density, setDensity] = import_react32.default.useState("normal");
+  const [curPage, setCurPage] = import_react32.default.useState(page);
+  const hasMounted = import_react32.default.useRef(false);
+  const loadedFromStorage = import_react32.default.useRef(false);
+  const getInitialPageSize = import_react32.default.useCallback(() => {
     if (typeof window === "undefined" || !storageKey) return pageSize;
     try {
       const saved = localStorage.getItem(`datatable_${storageKey}_pageSize`);
@@ -10651,8 +12022,8 @@ function DataTable({
     }
     return pageSize;
   }, [storageKey, pageSize]);
-  const [curPageSize, setCurPageSize] = import_react24.default.useState(getInitialPageSize);
-  import_react24.default.useEffect(() => {
+  const [curPageSize, setCurPageSize] = import_react32.default.useState(getInitialPageSize);
+  import_react32.default.useEffect(() => {
     if (typeof window === "undefined" || !storageKey) return;
     if (!hasMounted.current) return;
     try {
@@ -10660,7 +12031,7 @@ function DataTable({
     } catch {
     }
   }, [curPageSize, storageKey]);
-  import_react24.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     const newColKeys = columns.filter((c) => c.visible !== false).map((c) => c.key);
     setVisibleCols((prev) => {
       const uniqueKeys = /* @__PURE__ */ new Set([...prev, ...newColKeys]);
@@ -10668,16 +12039,16 @@ function DataTable({
     });
   }, [columns]);
   const debouncedFilters = useDebounced(filters, 350);
-  import_react24.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     setCurPage(page);
   }, [page]);
-  import_react24.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (storageKey && loadedFromStorage.current) {
       return;
     }
     setCurPageSize(pageSize);
   }, [pageSize, storageKey]);
-  import_react24.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (!onQueryChange) return;
     if (!hasMounted.current) {
       hasMounted.current = true;
@@ -10700,7 +12071,7 @@ function DataTable({
       className: "h-8 w-full text-sm"
     };
     if (col.filter.type === "text") {
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Input_default,
         {
           ...commonProps,
@@ -10715,7 +12086,7 @@ function DataTable({
     }
     if (col.filter.type === "select") {
       const options = col.filter.options || [];
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         Combobox,
         {
           options: ["", ...options],
@@ -10731,7 +12102,7 @@ function DataTable({
       );
     }
     if (col.filter.type === "date") {
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         DatePicker,
         {
           placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
@@ -10745,7 +12116,7 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     TableHead,
     {
       style: { width: col.width },
@@ -10758,9 +12129,9 @@ function DataTable({
       children: (() => {
         const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
         const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
-        const titleContent = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-1 min-w-0 shrink", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
-          col.sortable && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        const titleContent = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center gap-1 min-w-0 shrink", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "truncate font-medium text-sm", children: col.title }),
+          col.sortable && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             "button",
             {
               className: cn(
@@ -10777,8 +12148,8 @@ function DataTable({
               },
               "aria-label": "Sort",
               title: `Sort by ${String(col.title)}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                   "path",
                   {
                     d: "M7 8l3-3 3 3",
@@ -10789,7 +12160,7 @@ function DataTable({
                     opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                   "path",
                   {
                     d: "M7 12l3 3 3-3",
@@ -10804,11 +12175,11 @@ function DataTable({
             }
           )
         ] });
-        const filterContent = col.filter && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        const filterContent = col.filter && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           Popover,
           {
             placement: isRightAlign ? "bottom-end" : "bottom-start",
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               "button",
               {
                 className: cn(
@@ -10818,16 +12189,16 @@ function DataTable({
                 ),
                 "aria-label": "Filter",
                 title: "Filter",
-                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react26.Filter, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react26.Filter, { className: "h-4 w-4" })
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "w-48 p-2 space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "w-48 p-2 space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime48.jsx)(
+              filters[col.key] && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 "button",
                 {
                   onClick: () => {
@@ -10845,7 +12216,7 @@ function DataTable({
             ] })
           }
         );
-        return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "div",
           {
             className: cn(
@@ -10854,10 +12225,10 @@ function DataTable({
               isCenterAlign && "justify-center",
               !isRightAlign && !isCenterAlign && "justify-between"
             ),
-            children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+            children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
               filterContent,
               titleContent
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
               titleContent,
               filterContent
             ] })
@@ -10868,7 +12239,7 @@ function DataTable({
     col.key
   )) });
   const isServerMode = Boolean(onQueryChange);
-  const processedData = import_react24.default.useMemo(() => {
+  const processedData = import_react32.default.useMemo(() => {
     if (isServerMode) return data;
     let result = [...data];
     if (Object.keys(filters).length > 0) {
@@ -10900,21 +12271,21 @@ function DataTable({
     return result;
   }, [data, isServerMode, filters, sort, columns]);
   const totalItems = isServerMode ? total : processedData.length;
-  const displayedData = isServerMode ? data : import_react24.default.useMemo(() => {
+  const displayedData = isServerMode ? data : import_react32.default.useMemo(() => {
     const start = (curPage - 1) * curPageSize;
     if (start >= processedData.length && curPage > 1) {
     }
     return processedData.slice(start, start + curPageSize);
   }, [processedData, curPage, curPageSize]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
-        enableDensityToggle && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-sm text-muted-foreground", children: caption }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center gap-2", children: [
+        enableDensityToggle && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
               labels?.density || t("density")
             ] }),
             items: [
@@ -10924,11 +12295,11 @@ function DataTable({
             ]
           }
         ),
-        enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -10939,26 +12310,26 @@ function DataTable({
               ) }),
               labels?.columns || t("columns")
             ] }),
-            children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+            children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
               DropdownMenuItem,
               {
                 onClick: () => {
                   setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "truncate", children: c.title })
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "truncate", children: c.title })
                 ]
               },
               c.key
             ))
           }
         ),
-        enableHeaderAlignToggle && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        enableHeaderAlignToggle && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
               labels?.headerAlign || t("headerAlign")
             ] }),
             items: [
@@ -10971,17 +12342,17 @@ function DataTable({
         toolbar
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       Table,
       {
         containerClassName: "border-0 md:border-0 rounded-none md:rounded-none shadow-none bg-transparent",
         className: "[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-5 [&_thead]:bg-background [&_thead]:backdrop-blur-sm",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHeader, { children: renderHeader }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TableHeader, { children: renderHeader }),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 "path",
                 {
                   className: "opacity-75",
@@ -10990,12 +12361,12 @@ function DataTable({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => {
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm", children: "Loading..." })
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => {
             const isLastRow = idx === displayedData.length - 1;
-            return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/50"), children: visibleColumns.map((col, colIdx) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/50"), children: visibleColumns.map((col, colIdx) => {
               const value = col.dataIndex ? row[col.dataIndex] : void 0;
-              return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 TableCell,
                 {
                   className: cn(
@@ -11015,7 +12386,7 @@ function DataTable({
         ]
       }
     ) }),
-    totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    totalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       Pagination,
       {
         page: curPage,
@@ -11037,10 +12408,10 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // ../../components/ui/Form.tsx
-var React40 = __toESM(require("react"), 1);
+var React48 = __toESM(require("react"), 1);
 var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var FormConfigContext = React40.createContext({ size: "md" });
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var FormConfigContext = React48.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -11053,24 +12424,24 @@ var FormWrapper = ({
   const methods = (0, import_react_hook_form.useForm)({
     defaultValues: initialValues
   });
-  React40.useEffect(() => {
+  React48.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
   }, [JSON.stringify(initialValues)]);
   const { validationSchema: _, ...formProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React40.createContext({});
+var FormFieldContext = React48.createContext({});
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_hook_form.Controller, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_hook_form.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React40.useContext(FormFieldContext);
-  const itemContext = React40.useContext(FormItemContext);
+  const fieldContext = React48.useContext(FormFieldContext);
+  const itemContext = React48.useContext(FormItemContext);
   const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
   if (!fieldContext) {
     try {
@@ -11091,27 +12462,27 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React40.createContext({});
-var FormItem = React40.forwardRef(({ className, ...props }, ref) => {
-  const id = React40.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
+var FormItemContext = React48.createContext({});
+var FormItem = React48.forwardRef(({ className, ...props }, ref) => {
+  const id = React48.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React40.forwardRef(
+var FormLabel = React48.forwardRef(
   ({ className, children, required, ...props }, ref) => {
     const { error, formItemId } = useFormField();
-    const config = React40.useContext(FormConfigContext);
+    const config = React48.useContext(FormConfigContext);
     const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
       children,
-      required && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-destructive ml-1", children: "*" })
     ] });
   }
 );
 FormLabel.displayName = "FormLabel";
-var FormControl = React40.forwardRef(({ ...props }, ref) => {
+var FormControl = React48.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       ref,
@@ -11123,37 +12494,37 @@ var FormControl = React40.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React40.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React48.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React40.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React48.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_runtime49.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React40.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var FormInput = React48.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(FormItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FormMessage, {})
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Input_default, { size: props.size ?? size, ...field, ...props }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormMessage, {})
     ] })
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React40.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var FormCheckbox = React48.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(FormItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(FormItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         Checkbox,
         {
           ref,
@@ -11167,21 +12538,21 @@ var FormCheckbox = React40.forwardRef(({ name, ...props }, ref) => /* @__PURE__
           ...props
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FormMessage, {})
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormMessage, {})
     ] })
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React40.forwardRef(
-  ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
+var FormSubmitButton = React48.forwardRef(
+  ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
 );
 FormSubmitButton.displayName = "FormSubmitButton";
 
 // ../../components/ui/NotificationModal.tsx
 var import_lucide_react27 = require("lucide-react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function NotificationModal({ isOpen, onClose, notification, titleText, openLinkText, closeText }) {
   const t = useTranslations("Common");
   if (!notification) return null;
@@ -11202,20 +12573,20 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
       onClose();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Modal_default, { isOpen, onClose, title: titleText || t("notifications"), size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: cn("w-2 h-2 rounded-full", !notification.is_read ? "bg-primary" : "bg-border") }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Modal_default, { isOpen, onClose, title: titleText || t("notifications"), size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: cn("w-2 h-2 rounded-full", !notification.is_read ? "bg-primary" : "bg-border") }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
     ] }),
-    notification.title && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
-    notification.body && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
-      hasLink && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Button_default, { variant: "primary", size: "sm", onClick: handleLinkClick, className: "gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react27.ExternalLink, { className: "w-4 h-4" }),
+    notification.title && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
+    notification.body && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex gap-2 justify-end pt-2", children: [
+      hasLink && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button_default, { variant: "primary", size: "sm", onClick: handleLinkClick, className: "gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react27.ExternalLink, { className: "w-4 h-4" }),
         openLinkText || t("openLink")
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: onClose, children: closeText || t("close") })
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: onClose, children: closeText || t("close") })
     ] })
   ] }) });
 }
@@ -11225,9 +12596,9 @@ var NotificationModal_default = NotificationModal;
 var import_link2 = __toESM(require("next/link"), 1);
 var import_navigation = require("next/navigation");
 var import_lucide_react28 = require("lucide-react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function MessengerIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime59.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",
@@ -11236,7 +12607,7 @@ function MessengerIcon(props) {
   ) });
 }
 function ZaloIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("svg", { viewBox: "0 0 48 48", width: 20, height: 20, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("svg", { viewBox: "0 0 48 48", width: 20, height: 20, "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "path",
     {
       fill: "white",
@@ -11245,7 +12616,7 @@ function ZaloIcon(props) {
   ) });
 }
 function InstagramIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("svg", { viewBox: "0 0 24 24", width: 20, height: 20, "aria-hidden": "true", fill: "white", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("svg", { viewBox: "0 0 24 24", width: 20, height: 20, "aria-hidden": "true", fill: "white", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) });
 }
 function FloatingContacts({ className }) {
   const pathname = (0, import_navigation.usePathname)();
@@ -11280,8 +12651,8 @@ function FloatingContacts({ className }) {
       external: true
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.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_runtime59.jsx)(
       import_link2.default,
       {
         href: `tel:${hotline.replace(/\D/g, "")}`,
@@ -11292,10 +12663,10 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           "bg-[#22c55e]"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react28.Phone, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react28.Phone, { className: "w-6 h-6" })
       }
     ),
-    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       import_link2.default,
       {
         href,
@@ -11307,7 +12678,7 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           bg
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { className: "w-6 h-6" })
       },
       key
     ))
@@ -11316,7 +12687,7 @@ function FloatingContacts({ className }) {
 
 // ../../components/ui/AccessDenied.tsx
 var import_lucide_react29 = require("lucide-react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime60 = 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" },
@@ -11337,32 +12708,32 @@ function AccessDenied({
 }) {
   const styles = VARIANT_STYLES[variant];
   const UsedIcon = Icon || DEFAULT_ICONS[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
     ] }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
+    children && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
   ] }) });
 }
 
 // ../../components/ui/ThemeToggleHeadless.tsx
 var import_lucide_react30 = require("lucide-react");
-var import_react25 = require("react");
-var import_react_dom10 = require("react-dom");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_react_dom11 = require("react-dom");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function ThemeToggleHeadless({
   theme,
   onChange,
   labels,
   className
 }) {
-  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 [isOpen, setIsOpen] = (0, import_react33.useState)(false);
+  const [mounted, setMounted] = (0, import_react33.useState)(false);
+  const triggerRef = (0, import_react33.useRef)(null);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react33.useState)(null);
+  (0, import_react33.useEffect)(() => setMounted(true), []);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: import_lucide_react30.Sun },
     { value: "dark", label: labels?.dark ?? "Dark", icon: import_lucide_react30.Moon },
@@ -11380,8 +12751,8 @@ function ThemeToggleHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       Button_default,
       {
         variant: "ghost",
@@ -11399,25 +12770,25 @@ function ThemeToggleHeadless({
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Theme",
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CurrentIcon, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom10.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom11.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom11.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.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_runtime53.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime61.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.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_runtime53.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
                   Button_default,
                   {
                     variant: "ghost",
@@ -11433,9 +12804,9 @@ function ThemeToggleHeadless({
                     role: "menuitemradio",
                     "aria-checked": active,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
-                      active && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "flex-1 text-left", children: opt.label }),
+                      active && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
                     ]
                   },
                   opt.value
@@ -11451,10 +12822,10 @@ function ThemeToggleHeadless({
 }
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
-var import_react26 = require("react");
-var import_react_dom11 = require("react-dom");
+var import_react34 = require("react");
+var import_react_dom12 = require("react-dom");
 var import_lucide_react31 = require("lucide-react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -11462,9 +12833,9 @@ function LanguageSwitcherHeadless({
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react26.useState)(false);
-  const [dropdownPosition, setDropdownPosition] = (0, import_react26.useState)(null);
-  const triggerButtonRef = (0, import_react26.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
+  const [dropdownPosition, setDropdownPosition] = (0, import_react34.useState)(null);
+  const triggerButtonRef = (0, import_react34.useRef)(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();
@@ -11476,8 +12847,8 @@ function LanguageSwitcherHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       Button_default,
       {
         variant: "ghost",
@@ -11496,22 +12867,22 @@ function LanguageSwitcherHeadless({
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Language",
         title: labels?.heading ?? "Language",
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react31.Globe, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react31.Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-      typeof window !== "undefined" && (0, import_react_dom11.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom11.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+      typeof window !== "undefined" && (0, import_react_dom12.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && (0, import_react_dom12.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime54.jsxs)("div", { className: "p-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "p-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "px-3 py-2 text-sm font-medium text-muted-foreground border-b border-border mb-2", children: labels?.heading ?? "Language" }),
+              locales.map((language) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
                 Button_default,
                 {
                   variant: "ghost",
@@ -11524,9 +12895,9 @@ function LanguageSwitcherHeadless({
                   role: "menuitemradio",
                   "aria-checked": currentLocale === language.code,
                   children: [
-                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-lg", children: language.flag }),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex-1 text-left", children: language.name }),
-                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    language.flag && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "text-lg", children: language.flag }),
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "flex-1 text-left", children: language.name }),
+                    currentLocale === language.code && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "w-2 h-2 rounded-full bg-primary" })
                   ]
                 },
                 language.code
@@ -11956,7 +13327,7 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // src/contexts/TranslationContext.tsx
-var React42 = __toESM(require("react"), 1);
+var React50 = __toESM(require("react"), 1);
 
 // locales/en.json
 var en_default = {
@@ -12211,16 +13582,16 @@ var ja_default = {
 };
 
 // src/contexts/TranslationContext.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var defaultTranslations2 = {
   en: en_default,
   vi: vi_default,
   ko: ko_default,
   ja: ja_default
 };
-var TranslationContext2 = React42.createContext(null);
+var TranslationContext2 = React50.createContext(null);
 var TranslationProvider = ({ children, locale = "en", translations }) => {
-  const t = React42.useCallback(
+  const t = React50.useCallback(
     (namespace) => {
       return (key) => {
         const mergedTranslations = {
@@ -12245,10 +13616,10 @@ var TranslationProvider = ({ children, locale = "en", translations }) => {
     },
     [locale, translations]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TranslationContext2.Provider, { value: { locale, t }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TranslationContext2.Provider, { value: { locale, t }, children });
 };
 var useUnderverseTranslations = (namespace) => {
-  const context = React42.useContext(TranslationContext2);
+  const context = React50.useContext(TranslationContext2);
   if (!context) {
     return (key) => {
       const parts = namespace.split(".");
@@ -12270,13 +13641,13 @@ var useUnderverseTranslations = (namespace) => {
   return context.t(namespace);
 };
 var useUnderverseLocale = () => {
-  const context = React42.useContext(TranslationContext2);
+  const context = React50.useContext(TranslationContext2);
   return context?.locale || "en";
 };
 
 // src/hooks/useSmartTranslations.tsx
-var React43 = __toESM(require("react"), 1);
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var React51 = __toESM(require("react"), 1);
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var nextIntlHooks = null;
 try {
   const nextIntl = require("next-intl");
@@ -12287,12 +13658,12 @@ try {
 } catch {
   nextIntlHooks = null;
 }
-var ForceInternalContext = React43.createContext(false);
+var ForceInternalContext = React51.createContext(false);
 var ForceInternalTranslationsProvider = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ForceInternalContext.Provider, { value: true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ForceInternalContext.Provider, { value: true, children });
 };
 function useSmartTranslations(namespace) {
-  const forceInternal = React43.useContext(ForceInternalContext);
+  const forceInternal = React51.useContext(ForceInternalContext);
   const internalT = useUnderverseTranslations(namespace);
   if (forceInternal || !nextIntlHooks?.useTranslations) {
     return internalT;
@@ -12305,7 +13676,7 @@ function useSmartTranslations(namespace) {
   }
 }
 function useSmartLocale() {
-  const forceInternal = React43.useContext(ForceInternalContext);
+  const forceInternal = React51.useContext(ForceInternalContext);
   const internalLocale = useUnderverseLocale();
   if (forceInternal || !nextIntlHooks?.useLocale) {
     return internalLocale;
@@ -12327,9 +13698,11 @@ function getUnderverseMessages(locale = "en") {
 0 && (module.exports = {
   AccessDenied,
   Alert,
+  AreaChart,
   Avatar,
   Badge,
   BadgeBase,
+  BarChart,
   BatteryProgress,
   BottomSheet,
   Breadcrumb,
@@ -12367,6 +13740,7 @@ function getUnderverseMessages(locale = "en") {
   FormLabel,
   FormMessage,
   FormSubmitButton,
+  GaugeChart,
   GlobalLoading,
   GradientBadge,
   Grid,
@@ -12378,6 +13752,7 @@ function getUnderverseMessages(locale = "en") {
   Label,
   LanguageSwitcher,
   LanguageSwitcherHeadless,
+  LineChart,
   List,
   ListItem,
   LoadingBar,
@@ -12394,10 +13769,12 @@ function getUnderverseMessages(locale = "en") {
   PageLoading,
   Pagination,
   PasswordInput,
+  PieChart,
   PillTabs,
   Popover,
   Progress,
   PulseBadge,
+  RadarChart,
   RadioGroup,
   RadioGroupItem,
   SIZE_STYLES_BTN,
@@ -12422,6 +13799,7 @@ function getUnderverseMessages(locale = "en") {
   SlideOver,
   Slider,
   SmartImage,
+  Sparkline,
   StatusBadge,
   StepProgress,
   Switch,