primus-react-ui 1.0.10 → 1.0.14

package/dist/index.js

@@ -33,8 +33,13 @@ __export(index_exports, {
   AICopilot: () => AICopilot,
   AccountDashboard: () => AccountDashboard,
   AgentDirectory: () => AgentDirectory,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
   CheckoutForm: () => CheckoutForm,
   ClaimStatusTracker: () => ClaimStatusTracker,
+  Container: () => Container,
   CreditCardVisual: () => CreditCardVisual,
   CreditScoreCard: () => CreditScoreCard,
   DashboardGrid: () => DashboardGrid,
@@ -42,29 +47,64 @@ __export(index_exports, {
   FeatureFlagToggle: () => FeatureFlagToggle,
   FileUploader: () => FileUploader,
   FraudDetectionDashboard: () => FraudDetectionDashboard,
+  Grid: () => Grid,
+  Input: () => Input,
   KYCVerification: () => KYCVerification,
   LoanCalculator: () => LoanCalculator,
   LogViewer: () => LogViewer,
   LoginPage: () => LoginPage,
+  Modal: () => Modal,
   NotificationBell: () => NotificationBell,
-  NotificationFeed: () => NotificationFeed,
+  NotificationFeed: () => PrimusNotificationFeed,
   PolicyCard: () => PolicyCard,
   PremiumCalculator: () => PremiumCalculator,
+  PrimusActivityFeed: () => PrimusActivityFeed,
+  PrimusAreaChart: () => PrimusAreaChart,
+  PrimusBadge: () => Badge,
+  PrimusBarChart: () => PrimusBarChart,
+  PrimusButton: () => Button,
+  PrimusCard: () => Card,
+  PrimusChartBase: () => PrimusChartBase,
+  PrimusCheckbox: () => Checkbox,
+  PrimusContainer: () => Container,
   PrimusDashboard: () => PrimusDashboard,
   PrimusDataTable: () => PrimusDataTable,
+  PrimusDateRangePicker: () => PrimusDateRangePicker,
+  PrimusExportMenu: () => PrimusExportMenu,
+  PrimusFilterBar: () => PrimusFilterBar,
+  PrimusGrid: () => Grid,
   PrimusHeader: () => PrimusHeader,
+  PrimusInput: () => Input,
   PrimusLayout: () => PrimusLayout,
+  PrimusLineChart: () => PrimusLineChart,
   PrimusLogin: () => PrimusLogin,
   PrimusModal: () => PrimusModal,
+  PrimusModalComponent: () => Modal,
   PrimusNotificationCenter: () => PrimusNotificationCenter,
+  PrimusNotificationFeed: () => PrimusNotificationFeed,
   PrimusNotifications: () => PrimusNotifications,
+  PrimusPieChart: () => PrimusPieChart,
   PrimusProvider: () => PrimusProvider,
+  PrimusRadioGroup: () => RadioGroup,
+  PrimusSearch: () => PrimusSearch,
+  PrimusSelect: () => Select,
   PrimusSidebar: () => PrimusSidebar,
+  PrimusSparkline: () => PrimusSparkline,
+  PrimusStack: () => Stack,
   PrimusStatCard: () => PrimusStatCard,
+  PrimusTable: () => Table,
+  PrimusTextarea: () => Textarea,
   PrimusThemeProvider: () => PrimusThemeProvider,
   PrimusThemeToggle: () => PrimusThemeToggle,
+  PrimusToggle: () => Toggle,
   QuoteComparison: () => QuoteComparison,
+  RadioGroup: () => RadioGroup,
   SecurityDashboard: () => SecurityDashboard,
+  Select: () => Select,
+  Stack: () => Stack,
+  Table: () => Table,
+  Textarea: () => Textarea,
+  Toggle: () => Toggle,
   TransactionHistory: () => TransactionHistory,
   UserProfile: () => UserProfile,
   themeColors: () => themeColors,
@@ -1191,75 +1231,191 @@ var usePrimusAuth = () => {
 
 // src/components/shared/Button.tsx
 var import_react15 = __toESM(require("react"));
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
 var Button = import_react15.default.forwardRef(
-  ({ className, variant = "primary", size = "md", ...props }, ref) => {
+  ({ style, variant = "primary", size = "md", color = "sapphire", disabled, ...props }, ref) => {
+    const [isHovered, setIsHovered] = import_react15.default.useState(false);
+    const colorStyles = {
+      sapphire: {
+        solid: "#1341a7",
+        // Updated to user spec
+        text: "#ffffff",
+        hover: "rgba(19, 65, 167, 0.9)",
+        subtle: "rgba(19, 65, 167, 0.12)"
+      },
+      emerald: {
+        solid: "#418872",
+        // Updated to user spec
+        text: "#ffffff",
+        hover: "rgba(65, 136, 114, 0.9)",
+        subtle: "rgba(65, 136, 114, 0.12)"
+      },
+      ruby: {
+        solid: "#ac0f0f",
+        // Updated to user spec
+        text: "#ffffff",
+        hover: "rgba(172, 15, 15, 0.9)",
+        subtle: "rgba(172, 15, 15, 0.12)"
+      }
+    };
+    const selectedColor = colorStyles[color];
+    const baseStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      whiteSpace: "nowrap",
+      borderRadius: "0.5rem",
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      fontWeight: "600",
+      transition: "all 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      pointerEvents: disabled ? "none" : "auto",
+      outline: "none",
+      border: "none",
+      boxShadow: isHovered && !disabled ? "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" : "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      transform: isHovered && !disabled ? "translateY(-1px)" : "none"
+    };
+    const variantStyles = {
+      primary: {
+        normal: {
+          backgroundColor: selectedColor.solid,
+          color: selectedColor.text
+        },
+        hover: {
+          backgroundColor: selectedColor.hover
+        }
+      },
+      secondary: {
+        normal: {
+          backgroundColor: "#f3f4f6",
+          color: "#111827"
+        },
+        hover: {
+          backgroundColor: "rgba(243, 244, 246, 0.8)"
+        }
+      },
+      outline: {
+        normal: {
+          backgroundColor: "#ffffff",
+          color: selectedColor.solid,
+          border: `1px solid ${selectedColor.solid}`
+        },
+        hover: {
+          backgroundColor: selectedColor.subtle
+        }
+      },
+      ghost: {
+        normal: {
+          backgroundColor: "transparent",
+          color: selectedColor.solid
+        },
+        hover: {
+          backgroundColor: selectedColor.subtle
+        }
+      }
+    };
+    const sizeStyles = {
+      sm: { height: "2.25rem", padding: "0 0.75rem" },
+      md: { height: "2.5rem", padding: "0.5rem 1rem" },
+      lg: { height: "2.75rem", padding: "0 2rem" }
+    };
+    const currentVariant = variantStyles[variant];
+    const combinedStyles = {
+      ...baseStyles,
+      ...currentVariant.normal,
+      ...isHovered && !disabled ? currentVariant.hover : {},
+      ...sizeStyles[size],
+      ...style
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         ref,
-        className: cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-          {
-            "bg-gray-900 text-gray-50 hover:bg-gray-900/90": variant === "primary",
-            "bg-gray-100 text-gray-900 hover:bg-gray-100/80": variant === "secondary",
-            "border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900": variant === "outline",
-            "hover:bg-gray-100 hover:text-gray-900": variant === "ghost",
-            "h-9 px-3": size === "sm",
-            "h-10 px-4 py-2": size === "md",
-            "h-11 px-8": size === "lg"
-          },
-          className
-        ),
+        style: combinedStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        disabled,
         ...props
       }
     );
   }
 );
+Button.displayName = "Button";
 
 // src/components/auth/UserProfile.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var UserProfile = () => {
-  const { user, logout, isAuthenticated } = usePrimusAuth();
-  if (!isAuthenticated || !user) {
+var UserProfile = ({
+  user: userOverride,
+  showLogout = true,
+  onLogout
+}) => {
+  const { user: contextUser, logout, isAuthenticated } = usePrimusAuth();
+  const resolvedUser = userOverride ?? (isAuthenticated ? contextUser : null);
+  if (!resolvedUser) {
     return null;
   }
+  const handleLogout = async () => {
+    if (onLogout) {
+      onLogout();
+      return;
+    }
+    await logout();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-4 p-4 rounded-lg bg-gray-50 border border-gray-200", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "h-10 w-10 rounded-full bg-primus-100 flex items-center justify-center text-primus-600 font-bold", children: user.name?.charAt(0) || "U" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "h-10 w-10 rounded-full bg-primus-100 flex items-center justify-center text-primus-600 font-bold", children: resolvedUser.name?.charAt(0) || "U" }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm font-medium text-gray-900", children: user.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-gray-500", children: user.email })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm font-medium text-gray-900", children: resolvedUser.name }),
+      resolvedUser.email && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-gray-500", children: resolvedUser.email })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "outline", size: "sm", onClick: () => logout(), children: "Sign out" })
+    showLogout && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "outline", size: "sm", onClick: handleLogout, children: "Sign out" })
   ] });
 };
 
 // src/hooks/useNotifications.ts
 var import_react16 = require("react");
-var useNotifications = (apiUrl = "http://localhost:5221") => {
+var useNotifications = ({
+  apiUrl = "http://localhost:5221",
+  useMock = false,
+  mockData = []
+} = {}) => {
   const [notifications, setNotifications] = (0, import_react16.useState)([]);
   const [unreadCount, setUnreadCount] = (0, import_react16.useState)(0);
   const [loading, setLoading] = (0, import_react16.useState)(true);
+  const safeMockData = (0, import_react16.useMemo)(() => mockData || [], [JSON.stringify(mockData)]);
+  const DEFAULT_MOCK_DATA = [
+    { id: "1", title: "Welcome", message: "Welcome to Primus UI", type: "info", timestamp: (/* @__PURE__ */ new Date()).toISOString(), read: false },
+    { id: "2", title: "System Update", message: "Maintenance scheduled", type: "warning", timestamp: (/* @__PURE__ */ new Date()).toISOString(), read: false },
+    { id: "3", title: "Payment Success", message: "Your payment was processed", type: "success", timestamp: (/* @__PURE__ */ new Date()).toISOString(), read: false }
+  ];
   (0, import_react16.useEffect)(() => {
+    if (useMock) {
+      const data = safeMockData.length > 0 ? safeMockData : DEFAULT_MOCK_DATA;
+      setNotifications(data);
+      setUnreadCount(data.filter((n) => !n.read).length);
+      setLoading(false);
+      return;
+    }
     fetchNotifications();
-    const interval = setInterval(fetchNotifications, 3e3);
+    const interval = setInterval(fetchNotifications, 1e4);
     return () => clearInterval(interval);
-  }, []);
+  }, [useMock, safeMockData]);
   const fetchNotifications = async () => {
+    if (useMock) return;
     try {
       const response = await fetch(`${apiUrl}/notifications`);
       if (response.ok) {
         const data = await response.json();
         setNotifications(data);
         setUnreadCount(data.filter((n) => !n.read).length);
+      } else {
+        throw new Error("API unavailable");
       }
     } catch (error) {
-      console.error("Failed to fetch notifications:", error);
+      console.warn("Failed to fetch notifications, using mock data:", error);
+      setNotifications((prev) => prev.length === 0 ? DEFAULT_MOCK_DATA : prev);
+      setUnreadCount((prev) => notifications.length === 0 ? DEFAULT_MOCK_DATA.filter((n) => !n.read).length : prev);
     } finally {
       setLoading(false);
     }
@@ -1286,7 +1442,7 @@ var useNotifications = (apiUrl = "http://localhost:5221") => {
 var import_outline = require("@heroicons/react/24/outline");
 var import_react17 = require("@headlessui/react");
 var import_react18 = require("react");
-var import_clsx2 = require("clsx");
+var import_clsx = require("clsx");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var NotificationIcon = ({ type }) => {
   switch (type) {
@@ -1300,10 +1456,10 @@ var NotificationIcon = ({ type }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_outline.InformationCircleIcon, { className: "h-6 w-6 text-blue-500" });
   }
 };
-var NotificationFeed = () => {
-  const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react17.Popover, { className: "relative", children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react17.Popover.Button, { className: (0, import_clsx2.clsx)(
+var PrimusNotificationFeed = ({ useMock, mockData, apiUrl, className }) => {
+  const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications({ useMock, mockData, apiUrl });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react17.Popover, { className: (0, import_clsx.clsx)("relative", className), children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react17.Popover.Button, { className: (0, import_clsx.clsx)(
       "relative p-2 rounded-full hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primus-500",
       open && "bg-gray-100"
     ), children: [
@@ -1335,7 +1491,7 @@ var NotificationFeed = () => {
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "max-h-96 overflow-y-auto", children: notifications.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "px-4 py-6 text-center text-sm text-gray-500", children: "No new notifications" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "divide-y divide-gray-100", children: notifications.map((notification) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             "div",
             {
-              className: (0, import_clsx2.clsx)(
+              className: (0, import_clsx.clsx)(
                 "flex gap-3 px-4 py-4 hover:bg-gray-50 transition-colors cursor-pointer",
                 !notification.read && "bg-blue-50/50"
               ),
@@ -1364,7 +1520,13 @@ var import_react19 = require("react");
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var API_URL = "http://localhost:5222";
-function PrimusNotificationCenter({ theme: themeOverride, apiUrl = API_URL }) {
+function PrimusNotificationCenter({
+  theme: themeOverride,
+  apiUrl = API_URL,
+  pollInterval = 3e3,
+  useMock = false,
+  mockData
+}) {
   const themeContext = usePrimusTheme();
   const theme = themeOverride || themeContext.theme;
   const t = themeColors[theme];
@@ -1388,13 +1550,37 @@ function PrimusNotificationCenter({ theme: themeOverride, apiUrl = API_URL }) {
     }
   }, [apiUrl]);
   (0, import_react19.useEffect)(() => {
+    if (useMock || mockData) {
+      const next = mockData ?? [];
+      setNotifications(next);
+      setUnreadCount(next.filter((n) => !n.read).length);
+      return;
+    }
     fetchNotifications();
-    const interval = setInterval(fetchNotifications, 3e3);
+    const interval = setInterval(fetchNotifications, pollInterval);
     return () => clearInterval(interval);
-  }, [fetchNotifications]);
+  }, [fetchNotifications, pollInterval, useMock, mockData]);
   const sendNotification = async () => {
     if (!newTitle.trim() || !newMessage.trim()) return;
     setSending(true);
+    if (useMock || mockData) {
+      const next = {
+        id: `mock-${Date.now()}`,
+        title: newTitle,
+        message: newMessage,
+        type: newType,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        read: false
+      };
+      setNotifications((prev) => [next, ...prev]);
+      setUnreadCount((prev) => prev + 1);
+      setNewTitle("");
+      setNewMessage("");
+      setNewType("info");
+      setShowSendForm(false);
+      setSending(false);
+      return;
+    }
     try {
       const response = await fetch(`${apiUrl}/api/notifications`, {
         method: "POST",
@@ -1414,8 +1600,13 @@ function PrimusNotificationCenter({ theme: themeOverride, apiUrl = API_URL }) {
     setSending(false);
   };
   const markAsRead = async (id) => {
+    if (useMock || mockData) {
+      setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
+      setUnreadCount((prev) => Math.max(0, prev - 1));
+      return;
+    }
     try {
-      await fetch(`${apiUrl}/api/notifications/${id}/read`, { method: "PUT" });
+      await fetch(`${apiUrl}/api/notifications/${id}/read`, { method: "POST" });
       setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
       setUnreadCount((prev) => Math.max(0, prev - 1));
     } catch {
@@ -1655,35 +1846,84 @@ var import_react22 = require("react");
 
 // src/components/shared/Input.tsx
 var import_react21 = __toESM(require("react"));
-var import_clsx3 = require("clsx");
-var import_tailwind_merge2 = require("tailwind-merge");
+var import_clsx2 = require("clsx");
+var import_solid = require("@heroicons/react/20/solid");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-function cn2(...inputs) {
-  return (0, import_tailwind_merge2.twMerge)((0, import_clsx3.clsx)(inputs));
-}
+var sizeClasses = {
+  sm: "h-8 text-xs",
+  md: "h-10 text-sm",
+  lg: "h-12 text-base"
+};
+var iconSizeClasses = {
+  sm: "w-4 h-4 [&>*]:w-full [&>*]:h-full",
+  md: "w-5 h-5 [&>*]:w-full [&>*]:h-full",
+  lg: "w-6 h-6 [&>*]:w-full [&>*]:h-full"
+};
 var Input = import_react21.default.forwardRef(
-  ({ className, label, error, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "w-full", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block text-gray-700", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "input",
-        {
-          ref,
-          className: cn2(
-            "flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-            error && "border-red-500 focus-visible:ring-red-500",
-            className
-          ),
-          ...props
-        }
-      ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-red-500 mt-1", children: error })
+  ({ className, style, label, error, disabled, startIcon, endIcon, onClear, value, onChange, size = "md", loading = false, ...props }, ref) => {
+    const hasValue = value !== void 0 && value !== "" && value !== null;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx2.clsx)("w-full", className), style, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", { className: (0, import_clsx2.clsx)(
+        "block font-medium mb-1.5",
+        size === "sm" ? "text-xs" : "text-sm",
+        disabled ? "text-gray-400 opacity-70" : "text-gray-700"
+      ), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx2.clsx)(
+        "relative flex items-center w-full rounded-lg transition-all duration-200 ease-in-out bg-white overflow-hidden",
+        "border",
+        error ? "border-red-500 hover:border-red-600 focus-within:ring-2 focus-within:ring-red-500/20 focus-within:border-red-500" : "border-gray-200 hover:border-gray-300 focus-within:ring-2 focus-within:ring-primus-500/20 focus-within:border-primus-500",
+        disabled && "bg-gray-50 opacity-60 cursor-not-allowed"
+      ), children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx2.clsx)(
+          "flex-shrink-0 pl-3 pr-2 text-gray-400 select-none pointer-events-none flex items-center justify-center",
+          iconSizeClasses[size]
+        ), children: startIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "input",
+          {
+            ref,
+            disabled,
+            value,
+            onChange,
+            className: (0, import_clsx2.clsx)(
+              "flex-1 w-full border-none bg-transparent p-0 placeholder:text-gray-400 focus:ring-0 outline-none",
+              sizeClasses[size],
+              // Adjust padding based on icon presence
+              !startIcon && "pl-3",
+              !endIcon && !onClear && !loading && "pr-3"
+            ),
+            ...props
+          }
+        ),
+        onClear && hasValue && !disabled && !loading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex-shrink-0 pr-2 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClear();
+            },
+            className: "p-1 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_solid.XMarkIcon, { className: "h-4 w-4" })
+          }
+        ) }),
+        loading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex-shrink-0 pr-3 pl-2 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { className: "animate-spin h-5 w-5 text-primus-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+        ] }) }),
+        endIcon && !loading && (onClear ? !hasValue : true) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_clsx2.clsx)(
+          "flex-shrink-0 pr-3 pl-2 text-gray-400 select-none pointer-events-none flex items-center justify-center",
+          iconSizeClasses[size]
+        ), children: endIcon })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-1.5 text-xs text-red-500 flex items-center gap-1 animate-in slide-in-from-top-1 fade-in duration-200", children: error })
     ] });
   }
 );
+Input.displayName = "Input";
 
 // src/components/payments/CheckoutForm.tsx
-var import_solid = require("@heroicons/react/24/solid");
+var import_solid2 = require("@heroicons/react/24/solid");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var CheckoutForm = ({
   amount,
@@ -1742,7 +1982,7 @@ var CheckoutForm = ({
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex justify-between items-center mb-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-lg font-medium text-gray-900", children: "Payment Details" }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center text-gray-500 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_solid.LockClosedIcon, { className: "h-4 w-4 mr-1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_solid2.LockClosedIcon, { className: "h-4 w-4 mr-1" }),
         "Secure Payment"
       ] })
     ] }),
@@ -1751,11 +1991,11 @@ var CheckoutForm = ({
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-2xl font-bold text-gray-900", children: new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount) })
     ] }),
     error && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mb-4 p-3 bg-red-50 border border-red-200 rounded-lg flex items-start gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_solid.XCircleIcon, { className: "h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_solid2.XCircleIcon, { className: "h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-red-700", children: error })
     ] }),
     success && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mb-4 p-3 bg-green-50 border border-green-200 rounded-lg flex items-start gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_solid.CheckCircleIcon, { className: "h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_solid2.CheckCircleIcon, { className: "h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-green-700", children: "Payment successful!" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
@@ -1826,18 +2066,18 @@ var CheckoutForm = ({
 var import_outline2 = require("@heroicons/react/24/outline");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var DocumentViewer = ({
-  document,
+  document: document2,
   onClose,
   onDownload
 }) => {
   const renderContent = () => {
-    switch (document.type) {
+    switch (document2.type) {
       case "image":
         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "img",
           {
-            src: document.url,
-            alt: document.name,
+            src: document2.url,
+            alt: document2.name,
             className: "max-w-full max-h-[80vh] object-contain mx-auto shadow-lg rounded"
           }
         );
@@ -1845,14 +2085,14 @@ var DocumentViewer = ({
         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-gray-100 p-8 rounded-lg text-center h-[600px] flex items-center justify-center border-2 border-dashed border-gray-300", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "text-gray-500", children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_outline2.DocumentArrowDownIcon, { className: "h-16 w-16 mx-auto mb-4 text-gray-400" }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "font-medium", children: "PDF Preview" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm mt-2", children: document.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm mt-2", children: document2.name }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "outline", size: "sm", className: "mt-4", onClick: onDownload, children: "Download to view" })
         ] }) });
       default:
         return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "bg-white p-8 rounded shadow border border-gray-200 h-[600px] overflow-auto font-mono text-sm leading-relaxed", children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { children: [
             "Document Content: ",
-            document.name
+            document2.name
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-4 text-gray-500", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })
         ] });
@@ -1861,13 +2101,13 @@ var DocumentViewer = ({
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col h-full bg-gray-50 rounded-lg overflow-hidden border border-gray-200", children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between shadow-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-8 w-8 bg-primus-100 rounded flex items-center justify-center text-primus-700", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "uppercase text-xs font-bold", children: document.type }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-8 w-8 bg-primus-100 rounded flex items-center justify-center text-primus-700", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "uppercase text-xs font-bold", children: document2.type }) }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "text-sm font-semibold text-gray-900", children: document.name }),
-          document.size && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-xs text-gray-500", children: [
-            document.size,
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "text-sm font-semibold text-gray-900", children: document2.name }),
+          document2.size && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-xs text-gray-500", children: [
+            document2.size,
             " \u2022 ",
-            document.date
+            document2.date
           ] })
         ] })
       ] }),
@@ -1883,7 +2123,7 @@ var DocumentViewer = ({
 };
 
 // src/components/banking/cards/CreditCardVisual.tsx
-var import_clsx4 = require("clsx");
+var import_clsx3 = require("clsx");
 var import_outline3 = require("@heroicons/react/24/outline");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var CreditCardVisual = ({
@@ -1905,7 +2145,7 @@ var CreditCardVisual = ({
         return "bg-gradient-to-br from-gray-900 to-gray-800";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx4.clsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx3.clsx)(
     "w-80 h-48 rounded-2xl p-6 text-white shadow-xl relative overflow-hidden transition-transform hover:scale-105 duration-300",
     getBackground()
   ), children: [
@@ -1935,7 +2175,7 @@ var CreditCardVisual = ({
 
 // src/components/banking/transactions/TransactionHistory.tsx
 var import_outline4 = require("@heroicons/react/24/outline");
-var import_clsx5 = require("clsx");
+var import_clsx4 = require("clsx");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var TransactionHistory = ({
   transactions,
@@ -1958,7 +2198,7 @@ var TransactionHistory = ({
         className: "px-6 py-4 flex items-center justify-between hover:bg-gray-50 cursor-pointer transition-colors",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: (0, import_clsx5.clsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: (0, import_clsx4.clsx)(
               "h-10 w-10 rounded-full flex items-center justify-center",
               t.type === "credit" ? "bg-green-100" : "bg-gray-100"
             ), children: getIcon(t) }),
@@ -1968,7 +2208,7 @@ var TransactionHistory = ({
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "text-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: (0, import_clsx5.clsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: (0, import_clsx4.clsx)(
               "text-sm font-semibold",
               t.type === "credit" ? "text-green-600" : "text-gray-900"
             ), children: [
@@ -1985,7 +2225,7 @@ var TransactionHistory = ({
 };
 
 // src/components/insurance/policies/PolicyCard.tsx
-var import_clsx6 = require("clsx");
+var import_clsx5 = require("clsx");
 var import_outline5 = require("@heroicons/react/24/outline");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var PolicyCard = ({
@@ -2005,7 +2245,7 @@ var PolicyCard = ({
           " Insurance"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: (0, import_clsx6.clsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: (0, import_clsx5.clsx)(
         "px-2.5 py-0.5 rounded-full text-xs font-medium uppercase tracking-wide",
         status === "active" ? "bg-green-100 text-green-800" : status === "pending" ? "bg-yellow-100 text-yellow-800" : "bg-gray-100 text-gray-800"
       ), children: status })
@@ -2044,8 +2284,8 @@ var PolicyCard = ({
 };
 
 // src/components/insurance/claims/ClaimStatusTracker.tsx
-var import_clsx7 = require("clsx");
-var import_solid2 = require("@heroicons/react/24/solid");
+var import_clsx6 = require("clsx");
+var import_solid3 = require("@heroicons/react/24/solid");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var ClaimStatusTracker = ({
   claimId,
@@ -2059,14 +2299,14 @@ var ClaimStatusTracker = ({
         claimId
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { "aria-label": "Progress", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ol", { role: "list", className: "overflow-hidden", children: steps.map((step, stepIdx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { className: (0, import_clsx7.clsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { "aria-label": "Progress", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ol", { role: "list", className: "overflow-hidden", children: steps.map((step, stepIdx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { className: (0, import_clsx6.clsx)(
       "relative pb-10",
       stepIdx === steps.length - 1 ? "pb-0" : ""
     ), children: [
       stepIdx !== steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "div",
         {
-          className: (0, import_clsx7.clsx)(
+          className: (0, import_clsx6.clsx)(
             "absolute top-4 left-4 -ml-px h-full w-0.5",
             step.status === "completed" ? "bg-primus-600" : "bg-gray-200"
           ),
@@ -2074,12 +2314,12 @@ var ClaimStatusTracker = ({
         }
       ) : null,
       /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative flex items-start group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-9 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: (0, import_clsx7.clsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-9 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: (0, import_clsx6.clsx)(
           "relative z-10 w-8 h-8 flex items-center justify-center rounded-full ring-1 ring-white",
           step.status === "completed" ? "bg-primus-600" : step.status === "current" ? "bg-white border-2 border-primus-600" : "bg-white border-2 border-gray-300"
-        ), children: step.status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_solid2.CheckIcon, { className: "w-5 h-5 text-white", "aria-hidden": "true" }) : step.status === "current" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-2.5 w-2.5 bg-primus-600 rounded-full" }) : null }) }),
+        ), children: step.status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_solid3.CheckIcon, { className: "w-5 h-5 text-white", "aria-hidden": "true" }) : step.status === "current" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-2.5 w-2.5 bg-primus-600 rounded-full" }) : null }) }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "ml-4 min-w-0 flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: (0, import_clsx7.clsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: (0, import_clsx6.clsx)(
             "text-sm font-medium",
             step.status === "upcoming" ? "text-gray-500" : "text-gray-900"
           ), children: step.label }),
@@ -2235,9 +2475,14 @@ var PrimusSidebar = ({
     logo && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-20 flex items-center px-6 relative z-10 border-b border-white/5", children: logo }),
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("nav", { className: "flex-1 py-6 px-3 overflow-y-auto relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "space-y-1", children: items.map((item) => {
       const isActive = activeId === item.id || item.active;
+      const link = item.href ?? item.route;
+      const Wrapper = link ? "a" : "button";
       return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-        "button",
+        Wrapper,
         {
+          href: link,
+          target: item.target,
+          rel: item.target === "_blank" ? "noreferrer" : void 0,
           onClick: () => {
             item.onClick?.();
             onItemClick?.(item);
@@ -2310,11 +2555,16 @@ function PrimusDataTable({
   actions,
   emptyMessage = "No data available",
   searchPlaceholder = "Filter...",
-  searchable = true
+  searchable = true,
+  paginated = false,
+  pageSize = 10,
+  pageIndex,
+  onPageChange
 }) {
   const [search, setSearch] = (0, import_react26.useState)("");
   const [sortKey, setSortKey] = (0, import_react26.useState)(null);
   const [sortDir, setSortDir] = (0, import_react26.useState)("asc");
+  const [internalPageIndex, setInternalPageIndex] = (0, import_react26.useState)(0);
   const filteredData = (0, import_react26.useMemo)(() => {
     let result = [...data];
     if (search) {
@@ -2342,16 +2592,33 @@ function PrimusDataTable({
       setSortKey(key);
       setSortDir("asc");
     }
+    if (paginated) {
+      goToPage(0);
+    }
+  };
+  const effectivePageIndex = pageIndex ?? internalPageIndex;
+  const totalPages = Math.max(1, Math.ceil(filteredData.length / Math.max(pageSize, 1)));
+  const currentPageIndex = Math.min(Math.max(effectivePageIndex, 0), totalPages - 1);
+  const pageData = paginated ? filteredData.slice(currentPageIndex * pageSize, currentPageIndex * pageSize + pageSize) : filteredData;
+  const selectionScope = paginated ? pageData : filteredData;
+  const isScopeSelected = selectionScope.length > 0 && selectionScope.every((row) => selectedKeys.includes(row[rowKey]));
+  const goToPage = (nextIndex) => {
+    const clamped = Math.min(Math.max(nextIndex, 0), totalPages - 1);
+    if (pageIndex === void 0) {
+      setInternalPageIndex(clamped);
+    }
+    onPageChange?.({ pageIndex: clamped, pageSize });
   };
   const toggleSelect = (key) => {
     const newKeys = selectedKeys.includes(key) ? selectedKeys.filter((k) => k !== key) : [...selectedKeys, key];
     onSelectionChange?.(newKeys);
   };
   const toggleSelectAll = () => {
-    if (selectedKeys.length === filteredData.length) {
+    const scopeKeys = selectionScope.map((row) => row[rowKey]);
+    if (isScopeSelected) {
       onSelectionChange?.([]);
     } else {
-      onSelectionChange?.(filteredData.map((row) => row[rowKey]));
+      onSelectionChange?.(scopeKeys);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col space-y-4", children: [
@@ -2363,7 +2630,12 @@ function PrimusDataTable({
           type: "text",
           placeholder: searchPlaceholder,
           value: search,
-          onChange: (e) => setSearch(e.target.value),
+          onChange: (e) => {
+            setSearch(e.target.value);
+            if (paginated) {
+              goToPage(0);
+            }
+          },
           className: "w-64 pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-purple-500/50 focus:bg-white/10 transition-all hover:bg-white/10"
         }
       )
@@ -2374,7 +2646,7 @@ function PrimusDataTable({
           "input",
           {
             type: "checkbox",
-            checked: selectedKeys.length === filteredData.length && filteredData.length > 0,
+            checked: isScopeSelected,
             onChange: toggleSelectAll,
             className: "rounded border-gray-600 bg-gray-800 text-purple-600 focus:ring-offset-gray-900 focus:ring-purple-500 transition-colors cursor-pointer"
           }
@@ -2397,7 +2669,7 @@ function PrimusDataTable({
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tbody", { className: "divide-y divide-white/5", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col items-center justify-center gap-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-6 h-6 border-2 border-purple-500/50 border-t-purple-500 rounded-full animate-spin" }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-sm font-medium", children: "Loading data..." })
-      ] }) }) }) : filteredData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm", children: emptyMessage }) }) }) : filteredData.map((row) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      ] }) }) }) : filteredData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm", children: emptyMessage }) }) }) : pageData.map((row) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "tr",
         {
           onClick: () => onRowClick?.(row),
@@ -2422,7 +2694,35 @@ function PrimusDataTable({
         },
         String(row[rowKey])
       )) })
-    ] }) }) })
+    ] }) }) }),
+    paginated && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between text-sm text-gray-400 px-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => goToPage(currentPageIndex - 1),
+          disabled: currentPageIndex === 0,
+          className: "px-3 py-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed",
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { children: [
+        "Page ",
+        currentPageIndex + 1,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => goToPage(currentPageIndex + 1),
+          disabled: currentPageIndex >= totalPages - 1,
+          className: "px-3 py-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed",
+          children: "Next"
+        }
+      )
+    ] })
   ] });
 }
 
@@ -2437,7 +2737,7 @@ var PrimusModal = ({
   size = "md"
 }) => {
   if (!open) return null;
-  const sizeClasses = {
+  const sizeClasses2 = {
     sm: "max-w-sm",
     md: "max-w-md",
     lg: "max-w-lg",
@@ -2451,7 +2751,7 @@ var PrimusModal = ({
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `relative w-full ${sizeClasses[size]} mx-4 bg-gray-800 rounded-xl border border-gray-700 shadow-2xl`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `relative w-full ${sizeClasses2[size]} mx-4 bg-gray-800 rounded-xl border border-gray-700 shadow-2xl`, children: [
       title && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-700", children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-lg font-semibold text-white", children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -2491,12 +2791,28 @@ var PrimusStatCard = ({
     neutral: "\u2192"
   };
   const renderSparkline = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { className: "w-full h-12 opacity-50 absolute bottom-0 left-0", preserveAspectRatio: "none", "data-trend": trend.join(","), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M0 40 Q 20 20 40 40 T 80 40 T 120 40 T 160 30 V 50 H 0 Z", fill: `url(#gradient-${title.replace(/\s/g, "")})`, stroke: "none" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("linearGradient", { id: `gradient-${title.replace(/\s/g, "")}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.2" }),
+    if (!trend || trend.length === 0) {
+      return null;
+    }
+    const max = Math.max(...trend);
+    const min = Math.min(...trend);
+    const range = max - min || 1;
+    const divisor = trend.length > 1 ? trend.length - 1 : 1;
+    const points = trend.map((value2, index) => {
+      const x = index / divisor * 100;
+      const y = 100 - (value2 - min) / range * 100;
+      return { x, y };
+    });
+    const linePath = points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
+    const areaPath = `${linePath} L 100 100 L 0 100 Z`;
+    const gradientId = `gradient-${title.replace(/\s/g, "")}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { className: "w-full h-12 opacity-60 absolute bottom-0 left-0", viewBox: "0 0 100 100", preserveAspectRatio: "none", "data-trend": trend.join(","), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.25" }),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
-      ] }) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: linePath, fill: "none", stroke: "currentColor", strokeWidth: "1.8", opacity: "0.6" })
     ] });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative overflow-hidden bg-slate-900/40 backdrop-blur-md rounded-2xl border border-white/5 hover:border-white/10 transition-all duration-300 group", children: [
@@ -2550,13 +2866,1423 @@ var DashboardGrid = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `grid gap-6 ${colClasses[columns]}`, children });
 };
+
+// src/components/dashboard/PrimusActivityFeed.tsx
+var import_react27 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var statusClasses = {
+  success: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30",
+  warning: "bg-amber-500/10 text-amber-300 border-amber-500/30",
+  error: "bg-rose-500/10 text-rose-300 border-rose-500/30",
+  info: "bg-blue-500/10 text-blue-300 border-blue-500/30"
+};
+var PrimusActivityFeed = ({
+  items,
+  maxItems = 10,
+  showTimestamps = true,
+  groupByDate = false,
+  loading = false
+}) => {
+  const visibleItems = (0, import_react27.useMemo)(() => items.slice(0, maxItems), [items, maxItems]);
+  const groups = (0, import_react27.useMemo)(() => {
+    if (!groupByDate) {
+      return [{ label: "", items: visibleItems }];
+    }
+    const map = /* @__PURE__ */ new Map();
+    visibleItems.forEach((item) => {
+      const label = formatDate(item.timestamp);
+      const list = map.get(label) ?? [];
+      list.push(item);
+      map.set(label, list);
+    });
+    return Array.from(map.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
+  }, [groupByDate, visibleItems]);
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 text-sm text-gray-400", children: "Loading activity..." });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 space-y-6", children: groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+    group.label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs uppercase tracking-wide text-gray-500 mb-3", children: group.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "space-y-4", children: group.items.map((item, itemIndex) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `mt-1 h-2.5 w-2.5 rounded-full border ${statusClasses[item.status ?? "info"]}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-sm font-medium text-gray-100", children: item.title }),
+          showTimestamps && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs text-gray-500", children: formatTime(item.timestamp) })
+        ] }),
+        item.description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "text-xs text-gray-400 mt-1", children: item.description })
+      ] })
+    ] }, item.id ?? `${itemIndex}-${item.title}`)) })
+  ] }, `${group.label}-${index}`)) });
+};
+var formatDate = (value) => {
+  if (!value) {
+    return "";
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return String(value);
+  }
+  return date.toLocaleDateString();
+};
+var formatTime = (value) => {
+  if (!value) {
+    return "";
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+};
+
+// src/components/charts/PrimusChartBase.tsx
+var import_react28 = require("react");
+var import_chart = require("chart.js");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var registered = false;
+var ensureRegistered = () => {
+  if (!registered) {
+    import_chart.Chart.register(...import_chart.registerables);
+    registered = true;
+  }
+};
+var PrimusChartBase = ({
+  type,
+  data,
+  labels = [],
+  series = [],
+  options,
+  responsive = true,
+  maintainAspectRatio = false,
+  legend = true,
+  height = 300,
+  width,
+  ariaLabel = "Chart",
+  className,
+  datasetTransform
+}) => {
+  const canvasRef = (0, import_react28.useRef)(null);
+  const chartRef = (0, import_react28.useRef)(null);
+  const builtData = (0, import_react28.useMemo)(() => {
+    if (data) {
+      return data;
+    }
+    const datasets = series.map((item) => {
+      const color = item.color ?? item.borderColor ?? "#3b82f6";
+      const background = item.backgroundColor ?? color;
+      let dataset = {
+        label: item.name,
+        data: item.data,
+        borderColor: item.borderColor ?? color,
+        backgroundColor: background,
+        fill: item.fill
+      };
+      if (datasetTransform) {
+        dataset = datasetTransform(dataset);
+      }
+      return dataset;
+    });
+    return {
+      labels,
+      datasets
+    };
+  }, [data, labels, series, datasetTransform]);
+  const builtOptions = (0, import_react28.useMemo)(() => {
+    const mergedPlugins = {
+      ...options?.plugins ?? {},
+      legend: {
+        display: legend,
+        ...options?.plugins?.legend ?? {}
+      }
+    };
+    return {
+      responsive,
+      maintainAspectRatio,
+      ...options ?? {},
+      plugins: mergedPlugins,
+      scales: {
+        ...options?.scales ?? {}
+      }
+    };
+  }, [options, responsive, maintainAspectRatio, legend]);
+  (0, import_react28.useEffect)(() => {
+    ensureRegistered();
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return void 0;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return void 0;
+    }
+    if (chartRef.current) {
+      chartRef.current.destroy();
+      chartRef.current = null;
+    }
+    chartRef.current = new import_chart.Chart(ctx, {
+      type,
+      data: builtData,
+      options: builtOptions
+    });
+    return () => {
+      chartRef.current?.destroy();
+      chartRef.current = null;
+    };
+  }, [type, builtData, builtOptions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className, style: { height, width }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("canvas", { ref: canvasRef, "aria-label": ariaLabel, role: "img" }) });
+};
+
+// src/components/charts/PrimusLineChart.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var PrimusLineChart = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    PrimusChartBase,
+    {
+      ...props,
+      type: "line",
+      datasetTransform: (dataset) => ({
+        tension: 0.35,
+        pointRadius: 2,
+        pointHoverRadius: 4,
+        borderWidth: 2,
+        fill: dataset.fill ?? false,
+        ...dataset
+      })
+    }
+  );
+};
+
+// src/components/charts/PrimusAreaChart.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var PrimusAreaChart = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    PrimusChartBase,
+    {
+      ...props,
+      type: "line",
+      datasetTransform: (dataset) => ({
+        tension: 0.35,
+        pointRadius: 2,
+        pointHoverRadius: 4,
+        borderWidth: 2,
+        fill: dataset.fill ?? true,
+        ...dataset
+      })
+    }
+  );
+};
+
+// src/components/charts/PrimusBarChart.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var PrimusBarChart = ({ stacked = false, options, ...props }) => {
+  const mergedOptions = {
+    ...options,
+    scales: {
+      x: { stacked, ...options?.scales?.x ?? {} },
+      y: { stacked, ...options?.scales?.y ?? {} },
+      ...options?.scales ?? {}
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    PrimusChartBase,
+    {
+      ...props,
+      type: "bar",
+      options: mergedOptions,
+      datasetTransform: (dataset) => ({
+        borderRadius: 6,
+        borderSkipped: false,
+        ...dataset
+      })
+    }
+  );
+};
+
+// src/components/charts/PrimusPieChart.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var PrimusPieChart = ({ donut = false, cutout = "55%", options, ...props }) => {
+  const mergedOptions = {
+    ...options,
+    cutout: donut ? cutout : void 0
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    PrimusChartBase,
+    {
+      ...props,
+      type: donut ? "doughnut" : "pie",
+      options: mergedOptions,
+      datasetTransform: (dataset) => ({
+        borderWidth: 1,
+        borderColor: "transparent",
+        ...dataset
+      })
+    }
+  );
+};
+
+// src/components/charts/PrimusSparkline.tsx
+var import_react29 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var PrimusSparkline = ({
+  series = [],
+  data,
+  type = "line",
+  height = 48,
+  width = 160,
+  strokeWidth = 2,
+  className,
+  ariaLabel = "Sparkline"
+}) => {
+  const values = data ?? series[0]?.data ?? [];
+  const color = series[0]?.color ?? series[0]?.borderColor ?? "#3b82f6";
+  const { linePath, areaPath } = (0, import_react29.useMemo)(() => {
+    if (!values.length) {
+      return { linePath: "", areaPath: "" };
+    }
+    const max = Math.max(...values);
+    const min = Math.min(...values);
+    const range = max - min || 1;
+    const divisor = values.length > 1 ? values.length - 1 : 1;
+    const points = values.map((value, index) => {
+      const x = index / divisor * 100;
+      const y = 100 - (value - min) / range * 100;
+      return { x, y };
+    });
+    const line = points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
+    const area = `${line} L 100 100 L 0 100 Z`;
+    return { linePath: line, areaPath: area };
+  }, [values]);
+  if (!values.length) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    "svg",
+    {
+      className,
+      width,
+      height,
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      "aria-label": ariaLabel,
+      role: "img",
+      children: [
+        type === "area" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: areaPath, fill: color, opacity: 0.2, stroke: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth })
+      ]
+    }
+  );
+};
+
+// src/components/shared/Checkbox.tsx
+var import_react30 = __toESM(require("react"));
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Checkbox = import_react30.default.forwardRef(
+  ({ style, label, error, disabled, className, ...props }, ref) => {
+    const containerStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem"
+    };
+    const checkboxWrapperStyles = {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    const checkboxStyles = {
+      width: "1.25rem",
+      height: "1.25rem",
+      borderRadius: "0.25rem",
+      border: error ? "2px solid #ef4444" : "2px solid #e5e7eb",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      accentColor: "#111827"
+    };
+    const labelStyles = {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      color: "#374151",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.7 : 1,
+      userSelect: "none"
+    };
+    const errorTextStyles = {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      color: "#ef4444",
+      marginTop: "0.25rem",
+      marginLeft: "1.75rem"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: containerStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: checkboxWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            style: {
+              ...checkboxStyles,
+              ...style
+            },
+            disabled,
+            ...props
+          }
+        ) }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { style: labelStyles, onClick: (e) => {
+          if (!disabled) {
+            const input = e.currentTarget.previousElementSibling?.querySelector("input");
+            input?.click();
+          }
+        }, children: label })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { style: errorTextStyles, children: error })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/shared/RadioGroup.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var RadioGroup = ({
+  name,
+  options,
+  value,
+  onChange,
+  error,
+  disabled,
+  orientation = "vertical"
+}) => {
+  const containerStyles = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    gap: orientation === "vertical" ? "0.75rem" : "1.5rem"
+  };
+  const optionStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem"
+  };
+  const radioStyles = {
+    width: "1.25rem",
+    height: "1.25rem",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    accentColor: "#111827"
+  };
+  const labelStyles = {
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    color: "#374151",
+    cursor: disabled ? "not-allowed" : "pointer",
+    userSelect: "none"
+  };
+  const errorTextStyles = {
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    color: "#ef4444",
+    marginTop: "0.5rem"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: containerStyles, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { style: optionStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: option.value,
+          checked: value === option.value,
+          onChange: () => onChange?.(option.value),
+          disabled: disabled || option.disabled,
+          style: radioStyles
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "label",
+        {
+          style: {
+            ...labelStyles,
+            opacity: disabled || option.disabled ? 0.5 : 1
+          },
+          onClick: () => {
+            if (!disabled && !option.disabled) {
+              onChange?.(option.value);
+            }
+          },
+          children: option.label
+        }
+      )
+    ] }, option.value)) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { style: errorTextStyles, children: error })
+  ] });
+};
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/shared/Select.tsx
+var import_react31 = __toESM(require("react"));
+var import_react32 = require("@headlessui/react");
+var import_solid4 = require("@heroicons/react/20/solid");
+var import_clsx7 = require("clsx");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var Select = ({
+  label,
+  error,
+  options,
+  placeholder = "Select option...",
+  value,
+  onChange,
+  multiple = false,
+  disabled = false,
+  className
+}) => {
+  const [query, setQuery] = (0, import_react31.useState)("");
+  const filteredOptions = query === "" ? options : options.filter(
+    (option) => option.label.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""))
+  );
+  const getLabel = (val) => options.find((o) => o.value === val)?.label || val;
+  const removeChip = (valToRemove) => {
+    if (Array.isArray(value)) {
+      onChange?.(value.filter((v) => v !== valToRemove));
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_clsx7.clsx)("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    import_react32.Combobox,
+    {
+      value,
+      onChange: (val) => {
+        onChange?.(val);
+      },
+      multiple,
+      disabled,
+      children: ({}) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react32.Combobox.Label, { className: "block text-sm font-medium text-gray-700 mb-1", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx7.clsx)(
+          "relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left focus-within:ring-2 focus-within:ring-primus-500",
+          "border transition-all duration-200 ease-in-out",
+          error ? "border-red-500 focus-within:ring-red-500" : "border-gray-300",
+          disabled && "opacity-50 cursor-not-allowed bg-gray-50"
+        ), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: (0, import_clsx7.clsx)(
+            "flex flex-wrap items-center gap-1.5 w-full py-1.5 pl-3 pr-10 text-sm",
+            "min-h-[2.5rem]"
+          ), children: [
+            multiple && Array.isArray(value) && value.map((val) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "inline-flex items-center gap-1 rounded bg-primus-50 px-2 py-0.5 text-xs font-medium text-primus-700 ring-1 ring-inset ring-primus-700/10 max-w-[150px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "truncate", children: getLabel(val) }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: "group relative -mr-1 h-3.5 w-3.5 rounded-sm hover:bg-primus-600/20 flex-shrink-0 cursor-pointer",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    removeChip(val);
+                  },
+                  onMouseDown: (e) => e.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "sr-only", children: "Remove" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_solid4.XMarkIcon, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                  ]
+                }
+              )
+            ] }, val)),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              import_react32.Combobox.Input,
+              {
+                className: "border-none p-0 text-gray-900 focus:ring-0 outline-none placeholder:text-gray-400 bg-transparent min-w-[50px] flex-1 text-sm leading-5 py-0.5",
+                displayValue: (val) => !multiple && val ? getLabel(val) : query,
+                placeholder: multiple && Array.isArray(value) && value.length > 0 ? "" : placeholder,
+                onChange: (event) => setQuery(event.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react32.Combobox.Button, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_solid4.ChevronUpDownIcon,
+            {
+              className: "h-5 w-5 text-gray-400",
+              "aria-hidden": "true"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          import_react32.Transition,
+          {
+            as: import_react31.default.Fragment,
+            leave: "transition ease-in duration-100",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            afterLeave: () => setQuery(""),
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react32.Combobox.Options, { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "relative cursor-default select-none py-2 px-4 text-gray-700", children: "Nothing found." }) : filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              import_react32.Combobox.Option,
+              {
+                className: ({ active }) => (0, import_clsx7.clsx)(
+                  "relative cursor-default select-none py-2 pl-10 pr-4",
+                  active ? "bg-primus-600 text-white" : "text-gray-900"
+                ),
+                value: option.value,
+                disabled: option.disabled,
+                children: ({ selected, active }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: (0, import_clsx7.clsx)("block truncate", selected ? "font-medium" : "font-normal"), children: option.label }),
+                  selected ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    "span",
+                    {
+                      className: (0, import_clsx7.clsx)(
+                        "absolute inset-y-0 left-0 flex items-center pl-3",
+                        active ? "text-white" : "text-primus-600"
+                      ),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_solid4.CheckIcon, { className: "h-5 w-5", "aria-hidden": "true" })
+                    }
+                  ) : null
+                ] })
+              },
+              option.value
+            )) })
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "mt-1 text-sm text-red-500", children: error })
+      ] })
+    }
+  ) });
+};
+
+// src/components/shared/Toggle.tsx
+var import_react33 = __toESM(require("react"));
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Toggle = ({
+  checked = false,
+  onChange,
+  disabled = false,
+  label,
+  size = "md"
+}) => {
+  const [isHovered, setIsHovered] = import_react33.default.useState(false);
+  const sizes = {
+    sm: { width: "2.25rem", height: "1.25rem", thumbSize: "0.875rem" },
+    md: { width: "2.75rem", height: "1.5rem", thumbSize: "1.125rem" },
+    lg: { width: "3.5rem", height: "2rem", thumbSize: "1.625rem" }
+  };
+  const currentSize = sizes[size];
+  const containerStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem"
+  };
+  const switchStyles = {
+    position: "relative",
+    display: "inline-block",
+    width: currentSize.width,
+    height: currentSize.height,
+    backgroundColor: checked ? "#111827" : "#e5e7eb",
+    borderRadius: "9999px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    transition: "background-color 0.2s ease",
+    opacity: disabled ? 0.5 : isHovered ? 0.9 : 1
+  };
+  const thumbStyles = {
+    position: "absolute",
+    top: "50%",
+    left: checked ? `calc(100% - ${currentSize.thumbSize} - 0.125rem)` : "0.125rem",
+    transform: "translateY(-50%)",
+    width: currentSize.thumbSize,
+    height: currentSize.thumbSize,
+    backgroundColor: "#ffffff",
+    borderRadius: "50%",
+    transition: "left 0.2s ease",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)"
+  };
+  const labelStyles = {
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    color: "#374151",
+    cursor: disabled ? "not-allowed" : "pointer",
+    userSelect: "none"
+  };
+  const handleClick = () => {
+    if (!disabled) {
+      onChange?.(!checked);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: containerStyles, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "div",
+      {
+        style: switchStyles,
+        onClick: handleClick,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        role: "switch",
+        "aria-checked": checked,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: (e) => {
+          if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            handleClick();
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: thumbStyles })
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { style: labelStyles, onClick: handleClick, children: label })
+  ] });
+};
+Toggle.displayName = "Toggle";
+
+// src/components/shared/Textarea.tsx
+var import_react34 = __toESM(require("react"));
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var Textarea = import_react34.default.forwardRef(
+  ({ style, label, error, disabled, resize = "vertical", ...props }, ref) => {
+    const [isFocused, setIsFocused] = import_react34.default.useState(false);
+    const containerStyles = {
+      width: "100%"
+    };
+    const labelStyles = {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      fontWeight: "500",
+      marginBottom: "0.5rem",
+      display: "block",
+      color: "#374151",
+      cursor: disabled ? "not-allowed" : "default",
+      opacity: disabled ? 0.7 : 1
+    };
+    const textareaStyles = {
+      display: "flex",
+      minHeight: "5rem",
+      width: "100%",
+      borderRadius: "0.375rem",
+      border: error ? "1px solid #ef4444" : "1px solid #e5e7eb",
+      backgroundColor: "#ffffff",
+      padding: "0.5rem 0.75rem",
+      fontSize: "0.875rem",
+      lineHeight: "1.5rem",
+      outline: "none",
+      transition: "all 0.2s ease",
+      cursor: disabled ? "not-allowed" : "text",
+      opacity: disabled ? 0.5 : 1,
+      resize,
+      fontFamily: "inherit",
+      boxShadow: isFocused ? error ? "0 0 0 2px rgba(239, 68, 68, 0.2)" : "0 0 0 2px rgba(3, 7, 18, 0.1)" : "none"
+    };
+    const errorTextStyles = {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      color: "#ef4444",
+      marginTop: "0.25rem"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: containerStyles, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("label", { style: labelStyles, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        "textarea",
+        {
+          ref,
+          style: {
+            ...textareaStyles,
+            ...style
+          },
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          disabled,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { style: errorTextStyles, children: error })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/components/shared/Card.tsx
+var import_react35 = __toESM(require("react"));
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var Card = import_react35.default.forwardRef(
+  ({ style, variant = "default", padding = "md", children, ...props }, ref) => {
+    const [isHovered, setIsHovered] = import_react35.default.useState(false);
+    const paddingStyles = {
+      none: "0",
+      sm: "0.75rem",
+      md: "1.5rem",
+      lg: "2rem"
+    };
+    const variantStyles = {
+      default: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "1px solid #e5e7eb",
+          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
+        },
+        hover: {
+          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+        }
+      },
+      outlined: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "2px solid #e5e7eb",
+          boxShadow: "none"
+        },
+        hover: {
+          borderColor: "#d1d5db"
+        }
+      },
+      elevated: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "none",
+          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+        },
+        hover: {
+          boxShadow: "0 10px 15px rgba(0, 0, 0, 0.15)",
+          transform: "translateY(-2px)"
+        }
+      }
+    };
+    const baseStyles = {
+      borderRadius: "0.5rem",
+      padding: paddingStyles[padding],
+      transition: "all 0.2s ease"
+    };
+    const currentVariant = variantStyles[variant];
+    const combinedStyles = {
+      ...baseStyles,
+      ...currentVariant.normal,
+      ...isHovered ? currentVariant.hover : {},
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "div",
+      {
+        ref,
+        style: combinedStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/components/shared/Badge.tsx
+var import_react36 = __toESM(require("react"));
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var Badge = import_react36.default.forwardRef(
+  ({ style, variant = "default", size = "md", children, ...props }, ref) => {
+    const variantStyles = {
+      default: {
+        backgroundColor: "#f3f4f6",
+        color: "#374151"
+      },
+      success: {
+        backgroundColor: "#d1fae5",
+        color: "#065f46"
+      },
+      warning: {
+        backgroundColor: "#fef3c7",
+        color: "#92400e"
+      },
+      error: {
+        backgroundColor: "#fee2e2",
+        color: "#991b1b"
+      },
+      info: {
+        backgroundColor: "#dbeafe",
+        color: "#1e40af"
+      }
+    };
+    const sizeStyles = {
+      sm: {
+        fontSize: "0.75rem",
+        lineHeight: "1rem",
+        padding: "0.125rem 0.5rem"
+      },
+      md: {
+        fontSize: "0.875rem",
+        lineHeight: "1.25rem",
+        padding: "0.25rem 0.75rem"
+      },
+      lg: {
+        fontSize: "1rem",
+        lineHeight: "1.5rem",
+        padding: "0.375rem 1rem"
+      }
+    };
+    const baseStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      borderRadius: "9999px",
+      fontWeight: "500",
+      whiteSpace: "nowrap"
+    };
+    const combinedStyles = {
+      ...baseStyles,
+      ...variantStyles[variant],
+      ...sizeStyles[size],
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { ref, style: combinedStyles, ...props, children });
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/shared/Table.tsx
+var import_react37 = __toESM(require("react"));
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function Table({
+  columns,
+  data,
+  striped = false,
+  hoverable = true,
+  bordered = true,
+  style
+}) {
+  const [hoveredRow, setHoveredRow] = import_react37.default.useState(null);
+  const tableStyles = {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    ...style
+  };
+  const theadStyles = {
+    backgroundColor: "#f9fafb",
+    borderBottom: "2px solid #e5e7eb"
+  };
+  const thStyles = {
+    padding: "0.75rem 1rem",
+    textAlign: "left",
+    fontWeight: "600",
+    color: "#374151",
+    borderBottom: bordered ? "1px solid #e5e7eb" : "none"
+  };
+  const getTdStyles = (rowIndex) => ({
+    padding: "0.75rem 1rem",
+    borderBottom: bordered ? "1px solid #e5e7eb" : "none",
+    backgroundColor: hoverable && hoveredRow === rowIndex ? "#f9fafb" : striped && rowIndex % 2 === 1 ? "#f9fafb" : "#ffffff",
+    transition: "background-color 0.15s ease"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { overflowX: "auto", borderRadius: "0.5rem", border: bordered ? "1px solid #e5e7eb" : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("table", { style: tableStyles, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { style: theadStyles, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      "th",
+      {
+        style: {
+          ...thStyles,
+          width: column.width
+        },
+        children: column.header
+      },
+      column.key
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      "tr",
+      {
+        onMouseEnter: () => hoverable && setHoveredRow(rowIndex),
+        onMouseLeave: () => hoverable && setHoveredRow(null),
+        children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { style: getTdStyles(rowIndex), children: column.render ? column.render(row) : row[column.key] }, column.key))
+      },
+      rowIndex
+    )) })
+  ] }) });
+}
+Table.displayName = "Table";
+
+// src/components/shared/Container.tsx
+var import_react38 = __toESM(require("react"));
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Container = import_react38.default.forwardRef(
+  ({ style, maxWidth = "lg", padding = "md", children, ...props }, ref) => {
+    const maxWidthStyles = {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px",
+      full: "100%"
+    };
+    const paddingStyles = {
+      none: "0",
+      sm: "1rem",
+      md: "1.5rem",
+      lg: "2rem"
+    };
+    const containerStyles = {
+      width: "100%",
+      maxWidth: maxWidthStyles[maxWidth],
+      marginLeft: "auto",
+      marginRight: "auto",
+      paddingLeft: paddingStyles[padding],
+      paddingRight: paddingStyles[padding],
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref, style: containerStyles, ...props, children });
+  }
+);
+Container.displayName = "Container";
+
+// src/components/shared/Grid.tsx
+var import_react39 = __toESM(require("react"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Grid = import_react39.default.forwardRef(
+  ({ style, columns = 3, rows, gap = "md", width = "100%", height = "auto", responsive = true, children, ...props }, ref) => {
+    const gapStyles = {
+      none: "0",
+      sm: "0.5rem",
+      md: "1rem",
+      lg: "1.5rem",
+      xl: "2rem"
+    };
+    const gridStyles = {
+      display: "grid",
+      gridTemplateColumns: responsive ? `repeat(auto-fit, minmax(${Math.floor(100 / columns)}%, 1fr))` : `repeat(${columns}, 1fr)`,
+      gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : void 0,
+      gap: gapStyles[gap] || gap,
+      width,
+      height,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref, style: gridStyles, ...props, children });
+  }
+);
+Grid.displayName = "Grid";
+
+// src/components/shared/Stack.tsx
+var import_react40 = __toESM(require("react"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var Stack = import_react40.default.forwardRef(
+  ({ style, direction = "vertical", gap = "md", align = "stretch", justify = "start", children, ...props }, ref) => {
+    const gapStyles = {
+      none: "0",
+      sm: "0.5rem",
+      md: "1rem",
+      lg: "1.5rem",
+      xl: "2rem"
+    };
+    const alignStyles = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch"
+    };
+    const justifyStyles = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      between: "space-between",
+      around: "space-around"
+    };
+    const stackStyles = {
+      display: "flex",
+      flexDirection: direction === "vertical" ? "column" : "row",
+      gap: gapStyles[gap],
+      alignItems: alignStyles[align],
+      justifyContent: justifyStyles[justify],
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ref, style: stackStyles, ...props, children });
+  }
+);
+Stack.displayName = "Stack";
+
+// src/components/shared/Modal.tsx
+var import_react41 = __toESM(require("react"));
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  closeOnOverlayClick = true
+}) => {
+  import_react41.default.useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const sizeStyles = {
+    sm: "400px",
+    md: "600px",
+    lg: "800px",
+    xl: "1000px"
+  };
+  const overlayStyles = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e3,
+    padding: "1rem"
+  };
+  const modalStyles = {
+    backgroundColor: "#ffffff",
+    borderRadius: "0.5rem",
+    boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    width: "100%",
+    maxWidth: sizeStyles[size],
+    maxHeight: "90vh",
+    display: "flex",
+    flexDirection: "column"
+  };
+  const headerStyles = {
+    padding: "1.5rem",
+    borderBottom: "1px solid #e5e7eb",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  };
+  const titleStyles = {
+    fontSize: "1.25rem",
+    lineHeight: "1.75rem",
+    fontWeight: "600",
+    color: "#111827"
+  };
+  const closeButtonStyles = {
+    padding: "0.5rem",
+    borderRadius: "0.375rem",
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    fontSize: "1.5rem",
+    lineHeight: "1",
+    color: "#6b7280",
+    transition: "background-color 0.2s ease"
+  };
+  const contentStyles = {
+    padding: "1.5rem",
+    overflowY: "auto",
+    flex: 1
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    "div",
+    {
+      style: overlayStyles,
+      onClick: closeOnOverlayClick ? onClose : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        "div",
+        {
+          style: modalStyles,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: headerStyles, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h2", { style: titleStyles, children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                "button",
+                {
+                  style: closeButtonStyles,
+                  onClick: onClose,
+                  "aria-label": "Close modal",
+                  children: "\xD7"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { style: contentStyles, children })
+          ]
+        }
+      )
+    }
+  );
+};
+Modal.displayName = "Modal";
+
+// src/components/shared/DateRangePicker.tsx
+var import_react42 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var PrimusDateRangePicker = ({
+  startDate = null,
+  endDate = null,
+  ranges = [],
+  min,
+  max,
+  disabled = false,
+  onRangeChange
+}) => {
+  const [start, setStart] = (0, import_react42.useState)(startDate ?? "");
+  const [end, setEnd] = (0, import_react42.useState)(endDate ?? "");
+  (0, import_react42.useEffect)(() => {
+    setStart(startDate ?? "");
+  }, [startDate]);
+  (0, import_react42.useEffect)(() => {
+    setEnd(endDate ?? "");
+  }, [endDate]);
+  const normalizedRanges = (0, import_react42.useMemo)(() => {
+    return ranges.map((range) => typeof range === "string" ? resolvePreset(range) : range).filter((range) => !!range);
+  }, [ranges]);
+  const handleStartChange = (value) => {
+    setStart(value);
+    onRangeChange?.({ startDate: value || null, endDate: end || null });
+  };
+  const handleEndChange = (value) => {
+    setEnd(value);
+    onRangeChange?.({ startDate: start || null, endDate: value || null });
+  };
+  const applyRange = (range) => {
+    const nextStart = toDateInputValue(range.start);
+    const nextEnd = toDateInputValue(range.end);
+    setStart(nextStart);
+    setEnd(nextEnd);
+    onRangeChange?.({ startDate: nextStart, endDate: nextEnd, label: range.label });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "space-y-3", children: [
+    normalizedRanges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex flex-wrap gap-2", children: normalizedRanges.map((range) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => applyRange(range),
+        className: "px-3 py-1.5 rounded-full text-xs font-medium border border-white/10 bg-white/5 text-gray-200 hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed",
+        children: range.label
+      },
+      range.label
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col md:flex-row gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        "input",
+        {
+          type: "date",
+          value: start,
+          min,
+          max,
+          disabled,
+          onChange: (e) => handleStartChange(e.target.value),
+          className: "w-full px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        "input",
+        {
+          type: "date",
+          value: end,
+          min,
+          max,
+          disabled,
+          onChange: (e) => handleEndChange(e.target.value),
+          className: "w-full px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50"
+        }
+      )
+    ] })
+  ] });
+};
+var resolvePreset = (label) => {
+  const today = /* @__PURE__ */ new Date();
+  const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  switch (label.toLowerCase()) {
+    case "today":
+      return { label, start: startOfDay, end: startOfDay };
+    case "last 7 days": {
+      const start = new Date(startOfDay);
+      start.setDate(start.getDate() - 6);
+      return { label, start, end: startOfDay };
+    }
+    case "last 30 days": {
+      const start = new Date(startOfDay);
+      start.setDate(start.getDate() - 29);
+      return { label, start, end: startOfDay };
+    }
+    case "this month": {
+      const start = new Date(today.getFullYear(), today.getMonth(), 1);
+      const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+      return { label, start, end };
+    }
+    default:
+      return null;
+  }
+};
+var toDateInputValue = (value) => {
+  if (typeof value === "string") {
+    return value;
+  }
+  const year = value.getFullYear();
+  const month = String(value.getMonth() + 1).padStart(2, "0");
+  const day = String(value.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+// src/components/shared/FilterBar.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var PrimusFilterBar = ({
+  filters,
+  activeFilters,
+  onChange,
+  children
+}) => {
+  const updateFilter = (key, value) => {
+    const next = {
+      ...activeFilters,
+      [key]: value
+    };
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-wrap gap-4 items-end", children: [
+    filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "min-w-[220px]", children: [
+      filter.type === "select" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        Select,
+        {
+          label: filter.label,
+          placeholder: filter.placeholder,
+          options: filter.options ?? [],
+          value: activeFilters[filter.key] ?? "",
+          onChange: (value) => updateFilter(filter.key, value)
+        }
+      ),
+      filter.type === "toggle" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        Toggle,
+        {
+          label: filter.label,
+          checked: Boolean(activeFilters[filter.key]),
+          onChange: (checked) => updateFilter(filter.key, checked)
+        }
+      ),
+      filter.type === "search" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        Input,
+        {
+          label: filter.label,
+          placeholder: filter.placeholder ?? "Search...",
+          value: activeFilters[filter.key] ?? "",
+          onChange: (event) => updateFilter(filter.key, event.target.value)
+        }
+      )
+    ] }, filter.key)),
+    children
+  ] });
+};
+
+// src/components/shared/ExportMenu.tsx
+var import_react43 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var PrimusExportMenu = ({
+  formats = ["CSV", "PDF", "PNG", "JSON"],
+  includeCharts = true,
+  includeStats = true,
+  includeTables = true,
+  onExport
+}) => {
+  const [format, setFormat] = (0, import_react43.useState)(formats[0] ?? "CSV");
+  const [charts, setCharts] = (0, import_react43.useState)(includeCharts);
+  const [stats, setStats] = (0, import_react43.useState)(includeStats);
+  const [tables, setTables] = (0, import_react43.useState)(includeTables);
+  (0, import_react43.useEffect)(() => {
+    if (!formats.includes(format)) {
+      setFormat(formats[0] ?? "CSV");
+    }
+  }, [formats, format]);
+  const handleExport = () => {
+    onExport?.({
+      format,
+      includeCharts: charts,
+      includeStats: stats,
+      includeTables: tables
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      "select",
+      {
+        value: format,
+        onChange: (event) => setFormat(event.target.value),
+        className: "px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm",
+        children: formats.map((item) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("option", { value: item, children: item }, item))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("input", { type: "checkbox", checked: charts, onChange: (e) => setCharts(e.target.checked) }),
+      "Charts"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("input", { type: "checkbox", checked: stats, onChange: (e) => setStats(e.target.checked) }),
+      "Stats"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("input", { type: "checkbox", checked: tables, onChange: (e) => setTables(e.target.checked) }),
+      "Tables"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: handleExport,
+        className: "px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-medium hover:bg-purple-500",
+        children: "Export"
+      }
+    )
+  ] });
+};
+
+// src/components/shared/Search.tsx
+var import_react44 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var PrimusSearch = ({
+  placeholder = "Search...",
+  debounce = 300,
+  value = "",
+  showSuggestions = false,
+  suggestions = [],
+  onSearch
+}) => {
+  const [query, setQuery] = (0, import_react44.useState)(value);
+  (0, import_react44.useEffect)(() => {
+    setQuery(value);
+  }, [value]);
+  (0, import_react44.useEffect)(() => {
+    const handle = window.setTimeout(() => {
+      onSearch?.(query);
+    }, debounce);
+    return () => window.clearTimeout(handle);
+  }, [query, debounce, onSearch]);
+  const visibleSuggestions = (0, import_react44.useMemo)(() => {
+    if (!showSuggestions || !suggestions.length) {
+      return [];
+    }
+    if (!query) {
+      return suggestions.slice(0, 5);
+    }
+    return suggestions.filter((item) => item.toLowerCase().includes(query.toLowerCase())).slice(0, 5);
+  }, [suggestions, query, showSuggestions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      "input",
+      {
+        type: "text",
+        value: query,
+        placeholder,
+        onChange: (event) => setQuery(event.target.value),
+        className: "w-full px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50"
+      }
+    ),
+    visibleSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "absolute mt-2 w-full rounded-lg border border-white/10 bg-slate-900/90 backdrop-blur-sm shadow-lg z-10", children: visibleSuggestions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setQuery(item),
+        className: "w-full text-left px-3 py-2 text-sm text-gray-200 hover:bg-white/10",
+        children: item
+      },
+      item
+    )) })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AICopilot,
   AccountDashboard,
   AgentDirectory,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
   CheckoutForm,
   ClaimStatusTracker,
+  Container,
   CreditCardVisual,
   CreditScoreCard,
   DashboardGrid,
@@ -2564,29 +4290,64 @@ var DashboardGrid = ({
   FeatureFlagToggle,
   FileUploader,
   FraudDetectionDashboard,
+  Grid,
+  Input,
   KYCVerification,
   LoanCalculator,
   LogViewer,
   LoginPage,
+  Modal,
   NotificationBell,
   NotificationFeed,
   PolicyCard,
   PremiumCalculator,
+  PrimusActivityFeed,
+  PrimusAreaChart,
+  PrimusBadge,
+  PrimusBarChart,
+  PrimusButton,
+  PrimusCard,
+  PrimusChartBase,
+  PrimusCheckbox,
+  PrimusContainer,
   PrimusDashboard,
   PrimusDataTable,
+  PrimusDateRangePicker,
+  PrimusExportMenu,
+  PrimusFilterBar,
+  PrimusGrid,
   PrimusHeader,
+  PrimusInput,
   PrimusLayout,
+  PrimusLineChart,
   PrimusLogin,
   PrimusModal,
+  PrimusModalComponent,
   PrimusNotificationCenter,
+  PrimusNotificationFeed,
   PrimusNotifications,
+  PrimusPieChart,
   PrimusProvider,
+  PrimusRadioGroup,
+  PrimusSearch,
+  PrimusSelect,
   PrimusSidebar,
+  PrimusSparkline,
+  PrimusStack,
   PrimusStatCard,
+  PrimusTable,
+  PrimusTextarea,
   PrimusThemeProvider,
   PrimusThemeToggle,
+  PrimusToggle,
   QuoteComparison,
+  RadioGroup,
   SecurityDashboard,
+  Select,
+  Stack,
+  Table,
+  Textarea,
+  Toggle,
   TransactionHistory,
   UserProfile,
   themeColors,