@northslopetech/altitude-ui 2.6.3 → 2.7.0

package/dist/index.mjs

@@ -1721,6 +1721,124 @@ var Panel = ({
     )
   }
 );
+var ZoomIn = ({
+  className,
+  variant = "dark",
+  ...props
+}) => /* @__PURE__ */ jsxs2(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: cn(getVariantStyles(variant), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2(
+        "circle",
+        {
+          cx: "6.5",
+          cy: "6.5",
+          r: "4.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "line",
+        {
+          x1: "10",
+          y1: "10",
+          x2: "14",
+          y2: "14",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "line",
+        {
+          x1: "4.5",
+          y1: "6.5",
+          x2: "8.5",
+          y2: "6.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "line",
+        {
+          x1: "6.5",
+          y1: "4.5",
+          x2: "6.5",
+          y2: "8.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+);
+var ZoomOut = ({
+  className,
+  variant = "dark",
+  ...props
+}) => /* @__PURE__ */ jsxs2(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: cn(getVariantStyles(variant), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2(
+        "circle",
+        {
+          cx: "6.5",
+          cy: "6.5",
+          r: "4.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          fill: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "line",
+        {
+          x1: "10",
+          y1: "10",
+          x2: "14",
+          y2: "14",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "line",
+        {
+          x1: "4.5",
+          y1: "6.5",
+          x2: "8.5",
+          y2: "6.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+);
 
 // src/components/ui/select.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -3215,103 +3333,588 @@ var Badge = React11.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/pdf-viewer/index.tsx
-import * as React16 from "react";
+import * as React19 from "react";
 import "react-pdf/dist/Page/TextLayer.css";
 
-// src/components/pdf-viewer/components/PdfDocument.tsx
+// src/components/pdf-viewer/components/CustomScrollbar.tsx
 import * as React12 from "react";
+import { Fragment, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var scrollbarStyles = `
+  .custom-scrollbar-content {
+    overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .custom-scrollbar-content::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+  .custom-scrollbar-wrapper {
+    position: relative;
+  }
+  .custom-scrollbar-wrapper .scrollbar-track-vertical {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 8px;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+  }
+  .custom-scrollbar-wrapper .scrollbar-track-horizontal {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 8px;
+    pointer-events: none;
+    z-index: 10;
+  }
+  .custom-scrollbar-wrapper .scrollbar-thumb-vertical {
+    position: absolute;
+    right: 0;
+    width: 8px;
+    border-radius: 4px;
+    background: rgba(102, 102, 102, 0);
+    transition: background 0.3s ease;
+    pointer-events: auto;
+    cursor: default;
+  }
+  .custom-scrollbar-wrapper .scrollbar-thumb-horizontal {
+    position: absolute;
+    bottom: 0;
+    height: 8px;
+    border-radius: 4px;
+    background: rgba(102, 102, 102, 0);
+    transition: background 0.3s ease;
+    pointer-events: auto;
+    cursor: default;
+  }
+  .custom-scrollbar-wrapper.scrolling-vertical .scrollbar-thumb-vertical {
+    background: rgba(102, 102, 102, 0.7);
+  }
+  .custom-scrollbar-wrapper.scrolling-horizontal .scrollbar-thumb-horizontal {
+    background: rgba(102, 102, 102, 0.7);
+  }
+`;
+function CustomScrollbar({
+  children,
+  containerRef: externalContainerRef,
+  autoHideDelay = 1e3,
+  onScroll,
+  backgroundColor = "#F5F5F5",
+  className
+}) {
+  const internalContainerRef = React12.useRef(null);
+  const containerRef = externalContainerRef || internalContainerRef;
+  const wrapperRef = React12.useRef(null);
+  const thumbVerticalRef = React12.useRef(null);
+  const thumbHorizontalRef = React12.useRef(null);
+  const lastScrollPosRef = React12.useRef({ top: 0, left: 0 });
+  const scrollTimeoutsRef = React12.useRef({ vertical: null, horizontal: null });
+  const showScrollbar = React12.useCallback(
+    (direction) => {
+      const wrapper = wrapperRef.current;
+      if (!wrapper) return;
+      wrapper.classList.add(`scrolling-${direction}`);
+      if (scrollTimeoutsRef.current[direction]) {
+        clearTimeout(scrollTimeoutsRef.current[direction]);
+      }
+      scrollTimeoutsRef.current[direction] = setTimeout(() => {
+        wrapper.classList.remove(`scrolling-${direction}`);
+      }, autoHideDelay);
+    },
+    [autoHideDelay]
+  );
+  const updateScrollbarThumbPosition = React12.useCallback(() => {
+    const container = containerRef.current;
+    const thumbVertical = thumbVerticalRef.current;
+    const thumbHorizontal = thumbHorizontalRef.current;
+    if (!container) return;
+    if (thumbVertical) {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const scrollableHeight = scrollHeight - clientHeight;
+      if (scrollableHeight <= 0) {
+        thumbVertical.style.display = "none";
+      } else {
+        thumbVertical.style.display = "block";
+        const thumbHeight = Math.max(
+          clientHeight / scrollHeight * clientHeight,
+          30
+        );
+        const thumbTop = scrollTop / scrollableHeight * (clientHeight - thumbHeight);
+        thumbVertical.style.height = `${thumbHeight}px`;
+        thumbVertical.style.top = `${thumbTop}px`;
+      }
+    }
+    if (thumbHorizontal) {
+      const { scrollLeft, scrollWidth, clientWidth } = container;
+      const scrollableWidth = scrollWidth - clientWidth;
+      if (scrollableWidth <= 0) {
+        thumbHorizontal.style.display = "none";
+      } else {
+        thumbHorizontal.style.display = "block";
+        const thumbWidth = Math.max(
+          clientWidth / scrollWidth * clientWidth,
+          30
+        );
+        const thumbLeft = scrollLeft / scrollableWidth * (clientWidth - thumbWidth);
+        thumbHorizontal.style.width = `${thumbWidth}px`;
+        thumbHorizontal.style.left = `${thumbLeft}px`;
+      }
+    }
+  }, [containerRef]);
+  React12.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    lastScrollPosRef.current = {
+      top: container.scrollTop,
+      left: container.scrollLeft
+    };
+    let rafId = null;
+    const handleScroll = () => {
+      const currentScrollTop = container.scrollTop;
+      const currentScrollLeft = container.scrollLeft;
+      if (currentScrollTop !== lastScrollPosRef.current.top) {
+        showScrollbar("vertical");
+      }
+      if (currentScrollLeft !== lastScrollPosRef.current.left) {
+        showScrollbar("horizontal");
+      }
+      lastScrollPosRef.current = {
+        top: currentScrollTop,
+        left: currentScrollLeft
+      };
+      if (rafId) return;
+      rafId = requestAnimationFrame(() => {
+        updateScrollbarThumbPosition();
+        rafId = null;
+      });
+    };
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [containerRef, showScrollbar, updateScrollbarThumbPosition]);
+  React12.useEffect(() => {
+    const thumbVertical = thumbVerticalRef.current;
+    const thumbHorizontal = thumbHorizontalRef.current;
+    const container = containerRef.current;
+    if (!container) return;
+    let activeDrag = null;
+    let startPos = 0;
+    let startScroll = 0;
+    const handleMouseDown = (direction) => {
+      return (e) => {
+        activeDrag = direction;
+        startPos = direction === "vertical" ? e.clientY : e.clientX;
+        startScroll = direction === "vertical" ? container.scrollTop : container.scrollLeft;
+        showScrollbar(direction);
+        document.body.style.userSelect = "none";
+        e.preventDefault();
+      };
+    };
+    const handleMouseMove = (e) => {
+      if (!activeDrag) return;
+      if (activeDrag === "vertical") {
+        const { scrollHeight, clientHeight } = container;
+        const scrollableHeight = scrollHeight - clientHeight;
+        const thumbHeight = Math.max(
+          clientHeight / scrollHeight * clientHeight,
+          30
+        );
+        const trackHeight = clientHeight - thumbHeight;
+        const delta = e.clientY - startPos;
+        container.scrollTop = startScroll + delta / trackHeight * scrollableHeight;
+      } else {
+        const { scrollWidth, clientWidth } = container;
+        const scrollableWidth = scrollWidth - clientWidth;
+        const thumbWidth = Math.max(
+          clientWidth / scrollWidth * clientWidth,
+          30
+        );
+        const trackWidth = clientWidth - thumbWidth;
+        const delta = e.clientX - startPos;
+        container.scrollLeft = startScroll + delta / trackWidth * scrollableWidth;
+      }
+    };
+    const handleMouseUp = () => {
+      if (!activeDrag) return;
+      activeDrag = null;
+      document.body.style.userSelect = "";
+    };
+    const onVerticalMouseDown = handleMouseDown("vertical");
+    const onHorizontalMouseDown = handleMouseDown("horizontal");
+    thumbVertical?.addEventListener("mousedown", onVerticalMouseDown);
+    thumbHorizontal?.addEventListener("mousedown", onHorizontalMouseDown);
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      thumbVertical?.removeEventListener("mousedown", onVerticalMouseDown);
+      thumbHorizontal?.removeEventListener("mousedown", onHorizontalMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [containerRef, showScrollbar]);
+  React12.useEffect(() => {
+    updateScrollbarThumbPosition();
+  }, [children, updateScrollbarThumbPosition]);
+  return /* @__PURE__ */ jsxs10(Fragment, { children: [
+    /* @__PURE__ */ jsx15("style", { children: scrollbarStyles }),
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref: wrapperRef,
+        className: `flex-1 min-w-0 custom-scrollbar-wrapper ${className || ""}`,
+        style: { background: backgroundColor },
+        children: [
+          /* @__PURE__ */ jsx15(
+            "div",
+            {
+              ref: containerRef,
+              className: "h-full custom-scrollbar-content",
+              onScroll,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx15("div", { className: "scrollbar-track-vertical", children: /* @__PURE__ */ jsx15("div", { ref: thumbVerticalRef, className: "scrollbar-thumb-vertical" }) }),
+          /* @__PURE__ */ jsx15("div", { className: "scrollbar-track-horizontal", children: /* @__PURE__ */ jsx15(
+            "div",
+            {
+              ref: thumbHorizontalRef,
+              className: "scrollbar-thumb-horizontal"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/pdf-viewer/components/PdfControls.tsx
+import * as React13 from "react";
+
+// src/components/pdf-viewer/utils/types.ts
+var PDF_ZOOM = {
+  MIN: 25,
+  MAX: 300,
+  DEFAULT: 100,
+  STEP: 25
+};
+
+// src/components/pdf-viewer/components/PdfControls.tsx
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var PdfControls = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  onPreviousPage,
+  onNextPage,
+  zoom,
+  onZoomChange
+}) => {
+  const canGoPrevious = currentPage > 1;
+  const canGoNext = currentPage < totalPages;
+  const canZoomIn = zoom < PDF_ZOOM.MAX;
+  const canZoomOut = zoom > PDF_ZOOM.MIN;
+  const [pageInputValue, setPageInputValue] = React13.useState(
+    String(currentPage)
+  );
+  const isEscapeRef = React13.useRef(false);
+  React13.useEffect(() => {
+    setPageInputValue(String(currentPage));
+  }, [currentPage]);
+  const handlePageInputChange = (e) => {
+    setPageInputValue(e.target.value);
+  };
+  const handlePageInputBlur = () => {
+    if (isEscapeRef.current) {
+      isEscapeRef.current = false;
+      return;
+    }
+    const pageNum = parseInt(pageInputValue, 10);
+    if (!isNaN(pageNum) && pageNum >= 1 && pageNum <= totalPages) {
+      onPageChange?.(pageNum);
+    } else {
+      setPageInputValue(String(currentPage));
+    }
+  };
+  const handlePageKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handlePageInputBlur();
+      e.target.blur();
+    } else if (e.key === "Escape") {
+      isEscapeRef.current = true;
+      setPageInputValue(String(currentPage));
+      e.target.blur();
+    }
+  };
+  const handleZoomIn = () => {
+    const newZoom = Math.min(zoom + PDF_ZOOM.STEP, PDF_ZOOM.MAX);
+    onZoomChange(newZoom);
+  };
+  const handleZoomOut = () => {
+    const newZoom = Math.max(zoom - PDF_ZOOM.STEP, PDF_ZOOM.MIN);
+    onZoomChange(newZoom);
+  };
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "flex flex-col items-center justify-end py-2 px-1 gap-4",
+      style: { background: "#DEDEDE" },
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              onClick: onPreviousPage,
+              disabled: !canGoPrevious,
+              className: "p-1.5 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+              "aria-label": "Previous page",
+              type: "button",
+              children: /* @__PURE__ */ jsx16(ChevronUp, { className: "w-4 h-4", style: { color: "#666666" } })
+            }
+          ),
+          /* @__PURE__ */ jsx16("div", { className: "flex flex-col items-center", children: totalPages > 0 ? /* @__PURE__ */ jsx16(
+            "input",
+            {
+              type: "text",
+              inputMode: "numeric",
+              value: pageInputValue,
+              onChange: handlePageInputChange,
+              onBlur: handlePageInputBlur,
+              onKeyDown: handlePageKeyDown,
+              className: "w-8 px-1 py-0.5 text-center text-sm rounded focus:outline-none focus:ring-1 focus:ring-primary",
+              style: {
+                background: "white",
+                border: "1px solid #CCCCCC"
+              },
+              "aria-label": "Current page"
+            }
+          ) : /* @__PURE__ */ jsx16("span", { className: "text-sm", style: { color: "#666666" }, children: "-" }) }),
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              onClick: onNextPage,
+              disabled: !canGoNext,
+              className: "p-1.5 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+              "aria-label": "Next page",
+              type: "button",
+              children: /* @__PURE__ */ jsx16(ChevronDown, { className: "w-4 h-4", style: { color: "#666666" } })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              onClick: handleZoomIn,
+              disabled: !canZoomIn,
+              className: "p-1.5 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+              "aria-label": "Zoom in",
+              type: "button",
+              children: /* @__PURE__ */ jsx16(ZoomIn, { className: "w-4 h-4", style: { color: "#666666" } })
+            }
+          ),
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              onClick: handleZoomOut,
+              disabled: !canZoomOut,
+              className: "p-1.5 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+              "aria-label": "Zoom out",
+              type: "button",
+              children: /* @__PURE__ */ jsx16(ZoomOut, { className: "w-4 h-4", style: { color: "#666666" } })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+PdfControls.displayName = "PdfControls";
+
+// src/components/pdf-viewer/components/PdfDocument.tsx
 import { Document, Page } from "react-pdf";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var DEFAULT_ASPECT_RATIO = 11 / 8.5;
 var PdfDocument = ({
   file,
   pageWidth,
   enableTextLayer,
   onLoadSuccess,
-  onLoadError
+  onLoadError,
+  numPages,
+  registerPageRef,
+  visiblePages,
+  viewMode,
+  currentPage
 }) => {
-  const [numPages, setNumPages] = React12.useState();
+  const placeholderHeight = pageWidth * DEFAULT_ASPECT_RATIO;
   function handleDocumentLoadSuccess({ numPages: numPages2 }) {
-    setNumPages(numPages2);
     onLoadSuccess?.(numPages2);
   }
+  function renderCurrentPage() {
+    return /* @__PURE__ */ jsx17(
+      "div",
+      {
+        ref: (el) => registerPageRef(currentPage, el),
+        className: "flex justify-center",
+        children: /* @__PURE__ */ jsx17(
+          Page,
+          {
+            pageNumber: currentPage,
+            width: pageWidth,
+            className: "shadow-sm",
+            renderTextLayer: enableTextLayer,
+            renderAnnotationLayer: false,
+            loading: /* @__PURE__ */ jsx17(
+              "div",
+              {
+                className: "flex items-center justify-center bg-white",
+                style: { width: pageWidth, height: placeholderHeight },
+                children: /* @__PURE__ */ jsxs12(Typography, { variant: "body-sm", className: "text-secondary", children: [
+                  "Loading page ",
+                  currentPage,
+                  "..."
+                ] })
+              }
+            )
+          }
+        )
+      },
+      `page_${currentPage}`
+    );
+  }
+  function renderPagesWithVirtualization() {
+    return Array.from(new Array(numPages), (_, index) => {
+      const pageNum = index + 1;
+      const shouldRender = visiblePages.has(pageNum);
+      return /* @__PURE__ */ jsx17(
+        "div",
+        {
+          ref: (el) => registerPageRef(pageNum, el),
+          className: "mb-4 flex justify-center",
+          style: {
+            minHeight: shouldRender ? void 0 : placeholderHeight
+          },
+          children: shouldRender ? /* @__PURE__ */ jsx17(
+            Page,
+            {
+              pageNumber: pageNum,
+              width: pageWidth,
+              className: "shadow-sm",
+              renderTextLayer: enableTextLayer,
+              renderAnnotationLayer: false,
+              loading: /* @__PURE__ */ jsx17(
+                "div",
+                {
+                  className: "flex items-center justify-center bg-white",
+                  style: { width: pageWidth, height: placeholderHeight },
+                  children: /* @__PURE__ */ jsxs12(Typography, { variant: "body-sm", className: "text-secondary", children: [
+                    "Loading page ",
+                    pageNum,
+                    "..."
+                  ] })
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx17(
+            "div",
+            {
+              className: "flex items-center justify-center bg-white shadow-sm",
+              style: {
+                width: pageWidth,
+                height: placeholderHeight
+              },
+              children: /* @__PURE__ */ jsxs12(Typography, { variant: "body-sm", className: "text-secondary", children: [
+                "Page ",
+                pageNum
+              ] })
+            }
+          )
+        },
+        `page_${pageNum}`
+      );
+    });
+  }
   if (!file) {
-    return /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx15(Typography, { variant: "body-md", className: "text-secondary", children: "No PDF available" }) });
+    return /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx17(Typography, { variant: "body-md", className: "text-secondary", children: "No PDF available" }) });
   }
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     Document,
     {
       file,
       onLoadSuccess: handleDocumentLoadSuccess,
       onLoadError,
-      loading: /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx15(Typography, { variant: "body-md", className: "text-secondary", children: "Rendering PDF..." }) }),
-      error: /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx15(Typography, { variant: "body-md", className: "text-error", children: "Failed to render PDF" }) }),
-      className: "flex flex-col items-center p-4",
-      children: numPages && pageWidth > 0 && Array.from(new Array(numPages), (_, index) => /* @__PURE__ */ jsx15(
-        Page,
-        {
-          pageNumber: index + 1,
-          width: pageWidth,
-          className: "mb-4 shadow-sm",
-          renderTextLayer: enableTextLayer,
-          renderAnnotationLayer: false
-        },
-        `page_${index + 1}`
-      ))
+      loading: /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx17(Typography, { variant: "body-md", className: "text-secondary", children: "Rendering PDF..." }) }),
+      error: /* @__PURE__ */ jsx17("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx17(Typography, { variant: "body-md", className: "text-error", children: "Failed to render PDF" }) }),
+      className: "flex flex-col items-center p-4 min-w-fit",
+      children: numPages > 0 && pageWidth > 0 && (viewMode === "single" ? renderCurrentPage() : renderPagesWithVirtualization())
     }
   );
 };
 PdfDocument.displayName = "PdfDocument";
 
 // src/components/pdf-viewer/components/PdfHeader.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var PdfHeader = ({
   title,
   onDownload,
   onPrint
 }) => {
-  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between gap-4 px-4 py-3 bg-neutral-400 border-b border-subtle", children: [
-    /* @__PURE__ */ jsx16("div", { className: "flex-shrink min-w-0", children: /* @__PURE__ */ jsx16(
-      Typography,
-      {
-        variant: "label-md-bold",
-        className: "text-dark truncate",
-        title,
-        children: title || "Untitled Document"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-      /* @__PURE__ */ jsx16(
-        "button",
-        {
-          onClick: onDownload,
-          className: "p-2 hover:bg-neutral-500 rounded transition-colors",
-          "aria-label": "Download PDF",
-          type: "button",
-          children: /* @__PURE__ */ jsx16(Download, { variant: "dark", className: "w-5 h-5" })
-        }
-      ),
-      /* @__PURE__ */ jsx16(
-        "button",
-        {
-          onClick: onPrint,
-          className: "p-2 hover:bg-neutral-500 rounded transition-colors",
-          "aria-label": "Print PDF",
-          type: "button",
-          children: /* @__PURE__ */ jsx16(Print, { variant: "dark", className: "w-5 h-5" })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: "flex items-center justify-between gap-4 px-4 py-3",
+      style: { background: "#B5B5B5" },
+      children: [
+        /* @__PURE__ */ jsx18("div", { className: "flex-shrink min-w-0", children: /* @__PURE__ */ jsx18(
+          Typography,
+          {
+            variant: "label-md-bold",
+            className: "text-dark truncate",
+            title,
+            children: title || "Untitled Document"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+          /* @__PURE__ */ jsx18(
+            "button",
+            {
+              onClick: onDownload,
+              className: "p-2 hover:bg-neutral-500 rounded transition-colors",
+              "aria-label": "Download PDF",
+              type: "button",
+              children: /* @__PURE__ */ jsx18(Download, { variant: "dark", className: "w-5 h-5" })
+            }
+          ),
+          /* @__PURE__ */ jsx18(
+            "button",
+            {
+              onClick: onPrint,
+              className: "p-2 hover:bg-neutral-500 rounded transition-colors",
+              "aria-label": "Print PDF",
+              type: "button",
+              children: /* @__PURE__ */ jsx18(Print, { variant: "dark", className: "w-5 h-5" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 PdfHeader.displayName = "PdfHeader";
 
 // src/components/pdf-viewer/hooks/useContainerWidth.ts
-import * as React13 from "react";
+import * as React14 from "react";
 function useContainerWidth(padding = 32) {
-  const [containerWidth, setContainerWidth] = React13.useState(0);
-  const containerRef = React13.useRef(null);
-  const lastWidthRef = React13.useRef(0);
-  React13.useEffect(() => {
+  const [containerWidth, setContainerWidth] = React14.useState(0);
+  const containerRef = React14.useRef(null);
+  const lastWidthRef = React14.useRef(0);
+  React14.useEffect(() => {
     const element = containerRef.current;
     if (!element) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -3334,10 +3937,142 @@ function useContainerWidth(padding = 32) {
   return { containerWidth, containerRef };
 }
 
+// src/components/pdf-viewer/hooks/usePageNavigation.ts
+import * as React15 from "react";
+function usePageNavigation({
+  containerRef,
+  numPages,
+  onBeforeScroll,
+  page: controlledPage,
+  onPageChange,
+  scrollBehavior = "smooth"
+}) {
+  const [internalPage, setInternalPage] = React15.useState(1);
+  const pageRefsMap = React15.useRef(/* @__PURE__ */ new Map());
+  const isProgrammaticScroll = React15.useRef(false);
+  const lastScrolledPageRef = React15.useRef(null);
+  const scrollDebounceRef = React15.useRef(
+    null
+  );
+  const isControlled = controlledPage !== void 0;
+  const currentPage = isControlled ? controlledPage : internalPage;
+  const registerPageRef = React15.useCallback(
+    (pageNum, el) => {
+      if (el) {
+        pageRefsMap.current.set(pageNum, el);
+      } else {
+        pageRefsMap.current.delete(pageNum);
+      }
+    },
+    []
+  );
+  const updateCurrentPageFromScroll = React15.useCallback(() => {
+    if (isProgrammaticScroll.current) return;
+    const container = containerRef.current;
+    if (!container || numPages === 0) return;
+    const containerRect = container.getBoundingClientRect();
+    let mostVisiblePage = 1;
+    let maxVisibleArea = 0;
+    for (let pageNum = 1; pageNum <= numPages; pageNum++) {
+      const pageElement = pageRefsMap.current.get(pageNum);
+      if (!pageElement) continue;
+      const pageRect = pageElement.getBoundingClientRect();
+      if (pageRect.bottom > containerRect.top && pageRect.top < containerRect.bottom) {
+        const visibleTop = Math.max(pageRect.top, containerRect.top);
+        const visibleBottom = Math.min(pageRect.bottom, containerRect.bottom);
+        const visibleArea = visibleBottom - visibleTop;
+        if (visibleArea > maxVisibleArea) {
+          maxVisibleArea = visibleArea;
+          mostVisiblePage = pageNum;
+        }
+      }
+    }
+    if (maxVisibleArea > 0) {
+      lastScrolledPageRef.current = mostVisiblePage;
+      if (isControlled) {
+        onPageChange?.(mostVisiblePage);
+      } else {
+        setInternalPage(mostVisiblePage);
+      }
+    }
+  }, [containerRef, numPages, isControlled, onPageChange]);
+  const scrollToPage = React15.useCallback(
+    (pageNum) => {
+      const container = containerRef.current;
+      if (!container) return;
+      onBeforeScroll?.(pageNum);
+      if (scrollDebounceRef.current) {
+        clearTimeout(scrollDebounceRef.current);
+      }
+      const performScroll = () => {
+        isProgrammaticScroll.current = true;
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            const pageElement = pageRefsMap.current.get(pageNum);
+            if (container && pageElement) {
+              const containerTop = container.getBoundingClientRect().top;
+              const pageTop = pageElement.getBoundingClientRect().top;
+              const scrollOffset = pageTop - containerTop + container.scrollTop;
+              container.scrollTo({
+                top: scrollOffset,
+                behavior: scrollBehavior
+              });
+            }
+          });
+        });
+      };
+      if (scrollBehavior === "smooth") {
+        scrollDebounceRef.current = setTimeout(performScroll, 100);
+      } else {
+        performScroll();
+      }
+    },
+    [containerRef, onBeforeScroll, scrollBehavior]
+  );
+  const handlePageChange = React15.useCallback(
+    (pageNum) => {
+      const clampedPage = Math.max(1, Math.min(pageNum, numPages));
+      lastScrolledPageRef.current = clampedPage;
+      if (isControlled) {
+        onPageChange?.(clampedPage);
+      } else {
+        setInternalPage(clampedPage);
+      }
+      scrollToPage(clampedPage);
+    },
+    [numPages, scrollToPage, isControlled, onPageChange]
+  );
+  React15.useEffect(() => {
+    if (!isControlled || !controlledPage || numPages <= 0) {
+      return;
+    }
+    if (lastScrolledPageRef.current !== controlledPage) {
+      lastScrolledPageRef.current = controlledPage;
+      scrollToPage(controlledPage);
+    }
+  }, [controlledPage, isControlled, numPages, scrollToPage]);
+  React15.useEffect(() => {
+    return () => {
+      if (scrollDebounceRef.current) {
+        clearTimeout(scrollDebounceRef.current);
+      }
+    };
+  }, []);
+  return {
+    currentPage,
+    registerPageRef,
+    handlePageChange,
+    updateCurrentPageFromScroll,
+    isProgrammaticScroll,
+    pageRefsMap,
+    scrollToPage
+  };
+}
+
 // src/components/pdf-viewer/hooks/usePdfDownload.ts
-import * as React14 from "react";
+import * as React16 from "react";
 function usePdfDownload(file, title) {
-  const download = React14.useCallback(async () => {
+  const download = React16.useCallback(async () => {
     if (!file) return;
     try {
       let blob;
@@ -3369,11 +4104,11 @@ function usePdfDownload(file, title) {
 }
 
 // src/components/pdf-viewer/hooks/usePdfPrint.ts
-import * as React15 from "react";
+import * as React17 from "react";
 function usePdfPrint(file) {
-  const [printBlobUrl, setPrintBlobUrl] = React15.useState(null);
-  const printFrameRef = React15.useRef(null);
-  const preparePrint = React15.useCallback(async () => {
+  const [printBlobUrl, setPrintBlobUrl] = React17.useState(null);
+  const printFrameRef = React17.useRef(null);
+  const preparePrint = React17.useCallback(async () => {
     if (!file) return;
     try {
       let blob;
@@ -3389,14 +4124,14 @@ function usePdfPrint(file) {
       console.error("Failed to prepare PDF for printing:", error);
     }
   }, [file]);
-  React15.useEffect(() => {
+  React17.useEffect(() => {
     return () => {
       if (printBlobUrl) {
         URL.revokeObjectURL(printBlobUrl);
       }
     };
   }, [printBlobUrl]);
-  const print = React15.useCallback(() => {
+  const print = React17.useCallback(() => {
     if (printFrameRef.current?.contentWindow) {
       printFrameRef.current.contentWindow.print();
     }
@@ -3404,6 +4139,53 @@ function usePdfPrint(file) {
   return { printFrameRef, printBlobUrl, preparePrint, print };
 }
 
+// src/components/pdf-viewer/hooks/useZoomControl.ts
+import * as React18 from "react";
+function useZoomControl({
+  containerRef,
+  initialZoom = PDF_ZOOM.DEFAULT
+}) {
+  const [zoom, setZoom] = React18.useState(initialZoom);
+  const scrollRatioRef = React18.useRef({ x: 0.5, y: 0 });
+  const handleZoomChange = React18.useCallback(
+    (newZoom) => {
+      const container = containerRef.current;
+      if (container) {
+        const {
+          scrollLeft,
+          scrollTop,
+          scrollWidth,
+          scrollHeight,
+          clientWidth,
+          clientHeight
+        } = container;
+        scrollRatioRef.current = {
+          x: scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) : 0.5,
+          y: scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0
+        };
+      }
+      setZoom(newZoom);
+    },
+    [containerRef]
+  );
+  React18.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    requestAnimationFrame(() => {
+      const { scrollWidth, scrollHeight, clientWidth, clientHeight } = container;
+      const maxScrollLeft = scrollWidth - clientWidth;
+      const maxScrollTop = scrollHeight - clientHeight;
+      if (maxScrollLeft > 0) {
+        container.scrollLeft = scrollRatioRef.current.x * maxScrollLeft;
+      }
+      if (maxScrollTop > 0) {
+        container.scrollTop = scrollRatioRef.current.y * maxScrollTop;
+      }
+    });
+  }, [zoom, containerRef]);
+  return { zoom, handleZoomChange };
+}
+
 // src/components/pdf-viewer/utils/pdfWorker.ts
 import { pdfjs } from "react-pdf";
 function initializePdfWorker(workerUrl) {
@@ -3411,8 +4193,9 @@ function initializePdfWorker(workerUrl) {
 }
 
 // src/components/pdf-viewer/index.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-var PdfViewer = React16.forwardRef(
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var DEFAULT_VIEWPORT_BUFFER = 1;
+var PdfViewer = React19.forwardRef(
   ({
     file,
     title,
@@ -3422,42 +4205,150 @@ var PdfViewer = React16.forwardRef(
     onLoadSuccess,
     onError,
     enableTextLayer = false,
+    showControls = true,
+    viewportBuffer = DEFAULT_VIEWPORT_BUFFER,
+    page: controlledPage,
+    onPageChange,
+    scrollBehavior = "instant",
+    viewMode = "continuous",
     className,
     ...props
   }, ref) => {
+    const [numPages, setNumPages] = React19.useState(0);
+    const [visiblePages, setVisiblePages] = React19.useState(
+      () => /* @__PURE__ */ new Set([1, 2, 3])
+    );
     const { containerWidth, containerRef } = useContainerWidth();
+    const { zoom, handleZoomChange } = useZoomControl({ containerRef });
     const { printFrameRef, printBlobUrl, preparePrint, print } = usePdfPrint(file);
     const download = usePdfDownload(file, title);
-    const effectiveWidth = pageWidth || containerWidth;
-    const handleLoadSuccess = React16.useCallback(
-      async (numPages) => {
-        onLoadSuccess?.(numPages);
+    const handleBeforeScroll = React19.useCallback(
+      (pageNum) => {
+        const bufferStart = Math.max(1, pageNum - viewportBuffer);
+        const bufferEnd = Math.min(numPages, pageNum + viewportBuffer);
+        setVisiblePages((prev) => {
+          const merged = new Set(prev);
+          for (let i = bufferStart; i <= bufferEnd; i++) {
+            merged.add(i);
+          }
+          return merged;
+        });
+      },
+      [numPages, viewportBuffer]
+    );
+    const {
+      currentPage,
+      registerPageRef,
+      handlePageChange,
+      updateCurrentPageFromScroll,
+      isProgrammaticScroll,
+      pageRefsMap
+    } = usePageNavigation({
+      containerRef,
+      numPages,
+      onBeforeScroll: handleBeforeScroll,
+      page: controlledPage,
+      onPageChange,
+      scrollBehavior
+    });
+    const baseWidth = Math.min(pageWidth || containerWidth, 800);
+    const effectiveWidth = Math.round(baseWidth * (zoom / 100));
+    const updateVisiblePages = React19.useCallback(() => {
+      if (isProgrammaticScroll.current) return;
+      const container = containerRef.current;
+      if (!container || numPages === 0) return;
+      const containerRect = container.getBoundingClientRect();
+      let firstVisiblePage = -1;
+      let lastVisiblePage = -1;
+      for (let pageNum = 1; pageNum <= numPages; pageNum++) {
+        const pageElement = pageRefsMap.current.get(pageNum);
+        if (!pageElement) continue;
+        const pageRect = pageElement.getBoundingClientRect();
+        if (pageRect.bottom > containerRect.top && pageRect.top < containerRect.bottom) {
+          if (firstVisiblePage === -1) firstVisiblePage = pageNum;
+          lastVisiblePage = pageNum;
+        }
+      }
+      if (firstVisiblePage !== -1) {
+        const bufferStart = Math.max(1, firstVisiblePage - viewportBuffer);
+        const bufferEnd = Math.min(numPages, lastVisiblePage + viewportBuffer);
+        const newVisiblePages = /* @__PURE__ */ new Set();
+        for (let i = bufferStart; i <= bufferEnd; i++) {
+          newVisiblePages.add(i);
+        }
+        setVisiblePages((prev) => {
+          if (prev.size !== newVisiblePages.size) return newVisiblePages;
+          for (const p of prev) {
+            if (!newVisiblePages.has(p)) return newVisiblePages;
+          }
+          return prev;
+        });
+      }
+    }, [
+      containerRef,
+      numPages,
+      viewportBuffer,
+      isProgrammaticScroll,
+      pageRefsMap
+    ]);
+    React19.useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      let rafId = null;
+      const handleScroll = () => {
+        if (rafId) return;
+        rafId = requestAnimationFrame(() => {
+          updateCurrentPageFromScroll();
+          updateVisiblePages();
+          rafId = null;
+        });
+      };
+      const handleScrollEnd = () => {
+        isProgrammaticScroll.current = false;
+      };
+      container.addEventListener("scroll", handleScroll, { passive: true });
+      container.addEventListener("scrollend", handleScrollEnd);
+      return () => {
+        container.removeEventListener("scroll", handleScroll);
+        container.removeEventListener("scrollend", handleScrollEnd);
+        if (rafId) cancelAnimationFrame(rafId);
+      };
+    }, [
+      updateCurrentPageFromScroll,
+      updateVisiblePages,
+      containerRef,
+      isProgrammaticScroll
+    ]);
+    const handleLoadSuccess = React19.useCallback(
+      async (pages) => {
+        setNumPages(pages);
+        onLoadSuccess?.(pages);
         await preparePrint();
       },
       [onLoadSuccess, preparePrint]
     );
-    const handleDownload = React16.useCallback(() => {
+    const handleDownload = React19.useCallback(() => {
       if (onDownload) {
         onDownload();
         return;
       }
       download();
     }, [onDownload, download]);
-    const handlePrint = React16.useCallback(() => {
+    const handlePrint = React19.useCallback(() => {
       if (onPrint) {
         onPrint();
         return;
       }
       print();
     }, [onPrint, print]);
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs14(
       "div",
       {
         ref,
         className: cn("h-full flex flex-col", className),
         ...props,
         children: [
-          printBlobUrl && /* @__PURE__ */ jsx17(
+          printBlobUrl && /* @__PURE__ */ jsx19(
             "iframe",
             {
               ref: printFrameRef,
@@ -3466,7 +4357,7 @@ var PdfViewer = React16.forwardRef(
               title: "PDF for printing"
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx19(
             PdfHeader,
             {
               title,
@@ -3474,23 +4365,35 @@ var PdfViewer = React16.forwardRef(
               onPrint: handlePrint
             }
           ),
-          /* @__PURE__ */ jsx17(
-            "div",
-            {
-              ref: containerRef,
-              className: "flex-1 overflow-y-auto overflow-x-hidden bg-neutral-300",
-              children: /* @__PURE__ */ jsx17(
-                PdfDocument,
-                {
-                  file,
-                  pageWidth: effectiveWidth,
-                  enableTextLayer,
-                  onLoadSuccess: handleLoadSuccess,
-                  onLoadError: onError
-                }
-              )
-            }
-          )
+          /* @__PURE__ */ jsxs14("div", { className: "flex-1 flex overflow-hidden min-h-0", children: [
+            /* @__PURE__ */ jsx19(CustomScrollbar, { containerRef, children: /* @__PURE__ */ jsx19(
+              PdfDocument,
+              {
+                file,
+                pageWidth: effectiveWidth,
+                enableTextLayer,
+                onLoadSuccess: handleLoadSuccess,
+                onLoadError: onError,
+                numPages,
+                registerPageRef,
+                visiblePages,
+                viewMode,
+                currentPage
+              }
+            ) }),
+            showControls && /* @__PURE__ */ jsx19(
+              PdfControls,
+              {
+                currentPage,
+                totalPages: numPages,
+                onPageChange: handlePageChange,
+                onPreviousPage: () => handlePageChange(currentPage - 1),
+                onNextPage: () => handlePageChange(currentPage + 1),
+                zoom,
+                onZoomChange: handleZoomChange
+              }
+            )
+          ] })
         ]
       }
     );
@@ -3499,9 +4402,9 @@ var PdfViewer = React16.forwardRef(
 PdfViewer.displayName = "PdfViewer";
 
 // src/components/ui/tabs.tsx
-import * as React17 from "react";
+import * as React20 from "react";
 import { cva as cva9 } from "class-variance-authority";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var tabsVariants = cva9(
   "inline-flex items-center justify-start whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10",
   {
@@ -3515,17 +4418,17 @@ var tabsVariants = cva9(
     }
   }
 );
-var TabsContext = React17.createContext(
+var TabsContext = React20.createContext(
   void 0
 );
 function useTabsContext() {
-  const context = React17.useContext(TabsContext);
+  const context = React20.useContext(TabsContext);
   if (!context) {
     throw new Error("Tabs components must be used within a Tabs provider");
   }
   return context;
 }
-var Tabs = React17.forwardRef((props, ref) => {
+var Tabs = React20.forwardRef((props, ref) => {
   const {
     className,
     value,
@@ -3534,7 +4437,7 @@ var Tabs = React17.forwardRef((props, ref) => {
     children,
     ...restProps
   } = props;
-  const contextValue = React17.useMemo(
+  const contextValue = React20.useMemo(
     () => ({
       activeTab: value,
       setActiveTab: onValueChange,
@@ -3542,13 +4445,13 @@ var Tabs = React17.forwardRef((props, ref) => {
     }),
     [value, onValueChange, variant]
   );
-  return /* @__PURE__ */ jsx18(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx18("div", { ref, className: cn("w-full", className), ...restProps, children }) });
+  return /* @__PURE__ */ jsx20(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx20("div", { ref, className: cn("w-full", className), ...restProps, children }) });
 });
 Tabs.displayName = "Tabs";
-var TabsList = React17.forwardRef(
+var TabsList = React20.forwardRef(
   (props, ref) => {
     const { className, children, ...restProps } = props;
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(
       "div",
       {
         ref,
@@ -3564,7 +4467,7 @@ TabsList.displayName = "TabsList";
 var getTabTypographyStyles = (isActive) => ({
   font: isActive ? "var(--typography-label-sm-bold)" : "var(--typography-label-sm-regular)"
 });
-var TabsTrigger = React17.forwardRef(
+var TabsTrigger = React20.forwardRef(
   (props, ref) => {
     const { className, value, disabled, style, children, ...restProps } = props;
     const { activeTab, setActiveTab, variant } = useTabsContext();
@@ -3572,22 +4475,22 @@ var TabsTrigger = React17.forwardRef(
       throw new Error("TabsTrigger must have a value prop");
     }
     const isActive = activeTab === value;
-    const tokenStyles = React17.useMemo(
+    const tokenStyles = React20.useMemo(
       () => ({
         ...getTabTypographyStyles(isActive),
         ...style
       }),
       [isActive, style]
     );
-    const triggerClassName = React17.useMemo(
+    const triggerClassName = React20.useMemo(
       () => cn(tabsVariants({ variant }), className),
       [variant, className]
     );
-    const handleClick = React17.useCallback(() => {
+    const handleClick = React20.useCallback(() => {
       if (disabled) return;
       setActiveTab(value);
     }, [disabled, setActiveTab, value]);
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(
       "button",
       {
         ref,
@@ -3601,13 +4504,13 @@ var TabsTrigger = React17.forwardRef(
         disabled,
         onClick: handleClick,
         ...restProps,
-        children: /* @__PURE__ */ jsx18("span", { className: "pl-3 pr-6 py-2", children })
+        children: /* @__PURE__ */ jsx20("span", { className: "pl-3 pr-6 py-2", children })
       }
     );
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React17.forwardRef(
+var TabsContent = React20.forwardRef(
   (props, ref) => {
     const { className, value, children, ...restProps } = props;
     const { activeTab } = useTabsContext();
@@ -3618,7 +4521,7 @@ var TabsContent = React17.forwardRef(
     if (!isActive) {
       return null;
     }
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(
       "div",
       {
         ref,
@@ -3636,11 +4539,11 @@ var TabsContent = React17.forwardRef(
 TabsContent.displayName = "TabsContent";
 
 // src/components/ui/dropdown-menu.tsx
-import * as React18 from "react";
+import * as React21 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = React18.forwardRef(({ className, icon, children, ...props }, ref) => /* @__PURE__ */ jsxs12(
+var DropdownMenuTrigger = React21.forwardRef(({ className, icon, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.Trigger,
   {
     ref,
@@ -3650,7 +4553,7 @@ var DropdownMenuTrigger = React18.forwardRef(({ className, icon, children, ...pr
     ),
     ...props,
     children: [
-      icon || /* @__PURE__ */ jsx19(MoreMenu, { className: "size-4" }),
+      icon || /* @__PURE__ */ jsx21(MoreMenu, { className: "size-4" }),
       children
     ]
   }
@@ -3660,7 +4563,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React18.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs12(
+var DropdownMenuSubTrigger = React21.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -3673,12 +4576,12 @@ var DropdownMenuSubTrigger = React18.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx19(ChevronRight, { className: "ml-auto" })
+      /* @__PURE__ */ jsx21(ChevronRight, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DropdownMenuSubContent = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -3690,7 +4593,7 @@ var DropdownMenuSubContent = React18.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React18.forwardRef(({ className, sideOffset = 4, align = "end", ...props }, ref) => /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx19(
+var DropdownMenuContent = React21.forwardRef(({ className, sideOffset = 4, align = "end", ...props }, ref) => /* @__PURE__ */ jsx21(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx21(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -3704,7 +4607,7 @@ var DropdownMenuContent = React18.forwardRef(({ className, sideOffset = 4, align
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React18.forwardRef(({ className, inset, style, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DropdownMenuItem = React21.forwardRef(({ className, inset, style, ...props }, ref) => /* @__PURE__ */ jsx21(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -3721,7 +4624,7 @@ var DropdownMenuItem = React18.forwardRef(({ className, inset, style, ...props }
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React18.forwardRef(({ className, children, style, checked, ...props }, ref) => /* @__PURE__ */ jsxs12(
+var DropdownMenuCheckboxItem = React21.forwardRef(({ className, children, style, checked, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -3736,7 +4639,7 @@ var DropdownMenuCheckboxItem = React18.forwardRef(({ className, children, style,
     },
     ...props,
     children: [
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx21(
         Checkbox,
         {
           checked: checked === true,
@@ -3744,12 +4647,12 @@ var DropdownMenuCheckboxItem = React18.forwardRef(({ className, children, style,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ jsx19("span", { className: "flex-1", children })
+      /* @__PURE__ */ jsx21("span", { className: "flex-1", children })
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React18.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ jsxs12(
+var DropdownMenuRadioItem = React21.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -3763,13 +4666,13 @@ var DropdownMenuRadioItem = React18.forwardRef(({ className, children, style, ..
     },
     ...props,
     children: [
-      /* @__PURE__ */ jsx19("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx19(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx19("span", { className: "h-2 w-2 rounded-full bg-current" }) }) }),
+      /* @__PURE__ */ jsx21("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx21(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx21("span", { className: "h-2 w-2 rounded-full bg-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React18.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DropdownMenuLabel = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -3782,7 +4685,7 @@ var DropdownMenuLabel = React18.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var DropdownMenuSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -3795,7 +4698,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest opacity-60", className),
@@ -3806,21 +4709,21 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/ui/charts/chart-legend.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function ChartLegend({
   items,
   x = 0,
   y = 550,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx20("foreignObject", { x, y, width: "100%", height: "40", children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22("foreignObject", { x, y, width: "100%", height: "40", children: /* @__PURE__ */ jsx22(
     "div",
     {
       className: `flex justify-center items-center gap-6 ${className}`,
       style: { height: "100%" },
-      children: items.map(({ key, color, label }) => /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx20("div", { className: "w-3 h-3", style: { backgroundColor: color } }),
-        /* @__PURE__ */ jsx20(Typography, { variant: "body-xs", children: label || key })
+      children: items.map(({ key, color, label }) => /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx22("div", { className: "w-3 h-3", style: { backgroundColor: color } }),
+        /* @__PURE__ */ jsx22(Typography, { variant: "body-xs", children: label || key })
       ] }, key))
     }
   ) });
@@ -3938,12 +4841,12 @@ var formatLargeNumber = (value) => {
 };
 
 // src/components/ui/charts/chart-labels.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var createCustomXAxisLabel = (text, yOffset = 40) => {
   const CustomXAxisLabel = ({ viewBox }) => {
     if (!viewBox) return null;
     const { x, y, width } = viewBox;
-    return /* @__PURE__ */ jsx21("g", { children: /* @__PURE__ */ jsx21("foreignObject", { x, y: y + yOffset, width, height: 20, children: /* @__PURE__ */ jsx21("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsx21(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+    return /* @__PURE__ */ jsx23("g", { children: /* @__PURE__ */ jsx23("foreignObject", { x, y: y + yOffset, width, height: 20, children: /* @__PURE__ */ jsx23("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ jsx23(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
   };
   CustomXAxisLabel.displayName = "CustomXAxisLabel";
   return CustomXAxisLabel;
@@ -3953,7 +4856,7 @@ var createCustomYAxisLabel = (text, leftMargin) => {
     if (!viewBox) return null;
     const { x, y, height } = viewBox;
     const offset = leftMargin ? leftMargin + 10 : 110;
-    return /* @__PURE__ */ jsx21("g", { children: /* @__PURE__ */ jsx21("foreignObject", { x: x - offset, y, width: 100, height, children: /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center h-full transform -rotate-90 whitespace-nowrap", children: /* @__PURE__ */ jsx21(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+    return /* @__PURE__ */ jsx23("g", { children: /* @__PURE__ */ jsx23("foreignObject", { x: x - offset, y, width: 100, height, children: /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-center h-full transform -rotate-90 whitespace-nowrap", children: /* @__PURE__ */ jsx23(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
   };
   CustomYAxisLabel.displayName = "CustomYAxisLabel";
   return CustomYAxisLabel;
@@ -3962,14 +4865,14 @@ var createCustomYAxisRightLabel = (text) => {
   const CustomYAxisRightLabel = ({ viewBox }) => {
     if (!viewBox) return null;
     const { x, y, width, height } = viewBox;
-    return /* @__PURE__ */ jsx21("g", { children: /* @__PURE__ */ jsx21("foreignObject", { x: x + width - 70, y, width: 120, height, children: /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center h-full transform rotate-90 whitespace-nowrap", children: /* @__PURE__ */ jsx21(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+    return /* @__PURE__ */ jsx23("g", { children: /* @__PURE__ */ jsx23("foreignObject", { x: x + width - 70, y, width: 120, height, children: /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-center h-full transform rotate-90 whitespace-nowrap", children: /* @__PURE__ */ jsx23(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
   };
   CustomYAxisRightLabel.displayName = "CustomYAxisRightLabel";
   return CustomYAxisRightLabel;
 };
 var customXAxisTick = (props) => {
   const { x, y, payload } = props;
-  return /* @__PURE__ */ jsx21("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx23(
     "foreignObject",
     {
       x: -20,
@@ -3977,12 +4880,12 @@ var customXAxisTick = (props) => {
       width: 40,
       height: 20,
       style: { overflow: "visible" },
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx23(
         "div",
         {
           className: "flex items-start justify-center h-full",
           style: { overflow: "visible" },
-          children: /* @__PURE__ */ jsx21(
+          children: /* @__PURE__ */ jsx23(
             Typography,
             {
               variant: "body-xs",
@@ -3997,7 +4900,7 @@ var customXAxisTick = (props) => {
 };
 var customXAxisTickRotated = (props) => {
   const { x, y, payload } = props;
-  return /* @__PURE__ */ jsx21("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx23(
     "text",
     {
       x: 0,
@@ -4016,25 +4919,25 @@ var customYAxisTick = (props) => {
   const { x, y, payload } = props;
   const text = String(payload.value);
   const estimatedWidth = Math.max(text.length * 8, 80);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     "foreignObject",
     {
       x: x - estimatedWidth + 5,
       y: y - 6,
       width: estimatedWidth,
       height: 15,
-      children: /* @__PURE__ */ jsx21("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ jsx21(Typography, { variant: "body-xs", className: "text-secondary", children: payload.value }) })
+      children: /* @__PURE__ */ jsx23("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ jsx23(Typography, { variant: "body-xs", className: "text-secondary", children: payload.value }) })
     }
   );
 };
 
 // src/components/ui/charts/chart-tooltip.tsx
-import { Fragment, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function TooltipContainer({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: `bg-light border border-subtle rounded p-2.5 text-dark ${className}`,
@@ -4048,10 +4951,10 @@ function TooltipItem({
   value,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs14(Fragment, { children: [
-    /* @__PURE__ */ jsx22("br", {}),
-    /* @__PURE__ */ jsxs14(Typography, { variant: "label-sm", className, children: [
-      /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs17(Fragment2, { children: [
+    /* @__PURE__ */ jsx24("br", {}),
+    /* @__PURE__ */ jsxs17(Typography, { variant: "label-sm", className, children: [
+      /* @__PURE__ */ jsx24(
         "span",
         {
           className: "inline-block w-3 h-3 mr-1.5",
@@ -4069,9 +4972,9 @@ function GenericTooltip({
   items,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs14(TooltipContainer, { className, children: [
-    title && /* @__PURE__ */ jsx22(Typography, { variant: "label-sm-bold", children: title }),
-    items.map((item, index) => /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs17(TooltipContainer, { className, children: [
+    title && /* @__PURE__ */ jsx24(Typography, { variant: "label-sm-bold", children: title }),
+    items.map((item, index) => /* @__PURE__ */ jsx24(
       TooltipItem,
       {
         color: item.color,
@@ -4093,7 +4996,7 @@ import {
   Tooltip as Tooltip2,
   ResponsiveContainer
 } from "recharts";
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var BarChart = forwardRef15(
   ({
     data,
@@ -4120,19 +5023,19 @@ var BarChart = forwardRef15(
     };
     const defaultLegendItems = showLegend && legendItems.length === 0 ? [{ key: yAxisKey, color: barColor, label: yAxisKey }] : legendItems;
     const hasData = data && data.length > 0;
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs18(
       "div",
       {
         ref,
         className: `bg-light border border-subtle mx-6 ${className}`,
         children: [
-          /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx23(Typography, { variant: "label-sm-bold", children: title }) }),
-          /* @__PURE__ */ jsx23("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx25(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ jsx25("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx25(
             ResponsiveContainer,
             {
               width: "100%",
               height: CHART_CONSTANTS.STANDARD_HEIGHT,
-              children: /* @__PURE__ */ jsxs15(
+              children: /* @__PURE__ */ jsxs18(
                 RechartsBarChart,
                 {
                   data,
@@ -4144,7 +5047,7 @@ var BarChart = forwardRef15(
                   onClick: handleClick,
                   layout,
                   children: [
-                    /* @__PURE__ */ jsx23(
+                    /* @__PURE__ */ jsx25(
                       XAxis,
                       {
                         dataKey: xAxisKey,
@@ -4158,7 +5061,7 @@ var BarChart = forwardRef15(
                         label: xAxisLabel ? createCustomXAxisLabel(xAxisLabel, 80) : void 0
                       }
                     ),
-                    /* @__PURE__ */ jsx23(
+                    /* @__PURE__ */ jsx25(
                       YAxis,
                       {
                         axisLine: false,
@@ -4169,7 +5072,7 @@ var BarChart = forwardRef15(
                         type: yAxisType
                       }
                     ),
-                    /* @__PURE__ */ jsx23(
+                    /* @__PURE__ */ jsx25(
                       Tooltip2,
                       {
                         content: ({
@@ -4178,7 +5081,7 @@ var BarChart = forwardRef15(
                           label
                         }) => {
                           if (active && payload && payload.length) {
-                            return /* @__PURE__ */ jsx23(
+                            return /* @__PURE__ */ jsx25(
                               GenericTooltip,
                               {
                                 title: label?.toString(),
@@ -4194,7 +5097,7 @@ var BarChart = forwardRef15(
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx23(
+                    /* @__PURE__ */ jsx25(
                       Bar,
                       {
                         dataKey: barDataKey || yAxisKey,
@@ -4202,12 +5105,12 @@ var BarChart = forwardRef15(
                         name: barDataKey || yAxisKey
                       }
                     ),
-                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx23(ChartLegend, { items: defaultLegendItems })
+                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx25(ChartLegend, { items: defaultLegendItems })
                   ]
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx23(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+          ) : /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx25(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
         ]
       }
     );
@@ -4225,7 +5128,7 @@ import {
   Tooltip as Tooltip3,
   ResponsiveContainer as ResponsiveContainer2
 } from "recharts";
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var LineChart = forwardRef16(
   ({
     data,
@@ -4254,19 +5157,19 @@ var LineChart = forwardRef16(
       )
     );
     const hasData = data && data.length > 0;
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         ref,
         className: `bg-light border border-subtle mx-6 ${className}`,
         children: [
-          /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx24(Typography, { variant: "label-sm-bold", children: title }) }),
-          /* @__PURE__ */ jsx24("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx26(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ jsx26("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx26(
             ResponsiveContainer2,
             {
               width: "100%",
               height: CHART_CONSTANTS.STANDARD_HEIGHT,
-              children: /* @__PURE__ */ jsxs16(
+              children: /* @__PURE__ */ jsxs19(
                 RechartsLineChart,
                 {
                   data,
@@ -4277,7 +5180,7 @@ var LineChart = forwardRef16(
                   },
                   onClick: handleClick,
                   children: [
-                    /* @__PURE__ */ jsx24(
+                    /* @__PURE__ */ jsx26(
                       XAxis2,
                       {
                         dataKey: xAxisKey,
@@ -4289,7 +5192,7 @@ var LineChart = forwardRef16(
                         label: xAxisLabel ? createCustomXAxisLabel(xAxisLabel) : void 0
                       }
                     ),
-                    /* @__PURE__ */ jsx24(
+                    /* @__PURE__ */ jsx26(
                       YAxis2,
                       {
                         axisLine: false,
@@ -4298,7 +5201,7 @@ var LineChart = forwardRef16(
                         label: yAxisLabel ? createCustomYAxisLabel(yAxisLabel, 40) : void 0
                       }
                     ),
-                    /* @__PURE__ */ jsx24(
+                    /* @__PURE__ */ jsx26(
                       Tooltip3,
                       {
                         content: ({
@@ -4307,7 +5210,7 @@ var LineChart = forwardRef16(
                           label
                         }) => {
                           if (active && payload && payload.length) {
-                            return /* @__PURE__ */ jsx24(
+                            return /* @__PURE__ */ jsx26(
                               GenericTooltip,
                               {
                                 title: label?.toString(),
@@ -4323,7 +5226,7 @@ var LineChart = forwardRef16(
                         }
                       }
                     ),
-                    series.map((s, index) => /* @__PURE__ */ jsx24(
+                    series.map((s, index) => /* @__PURE__ */ jsx26(
                       Line,
                       {
                         type: "monotone",
@@ -4335,12 +5238,12 @@ var LineChart = forwardRef16(
                       },
                       s.dataKey
                     )),
-                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx24(ChartLegend, { items: defaultLegendItems })
+                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx26(ChartLegend, { items: defaultLegendItems })
                   ]
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx24(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+          ) : /* @__PURE__ */ jsx26("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx26(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
         ]
       }
     );
@@ -4351,7 +5254,7 @@ LineChart.displayName = "LineChart";
 // src/components/ui/charts/pie-chart.tsx
 import { forwardRef as forwardRef17 } from "react";
 import { PieChart as RechartsPieChart, Pie, Cell, Tooltip as Tooltip4 } from "recharts";
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 var PieChart = forwardRef17(
   ({
     data,
@@ -4379,20 +5282,20 @@ var PieChart = forwardRef17(
       )
     );
     const hasData = data && data.length > 0;
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs20(
       "div",
       {
         ref,
         className: `bg-light border border-subtle mx-6 ${className}`,
         children: [
-          /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx25(Typography, { variant: "label-sm-bold", children: title }) }),
-          /* @__PURE__ */ jsx25("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx25("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs17(
+          /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ jsx27(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ jsx27("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ jsx27("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs20(
             RechartsPieChart,
             {
               width: 600,
               height: CHART_CONSTANTS.LARGE_HEIGHT,
               children: [
-                /* @__PURE__ */ jsx25(
+                /* @__PURE__ */ jsx27(
                   Pie,
                   {
                     data,
@@ -4404,7 +5307,7 @@ var PieChart = forwardRef17(
                     label: showLabels,
                     labelLine: false,
                     onClick: handleClick,
-                    children: data.map((entry, index) => /* @__PURE__ */ jsx25(
+                    children: data.map((entry, index) => /* @__PURE__ */ jsx27(
                       Cell,
                       {
                         fill: entry.color || getSeriesColor(index)
@@ -4413,7 +5316,7 @@ var PieChart = forwardRef17(
                     ))
                   }
                 ),
-                /* @__PURE__ */ jsx25(
+                /* @__PURE__ */ jsx27(
                   Tooltip4,
                   {
                     content: ({
@@ -4422,7 +5325,7 @@ var PieChart = forwardRef17(
                     }) => {
                       if (active && payload && payload.length && payload[0]) {
                         const data2 = payload[0].payload;
-                        return /* @__PURE__ */ jsx25(
+                        return /* @__PURE__ */ jsx27(
                           GenericTooltip,
                           {
                             title: data2.name,
@@ -4440,10 +5343,10 @@ var PieChart = forwardRef17(
                     }
                   }
                 ),
-                showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx25(ChartLegend, { items: defaultLegendItems, y: 400 })
+                showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ jsx27(ChartLegend, { items: defaultLegendItems, y: 400 })
               ]
             }
-          ) }) : /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx25(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+          ) }) : /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ jsx27(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
         ]
       }
     );
@@ -4452,11 +5355,11 @@ var PieChart = forwardRef17(
 PieChart.displayName = "PieChart";
 
 // src/components/ui/table.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback9 } from "react";
 import {
   flexRender
 } from "@tanstack/react-table";
-import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function Table({
   table,
   className,
@@ -4468,33 +5371,33 @@ function Table({
   const totalPages = table.getPageCount();
   const totalRows = table.getFilteredRowModel().rows.length;
   const showingText = totalRows > 0 ? "Showing " + (currentPage * pageSize + 1) + "-" + Math.min((currentPage + 1) * pageSize, totalRows) + " of " + totalRows + " results" : "No results found";
-  const handlePreviousPage = useCallback6(() => {
+  const handlePreviousPage = useCallback9(() => {
     table.previousPage();
   }, [table]);
-  const handleNextPage = useCallback6(() => {
+  const handleNextPage = useCallback9(() => {
     table.nextPage();
   }, [table]);
-  const handlePageChange = useCallback6(
+  const handlePageChange = useCallback9(
     (pageIndex) => {
       table.setPageIndex(pageIndex);
     },
     [table]
   );
-  const handlePageSizeChange = useCallback6(
+  const handlePageSizeChange = useCallback9(
     (value) => {
       table.setPageSize(Number(value));
     },
     [table]
   );
-  return /* @__PURE__ */ jsxs18("div", { children: [
-    /* @__PURE__ */ jsx26("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ jsxs18("table", { className: "min-w-full divide-y divide-border", children: [
-      /* @__PURE__ */ jsx26("thead", { className: "bg-dark text-light", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx26("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx26("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs21("div", { children: [
+    /* @__PURE__ */ jsx28("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ jsxs21("table", { className: "min-w-full divide-y divide-border", children: [
+      /* @__PURE__ */ jsx28("thead", { className: "bg-dark text-light", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx28("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx28("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ jsxs21(
         "div",
         {
           className: `flex items-center space-x-1 ${header.column.getCanSort() ? "cursor-pointer select-none" : ""}`,
           onClick: header.column.getToggleSortingHandler(),
           children: [
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx28(
               Typography,
               {
                 variant: "label-xs",
@@ -4505,19 +5408,19 @@ function Table({
                 )
               }
             ),
-            header.column.getCanSort() && /* @__PURE__ */ jsxs18("span", { className: "ml-1", children: [
-              header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx26(ChevronUp, { className: "w-4 h-4 text-light" }),
-              header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx26(ChevronDown, { className: "w-4 h-4 text-light" })
+            header.column.getCanSort() && /* @__PURE__ */ jsxs21("span", { className: "ml-1", children: [
+              header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx28(ChevronUp, { className: "w-4 h-4 text-light" }),
+              header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx28(ChevronDown, { className: "w-4 h-4 text-light" })
             ] })
           ]
         }
       ) }, header.id)) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx26("tbody", { className: "bg-light divide-y divide-border", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx26("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx26("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx26(Typography, { variant: "body-sm", children: flexRender(
+      /* @__PURE__ */ jsx28("tbody", { className: "bg-light divide-y divide-border", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx28("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx28("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx28(Typography, { variant: "body-sm", children: flexRender(
         cell.column.columnDef.cell,
         cell.getContext()
       ) }) }, cell.id)) }, row.id)) })
     ] }) }),
-    showPagination && /* @__PURE__ */ jsxs18(
+    showPagination && /* @__PURE__ */ jsxs21(
       "div",
       {
         className: cn(
@@ -4525,9 +5428,9 @@ function Table({
           paginationClassName
         ),
         children: [
-          /* @__PURE__ */ jsx26("div", { className: "flex items-center", children: /* @__PURE__ */ jsx26(Typography, { variant: "body-sm", className: "text-secondary", children: showingText }) }),
-          /* @__PURE__ */ jsxs18("div", { className: "flex items-center space-x-1", children: [
-            /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx28("div", { className: "flex items-center", children: /* @__PURE__ */ jsx28(Typography, { variant: "body-sm", className: "text-secondary", children: showingText }) }),
+          /* @__PURE__ */ jsxs21("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ jsx28(
               Button,
               {
                 variant: "ghost",
@@ -4535,7 +5438,7 @@ function Table({
                 onClick: handlePreviousPage,
                 disabled: !table.getCanPreviousPage(),
                 className: "p-2",
-                children: /* @__PURE__ */ jsx26(ChevronLeft, { className: "w-4 h-4" })
+                children: /* @__PURE__ */ jsx28(ChevronLeft, { className: "w-4 h-4" })
               }
             ),
             Array.from(
@@ -4552,7 +5455,7 @@ function Table({
                   pageNumber = currentPage - 2 + i;
                 }
                 const isActive = pageNumber === currentPage;
-                return /* @__PURE__ */ jsx26(
+                return /* @__PURE__ */ jsx28(
                   Button,
                   {
                     variant: isActive ? "default" : "ghost",
@@ -4565,11 +5468,11 @@ function Table({
                 );
               }
             ),
-            table.getPageCount() > 5 && currentPage < totalPages - 3 && /* @__PURE__ */ jsxs18(Fragment2, { children: [
-              /* @__PURE__ */ jsx26("span", { className: "px-1 text-secondary", children: "..." }),
-              /* @__PURE__ */ jsx26(Typography, { variant: "body-sm", className: "text-secondary", children: totalPages })
+            table.getPageCount() > 5 && currentPage < totalPages - 3 && /* @__PURE__ */ jsxs21(Fragment3, { children: [
+              /* @__PURE__ */ jsx28("span", { className: "px-1 text-secondary", children: "..." }),
+              /* @__PURE__ */ jsx28(Typography, { variant: "body-sm", className: "text-secondary", children: totalPages })
             ] }),
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx28(
               Button,
               {
                 variant: "ghost",
@@ -4577,12 +5480,12 @@ function Table({
                 onClick: handleNextPage,
                 disabled: !table.getCanNextPage(),
                 className: "p-2",
-                children: /* @__PURE__ */ jsx26(ChevronRight, { className: "w-4 h-4" })
+                children: /* @__PURE__ */ jsx28(ChevronRight, { className: "w-4 h-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3 w-48", children: [
-            /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 w-48", children: [
+            /* @__PURE__ */ jsx28(
               Typography,
               {
                 variant: "body-sm",
@@ -4590,14 +5493,14 @@ function Table({
                 children: "Rows per page:"
               }
             ),
-            /* @__PURE__ */ jsxs18(
+            /* @__PURE__ */ jsxs21(
               Select,
               {
                 value: table.getState().pagination.pageSize.toString(),
                 onValueChange: handlePageSizeChange,
                 children: [
-                  /* @__PURE__ */ jsx26(SelectTrigger, { className: "min-w-0 h-8", children: /* @__PURE__ */ jsx26(SelectValue, {}) }),
-                  /* @__PURE__ */ jsx26(SelectContent, { children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ jsx26(SelectItem, { value: size.toString(), children: size }, size)) })
+                  /* @__PURE__ */ jsx28(SelectTrigger, { className: "min-w-0 h-8", children: /* @__PURE__ */ jsx28(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx28(SelectContent, { children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ jsx28(SelectItem, { value: size.toString(), children: size }, size)) })
                 ]
               }
             )