@underverse-ui/underverse 0.2.39 → 0.2.40

package/dist/index.js

@@ -10274,23 +10274,1387 @@ GridItem.displayName = "Grid.Item";
 var Grid = Object.assign(GridRoot, { Item: GridItem });
 var Grid_default = Grid;
 
-// ../../components/ui/ClientOnly.tsx
+// ../../components/ui/LineChart.tsx
+import { useMemo as useMemo6, useState as useState33, useRef as useRef14 } from "react";
+
+// ../../components/ui/ChartTooltip.tsx
 import { useEffect as useEffect18, useState as useState32 } from "react";
-import { Fragment as Fragment16, jsx as jsx45 } from "react/jsx-runtime";
-function ClientOnly({ children, fallback = null }) {
-  const [hasMounted, setHasMounted] = useState32(false);
+import { createPortal as createPortal10 } from "react-dom";
+import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, secondaryValue, items, containerRef }) {
+  const [isMounted, setIsMounted] = useState32(false);
+  const [position, setPosition] = useState32(null);
   useEffect18(() => {
+    setIsMounted(true);
+  }, []);
+  useEffect18(() => {
+    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__ */ jsxs40(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: position.top,
+        left: position.left + 12,
+        zIndex: 99999,
+        pointerEvents: "none",
+        animation: "chartTooltipFadeIn 0.15s ease-out"
+      },
+      children: [
+        /* @__PURE__ */ jsxs40(
+          "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__ */ jsx45("div", { className: "text-muted-foreground text-xs mb-1", children: label }),
+              items && items.length > 0 ? /* @__PURE__ */ jsx45("div", { className: "flex flex-col gap-1", children: items.map((item, i) => /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+                item.color && /* @__PURE__ */ jsx45("div", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: item.color } }),
+                /* @__PURE__ */ jsxs40("span", { className: "text-muted-foreground", children: [
+                  item.label,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx45("span", { className: "font-semibold ml-auto", children: item.value })
+              ] }, i)) }) : /* @__PURE__ */ jsxs40(Fragment16, { children: [
+                /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+                  color && /* @__PURE__ */ jsx45("div", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: color } }),
+                  /* @__PURE__ */ jsx45("span", { className: "font-semibold", children: value })
+                ] }),
+                secondaryLabel && /* @__PURE__ */ jsxs40("div", { className: "text-muted-foreground text-xs mt-1", children: [
+                  secondaryLabel,
+                  ": ",
+                  secondaryValue
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx45("style", { children: `
+        @keyframes chartTooltipFadeIn {
+          from { opacity: 0; transform: translateX(-5px); }
+          to { opacity: 1; transform: translateX(0); }
+        }
+      ` })
+      ]
+    }
+  );
+  return createPortal10(tooltipContent, document.body);
+}
+
+// ../../components/ui/LineChart.tsx
+import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs41 } from "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 = useRef14(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] = useState33(null);
+  const { minValue, maxValue, points, linePath, areaPath } = useMemo6(() => {
+    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 = useMemo6(() => {
+    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__ */ jsxs41(Fragment17, { children: [
+    /* @__PURE__ */ jsxs41("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+      showGrid && /* @__PURE__ */ jsx46("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsxs41("g", { children: [
+        /* @__PURE__ */ jsx46("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
+        /* @__PURE__ */ jsx46("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__ */ jsx46("path", { d: areaPath, fill: fillColor, opacity: 0.2, className: animated ? "animate-[fadeIn_0.6s_ease-out]" : "" }),
+      linePath && /* @__PURE__ */ jsx46(
+        "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__ */ jsxs41(
+        "g",
+        {
+          onMouseEnter: () => setHoveredPoint({ x: point.x, y: point.y, label: point.label, value: point.value }),
+          onMouseLeave: () => setHoveredPoint(null),
+          className: "cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx46(
+              "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__ */ jsx46("circle", { cx: point.x, cy: point.y, r: 16, fill: "transparent" }),
+            showValues && /* @__PURE__ */ jsx46("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__ */ jsxs41("g", { className: "pointer-events-none", children: [
+        /* @__PURE__ */ jsx46(
+          "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__ */ jsx46(
+          "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__ */ jsx46("text", { x: point.x, y: height - 10, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: point.label }, i)),
+      /* @__PURE__ */ jsx46("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__ */ jsx46(
+      ChartTooltip,
+      {
+        x: hoveredPoint?.x ?? 0,
+        y: hoveredPoint?.y ?? 0,
+        visible: !!hoveredPoint,
+        label: hoveredPoint?.label,
+        value: hoveredPoint?.value,
+        color,
+        containerRef: svgRef
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/BarChart.tsx
+import { useMemo as useMemo7, useState as useState34, useRef as useRef15 } from "react";
+import { Fragment as Fragment18, jsx as jsx47, jsxs as jsxs42 } from "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 = useRef15(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] = useState34(null);
+  const { maxValue, bars, gridLines } = useMemo7(() => {
+    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__ */ jsxs42(Fragment18, { children: [
+    /* @__PURE__ */ jsxs42("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+      showGrid && /* @__PURE__ */ jsx47("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsx47("g", { children: horizontal ? /* @__PURE__ */ jsxs42(Fragment18, { children: [
+        /* @__PURE__ */ jsx47("line", { x1: line.x, y1: line.y1, x2: line.x, y2: line.y2, stroke: "currentColor", strokeDasharray: "4 4" }),
+        /* @__PURE__ */ jsx47("text", { x: line.x, y: height - 8, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
+      ] }) : /* @__PURE__ */ jsxs42(Fragment18, { children: [
+        /* @__PURE__ */ jsx47("line", { x1: line.x1, y1: line.y, x2: line.x2, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
+        /* @__PURE__ */ jsx47("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__ */ jsxs42(
+        "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__ */ jsxs42(
+              "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__ */ jsx47(
+                    "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__ */ jsx47("animate", { attributeName: "y", from: padding.top + chartHeight, to: bar.y, dur: "0.5s", begin: `${i * 0.1}s`, fill: "freeze" })
+                ]
+              }
+            ),
+            showValues && /* @__PURE__ */ jsx47(
+              "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__ */ jsx47(
+              "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__ */ jsx47("style", { children: `
+          @keyframes growHeight {
+            from { height: 0; }
+          }
+          @keyframes growWidth {
+            from { width: 0; }
+          }
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+        ` })
+    ] }),
+    /* @__PURE__ */ jsx47(
+      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
+import { useMemo as useMemo8, useState as useState35, useRef as useRef16 } from "react";
+import { jsx as jsx48, jsxs as jsxs43 } from "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 = useRef16(null);
+  const center = size / 2;
+  const radius = size / 2 - 10;
+  const innerRadius = donut ? radius - donutWidth : 0;
+  const { segments, total } = useMemo8(() => {
+    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] = useState35(null);
+  return /* @__PURE__ */ jsxs43("div", { ref: containerRef, className: `relative flex items-center gap-6 ${className}`, children: [
+    /* @__PURE__ */ jsxs43("svg", { width: size + 40, height: size + 40, className: "overflow-visible", style: { fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ jsxs43("g", { transform: `translate(20, 20)`, children: [
+        segments.map((seg, i) => /* @__PURE__ */ jsxs43(
+          "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__ */ jsx48(
+                "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__ */ jsx48(
+                "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__ */ jsxs43("g", { children: [
+          /* @__PURE__ */ jsx48("text", { x: center, y: center - 5, textAnchor: "middle", fontSize: "12", className: "text-muted-foreground", fill: "currentColor", children: "Total" }),
+          /* @__PURE__ */ jsx48("text", { x: center, y: center + 15, textAnchor: "middle", fontSize: "18", fontWeight: "600", className: "text-foreground", fill: "currentColor", children: total })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx48("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__ */ jsx48("div", { className: "flex flex-col gap-2", children: segments.map((seg, i) => /* @__PURE__ */ jsxs43(
+      "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__ */ jsx48("div", { className: "w-3 h-3 rounded-sm shrink-0", style: { backgroundColor: seg.color } }),
+          /* @__PURE__ */ jsx48("span", { className: "text-muted-foreground", children: seg.label }),
+          /* @__PURE__ */ jsx48("span", { className: "text-foreground font-medium ml-auto", children: showPercentage ? `${(seg.percentage * 100).toFixed(0)}%` : seg.value })
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx48(
+      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
+import { useMemo as useMemo9, useState as useState36, useRef as useRef17 } from "react";
+import { jsx as jsx49, jsxs as jsxs44 } from "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 = useRef17(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] = useState36(null);
+  const { processedSeries, gridLines, maxValue, labels } = useMemo9(() => {
+    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__ */ jsxs44("div", { ref: containerRef, className: `relative flex flex-col gap-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs44("svg", { width, height, className: "overflow-visible", style: { fontFamily: "inherit" }, children: [
+      showGrid && /* @__PURE__ */ jsx49("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsxs44("g", { children: [
+        /* @__PURE__ */ jsx49("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
+        /* @__PURE__ */ jsx49("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__ */ jsx49(
+        "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__ */ jsx49(
+        "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__ */ jsxs44(
+          "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__ */ jsx49(
+                "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__ */ jsx49("circle", { cx: point.x, cy: point.y, r: 12, fill: "transparent" })
+            ]
+          },
+          `dot-${seriesIdx}-${i}`
+        ))
+      ),
+      showLabels && /* @__PURE__ */ jsx49("g", { className: "text-muted-foreground", children: labels.map((label, i) => {
+        const x = padding.left + i / (labels.length - 1) * chartWidth;
+        return /* @__PURE__ */ jsx49("text", { x, y: height - 10, textAnchor: "middle", fontSize: "10", fill: "currentColor", children: label }, i);
+      }) }),
+      hoveredPoint && /* @__PURE__ */ jsx49("g", { className: "pointer-events-none", children: /* @__PURE__ */ jsx49(
+        "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__ */ jsx49("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__ */ jsx49("div", { className: "flex items-center justify-center gap-6", children: series.map((s, i) => /* @__PURE__ */ jsxs44(
+      "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__ */ jsx49("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: s.color } }),
+          /* @__PURE__ */ jsx49("span", { className: "text-muted-foreground", children: s.name })
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx49(
+      ChartTooltip,
+      {
+        x: hoveredPoint?.x ?? 0,
+        y: hoveredPoint?.y ?? 0,
+        visible: !!hoveredPoint,
+        label: hoveredPoint?.label,
+        items: hoveredPoint?.items,
+        containerRef
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/Sparkline.tsx
+import { useMemo as useMemo10 } from "react";
+import { jsx as jsx50, jsxs as jsxs45 } from "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 } = useMemo10(() => {
+    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__ */ jsxs45("svg", { width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+    showFill && /* @__PURE__ */ jsx50(
+      "path",
+      {
+        d: areaPath,
+        fill: effectiveFillColor,
+        fillOpacity: 0.1,
+        style: animated ? { opacity: 0, animation: "fadeIn 0.5s ease-out 0.3s forwards" } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx50(
+      "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__ */ jsx50(
+      "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__ */ jsx50(
+      "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__ */ jsx50("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
+import { useMemo as useMemo11, useState as useState37, useRef as useRef18 } from "react";
+import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
+function RadarChart({
+  series,
+  size = 300,
+  levels = 5,
+  showLabels = true,
+  showLegend = true,
+  showValues = false,
+  animated = true,
+  className = ""
+}) {
+  const containerRef = useRef18(null);
+  const center = size / 2;
+  const radius = size / 2 - 40;
+  const [hoveredPoint, setHoveredPoint] = useState37(null);
+  const { axes, processedSeries, levelPaths } = useMemo11(() => {
+    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__ */ jsxs46("div", { ref: containerRef, className: `relative flex flex-col gap-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs46("svg", { width: size, height: size, className: "overflow-visible", style: { fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ jsx51("g", { className: "text-muted-foreground/20", children: levelPaths.map((level, i) => /* @__PURE__ */ jsx51("path", { d: level.path, fill: "none", stroke: "currentColor", strokeWidth: 1 }, i)) }),
+      /* @__PURE__ */ jsx51("g", { className: "text-muted-foreground/30", children: axes.map((axis, i) => /* @__PURE__ */ jsx51("line", { x1: center, y1: center, x2: axis.x, y2: axis.y, stroke: "currentColor", strokeWidth: 1 }, i)) }),
+      processedSeries.map((s, i) => /* @__PURE__ */ jsxs46("g", { children: [
+        /* @__PURE__ */ jsx51(
+          "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__ */ jsxs46(
+          "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__ */ jsx51(
+                "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__ */ jsx51("circle", { cx: point.x, cy: point.y, r: 12, fill: "transparent" })
+            ]
+          },
+          j
+        )),
+        showValues && s.points.map((point, j) => /* @__PURE__ */ jsx51(
+          "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__ */ jsx51("g", { className: "text-muted-foreground", children: axes.map((axis, i) => /* @__PURE__ */ jsx51("text", { x: axis.labelX, y: axis.labelY, textAnchor: "middle", dominantBaseline: "middle", fontSize: "11", fill: "currentColor", children: axis.label }, i)) }),
+      /* @__PURE__ */ jsx51("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__ */ jsx51("div", { className: "flex items-center justify-center gap-6", children: series.map((s, i) => /* @__PURE__ */ jsxs46(
+      "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__ */ jsx51("div", { className: "w-3 h-3 rounded-sm", style: { backgroundColor: s.color } }),
+          /* @__PURE__ */ jsx51("span", { className: "text-muted-foreground", children: s.name })
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx51(
+      ChartTooltip,
+      {
+        x: hoveredPoint?.x ?? 0,
+        y: hoveredPoint?.y ?? 0,
+        visible: !!hoveredPoint,
+        label: hoveredPoint?.axis,
+        items: hoveredPoint?.items,
+        containerRef
+      }
+    )
+  ] });
+}
+
+// ../../components/ui/GaugeChart.tsx
+import { useMemo as useMemo12 } from "react";
+import { jsx as jsx52, jsxs as jsxs47 } from "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 } = useMemo12(() => {
+    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__ */ jsxs47("svg", { width: size, height: size * 0.7, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+    /* @__PURE__ */ jsx52(
+      "path",
+      {
+        d: backgroundPath,
+        fill: "none",
+        stroke: backgroundColor || "currentColor",
+        strokeWidth: thickness,
+        strokeLinecap: "round",
+        className: !backgroundColor ? "text-muted-foreground/20" : ""
+      }
+    ),
+    /* @__PURE__ */ jsx52(
+      "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__ */ jsxs47(
+      "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__ */ jsx52("line", { x1: center, y1: center, x2: center + needleLength, y2: center, stroke: color, strokeWidth: 3, strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx52("circle", { cx: center, cy: center, r: 8, fill: color }),
+          /* @__PURE__ */ jsx52("circle", { cx: center, cy: center, r: 4, className: "text-background", fill: "currentColor" })
+        ]
+      }
+    ),
+    showMinMax && /* @__PURE__ */ jsxs47("g", { className: "text-muted-foreground", children: [
+      /* @__PURE__ */ jsx52(
+        "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__ */ jsx52(
+        "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__ */ jsxs47("g", { children: [
+      /* @__PURE__ */ jsx52(
+        "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__ */ jsx52(
+        "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__ */ jsx52("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
+import { useEffect as useEffect19, useState as useState38 } from "react";
+import { Fragment as Fragment19, jsx as jsx53 } from "react/jsx-runtime";
+function ClientOnly({ children, fallback = null }) {
+  const [hasMounted, setHasMounted] = useState38(false);
+  useEffect19(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx45(Fragment16, { children: fallback });
+    return /* @__PURE__ */ jsx53(Fragment19, { children: fallback });
   }
-  return /* @__PURE__ */ jsx45(Fragment16, { children });
+  return /* @__PURE__ */ jsx53(Fragment19, { children });
 }
 
 // ../../components/ui/Loading.tsx
 import { Activity as Activity3 } from "lucide-react";
-import { jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
 var LoadingSpinner = ({
   size = "md",
   className,
@@ -10306,7 +11670,7 @@ var LoadingSpinner = ({
     foreground: "text-foreground",
     muted: "text-muted-foreground"
   };
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx54(
     Activity3,
     {
       className: cn(
@@ -10327,7 +11691,7 @@ var LoadingDots = ({
     foreground: "bg-foreground",
     muted: "bg-muted-foreground"
   };
-  return /* @__PURE__ */ jsx46("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx54("div", { className: cn("flex items-center space-x-1", className), children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx54(
     "div",
     {
       className: cn(
@@ -10349,7 +11713,7 @@ var LoadingBar = ({
   label
 }) => {
   const pct = progress ? Math.min(Math.max(progress, 0), 100) : void 0;
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx54(
     "div",
     {
       className: cn("w-full bg-muted rounded-full h-2", className),
@@ -10358,7 +11722,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__ */ jsx46(
+      children: /* @__PURE__ */ jsx54(
         "div",
         {
           className: cn(
@@ -10375,9 +11739,9 @@ var LoadingBar = ({
 };
 
 // ../../components/ui/Table.tsx
-import React38 from "react";
-import { jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
-var Table = React38.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx47(
+import React46 from "react";
+import { jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
+var Table = React46.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx55(
   "div",
   {
     className: cn(
@@ -10387,20 +11751,20 @@ var Table = React38.forwardRef(({ className, containerClassName, ...props }, ref
       "backdrop-blur-sm transition-all duration-300",
       containerClassName
     ),
-    children: /* @__PURE__ */ jsx47("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
+    children: /* @__PURE__ */ jsx55("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
   }
 ));
 Table.displayName = "Table";
-var TableHeader = React38.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ jsxs41("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted/50", className), ...props, children: [
+var TableHeader = React46.forwardRef(({ className, children, filterRow, ...props }, ref) => /* @__PURE__ */ jsxs49("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border", "bg-muted/50", className), ...props, children: [
   children,
   filterRow
 ] }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+var TableBody = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
+var TableFooter = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
 TableFooter.displayName = "TableFooter";
-var TableRow = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+var TableRow = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
   "tr",
   {
     ref,
@@ -10414,7 +11778,7 @@ var TableRow = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+var TableHead = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55(
   "th",
   {
     ref,
@@ -10423,18 +11787,18 @@ var TableHead = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props }));
+var TableCell = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55("td", { ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props }));
 TableCell.displayName = "TableCell";
-var TableCaption = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+var TableCaption = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx55("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
 TableCaption.displayName = "TableCaption";
 
 // ../../components/ui/DataTable.tsx
 import { Filter as FilterIcon } from "lucide-react";
-import React39 from "react";
-import { Fragment as Fragment17, jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
+import React47 from "react";
+import { Fragment as Fragment20, jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = React39.useState(value);
-  React39.useEffect(() => {
+  const [debounced, setDebounced] = React47.useState(value);
+  React47.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -10463,15 +11827,15 @@ function DataTable({
   labels
 }) {
   const t = useTranslations("Common");
-  const [headerAlign, setHeaderAlign] = React39.useState("left");
-  const [visibleCols, setVisibleCols] = React39.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
-  const [filters, setFilters] = React39.useState({});
-  const [sort, setSort] = React39.useState(null);
-  const [density, setDensity] = React39.useState("normal");
-  const [curPage, setCurPage] = React39.useState(page);
-  const hasMounted = React39.useRef(false);
-  const loadedFromStorage = React39.useRef(false);
-  const getInitialPageSize = React39.useCallback(() => {
+  const [headerAlign, setHeaderAlign] = React47.useState("left");
+  const [visibleCols, setVisibleCols] = React47.useState(() => columns.filter((c) => c.visible !== false).map((c) => c.key));
+  const [filters, setFilters] = React47.useState({});
+  const [sort, setSort] = React47.useState(null);
+  const [density, setDensity] = React47.useState("normal");
+  const [curPage, setCurPage] = React47.useState(page);
+  const hasMounted = React47.useRef(false);
+  const loadedFromStorage = React47.useRef(false);
+  const getInitialPageSize = React47.useCallback(() => {
     if (typeof window === "undefined" || !storageKey) return pageSize;
     try {
       const saved = localStorage.getItem(`datatable_${storageKey}_pageSize`);
@@ -10486,8 +11850,8 @@ function DataTable({
     }
     return pageSize;
   }, [storageKey, pageSize]);
-  const [curPageSize, setCurPageSize] = React39.useState(getInitialPageSize);
-  React39.useEffect(() => {
+  const [curPageSize, setCurPageSize] = React47.useState(getInitialPageSize);
+  React47.useEffect(() => {
     if (typeof window === "undefined" || !storageKey) return;
     if (!hasMounted.current) return;
     try {
@@ -10495,7 +11859,7 @@ function DataTable({
     } catch {
     }
   }, [curPageSize, storageKey]);
-  React39.useEffect(() => {
+  React47.useEffect(() => {
     const newColKeys = columns.filter((c) => c.visible !== false).map((c) => c.key);
     setVisibleCols((prev) => {
       const uniqueKeys = /* @__PURE__ */ new Set([...prev, ...newColKeys]);
@@ -10503,16 +11867,16 @@ function DataTable({
     });
   }, [columns]);
   const debouncedFilters = useDebounced(filters, 350);
-  React39.useEffect(() => {
+  React47.useEffect(() => {
     setCurPage(page);
   }, [page]);
-  React39.useEffect(() => {
+  React47.useEffect(() => {
     if (storageKey && loadedFromStorage.current) {
       return;
     }
     setCurPageSize(pageSize);
   }, [pageSize, storageKey]);
-  React39.useEffect(() => {
+  React47.useEffect(() => {
     if (!onQueryChange) return;
     if (!hasMounted.current) {
       hasMounted.current = true;
@@ -10535,7 +11899,7 @@ function DataTable({
       className: "h-8 w-full text-sm"
     };
     if (col.filter.type === "text") {
-      return /* @__PURE__ */ jsx48(
+      return /* @__PURE__ */ jsx56(
         Input_default,
         {
           ...commonProps,
@@ -10550,7 +11914,7 @@ function DataTable({
     }
     if (col.filter.type === "select") {
       const options = col.filter.options || [];
-      return /* @__PURE__ */ jsx48(
+      return /* @__PURE__ */ jsx56(
         Combobox,
         {
           options: ["", ...options],
@@ -10566,7 +11930,7 @@ function DataTable({
       );
     }
     if (col.filter.type === "date") {
-      return /* @__PURE__ */ jsx48(
+      return /* @__PURE__ */ jsx56(
         DatePicker,
         {
           placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
@@ -10580,7 +11944,7 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ jsx48(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ jsx48(
+  const renderHeader = /* @__PURE__ */ jsx56(TableRow, { children: visibleColumns.map((col, colIdx) => /* @__PURE__ */ jsx56(
     TableHead,
     {
       style: { width: col.width },
@@ -10593,9 +11957,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__ */ jsxs42("div", { className: "flex items-center gap-1 min-w-0 shrink", children: [
-          /* @__PURE__ */ jsx48("span", { className: "truncate font-medium text-sm", children: col.title }),
-          col.sortable && /* @__PURE__ */ jsx48(
+        const titleContent = /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-1 min-w-0 shrink", children: [
+          /* @__PURE__ */ jsx56("span", { className: "truncate font-medium text-sm", children: col.title }),
+          col.sortable && /* @__PURE__ */ jsx56(
             "button",
             {
               className: cn(
@@ -10612,8 +11976,8 @@ function DataTable({
               },
               "aria-label": "Sort",
               title: `Sort by ${String(col.title)}`,
-              children: /* @__PURE__ */ jsxs42("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
-                /* @__PURE__ */ jsx48(
+              children: /* @__PURE__ */ jsxs50("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
+                /* @__PURE__ */ jsx56(
                   "path",
                   {
                     d: "M7 8l3-3 3 3",
@@ -10624,7 +11988,7 @@ function DataTable({
                     opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
                   }
                 ),
-                /* @__PURE__ */ jsx48(
+                /* @__PURE__ */ jsx56(
                   "path",
                   {
                     d: "M7 12l3 3 3-3",
@@ -10639,11 +12003,11 @@ function DataTable({
             }
           )
         ] });
-        const filterContent = col.filter && /* @__PURE__ */ jsx48(
+        const filterContent = col.filter && /* @__PURE__ */ jsx56(
           Popover,
           {
             placement: isRightAlign ? "bottom-end" : "bottom-start",
-            trigger: /* @__PURE__ */ jsx48(
+            trigger: /* @__PURE__ */ jsx56(
               "button",
               {
                 className: cn(
@@ -10653,16 +12017,16 @@ function DataTable({
                 ),
                 "aria-label": "Filter",
                 title: "Filter",
-                children: /* @__PURE__ */ jsx48(FilterIcon, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx56(FilterIcon, { className: "h-4 w-4" })
               }
             ),
-            children: /* @__PURE__ */ jsxs42("div", { className: "w-48 p-2 space-y-2", children: [
-              /* @__PURE__ */ jsxs42("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
+            children: /* @__PURE__ */ jsxs50("div", { className: "w-48 p-2 space-y-2", children: [
+              /* @__PURE__ */ jsxs50("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
                 "Filter ",
                 col.title
               ] }),
               renderFilterControl(col),
-              filters[col.key] && /* @__PURE__ */ jsx48(
+              filters[col.key] && /* @__PURE__ */ jsx56(
                 "button",
                 {
                   onClick: () => {
@@ -10680,7 +12044,7 @@ function DataTable({
             ] })
           }
         );
-        return /* @__PURE__ */ jsx48(
+        return /* @__PURE__ */ jsx56(
           "div",
           {
             className: cn(
@@ -10689,10 +12053,10 @@ function DataTable({
               isCenterAlign && "justify-center",
               !isRightAlign && !isCenterAlign && "justify-between"
             ),
-            children: isRightAlign ? /* @__PURE__ */ jsxs42(Fragment17, { children: [
+            children: isRightAlign ? /* @__PURE__ */ jsxs50(Fragment20, { children: [
               filterContent,
               titleContent
-            ] }) : /* @__PURE__ */ jsxs42(Fragment17, { children: [
+            ] }) : /* @__PURE__ */ jsxs50(Fragment20, { children: [
               titleContent,
               filterContent
             ] })
@@ -10703,7 +12067,7 @@ function DataTable({
     col.key
   )) });
   const isServerMode = Boolean(onQueryChange);
-  const processedData = React39.useMemo(() => {
+  const processedData = React47.useMemo(() => {
     if (isServerMode) return data;
     let result = [...data];
     if (Object.keys(filters).length > 0) {
@@ -10735,21 +12099,21 @@ function DataTable({
     return result;
   }, [data, isServerMode, filters, sort, columns]);
   const totalItems = isServerMode ? total : processedData.length;
-  const displayedData = isServerMode ? data : React39.useMemo(() => {
+  const displayedData = isServerMode ? data : React47.useMemo(() => {
     const start = (curPage - 1) * curPageSize;
     if (start >= processedData.length && curPage > 1) {
     }
     return processedData.slice(start, start + curPageSize);
   }, [processedData, curPage, curPageSize]);
-  return /* @__PURE__ */ jsxs42("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs42("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
-      /* @__PURE__ */ jsx48("div", { className: "text-sm text-muted-foreground", children: caption }),
-      /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2", children: [
-        enableDensityToggle && /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs50("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs50("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
+      /* @__PURE__ */ jsx56("div", { className: "text-sm text-muted-foreground", children: caption }),
+      /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-2", children: [
+        enableDensityToggle && /* @__PURE__ */ jsx56(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ jsxs42(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ jsx48("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx48("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+            trigger: /* @__PURE__ */ jsxs50(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ jsx56("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx56("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
               labels?.density || t("density")
             ] }),
             items: [
@@ -10759,11 +12123,11 @@ function DataTable({
             ]
           }
         ),
-        enableColumnVisibilityToggle && /* @__PURE__ */ jsx48(
+        enableColumnVisibilityToggle && /* @__PURE__ */ jsx56(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ jsxs42(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ jsx48("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx48(
+            trigger: /* @__PURE__ */ jsxs50(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ jsx56("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx56(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -10774,26 +12138,26 @@ function DataTable({
               ) }),
               labels?.columns || t("columns")
             ] }),
-            children: columns.map((c) => /* @__PURE__ */ jsxs42(
+            children: columns.map((c) => /* @__PURE__ */ jsxs50(
               DropdownMenuItem,
               {
                 onClick: () => {
                   setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
                 },
                 children: [
-                  /* @__PURE__ */ jsx48("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
-                  /* @__PURE__ */ jsx48("span", { className: "truncate", children: c.title })
+                  /* @__PURE__ */ jsx56("input", { type: "checkbox", className: "mr-2 rounded border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                  /* @__PURE__ */ jsx56("span", { className: "truncate", children: c.title })
                 ]
               },
               c.key
             ))
           }
         ),
-        enableHeaderAlignToggle && /* @__PURE__ */ jsx48(
+        enableHeaderAlignToggle && /* @__PURE__ */ jsx56(
           DropdownMenu_default,
           {
-            trigger: /* @__PURE__ */ jsxs42(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-              /* @__PURE__ */ jsx48("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx48("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
+            trigger: /* @__PURE__ */ jsxs50(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ jsx56("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx56("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h10M4 18h16" }) }),
               labels?.headerAlign || t("headerAlign")
             ] }),
             items: [
@@ -10806,17 +12170,17 @@ function DataTable({
         toolbar
       ] })
     ] }),
-    /* @__PURE__ */ jsx48("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ jsxs42(
+    /* @__PURE__ */ jsx56("div", { className: cn("relative rounded-md border border-border/50 overflow-hidden", loading2 && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ jsxs50(
       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__ */ jsx48(TableHeader, { children: renderHeader }),
-          /* @__PURE__ */ jsx48(TableBody, { children: loading2 ? /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ jsxs42("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs42("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-              /* @__PURE__ */ jsx48("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx56(TableHeader, { children: renderHeader }),
+          /* @__PURE__ */ jsx56(TableBody, { children: loading2 ? /* @__PURE__ */ jsx56(TableRow, { children: /* @__PURE__ */ jsx56(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ jsxs50("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs50("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ jsx56("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx56(
                 "path",
                 {
                   className: "opacity-75",
@@ -10825,12 +12189,12 @@ function DataTable({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx48("span", { className: "text-sm", children: "Loading..." })
-          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: "No data" }) }) : displayedData.map((row, idx) => {
+            /* @__PURE__ */ jsx56("span", { className: "text-sm", children: "Loading..." })
+          ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ jsx56(TableRow, { children: /* @__PURE__ */ jsx56(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__ */ jsx48(TableRow, { className: cn(densityRowClass, striped && idx % 2 === 0 && "bg-muted/50"), children: visibleColumns.map((col, colIdx) => {
+            return /* @__PURE__ */ jsx56(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__ */ jsx48(
+              return /* @__PURE__ */ jsx56(
                 TableCell,
                 {
                   className: cn(
@@ -10850,7 +12214,7 @@ function DataTable({
         ]
       }
     ) }),
-    totalItems > 0 && /* @__PURE__ */ jsx48("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ jsx48(
+    totalItems > 0 && /* @__PURE__ */ jsx56("div", { className: "border-t bg-muted/30 p-4 rounded-b-md", children: /* @__PURE__ */ jsx56(
       Pagination,
       {
         page: curPage,
@@ -10872,10 +12236,10 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // ../../components/ui/Form.tsx
-import * as React40 from "react";
+import * as React48 from "react";
 import { Controller, FormProvider, useFormContext, useForm } from "react-hook-form";
-import { jsx as jsx49, jsxs as jsxs43 } from "react/jsx-runtime";
-var FormConfigContext = React40.createContext({ size: "md" });
+import { jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
+var FormConfigContext = React48.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -10888,24 +12252,24 @@ var FormWrapper = ({
   const methods = useForm({
     defaultValues: initialValues
   });
-  React40.useEffect(() => {
+  React48.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
   }, [JSON.stringify(initialValues)]);
   const { validationSchema: _, ...formProps } = props;
-  return /* @__PURE__ */ jsx49(FormProvider, { ...methods, children: /* @__PURE__ */ jsx49(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx49("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
+  return /* @__PURE__ */ jsx57(FormProvider, { ...methods, children: /* @__PURE__ */ jsx57(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx57("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React40.createContext({});
+var FormFieldContext = React48.createContext({});
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsx49(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx49(Controller, { ...props }) });
+  return /* @__PURE__ */ jsx57(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx57(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 } = useFormContext();
   if (!fieldContext) {
     try {
@@ -10926,27 +12290,27 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React40.createContext({});
-var FormItem = React40.forwardRef(({ className, ...props }, ref) => {
-  const id = React40.useId();
-  return /* @__PURE__ */ jsx49(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx49("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__ */ jsx57(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx57("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__ */ jsxs43(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
+    return /* @__PURE__ */ jsxs51(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
       children,
-      required && /* @__PURE__ */ jsx49("span", { className: "text-destructive ml-1", children: "*" })
+      required && /* @__PURE__ */ jsx57("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__ */ jsx49(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       ref,
@@ -10958,37 +12322,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__ */ jsx49("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx57("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__ */ jsx49("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
+  return /* @__PURE__ */ jsx57("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__ */ jsx49(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx49(
+var FormInput = React48.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx57(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx57(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ jsxs43(FormItem, { children: [
-      /* @__PURE__ */ jsx49(FormControl, { children: /* @__PURE__ */ jsx49(Input_default, { size: props.size ?? size, ...field, ...props }) }),
-      /* @__PURE__ */ jsx49(FormMessage, {})
+    render: ({ field }) => /* @__PURE__ */ jsxs51(FormItem, { children: [
+      /* @__PURE__ */ jsx57(FormControl, { children: /* @__PURE__ */ jsx57(Input_default, { size: props.size ?? size, ...field, ...props }) }),
+      /* @__PURE__ */ jsx57(FormMessage, {})
     ] })
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React40.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx49(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx49(
+var FormCheckbox = React48.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx57(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx57(
   FormField,
   {
     name,
-    render: ({ field }) => /* @__PURE__ */ jsxs43(FormItem, { children: [
-      /* @__PURE__ */ jsx49(FormControl, { children: /* @__PURE__ */ jsx49(
+    render: ({ field }) => /* @__PURE__ */ jsxs51(FormItem, { children: [
+      /* @__PURE__ */ jsx57(FormControl, { children: /* @__PURE__ */ jsx57(
         Checkbox,
         {
           ref,
@@ -11002,21 +12366,21 @@ var FormCheckbox = React40.forwardRef(({ name, ...props }, ref) => /* @__PURE__
           ...props
         }
       ) }),
-      /* @__PURE__ */ jsx49(FormMessage, {})
+      /* @__PURE__ */ jsx57(FormMessage, {})
     ] })
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React48.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React40.forwardRef(
-  ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ jsx49(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx49(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
+var FormSubmitButton = React48.forwardRef(
+  ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ jsx57(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx57(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
 );
 FormSubmitButton.displayName = "FormSubmitButton";
 
 // ../../components/ui/NotificationModal.tsx
 import { ExternalLink } from "lucide-react";
-import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs52 } from "react/jsx-runtime";
 function NotificationModal({ isOpen, onClose, notification, titleText, openLinkText, closeText }) {
   const t = useTranslations("Common");
   if (!notification) return null;
@@ -11037,20 +12401,20 @@ function NotificationModal({ isOpen, onClose, notification, titleText, openLinkT
       onClose();
     }
   };
-  return /* @__PURE__ */ jsx50(Modal_default, { isOpen, onClose, title: titleText || t("notifications"), size: "md", children: /* @__PURE__ */ jsxs44("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
-      /* @__PURE__ */ jsx50("div", { className: cn("w-2 h-2 rounded-full", !notification.is_read ? "bg-primary" : "bg-border") }),
-      /* @__PURE__ */ jsx50("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
+  return /* @__PURE__ */ jsx58(Modal_default, { isOpen, onClose, title: titleText || t("notifications"), size: "md", children: /* @__PURE__ */ jsxs52("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2 pb-2 border-b border-border", children: [
+      /* @__PURE__ */ jsx58("div", { className: cn("w-2 h-2 rounded-full", !notification.is_read ? "bg-primary" : "bg-border") }),
+      /* @__PURE__ */ jsx58("span", { className: "text-xs text-muted-foreground", children: !notification.is_read ? t("newNotification") : t("readStatus") })
     ] }),
-    notification.title && /* @__PURE__ */ jsx50("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
-    notification.body && /* @__PURE__ */ jsx50("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
-    /* @__PURE__ */ jsx50("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
-    /* @__PURE__ */ jsxs44("div", { className: "flex gap-2 justify-end pt-2", children: [
-      hasLink && /* @__PURE__ */ jsxs44(Button_default, { variant: "primary", size: "sm", onClick: handleLinkClick, className: "gap-2", children: [
-        /* @__PURE__ */ jsx50(ExternalLink, { className: "w-4 h-4" }),
+    notification.title && /* @__PURE__ */ jsx58("h3", { className: "text-lg font-semibold text-foreground", children: notification.title }),
+    notification.body && /* @__PURE__ */ jsx58("div", { className: "text-sm text-muted-foreground whitespace-pre-wrap leading-relaxed", children: notification.body }),
+    /* @__PURE__ */ jsx58("div", { className: "text-xs text-muted-foreground border-t border-border pt-2", children: formatTime3(notification.created_at) }),
+    /* @__PURE__ */ jsxs52("div", { className: "flex gap-2 justify-end pt-2", children: [
+      hasLink && /* @__PURE__ */ jsxs52(Button_default, { variant: "primary", size: "sm", onClick: handleLinkClick, className: "gap-2", children: [
+        /* @__PURE__ */ jsx58(ExternalLink, { className: "w-4 h-4" }),
         openLinkText || t("openLink")
       ] }),
-      /* @__PURE__ */ jsx50(Button_default, { variant: "ghost", size: "sm", onClick: onClose, children: closeText || t("close") })
+      /* @__PURE__ */ jsx58(Button_default, { variant: "ghost", size: "sm", onClick: onClose, children: closeText || t("close") })
     ] })
   ] }) });
 }
@@ -11060,9 +12424,9 @@ var NotificationModal_default = NotificationModal;
 import Link2 from "next/link";
 import { usePathname } from "next/navigation";
 import { Phone } from "lucide-react";
-import { jsx as jsx51, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
 function MessengerIcon(props) {
-  return /* @__PURE__ */ jsx51("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx59("svg", { viewBox: "0 0 24 24", width: 24, height: 24, "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx59(
     "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",
@@ -11071,7 +12435,7 @@ function MessengerIcon(props) {
   ) });
 }
 function ZaloIcon(props) {
-  return /* @__PURE__ */ jsx51("svg", { viewBox: "0 0 48 48", width: 20, height: 20, "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx59("svg", { viewBox: "0 0 48 48", width: 20, height: 20, "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx59(
     "path",
     {
       fill: "white",
@@ -11080,7 +12444,7 @@ function ZaloIcon(props) {
   ) });
 }
 function InstagramIcon(props) {
-  return /* @__PURE__ */ jsx51("svg", { viewBox: "0 0 24 24", width: 20, height: 20, "aria-hidden": "true", fill: "white", ...props, children: /* @__PURE__ */ jsx51("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__ */ jsx59("svg", { viewBox: "0 0 24 24", width: 20, height: 20, "aria-hidden": "true", fill: "white", ...props, children: /* @__PURE__ */ jsx59("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 = usePathname();
@@ -11115,8 +12479,8 @@ function FloatingContacts({ className }) {
       external: true
     }
   ];
-  return /* @__PURE__ */ jsxs45("div", { className: cn("fixed bottom-6 right-4 z-100000", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
-    /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs53("div", { className: cn("fixed bottom-6 right-4 z-100000", "flex flex-col items-end gap-3", className), "aria-label": "Quick contacts", children: [
+    /* @__PURE__ */ jsx59(
       Link2,
       {
         href: `tel:${hotline.replace(/\D/g, "")}`,
@@ -11127,10 +12491,10 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           "bg-[#22c55e]"
         ),
-        children: /* @__PURE__ */ jsx51(Phone, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ jsx59(Phone, { className: "w-6 h-6" })
       }
     ),
-    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ jsx51(
+    moreItems.map(({ key, href, label, bg, Icon, external }) => /* @__PURE__ */ jsx59(
       Link2,
       {
         href,
@@ -11142,7 +12506,7 @@ function FloatingContacts({ className }) {
           "hover:scale-105 active:scale-95 transition-transform",
           bg
         ),
-        children: /* @__PURE__ */ jsx51(Icon, { className: "w-6 h-6" })
+        children: /* @__PURE__ */ jsx59(Icon, { className: "w-6 h-6" })
       },
       key
     ))
@@ -11151,7 +12515,7 @@ function FloatingContacts({ className }) {
 
 // ../../components/ui/AccessDenied.tsx
 import { Ban, Lock, ShieldAlert } from "lucide-react";
-import { jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs54 } from "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" },
@@ -11172,32 +12536,32 @@ function AccessDenied({
 }) {
   const styles = VARIANT_STYLES[variant];
   const UsedIcon = Icon || DEFAULT_ICONS[variant];
-  return /* @__PURE__ */ jsx52(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ jsx52("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ jsx52(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
-    /* @__PURE__ */ jsxs46("div", { children: [
-      /* @__PURE__ */ jsx52("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
-      /* @__PURE__ */ jsx52("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
+  return /* @__PURE__ */ jsx60(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ jsxs54("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsx60("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ jsx60(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
+    /* @__PURE__ */ jsxs54("div", { children: [
+      /* @__PURE__ */ jsx60("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
+      /* @__PURE__ */ jsx60("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
     ] }),
-    children && /* @__PURE__ */ jsx52("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
+    children && /* @__PURE__ */ jsx60("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
   ] }) });
 }
 
 // ../../components/ui/ThemeToggleHeadless.tsx
 import { Moon, Sun, Monitor } from "lucide-react";
-import { useEffect as useEffect20, useRef as useRef14, useState as useState33 } from "react";
-import { createPortal as createPortal10 } from "react-dom";
-import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
+import { useEffect as useEffect21, useRef as useRef19, useState as useState39 } from "react";
+import { createPortal as createPortal11 } from "react-dom";
+import { Fragment as Fragment21, jsx as jsx61, jsxs as jsxs55 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = useState33(false);
-  const [mounted, setMounted] = useState33(false);
-  const triggerRef = useRef14(null);
-  const [dropdownPosition, setDropdownPosition] = useState33(null);
-  useEffect20(() => setMounted(true), []);
+  const [isOpen, setIsOpen] = useState39(false);
+  const [mounted, setMounted] = useState39(false);
+  const triggerRef = useRef19(null);
+  const [dropdownPosition, setDropdownPosition] = useState39(null);
+  useEffect21(() => setMounted(true), []);
   const themes = [
     { value: "light", label: labels?.light ?? "Light", icon: Sun },
     { value: "dark", label: labels?.dark ?? "Dark", icon: Moon },
@@ -11215,8 +12579,8 @@ function ThemeToggleHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ jsxs47("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs55("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx61(
       Button_default,
       {
         variant: "ghost",
@@ -11234,25 +12598,25 @@ function ThemeToggleHeadless({
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Theme",
-        children: /* @__PURE__ */ jsx53(CurrentIcon, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx61(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs47(Fragment18, { children: [
-      typeof window !== "undefined" && createPortal10(/* @__PURE__ */ jsx53("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && createPortal10(
-        /* @__PURE__ */ jsx53(
+    isOpen && /* @__PURE__ */ jsxs55(Fragment21, { children: [
+      typeof window !== "undefined" && createPortal11(/* @__PURE__ */ jsx61("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && createPortal11(
+        /* @__PURE__ */ jsx61(
           "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__ */ jsxs47("div", { className: "p-2", children: [
-              /* @__PURE__ */ jsx53("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__ */ jsxs55("div", { className: "p-2", children: [
+              /* @__PURE__ */ jsx61("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__ */ jsxs47(
+                return /* @__PURE__ */ jsxs55(
                   Button_default,
                   {
                     variant: "ghost",
@@ -11268,9 +12632,9 @@ function ThemeToggleHeadless({
                     role: "menuitemradio",
                     "aria-checked": active,
                     children: [
-                      /* @__PURE__ */ jsx53(Icon, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ jsx53("span", { className: "flex-1 text-left", children: opt.label }),
-                      active && /* @__PURE__ */ jsx53("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                      /* @__PURE__ */ jsx61(Icon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx61("span", { className: "flex-1 text-left", children: opt.label }),
+                      active && /* @__PURE__ */ jsx61("div", { className: "w-2 h-2 rounded-full bg-primary" })
                     ]
                   },
                   opt.value
@@ -11286,10 +12650,10 @@ function ThemeToggleHeadless({
 }
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
-import { useRef as useRef15, useState as useState34 } from "react";
-import { createPortal as createPortal11 } from "react-dom";
+import { useRef as useRef20, useState as useState40 } from "react";
+import { createPortal as createPortal12 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment19, jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx62, jsxs as jsxs56 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -11297,9 +12661,9 @@ function LanguageSwitcherHeadless({
   labels,
   className
 }) {
-  const [isOpen, setIsOpen] = useState34(false);
-  const [dropdownPosition, setDropdownPosition] = useState34(null);
-  const triggerButtonRef = useRef15(null);
+  const [isOpen, setIsOpen] = useState40(false);
+  const [dropdownPosition, setDropdownPosition] = useState40(null);
+  const triggerButtonRef = useRef20(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();
@@ -11311,8 +12675,8 @@ function LanguageSwitcherHeadless({
     const top = rect.bottom + scrollTop + 8;
     return { top, left, width };
   };
-  return /* @__PURE__ */ jsxs48("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs56("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx62(
       Button_default,
       {
         variant: "ghost",
@@ -11331,22 +12695,22 @@ function LanguageSwitcherHeadless({
         "aria-expanded": isOpen,
         "aria-label": labels?.heading ?? "Language",
         title: labels?.heading ?? "Language",
-        children: /* @__PURE__ */ jsx54(Globe, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx62(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs48(Fragment19, { children: [
-      typeof window !== "undefined" && createPortal11(/* @__PURE__ */ jsx54("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
-      typeof window !== "undefined" && dropdownPosition && createPortal11(
-        /* @__PURE__ */ jsx54(
+    isOpen && /* @__PURE__ */ jsxs56(Fragment22, { children: [
+      typeof window !== "undefined" && createPortal12(/* @__PURE__ */ jsx62("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
+      typeof window !== "undefined" && dropdownPosition && createPortal12(
+        /* @__PURE__ */ jsx62(
           "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__ */ jsxs48("div", { className: "p-2", children: [
-              /* @__PURE__ */ jsx54("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__ */ jsxs48(
+            children: /* @__PURE__ */ jsxs56("div", { className: "p-2", children: [
+              /* @__PURE__ */ jsx62("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__ */ jsxs56(
                 Button_default,
                 {
                   variant: "ghost",
@@ -11359,9 +12723,9 @@ function LanguageSwitcherHeadless({
                   role: "menuitemradio",
                   "aria-checked": currentLocale === language.code,
                   children: [
-                    language.flag && /* @__PURE__ */ jsx54("span", { className: "text-lg", children: language.flag }),
-                    /* @__PURE__ */ jsx54("span", { className: "flex-1 text-left", children: language.name }),
-                    currentLocale === language.code && /* @__PURE__ */ jsx54("div", { className: "w-2 h-2 rounded-full bg-primary" })
+                    language.flag && /* @__PURE__ */ jsx62("span", { className: "text-lg", children: language.flag }),
+                    /* @__PURE__ */ jsx62("span", { className: "flex-1 text-left", children: language.name }),
+                    currentLocale === language.code && /* @__PURE__ */ jsx62("div", { className: "w-2 h-2 rounded-full bg-primary" })
                   ]
                 },
                 language.code
@@ -11791,7 +13155,7 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // src/contexts/TranslationContext.tsx
-import * as React42 from "react";
+import * as React50 from "react";
 
 // locales/en.json
 var en_default = {
@@ -12046,16 +13410,16 @@ var ja_default = {
 };
 
 // src/contexts/TranslationContext.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "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 = {
@@ -12080,10 +13444,10 @@ var TranslationProvider = ({ children, locale = "en", translations }) => {
     },
     [locale, translations]
   );
-  return /* @__PURE__ */ jsx55(TranslationContext2.Provider, { value: { locale, t }, children });
+  return /* @__PURE__ */ jsx63(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(".");
@@ -12105,13 +13469,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
-import * as React43 from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import * as React51 from "react";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var nextIntlHooks = null;
 try {
   const nextIntl = __require("next-intl");
@@ -12122,12 +13486,12 @@ try {
 } catch {
   nextIntlHooks = null;
 }
-var ForceInternalContext = React43.createContext(false);
+var ForceInternalContext = React51.createContext(false);
 var ForceInternalTranslationsProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx56(ForceInternalContext.Provider, { value: true, children });
+  return /* @__PURE__ */ jsx64(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;
@@ -12140,7 +13504,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;
@@ -12161,9 +13525,11 @@ function getUnderverseMessages(locale = "en") {
 export {
   AccessDenied,
   Alert_default as Alert,
+  AreaChart,
   Avatar_default as Avatar,
   Badge_default as Badge,
   Badge as BadgeBase,
+  BarChart,
   BatteryProgress,
   BottomSheet,
   Breadcrumb_default as Breadcrumb,
@@ -12201,6 +13567,7 @@ export {
   FormLabel,
   FormMessage,
   FormSubmitButton,
+  GaugeChart,
   GlobalLoading,
   GradientBadge,
   Grid_default as Grid,
@@ -12212,6 +13579,7 @@ export {
   Label,
   LanguageSwitcherHeadless as LanguageSwitcher,
   LanguageSwitcherHeadless,
+  LineChart,
   List_default as List,
   ListItem,
   LoadingBar,
@@ -12228,10 +13596,12 @@ export {
   PageLoading,
   Pagination,
   PasswordInput,
+  PieChart,
   PillTabs,
   Popover,
   Progress,
   PulseBadge,
+  RadarChart,
   RadioGroup,
   RadioGroupItem,
   SIZE_STYLES_BTN,
@@ -12256,6 +13626,7 @@ export {
   SlideOver,
   Slider,
   SmartImage,
+  Sparkline,
   StatusBadge,
   StepProgress,
   Switch_default as Switch,