braid-ui 1.0.2 → 1.0.4

package/dist/index.js

@@ -1,12 +1,12 @@
 import * as React13 from 'react';
-import { useState, useEffect, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import { Slot } from '@radix-ui/react-slot';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, ChevronUp, Check, X, PanelLeft, Edit, Home, Globe, CreditCard, Building, MoreVertical, Minus, TrendingDown, TrendingUp, ChevronRight, Eye, Trash2, Upload, FileText, Download, Plus, MessageSquare, Copy, LayoutDashboard, Bell, Briefcase, FileCheck, Receipt, ArrowLeftRight, Users, Building2, Zap, Shield, AlertCircle, RefreshCw, Landmark, Search, Repeat, Box, Settings, BarChart3, Key, Heart, User, AlertTriangle, XCircle, CheckCircle, Clock, Filter, ChevronLeft, Calendar as Calendar$1, CheckCircle2, Circle, UserPlus, ChevronsUpDown } from 'lucide-react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronDown, ChevronUp, Check, X, PanelLeft, Edit, Home, Globe, CreditCard, Building, MoreVertical, Minus, TrendingDown, TrendingUp, ChevronRight, Eye, Trash2, Plus, MessageSquare, Upload, FileText, Download, Copy, LayoutDashboard, Bell, Briefcase, FileCheck, Receipt, ArrowLeftRight, Users, Building2, Zap, Shield, AlertCircle, RefreshCw, Landmark, Search, Repeat, Box, Settings, BarChart3, Key, Heart, User, AlertTriangle, XCircle, CheckCircle, Clock, Filter, ChevronLeft, Calendar as Calendar$1, CalendarIcon, CheckCircle2, Circle, UserPlus, ChevronsUpDown } from 'lucide-react';
+import { createPortal } from 'react-dom';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { NavLink, useLocation, useParams, useNavigate } from 'react-router-dom';
@@ -26,10 +26,218 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { format } from 'date-fns';
 
-// src/components/alerts/AlertDocuments.tsx
+// src/components/ui/form-card.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var cardVariants = cva(
+  "rounded-lg border bg-card text-card-foreground transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "shadow-sm",
+        elevated: "shadow-md hover:shadow-lg",
+        outlined: "border-2 shadow-none",
+        ghost: "border-transparent shadow-none bg-transparent",
+        subtle: "border-border/75 shadow-none"
+      },
+      size: {
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        none: "p-0"
+      },
+      fullHeight: {
+        true: "h-full flex flex-col",
+        false: ""
+      },
+      interactive: {
+        true: "cursor-pointer hover:shadow-md hover:scale-[1.02]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "none",
+      fullHeight: false,
+      interactive: false
+    }
+  }
+);
+var Card = React13.forwardRef(
+  ({ className, variant, size, fullHeight, interactive, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardVariants({ variant, size, fullHeight, interactive }), className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var cardHeaderVariants = cva(
+  "flex flex-col space-y-1.5",
+  {
+    variants: {
+      size: {
+        sm: "px-3 pt-3 pb-2",
+        md: "px-4 pt-4 pb-3",
+        lg: "px-6 pt-6 pb-4"
+      },
+      align: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end"
+      },
+      direction: {
+        row: "flex-row justify-between items-center space-y-0 space-x-4",
+        column: "flex-col space-y-1.5"
+      }
+    },
+    defaultVariants: {
+      size: "lg",
+      align: "start",
+      direction: "column"
+    }
+  }
+);
+var CardHeader = React13.forwardRef(
+  ({ className, size, align, direction, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardHeaderVariants({ size, align, direction }), className),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var cardTitleVariants = cva(
+  "font-semibold leading-none tracking-tight",
+  {
+    variants: {
+      size: {
+        sm: "text-base",
+        md: "text-lg",
+        lg: "text-xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var CardTitle = React13.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn(cardTitleVariants({ size }), className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var cardContentVariants = cva(
+  "",
+  {
+    variants: {
+      size: {
+        sm: "px-3 pb-2",
+        md: "px-4 pb-3",
+        lg: "px-6 pb-4"
+      },
+      fullHeight: {
+        true: "flex-1",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "lg",
+      fullHeight: false
+    }
+  }
+);
+var CardContent = React13.forwardRef(
+  ({ className, size, fullHeight, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardContentVariants({ size, fullHeight }), className),
+      ...props
+    }
+  )
+);
+CardContent.displayName = "CardContent";
+var cardFooterVariants = cva(
+  "flex items-center pt-0",
+  {
+    variants: {
+      size: {
+        sm: "p-3 pt-0",
+        md: "p-4 pt-0",
+        lg: "p-6 pt-0"
+      },
+      justify: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between"
+      }
+    },
+    defaultVariants: {
+      size: "lg",
+      justify: "start"
+    }
+  }
+);
+var CardFooter = React13.forwardRef(
+  ({ className, size, justify, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardFooterVariants({ size, justify }), className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+var FormCard = React13.forwardRef(
+  ({ title, description, children, headerActions, className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ref,
+      variant,
+      fullHeight: true,
+      className: cn("", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          CardHeader,
+          {
+            direction: headerActions ? "row" : "column",
+            size: "md",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: /* @__PURE__ */ jsx(CardTitle, { size: "md", children: title }) }),
+              headerActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerActions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(CardContent, { size: "md", fullHeight: true, children })
+      ]
+    }
+  )
+);
+FormCard.displayName = "FormCard";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -69,171 +277,92 @@ var Button = React13.forwardRef(
   }
 );
 Button.displayName = "Button";
-var TOAST_LIMIT = 1;
-var TOAST_REMOVE_DELAY = 1e6;
-var count = 0;
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-}
-var toastTimeouts = /* @__PURE__ */ new Map();
-var addToRemoveQueue = (toastId) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId
-    });
-  }, TOAST_REMOVE_DELAY);
-  toastTimeouts.set(toastId, timeout);
-};
-var reducer = (state, action) => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
-      };
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map(
-          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
-        )
-      };
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast4) => {
-          addToRemoveQueue(toast4.id);
-        });
-      }
-      return {
-        ...state,
-        toasts: state.toasts.map(
-          (t) => t.id === toastId || toastId === void 0 ? {
-            ...t,
-            open: false
-          } : t
-        )
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === void 0) {
-        return {
-          ...state,
-          toasts: []
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId)
-      };
-  }
-};
-var listeners = [];
-var memoryState = { toasts: [] };
-function dispatch(action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
-}
-function toast({ ...props }) {
-  const id = genId();
-  const update = (props2) => dispatch({
-    type: "UPDATE_TOAST",
-    toast: { ...props2, id }
-  });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      }
-    }
-  });
-  return {
-    id,
-    dismiss,
-    update
-  };
-}
-function useToast() {
-  const [state, setState] = React13.useState(memoryState);
-  React13.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
-  };
-}
-var inputVariants = cva(
-  "flex w-full rounded-md bg-form-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground transition-form",
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border border-form-border focus-visible:border-form-border-focus focus-visible:outline-none focus-visible:shadow-form-focus",
-        error: "border border-form-border-error focus-visible:border-form-border-error focus-visible:outline-none focus-visible:shadow-form-error",
-        success: "border border-form-border-success focus-visible:border-form-border-success focus-visible:outline-none",
-        disabled: "border border-form-border bg-muted cursor-not-allowed opacity-50",
-        readonly: "border border-form-border bg-muted/50 cursor-default"
-      },
-      size: {
-        default: "h-10",
-        sm: "h-9",
-        lg: "h-11"
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        success: "border-transparent bg-success text-success-foreground hover:bg-success/80",
+        warning: "border-transparent bg-warning text-warning-foreground hover:bg-warning/80",
+        // Business type specific variants
+        business: "border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300",
+        individual: "border-green-200 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950 dark:text-green-300",
+        government: "border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300",
+        nonprofit: "border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-300",
+        // Business entity type variants
+        corporation: "border-slate-200 bg-slate-50 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300",
+        llc: "border-teal-200 bg-teal-50 text-teal-700 hover:bg-teal-100 dark:border-teal-800 dark:bg-teal-950 dark:text-teal-300",
+        partnership: "border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-800 dark:bg-indigo-950 dark:text-indigo-300",
+        sole_proprietorship: "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300",
+        // Status variants
+        active: "border-green-200 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950 dark:text-green-300",
+        inactive: "border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950 dark:text-red-300",
+        pending: "border-yellow-200 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300",
+        suspended: "border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300",
+        // Alert type subtle variants
+        "alert-ofac": "border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950 dark:text-red-300 font-medium",
+        "alert-dual": "border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300 font-medium",
+        "alert-monitoring": "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300 font-medium",
+        "alert-error": "border-rose-200 bg-rose-50 text-rose-700 hover:bg-rose-100 dark:border-rose-800 dark:bg-rose-950 dark:text-rose-300 font-medium"
       }
     },
     defaultVariants: {
-      variant: "default",
-      size: "default"
+      variant: "default"
     }
   }
 );
-var EnhancedInput = React13.forwardRef(
-  ({ className, variant, size, label, hint, error, success, isLoading, ...props }, ref) => {
-    const inputVariant = error ? "error" : success ? "success" : props.disabled ? "disabled" : props.readOnly ? "readonly" : variant;
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      label && /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [
-        label,
-        props.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+var AlertTimeline = ({ events }) => {
+  const getIcon = (action) => {
+    if (action.includes("Created")) return /* @__PURE__ */ jsx(Circle, { className: "h-4 w-4" });
+    if (action.includes("Assigned")) return /* @__PURE__ */ jsx(UserPlus, { className: "h-4 w-4" });
+    if (action.includes("Updated") || action.includes("Modified")) return /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" });
+    if (action.includes("Closed") || action.includes("Resolved")) return /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" });
+    if (action.includes("Rejected")) return /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsx(Circle, { className: "h-4 w-4" });
+  };
+  const getStatusColor2 = (status) => {
+    switch (status) {
+      case "Unassigned":
+        return "text-destructive";
+      case "Closed":
+        return "text-success";
+      case "In Progress":
+        return "text-warning";
+      default:
+        return "text-muted-foreground";
+    }
+  };
+  if (events.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-muted-foreground", children: "No timeline events yet" });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: events.map((event, index) => /* @__PURE__ */ jsxs("div", { className: "relative pl-6 pb-3", children: [
+    index !== events.length - 1 && /* @__PURE__ */ jsx("div", { className: "absolute left-[7px] top-5 bottom-0 w-[2px] bg-border" }),
+    /* @__PURE__ */ jsx("div", { className: cn(
+      "absolute left-0 top-0 flex-none",
+      getStatusColor2(event.status)
+    ), children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4", children: getIcon(event.action) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-foreground", children: event.action }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        "by ",
+        event.user
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            className: cn(inputVariants({ variant: inputVariant, size, className })),
-            ref,
-            ...props
-          }
-        ),
-        isLoading && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-primary border-t-transparent" }) })
+      event.details && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: event.details }),
+      event.status && /* @__PURE__ */ jsxs("p", { className: cn("text-xs font-medium", getStatusColor2(event.status)), children: [
+        "Status: ",
+        event.status
       ] }),
-      hint && !error && !success && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hint }),
-      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error }),
-      success && /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: success })
-    ] });
-  }
-);
-EnhancedInput.displayName = "EnhancedInput";
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70 pt-0.5", children: event.timestamp })
+    ] })
+  ] }, event.id)) });
+};
 var textareaVariants = cva(
   "flex min-h-[80px] w-full rounded-md bg-form-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground transition-form resize-y",
   {
@@ -330,179 +459,208 @@ var EnhancedSelect = React13.forwardRef(({ variant, label, hint, error, success,
   ] });
 });
 EnhancedSelect.displayName = "EnhancedSelect";
-var AlertDocuments = ({ alertId, documents }) => {
-  const [isUploading, setIsUploading] = useState(false);
-  const [showUploadDialog, setShowUploadDialog] = useState(false);
-  const [selectedFile, setSelectedFile] = useState(null);
-  const [documentName, setDocumentName] = useState("");
-  const [description, setDescription] = useState("");
-  const [documentType, setDocumentType] = useState("");
-  const handleFileSelect = (e) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    setSelectedFile(file);
-    setDocumentName(file.name);
-  };
-  const handleUploadSubmit = () => {
-    if (!selectedFile || !documentName || !documentType) {
-      toast({
-        title: "Missing Information",
-        description: "Please fill in all required fields",
-        variant: "destructive"
-      });
-      return;
+var TOAST_LIMIT = 1;
+var TOAST_REMOVE_DELAY = 1e6;
+var count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+var toastTimeouts = /* @__PURE__ */ new Map();
+var addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId
+    });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+};
+var reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+      };
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
+        )
+      };
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast4) => {
+          addToRemoveQueue(toast4.id);
+        });
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === toastId || toastId === void 0 ? {
+            ...t,
+            open: false
+          } : t
+        )
+      };
     }
-    setIsUploading(true);
-    setTimeout(() => {
-      ({
-        size: `${(selectedFile.size / 1024 / 1024).toFixed(1)} MB`,
-        uploadedAt: (/* @__PURE__ */ new Date()).toISOString()
-      });
-      toast({
-        title: "Upload Successful",
-        description: `${documentName} uploaded successfully`
-      });
-      setIsUploading(false);
-      setShowUploadDialog(false);
-      resetForm();
-    }, 1e3);
+    case "REMOVE_TOAST":
+      if (action.toastId === void 0) {
+        return {
+          ...state,
+          toasts: []
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId)
+      };
+  }
+};
+var listeners = [];
+var memoryState = { toasts: [] };
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+function toast({ ...props }) {
+  const id = genId();
+  const update = (props2) => dispatch({
+    type: "UPDATE_TOAST",
+    toast: { ...props2, id }
+  });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      }
+    }
+  });
+  return {
+    id,
+    dismiss,
+    update
+  };
+}
+function useToast() {
+  const [state, setState] = React13.useState(memoryState);
+  React13.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
   };
+}
+var NOTE_TYPE_OPTIONS = [
+  { value: "RFI Note", label: "RFI Note" },
+  { value: "Internal Note", label: "Internal Note" }
+];
+var AlertNotes = ({ alertId, notes }) => {
+  const [showNoteDialog, setShowNoteDialog] = useState(false);
+  const [newNote, setNewNote] = useState("");
+  const [noteType, setNoteType] = useState("RFI Note");
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const resetForm = () => {
-    setSelectedFile(null);
-    setDocumentName("");
-    setDescription("");
-    setDocumentType("");
-    const fileInput = document.getElementById("file-upload");
-    if (fileInput) fileInput.value = "";
+    setNewNote("");
+    setNoteType("RFI Note");
   };
-  const handleCancelUpload = () => {
-    setShowUploadDialog(false);
+  const handleCancelNote = () => {
+    setShowNoteDialog(false);
     resetForm();
   };
-  const isImageType = (name) => {
-    const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp"];
-    return imageExtensions.some((ext) => name.toLowerCase().endsWith(ext));
-  };
-  const getFileIcon = (type) => {
-    return /* @__PURE__ */ jsx(FileText, { className: "h-5 w-5" });
-  };
-  const getFileTypeColor = (type) => {
-    switch (type.toUpperCase()) {
-      case "PDF":
-        return "text-red-500";
-      case "DOCX":
-      case "DOC":
-        return "text-blue-500";
-      case "XLSX":
-      case "XLS":
-        return "text-green-500";
-      case "JPG":
-      case "JPEG":
-      case "PNG":
-        return "text-purple-500";
-      default:
-        return "text-muted-foreground";
+  const handleAddNote = async () => {
+    if (!newNote.trim()) {
+      toast({
+        title: "Error",
+        description: "Please enter a note before submitting",
+        variant: "destructive"
+      });
+      return;
     }
+    setIsSubmitting(true);
+    setTimeout(() => {
+      toast({
+        title: "Note Added",
+        description: "Your note has been added successfully"
+      });
+      setShowNoteDialog(false);
+      resetForm();
+      setIsSubmitting(false);
+    }, 500);
+  };
+  const handleDeleteNote = (noteId, noteContent) => {
+    toast({
+      title: "Note Deleted",
+      description: `Note deleted successfully`
+    });
+    console.log("Deleting note:", noteId);
   };
-  const documentTypeOptions = [
-    { value: "ID_DOCUMENT_FRONT", label: "ID Document (Front)" },
-    { value: "ID_DOCUMENT_BACK", label: "ID Document (Back)" },
-    { value: "PASSPORT", label: "Passport" },
-    { value: "PROOF_OF_ADDRESS", label: "Proof of Address" },
-    { value: "BANK_STATEMENT", label: "Bank Statement" },
-    { value: "BUSINESS_LICENSE", label: "Business License" },
-    { value: "TAX_DOCUMENT", label: "Tax Document" },
-    { value: "OTHER", label: "Other" }
-  ];
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    showUploadDialog && createPortal(
+    showNoteDialog && createPortal(
       /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[100] flex items-center justify-center p-4", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
-            onClick: handleCancelUpload
+            onClick: handleCancelNote
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "relative bg-card border rounded-lg shadow-lg max-w-lg w-full p-6 z-[101]", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold", children: "Upload Document" }),
+            /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold", children: "Add Note" }),
             /* @__PURE__ */ jsx(
               Button,
               {
                 variant: "ghost",
                 size: "sm",
                 className: "h-8 w-8 p-0",
-                onClick: handleCancelUpload,
+                onClick: handleCancelNote,
                 children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "border-2 border-dashed rounded-lg p-6 text-center hover:border-primary/50 transition-colors", children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "file",
-                  id: "file-upload-dialog",
-                  className: "hidden",
-                  onChange: handleFileSelect,
-                  disabled: isUploading
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "label",
-                {
-                  htmlFor: "file-upload-dialog",
-                  className: cn(
-                    "cursor-pointer flex flex-col items-center gap-2",
-                    isUploading && "opacity-50 cursor-not-allowed"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-muted-foreground" }),
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: selectedFile ? "Change file" : "Click to upload or drag and drop" }),
-                      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "PDF, DOC, DOCX, JPG, PNG up to 10MB" })
-                    ] })
-                  ]
-                }
-              )
-            ] }),
-            selectedFile && /* @__PURE__ */ jsxs("div", { className: "p-3 bg-muted/50 rounded-lg", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Selected file:" }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: selectedFile.name }),
-              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-                (selectedFile.size / 1024 / 1024).toFixed(2),
-                " MB"
-              ] })
-            ] }),
             /* @__PURE__ */ jsx(
-              EnhancedInput,
+              EnhancedSelect,
               {
-                label: "Document name",
-                value: documentName,
-                onChange: (e) => setDocumentName(e.target.value),
-                placeholder: "Enter document name"
+                label: "Note Type",
+                value: noteType,
+                onValueChange: (value) => setNoteType(value),
+                options: NOTE_TYPE_OPTIONS
               }
             ),
             /* @__PURE__ */ jsx(
               EnhancedTextarea,
               {
-                label: "Description",
-                value: description,
-                onChange: (e) => setDescription(e.target.value),
-                placeholder: "Enter document description (optional)",
-                rows: 3
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedSelect,
-              {
-                label: "Document type",
-                value: documentType,
-                onValueChange: setDocumentType,
-                placeholder: "Select document type",
-                options: documentTypeOptions
+                label: "Note",
+                placeholder: "Enter your note here...",
+                value: newNote,
+                onChange: (e) => setNewNote(e.target.value),
+                rows: 6
               }
             )
           ] }),
@@ -511,8 +669,8 @@ var AlertDocuments = ({ alertId, documents }) => {
               Button,
               {
                 variant: "outline",
-                onClick: handleCancelUpload,
-                disabled: isUploading,
+                onClick: handleCancelNote,
+                disabled: isSubmitting,
                 className: "flex-1",
                 children: "Cancel"
               }
@@ -520,10 +678,10 @@ var AlertDocuments = ({ alertId, documents }) => {
             /* @__PURE__ */ jsx(
               Button,
               {
-                onClick: handleUploadSubmit,
-                disabled: isUploading,
+                onClick: handleAddNote,
+                disabled: isSubmitting || !newNote.trim(),
                 className: "flex-1",
-                children: isUploading ? "Uploading..." : "Upload"
+                children: isSubmitting ? "Adding..." : "Add Note"
               }
             )
           ] })
@@ -531,224 +689,280 @@ var AlertDocuments = ({ alertId, documents }) => {
       ] }),
       document.body
     ),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: "Uploaded Documents" }),
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: "Note History" }),
         /* @__PURE__ */ jsxs(
           Button,
           {
-            onClick: () => setShowUploadDialog(true),
+            onClick: () => setShowNoteDialog(true),
             variant: "ghost",
             size: "sm",
             className: "gap-2 text-primary hover:text-primary",
             children: [
-              /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4" }),
-              "Upload"
+              /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+              "Add Note"
             ]
           }
         )
       ] }),
-      documents.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(FileText, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
-        /* @__PURE__ */ jsx("p", { children: "No documents uploaded yet" })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: documents.map((doc) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "border rounded-lg hover:bg-muted/30 transition-colors overflow-hidden",
+      notes.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(MessageSquare, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+        /* @__PURE__ */ jsx("p", { children: "No notes yet" })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: notes.map((note) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "border rounded-lg p-4 bg-muted/30",
           children: [
-            isImageType(doc.name) && doc.url && /* @__PURE__ */ jsx("div", { className: "w-full bg-muted/50", children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: doc.url,
-                alt: doc.name,
-                className: "w-full h-48 object-cover"
-              }
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
-                !isImageType(doc.name) && /* @__PURE__ */ jsx("div", { className: cn(getFileTypeColor(doc.type)), children: getFileIcon(doc.type) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm truncate", children: doc.name }),
-                    /* @__PURE__ */ jsx("span", { className: cn("text-xs px-2 py-0.5 rounded-full bg-muted", getFileTypeColor(doc.type)), children: doc.type })
-                  ] }),
-                  doc.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground mt-1", children: doc.description }),
-                  /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: [
-                    doc.size,
-                    " \u2022 Uploaded by ",
-                    doc.uploadedBy,
-                    " \u2022 ",
-                    new Date(doc.uploadedAt).toLocaleDateString()
-                  ] })
-                ] })
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 mb-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-medium text-sm text-foreground", children: note.user }),
+                /* @__PURE__ */ jsx(Badge, { variant: note.type === "RFI Note" ? "default" : "outline", children: note.type })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    className: "h-8 w-8 p-0",
-                    onClick: () => toast({ title: "Preview", description: `Viewing ${doc.name}` }),
-                    children: /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    className: "h-8 w-8 p-0",
-                    onClick: () => toast({ title: "Download", description: `Downloading ${doc.name}` }),
-                    children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" })
-                  }
-                ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: note.timestamp }),
                 /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: "ghost",
                     size: "sm",
                     className: "h-8 w-8 p-0 text-muted-foreground hover:text-foreground",
-                    onClick: () => toast({ title: "Delete", description: `Deleted ${doc.name}` }),
+                    onClick: () => handleDeleteNote(note.id, note.content),
                     children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
                   }
                 )
               ] })
-            ] })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: note.content })
           ]
         },
-        doc.id
+        note.id
       )) })
     ] })
   ] });
 };
-var badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+var inputVariants = cva(
+  "flex w-full rounded-md bg-form-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground transition-form",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-        success: "border-transparent bg-success text-success-foreground hover:bg-success/80",
-        warning: "border-transparent bg-warning text-warning-foreground hover:bg-warning/80",
-        // Business type specific variants
-        business: "border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300",
-        individual: "border-green-200 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950 dark:text-green-300",
-        government: "border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300",
-        nonprofit: "border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-300",
-        // Business entity type variants
-        corporation: "border-slate-200 bg-slate-50 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300",
-        llc: "border-teal-200 bg-teal-50 text-teal-700 hover:bg-teal-100 dark:border-teal-800 dark:bg-teal-950 dark:text-teal-300",
-        partnership: "border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-800 dark:bg-indigo-950 dark:text-indigo-300",
-        sole_proprietorship: "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300",
-        // Status variants
-        active: "border-green-200 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950 dark:text-green-300",
-        inactive: "border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950 dark:text-red-300",
-        pending: "border-yellow-200 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300",
-        suspended: "border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300",
-        // Alert type subtle variants
-        "alert-ofac": "border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950 dark:text-red-300 font-medium",
-        "alert-dual": "border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300 font-medium",
-        "alert-monitoring": "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300 font-medium",
-        "alert-error": "border-rose-200 bg-rose-50 text-rose-700 hover:bg-rose-100 dark:border-rose-800 dark:bg-rose-950 dark:text-rose-300 font-medium"
+        default: "border border-form-border focus-visible:border-form-border-focus focus-visible:outline-none focus-visible:shadow-form-focus",
+        error: "border border-form-border-error focus-visible:border-form-border-error focus-visible:outline-none focus-visible:shadow-form-error",
+        success: "border border-form-border-success focus-visible:border-form-border-success focus-visible:outline-none",
+        disabled: "border border-form-border bg-muted cursor-not-allowed opacity-50",
+        readonly: "border border-form-border bg-muted/50 cursor-default"
+      },
+      size: {
+        default: "h-10",
+        sm: "h-9",
+        lg: "h-11"
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "default",
+      size: "default"
     }
   }
 );
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-var NOTE_TYPE_OPTIONS = [
-  { value: "RFI Note", label: "RFI Note" },
-  { value: "Internal Note", label: "Internal Note" }
-];
-var AlertNotes = ({ alertId, notes }) => {
-  const [showNoteDialog, setShowNoteDialog] = useState(false);
-  const [newNote, setNewNote] = useState("");
-  const [noteType, setNoteType] = useState("RFI Note");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const resetForm = () => {
-    setNewNote("");
-    setNoteType("RFI Note");
-  };
-  const handleCancelNote = () => {
-    setShowNoteDialog(false);
-    resetForm();
+var EnhancedInput = React13.forwardRef(
+  ({ className, variant, size, label, hint, error, success, isLoading, ...props }, ref) => {
+    const inputVariant = error ? "error" : success ? "success" : props.disabled ? "disabled" : props.readOnly ? "readonly" : variant;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      label && /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [
+        label,
+        props.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: cn(inputVariants({ variant: inputVariant, size, className })),
+            ref,
+            ...props
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-primary border-t-transparent" }) })
+      ] }),
+      hint && !error && !success && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hint }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error }),
+      success && /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: success })
+    ] });
+  }
+);
+EnhancedInput.displayName = "EnhancedInput";
+var AlertDocuments = ({ alertId, documents }) => {
+  const [isUploading, setIsUploading] = useState(false);
+  const [showUploadDialog, setShowUploadDialog] = useState(false);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [documentName, setDocumentName] = useState("");
+  const [description, setDescription] = useState("");
+  const [documentType, setDocumentType] = useState("");
+  const handleFileSelect = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setSelectedFile(file);
+    setDocumentName(file.name);
   };
-  const handleAddNote = async () => {
-    if (!newNote.trim()) {
+  const handleUploadSubmit = () => {
+    if (!selectedFile || !documentName || !documentType) {
       toast({
-        title: "Error",
-        description: "Please enter a note before submitting",
+        title: "Missing Information",
+        description: "Please fill in all required fields",
         variant: "destructive"
       });
       return;
     }
-    setIsSubmitting(true);
+    setIsUploading(true);
     setTimeout(() => {
+      ({
+        size: `${(selectedFile.size / 1024 / 1024).toFixed(1)} MB`,
+        uploadedAt: (/* @__PURE__ */ new Date()).toISOString()
+      });
       toast({
-        title: "Note Added",
-        description: "Your note has been added successfully"
+        title: "Upload Successful",
+        description: `${documentName} uploaded successfully`
       });
-      setShowNoteDialog(false);
+      setIsUploading(false);
+      setShowUploadDialog(false);
       resetForm();
-      setIsSubmitting(false);
-    }, 500);
+    }, 1e3);
   };
-  const handleDeleteNote = (noteId, noteContent) => {
-    toast({
-      title: "Note Deleted",
-      description: `Note deleted successfully`
-    });
-    console.log("Deleting note:", noteId);
+  const resetForm = () => {
+    setSelectedFile(null);
+    setDocumentName("");
+    setDescription("");
+    setDocumentType("");
+    const fileInput = document.getElementById("file-upload");
+    if (fileInput) fileInput.value = "";
+  };
+  const handleCancelUpload = () => {
+    setShowUploadDialog(false);
+    resetForm();
+  };
+  const isImageType = (name) => {
+    const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp"];
+    return imageExtensions.some((ext) => name.toLowerCase().endsWith(ext));
+  };
+  const getFileIcon = (type) => {
+    return /* @__PURE__ */ jsx(FileText, { className: "h-5 w-5" });
+  };
+  const getFileTypeColor = (type) => {
+    switch (type.toUpperCase()) {
+      case "PDF":
+        return "text-red-500";
+      case "DOCX":
+      case "DOC":
+        return "text-blue-500";
+      case "XLSX":
+      case "XLS":
+        return "text-green-500";
+      case "JPG":
+      case "JPEG":
+      case "PNG":
+        return "text-purple-500";
+      default:
+        return "text-muted-foreground";
+    }
   };
+  const documentTypeOptions = [
+    { value: "ID_DOCUMENT_FRONT", label: "ID Document (Front)" },
+    { value: "ID_DOCUMENT_BACK", label: "ID Document (Back)" },
+    { value: "PASSPORT", label: "Passport" },
+    { value: "PROOF_OF_ADDRESS", label: "Proof of Address" },
+    { value: "BANK_STATEMENT", label: "Bank Statement" },
+    { value: "BUSINESS_LICENSE", label: "Business License" },
+    { value: "TAX_DOCUMENT", label: "Tax Document" },
+    { value: "OTHER", label: "Other" }
+  ];
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    showNoteDialog && createPortal(
+    showUploadDialog && createPortal(
       /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[100] flex items-center justify-center p-4", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
-            onClick: handleCancelNote
+            onClick: handleCancelUpload
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "relative bg-card border rounded-lg shadow-lg max-w-lg w-full p-6 z-[101]", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold", children: "Add Note" }),
+            /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold", children: "Upload Document" }),
             /* @__PURE__ */ jsx(
               Button,
               {
                 variant: "ghost",
                 size: "sm",
                 className: "h-8 w-8 p-0",
-                onClick: handleCancelNote,
+                onClick: handleCancelUpload,
                 children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
               }
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsx(
-              EnhancedSelect,
-              {
-                label: "Note Type",
-                value: noteType,
-                onValueChange: (value) => setNoteType(value),
-                options: NOTE_TYPE_OPTIONS
+            /* @__PURE__ */ jsxs("div", { className: "border-2 border-dashed rounded-lg p-6 text-center hover:border-primary/50 transition-colors", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "file",
+                  id: "file-upload-dialog",
+                  className: "hidden",
+                  onChange: handleFileSelect,
+                  disabled: isUploading
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  htmlFor: "file-upload-dialog",
+                  className: cn(
+                    "cursor-pointer flex flex-col items-center gap-2",
+                    isUploading && "opacity-50 cursor-not-allowed"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: selectedFile ? "Change file" : "Click to upload or drag and drop" }),
+                      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "PDF, DOC, DOCX, JPG, PNG up to 10MB" })
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            selectedFile && /* @__PURE__ */ jsxs("div", { className: "p-3 bg-muted/50 rounded-lg", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Selected file:" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: selectedFile.name }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                (selectedFile.size / 1024 / 1024).toFixed(2),
+                " MB"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              EnhancedInput,
+              {
+                label: "Document name",
+                value: documentName,
+                onChange: (e) => setDocumentName(e.target.value),
+                placeholder: "Enter document name"
               }
             ),
             /* @__PURE__ */ jsx(
               EnhancedTextarea,
               {
-                label: "Note",
-                placeholder: "Enter your note here...",
-                value: newNote,
-                onChange: (e) => setNewNote(e.target.value),
-                rows: 6
+                label: "Description",
+                value: description,
+                onChange: (e) => setDescription(e.target.value),
+                placeholder: "Enter document description (optional)",
+                rows: 3
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              EnhancedSelect,
+              {
+                label: "Document type",
+                value: documentType,
+                onValueChange: setDocumentType,
+                placeholder: "Select document type",
+                options: documentTypeOptions
               }
             )
           ] }),
@@ -757,8 +971,8 @@ var AlertNotes = ({ alertId, notes }) => {
               Button,
               {
                 variant: "outline",
-                onClick: handleCancelNote,
-                disabled: isSubmitting,
+                onClick: handleCancelUpload,
+                disabled: isUploading,
                 className: "flex-1",
                 children: "Cancel"
               }
@@ -766,10 +980,10 @@ var AlertNotes = ({ alertId, notes }) => {
             /* @__PURE__ */ jsx(
               Button,
               {
-                onClick: handleAddNote,
-                disabled: isSubmitting || !newNote.trim(),
+                onClick: handleUploadSubmit,
+                disabled: isUploading,
                 className: "flex-1",
-                children: isSubmitting ? "Adding..." : "Add Note"
+                children: isUploading ? "Uploading..." : "Upload"
               }
             )
           ] })
@@ -777,311 +991,97 @@ var AlertNotes = ({ alertId, notes }) => {
       ] }),
       document.body
     ),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: "Note History" }),
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: "Uploaded Documents" }),
         /* @__PURE__ */ jsxs(
           Button,
           {
-            onClick: () => setShowNoteDialog(true),
+            onClick: () => setShowUploadDialog(true),
             variant: "ghost",
             size: "sm",
             className: "gap-2 text-primary hover:text-primary",
             children: [
-              /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
-              "Add Note"
+              /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4" }),
+              "Upload"
             ]
           }
         )
       ] }),
-      notes.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx(MessageSquare, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
-        /* @__PURE__ */ jsx("p", { children: "No notes yet" })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: notes.map((note) => /* @__PURE__ */ jsxs(
+      documents.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(FileText, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+        /* @__PURE__ */ jsx("p", { children: "No documents uploaded yet" })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: documents.map((doc) => /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "border rounded-lg p-4 bg-muted/30",
+          className: "border rounded-lg hover:bg-muted/30 transition-colors overflow-hidden",
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 mb-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("p", { className: "font-medium text-sm text-foreground", children: note.user }),
-                /* @__PURE__ */ jsx(Badge, { variant: note.type === "RFI Note" ? "default" : "outline", children: note.type })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: note.timestamp }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    className: "h-8 w-8 p-0 text-muted-foreground hover:text-foreground",
-                    onClick: () => handleDeleteNote(note.id, note.content),
-                    children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: note.content })
-          ]
-        },
-        note.id
-      )) })
-    ] })
-  ] });
-};
-var AlertTimeline = ({ events }) => {
-  const getIcon = (action) => {
-    if (action.includes("Created")) return /* @__PURE__ */ jsx(Circle, { className: "h-4 w-4" });
-    if (action.includes("Assigned")) return /* @__PURE__ */ jsx(UserPlus, { className: "h-4 w-4" });
-    if (action.includes("Updated") || action.includes("Modified")) return /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" });
-    if (action.includes("Closed") || action.includes("Resolved")) return /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" });
-    if (action.includes("Rejected")) return /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4" });
-    return /* @__PURE__ */ jsx(Circle, { className: "h-4 w-4" });
-  };
-  const getStatusColor = (status) => {
-    switch (status) {
-      case "Unassigned":
-        return "text-destructive";
-      case "Closed":
-        return "text-success";
-      case "In Progress":
-        return "text-warning";
-      default:
-        return "text-muted-foreground";
-    }
-  };
-  if (events.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-muted-foreground", children: "No timeline events yet" });
-  }
-  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: events.map((event, index) => /* @__PURE__ */ jsxs("div", { className: "relative pl-6 pb-3", children: [
-    index !== events.length - 1 && /* @__PURE__ */ jsx("div", { className: "absolute left-[7px] top-5 bottom-0 w-[2px] bg-border" }),
-    /* @__PURE__ */ jsx("div", { className: cn(
-      "absolute left-0 top-0 flex-none",
-      getStatusColor(event.status)
-    ), children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4", children: getIcon(event.action) }) }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-foreground", children: event.action }),
-      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-        "by ",
-        event.user
-      ] }),
-      event.details && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: event.details }),
-      event.status && /* @__PURE__ */ jsxs("p", { className: cn("text-xs font-medium", getStatusColor(event.status)), children: [
-        "Status: ",
-        event.status
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70 pt-0.5", children: event.timestamp })
-    ] })
-  ] }, event.id)) });
-};
-var cardVariants = cva(
-  "rounded-lg border bg-card text-card-foreground transition-all duration-200",
-  {
-    variants: {
-      variant: {
-        default: "shadow-sm",
-        elevated: "shadow-md hover:shadow-lg",
-        outlined: "border-2 shadow-none",
-        ghost: "border-transparent shadow-none bg-transparent",
-        subtle: "border-border/75 shadow-none"
-      },
-      size: {
-        sm: "p-3",
-        md: "p-4",
-        lg: "p-6",
-        none: "p-0"
-      },
-      fullHeight: {
-        true: "h-full flex flex-col",
-        false: ""
-      },
-      interactive: {
-        true: "cursor-pointer hover:shadow-md hover:scale-[1.02]",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "none",
-      fullHeight: false,
-      interactive: false
-    }
-  }
-);
-var Card = React13.forwardRef(
-  ({ className, variant, size, fullHeight, interactive, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardVariants({ variant, size, fullHeight, interactive }), className),
-      ...props
-    }
-  )
-);
-Card.displayName = "Card";
-var cardHeaderVariants = cva(
-  "flex flex-col space-y-1.5",
-  {
-    variants: {
-      size: {
-        sm: "px-3 pt-3 pb-2",
-        md: "px-4 pt-4 pb-3",
-        lg: "px-6 pt-6 pb-4"
-      },
-      align: {
-        start: "items-start",
-        center: "items-center",
-        end: "items-end"
-      },
-      direction: {
-        row: "flex-row justify-between items-center space-y-0 space-x-4",
-        column: "flex-col space-y-1.5"
-      }
-    },
-    defaultVariants: {
-      size: "lg",
-      align: "start",
-      direction: "column"
-    }
-  }
-);
-var CardHeader = React13.forwardRef(
-  ({ className, size, align, direction, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardHeaderVariants({ size, align, direction }), className),
-      ...props
-    }
-  )
-);
-CardHeader.displayName = "CardHeader";
-var cardTitleVariants = cva(
-  "font-semibold leading-none tracking-tight",
-  {
-    variants: {
-      size: {
-        sm: "text-base",
-        md: "text-lg",
-        lg: "text-xl"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var CardTitle = React13.forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
-    "h3",
-    {
-      ref,
-      className: cn(cardTitleVariants({ size }), className),
-      ...props
-    }
-  )
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-CardDescription.displayName = "CardDescription";
-var cardContentVariants = cva(
-  "",
-  {
-    variants: {
-      size: {
-        sm: "px-3 pb-2",
-        md: "px-4 pb-3",
-        lg: "px-6 pb-4"
-      },
-      fullHeight: {
-        true: "flex-1",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "lg",
-      fullHeight: false
-    }
-  }
-);
-var CardContent = React13.forwardRef(
-  ({ className, size, fullHeight, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardContentVariants({ size, fullHeight }), className),
-      ...props
-    }
-  )
-);
-CardContent.displayName = "CardContent";
-var cardFooterVariants = cva(
-  "flex items-center pt-0",
-  {
-    variants: {
-      size: {
-        sm: "p-3 pt-0",
-        md: "p-4 pt-0",
-        lg: "p-6 pt-0"
-      },
-      justify: {
-        start: "justify-start",
-        center: "justify-center",
-        end: "justify-end",
-        between: "justify-between"
-      }
-    },
-    defaultVariants: {
-      size: "lg",
-      justify: "start"
-    }
-  }
-);
-var CardFooter = React13.forwardRef(
-  ({ className, size, justify, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardFooterVariants({ size, justify }), className),
-      ...props
-    }
-  )
-);
-CardFooter.displayName = "CardFooter";
-var FormCard = React13.forwardRef(
-  ({ title, description, children, headerActions, className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxs(
-    Card,
-    {
-      ref,
-      variant,
-      fullHeight: true,
-      className: cn("", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(
-          CardHeader,
-          {
-            direction: headerActions ? "row" : "column",
-            size: "md",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: /* @__PURE__ */ jsx(CardTitle, { size: "md", children: title }) }),
-              headerActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerActions })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(CardContent, { size: "md", fullHeight: true, children })
-      ]
-    }
-  )
-);
-FormCard.displayName = "FormCard";
+            isImageType(doc.name) && doc.url && /* @__PURE__ */ jsx("div", { className: "w-full bg-muted/50", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: doc.url,
+                alt: doc.name,
+                className: "w-full h-48 object-cover"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+                !isImageType(doc.name) && /* @__PURE__ */ jsx("div", { className: cn(getFileTypeColor(doc.type)), children: getFileIcon(doc.type) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm truncate", children: doc.name }),
+                    /* @__PURE__ */ jsx("span", { className: cn("text-xs px-2 py-0.5 rounded-full bg-muted", getFileTypeColor(doc.type)), children: doc.type })
+                  ] }),
+                  doc.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground mt-1", children: doc.description }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: [
+                    doc.size,
+                    " \u2022 Uploaded by ",
+                    doc.uploadedBy,
+                    " \u2022 ",
+                    new Date(doc.uploadedAt).toLocaleDateString()
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-8 w-8 p-0",
+                    onClick: () => toast({ title: "Preview", description: `Viewing ${doc.name}` }),
+                    children: /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-8 w-8 p-0",
+                    onClick: () => toast({ title: "Download", description: `Downloading ${doc.name}` }),
+                    children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-8 w-8 p-0 text-muted-foreground hover:text-foreground",
+                    onClick: () => toast({ title: "Delete", description: `Deleted ${doc.name}` }),
+                    children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        doc.id
+      )) })
+    ] })
+  ] });
+};
 var InfoField = ({ label, value, layout = "vertical", className }) => {
   if (layout === "horizontal") {
     return /* @__PURE__ */ jsxs("div", { className: `flex items-start gap-3 ${className || ""}`, children: [
@@ -1394,6 +1394,184 @@ var ContextSection = ({ alert }) => {
     ] }) })
   ] });
 };
+var EditableInfoField = ({
+  label,
+  value,
+  options,
+  onChange,
+  placeholder = "Select...",
+  renderValue,
+  className
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const handleChange = (newValue) => {
+    onChange(newValue);
+    setIsEditing(false);
+  };
+  if (isEditing) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+      EnhancedSelect,
+      {
+        label,
+        value: value || "",
+        onValueChange: handleChange,
+        options,
+        placeholder
+      }
+    ) });
+  }
+  const displayValue = value ? renderValue ? renderValue(value) : value : placeholder;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("cursor-pointer transition-colors hover:bg-muted/50 rounded-md -mx-2 px-2 -my-1 py-1", className),
+      onClick: () => setIsEditing(true),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setIsEditing(true);
+        }
+      },
+      children: /* @__PURE__ */ jsx(InfoField, { label, value: displayValue })
+    }
+  );
+};
+
+// src/lib/utils/alert-utils.ts
+var getTypeBadgeVariant = (type) => {
+  switch (type) {
+    case "Ofac":
+      return "alert-ofac";
+    case "Dual Approval":
+      return "alert-dual";
+    case "Transaction Monitoring":
+      return "alert-monitoring";
+    case "Transaction Processing Error":
+      return "alert-error";
+    default:
+      return "outline";
+  }
+};
+var getStatusColor = (status) => {
+  switch (status) {
+    case "Unassigned":
+      return "text-destructive";
+    case "Closed":
+      return "text-success";
+    case "In Progress":
+      return "text-warning";
+    default:
+      return "";
+  }
+};
+
+// src/lib/constants.ts
+var COUNTRY_OPTIONS = [
+  { value: "US", label: "United States" },
+  { value: "CA", label: "Canada" },
+  { value: "GB", label: "United Kingdom" },
+  { value: "DE", label: "Germany" },
+  { value: "FR", label: "France" }
+];
+var FI_ID_TYPE_OPTIONS = [
+  { value: "bic", label: "BIC" },
+  { value: "swift", label: "SWIFT" },
+  { value: "aba", label: "ABA" },
+  { value: "iban", label: "IBAN" },
+  { value: "routing", label: "Routing Number" }
+];
+var ADDRESS_TYPE_OPTIONS = {
+  FI: [
+    { value: "headquarters", label: "Headquarters" },
+    { value: "branch", label: "Branch Office" },
+    { value: "correspondent", label: "Correspondent Bank" }
+  ]
+};
+var RFI_STATUS_OPTIONS = [
+  { value: "Completed", label: "Completed" },
+  { value: "Provided", label: "Provided" },
+  { value: "Pending", label: "Pending" }
+];
+var ASSIGNEE_OPTIONS = [
+  { value: "John Smith", label: "John Smith" },
+  { value: "Sarah Johnson", label: "Sarah Johnson" },
+  { value: "Michael Chen", label: "Michael Chen" },
+  { value: "approverdev", label: "approverdev" },
+  { value: "Unassigned", label: "Unassigned" }
+];
+var AlertDetailView = ({
+  alert,
+  rfiStatus,
+  assignee,
+  onRfiStatusChange,
+  onAssigneeChange
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsx(
+        FormCard,
+        {
+          title: "Alert Information",
+          headerActions: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" }) }),
+          children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsx(InfoField, { label: "Alert ID", value: alert.id }),
+            /* @__PURE__ */ jsx(
+              InfoField,
+              {
+                label: "Type",
+                value: /* @__PURE__ */ jsx(Badge, { variant: getTypeBadgeVariant(alert.type), children: alert.type })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              InfoField,
+              {
+                label: "Status",
+                value: /* @__PURE__ */ jsx("span", { className: cn("font-medium", getStatusColor(alert.status)), children: alert.status })
+              }
+            ),
+            /* @__PURE__ */ jsx(InfoField, { label: "Created At", value: alert.createdAt }),
+            /* @__PURE__ */ jsx(
+              InfoField,
+              {
+                label: "Context Type",
+                value: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: alert.contextType })
+              }
+            ),
+            /* @__PURE__ */ jsx(InfoField, { label: "Context ID", value: alert.contextId || "N/A" }),
+            /* @__PURE__ */ jsx(
+              EditableInfoField,
+              {
+                label: "Assignee",
+                value: assignee,
+                options: ASSIGNEE_OPTIONS,
+                onChange: onAssigneeChange,
+                placeholder: "Unassigned"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              EditableInfoField,
+              {
+                label: "RFI Status",
+                value: rfiStatus,
+                options: RFI_STATUS_OPTIONS,
+                onChange: onRfiStatusChange,
+                placeholder: "Select status",
+                renderValue: (value) => /* @__PURE__ */ jsx(Badge, { variant: "success", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx(InfoField, { label: "Description", value: alert.description }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(ContextSection, { alert }),
+      /* @__PURE__ */ jsx(FormCard, { title: "Notes", children: /* @__PURE__ */ jsx(AlertNotes, { alertId: alert.id, notes: alert.notes || [] }) }),
+      /* @__PURE__ */ jsx(FormCard, { title: "Documents", children: /* @__PURE__ */ jsx(AlertDocuments, { alertId: alert.id, documents: alert.documents || [] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsx(FormCard, { title: "Status Timeline", className: "h-full", children: /* @__PURE__ */ jsx(AlertTimeline, { events: alert.timeline || [] }) }) })
+  ] });
+};
 
 // src/assets/braid-logo.png
 var braid_logo_default = "./braid-logo-343BOQZ2.png";
@@ -2911,9 +3089,14 @@ var businessProfileSchema = z.object({
   dbaName: z.string().optional(),
   businessType: z.string().min(1, "Business type is required"),
   taxId: z.string().min(1, "Tax ID is required"),
-  businessPhone: z.string().min(1, "Business phone is required"),
-  businessEmail: z.string().email("Invalid email format"),
+  formationDate: z.string().optional(),
+  idType: z.string().optional(),
+  incorporationState: z.string().optional(),
   website: z.string().url("Invalid URL format").optional().or(z.literal("")),
+  contactFirstName: z.string().optional(),
+  contactLastName: z.string().optional(),
+  contactEmail: z.string().optional(),
+  contactPhone: z.string().optional(),
   address: addressSchema
 });
 z.object({
@@ -3057,29 +3240,6 @@ var ACHTransferSection = ({ isEditing, onToggleEdit, className, hideActions }) =
     }
   );
 };
-
-// src/lib/constants.ts
-var COUNTRY_OPTIONS = [
-  { value: "US", label: "United States" },
-  { value: "CA", label: "Canada" },
-  { value: "GB", label: "United Kingdom" },
-  { value: "DE", label: "Germany" },
-  { value: "FR", label: "France" }
-];
-var FI_ID_TYPE_OPTIONS = [
-  { value: "bic", label: "BIC" },
-  { value: "swift", label: "SWIFT" },
-  { value: "aba", label: "ABA" },
-  { value: "iban", label: "IBAN" },
-  { value: "routing", label: "Routing Number" }
-];
-var ADDRESS_TYPE_OPTIONS = {
-  FI: [
-    { value: "headquarters", label: "Headquarters" },
-    { value: "branch", label: "Branch Office" },
-    { value: "correspondent", label: "Correspondent Bank" }
-  ]
-};
 var AddressForm = ({
   title,
   description,
@@ -3624,8 +3784,9 @@ var defaultBusinessProfile = {
   dbaName: "ACME Tech",
   businessType: "corporation",
   taxId: "12-3456789",
-  businessPhone: "+1 (555) 123-4567",
-  businessEmail: "contact@acme.com",
+  formationDate: "2020-01-15",
+  idType: "EIN",
+  incorporationState: "Delaware",
   website: "https://acme.com",
   address: {
     streetAddress: "123 Business Avenue",
@@ -3652,75 +3813,176 @@ var BusinessProfileCard = ({
     onToggleEdit,
     onSave: onDataChange
   });
-  const editContent = /* @__PURE__ */ jsx(FormProvider, { form, children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-    /* @__PURE__ */ jsx(
-      FormInput,
-      {
-        name: "legalName",
-        label: "Legal Name",
-        placeholder: "Enter legal business name",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FormInput,
-      {
-        name: "dbaName",
-        label: "DBA Name",
-        placeholder: "Enter doing business as name"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FormSelect,
-      {
-        name: "businessType",
-        label: "Business Type",
-        placeholder: "Select business type",
-        options: [
-          { value: "corporation", label: "Corporation" },
-          { value: "llc", label: "LLC" },
-          { value: "partnership", label: "Partnership" },
-          { value: "sole_proprietorship", label: "Sole Proprietorship" }
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FormInput,
-      {
-        name: "taxId",
-        label: "Tax ID",
-        placeholder: "Enter tax identification number",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FormInput,
-      {
-        name: "businessPhone",
-        label: "Business Phone",
-        placeholder: "Enter business phone number",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FormInput,
-      {
-        name: "businessEmail",
-        label: "Business Email",
-        type: "email",
-        placeholder: "Enter business email",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FormInput,
-      {
-        name: "website",
-        label: "Website",
-        placeholder: "Enter website URL"
-      }
-    )
-  ] }) }) });
+  const editContent = /* @__PURE__ */ jsx(FormProvider, { form, children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "legalName",
+          label: "Legal Name",
+          placeholder: "Enter legal business name",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "dbaName",
+          label: "DBA Name",
+          placeholder: "Enter doing business as name"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormSelect,
+        {
+          name: "businessType",
+          label: "Business Type",
+          placeholder: "Select business type",
+          options: [
+            { value: "corporation", label: "Corporation" },
+            { value: "llc", label: "LLC" },
+            { value: "partnership", label: "Partnership" },
+            { value: "sole_proprietorship", label: "Sole Proprietorship" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "taxId",
+          label: "Tax ID",
+          placeholder: "Enter tax identification number",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "formationDate",
+          label: "Formation Date",
+          type: "date",
+          placeholder: "Enter formation date"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormSelect,
+        {
+          name: "idType",
+          label: "ID Type",
+          placeholder: "Select ID type",
+          options: [
+            { value: "ein", label: "EIN" },
+            { value: "ssn", label: "SSN" },
+            { value: "itin", label: "ITIN" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "incorporationState",
+          label: "Incorporation State",
+          placeholder: "Enter incorporation state"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "website",
+          label: "Website",
+          placeholder: "Enter website URL"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4", children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "address.streetAddress",
+          label: "Street Address",
+          placeholder: "Enter street address"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "address.apartment",
+          label: "Apartment, suite, or floor",
+          placeholder: "Enter apartment, suite, or floor"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "address.city",
+          label: "City",
+          placeholder: "Enter city"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "address.state",
+          label: "State",
+          placeholder: "Enter state"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "address.postalCode",
+          label: "Postal Code",
+          placeholder: "Enter postal code"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "address.country",
+          label: "Country Code",
+          placeholder: "Enter country code"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-muted-foreground mt-6", children: "Contact Person" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "contactFirstName",
+          label: "First Name",
+          placeholder: "Enter first name"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "contactLastName",
+          label: "Last Name",
+          placeholder: "Enter last name"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "contactEmail",
+          label: "Email",
+          type: "email",
+          placeholder: "Enter email"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "contactPhone",
+          label: "Phone Number",
+          placeholder: "Enter phone number"
+        }
+      )
+    ] })
+  ] }) });
   const formValues = form.watch();
   const viewContent = /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
@@ -3732,10 +3994,30 @@ var BusinessProfileCard = ({
       /* @__PURE__ */ jsx(InfoField, { label: "Tax ID", value: formValues?.taxId, layout: "horizontal" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsx(InfoField, { label: "Business Phone", value: formValues?.businessPhone, layout: "horizontal" }),
-      /* @__PURE__ */ jsx(InfoField, { label: "Business Email", value: formValues?.businessEmail, layout: "horizontal" })
+      /* @__PURE__ */ jsx(InfoField, { label: "Formation Date", value: formValues?.formationDate || "2020-01-15", layout: "horizontal" }),
+      /* @__PURE__ */ jsx(InfoField, { label: "ID Type", value: formValues?.idType || "EIN", layout: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx(InfoField, { label: "Incorporation State", value: formValues?.incorporationState || "Delaware", layout: "horizontal" }),
+      /* @__PURE__ */ jsx(InfoField, { label: "Website", value: formValues?.website, layout: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      InfoField,
+      {
+        label: "Address",
+        value: formValues?.address ? `${formValues.address.streetAddress}${formValues.address.apartment ? ", " + formValues.address.apartment : ""}, ${formValues.address.city}, ${formValues.address.state} ${formValues.address.postalCode}, ${formValues.address.country}` : "123 Business Avenue, Suite 100, New York, NY 10001, US",
+        layout: "horizontal"
+      }
+    ),
+    /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-muted-foreground mt-6", children: "Contact Person" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx(InfoField, { label: "First Name", value: formValues?.contactFirstName || "John", layout: "horizontal" }),
+      /* @__PURE__ */ jsx(InfoField, { label: "Last Name", value: formValues?.contactLastName || "Smith", layout: "horizontal" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsx(InfoField, { label: "Website", value: formValues?.website, layout: "horizontal" }) })
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx(InfoField, { label: "Email", value: formValues?.contactEmail || "john.smith@acme.com", layout: "horizontal" }),
+      /* @__PURE__ */ jsx(InfoField, { label: "Phone Number", value: formValues?.contactPhone || "+1 (555) 123-4567", layout: "horizontal" })
+    ] })
   ] });
   return /* @__PURE__ */ jsx(
     EditableFormCard,
@@ -3753,30 +4035,75 @@ var BusinessProfileCard = ({
     }
   );
 };
+var mockBusinessTimeline = [
+  {
+    id: "1",
+    action: "Business Created",
+    user: "admin",
+    details: "Initial business setup",
+    status: "Active",
+    timestamp: "2025-08-03 10:30:00"
+  },
+  {
+    id: "2",
+    action: "Profile Updated",
+    user: "admin",
+    details: "Updated business information",
+    timestamp: "2025-09-05 14:22:00"
+  },
+  {
+    id: "3",
+    action: "OFAC Check Completed",
+    user: "System",
+    details: "Automated compliance check",
+    status: "Verified",
+    timestamp: "2025-09-05 14:30:00"
+  }
+];
 var BusinessStatusCard = ({ isEditing, onToggleEdit, className }) => {
+  const getIcon = (action) => {
+    if (action.includes("Created")) return /* @__PURE__ */ jsx(Circle, { className: "h-4 w-4" });
+    if (action.includes("Assigned")) return /* @__PURE__ */ jsx(UserPlus, { className: "h-4 w-4" });
+    if (action.includes("Updated") || action.includes("Modified") || action.includes("Check")) return /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" });
+    if (action.includes("Completed") || action.includes("Verified")) return /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsx(Circle, { className: "h-4 w-4" });
+  };
+  const getStatusColor2 = (status) => {
+    switch (status) {
+      case "Active":
+      case "Verified":
+        return "text-success";
+      case "Pending":
+        return "text-warning";
+      default:
+        return "text-muted-foreground";
+    }
+  };
   return /* @__PURE__ */ jsx(
     FormCard,
     {
-      title: "Business Status & Records",
+      title: "Timeline",
       className,
-      headerActions: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onToggleEdit, children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onToggleEdit, children: "Save" })
-      ] }) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onToggleEdit, className: "text-primary hover:text-primary/80 hover:bg-primary/10", children: /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" }) }) }),
-      children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsx(InfoField, { label: "Status", value: /* @__PURE__ */ jsx(StatusBadge, { status: "ACTIVE" }), layout: "horizontal" }),
-          /* @__PURE__ */ jsx(InfoField, { label: "CIP Status", value: "NOT_START", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsx(InfoField, { label: "Created Date", value: "2025-08-03", layout: "horizontal" }),
-          /* @__PURE__ */ jsx(InfoField, { label: "Updated Date", value: "2025-09-05", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsx(InfoField, { label: "Last OFAC Date", value: "2025-09-05", layout: "horizontal" }),
-          /* @__PURE__ */ jsx(InfoField, { label: "Last OFAC Status", value: "View Status", layout: "horizontal", className: "text-primary cursor-pointer" })
+      children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: mockBusinessTimeline.map((event, index) => /* @__PURE__ */ jsxs("div", { className: "relative pl-6 pb-3", children: [
+        index !== mockBusinessTimeline.length - 1 && /* @__PURE__ */ jsx("div", { className: "absolute left-[7px] top-5 bottom-0 w-[2px] bg-border" }),
+        /* @__PURE__ */ jsx("div", { className: cn(
+          "absolute left-0 top-0 flex-none",
+          getStatusColor2(event.status)
+        ), children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4", children: getIcon(event.action) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-foreground", children: event.action }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            "by ",
+            event.user
+          ] }),
+          event.details && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: event.details }),
+          event.status && /* @__PURE__ */ jsxs("p", { className: cn("text-xs font-medium", getStatusColor2(event.status)), children: [
+            "Status: ",
+            event.status
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/70 pt-0.5", children: event.timestamp })
         ] })
-      ] })
+      ] }, event.id)) })
     }
   );
 };
@@ -3801,18 +4128,27 @@ var ContactInfoCard = ({ isEditing, onToggleEdit, className }) => {
           /* @__PURE__ */ jsx(InfoField, { label: "Phone Number", value: "", layout: "horizontal" })
         ] }),
         /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-muted-foreground mt-6", children: "Mailing Address" }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3", children: [
-          /* @__PURE__ */ jsx(InfoField, { label: "Street Address", value: "", layout: "horizontal" }),
-          /* @__PURE__ */ jsx(InfoField, { label: "Apartment, suite, or floor", value: "", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsx(InfoField, { label: "City", value: "", layout: "horizontal" }),
-          /* @__PURE__ */ jsx(InfoField, { label: "State", value: "Alabama", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsx(InfoField, { label: "Postal Code", value: "", layout: "horizontal" }),
-          /* @__PURE__ */ jsx(InfoField, { label: "Country Code", value: "US", layout: "horizontal" })
-        ] })
+        isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3", children: [
+            /* @__PURE__ */ jsx(InfoField, { label: "Street Address", value: "", layout: "horizontal" }),
+            /* @__PURE__ */ jsx(InfoField, { label: "Apartment, suite, or floor", value: "", layout: "horizontal" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsx(InfoField, { label: "City", value: "", layout: "horizontal" }),
+            /* @__PURE__ */ jsx(InfoField, { label: "State", value: "Alabama", layout: "horizontal" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsx(InfoField, { label: "Postal Code", value: "", layout: "horizontal" }),
+            /* @__PURE__ */ jsx(InfoField, { label: "Country Code", value: "US", layout: "horizontal" })
+          ] })
+        ] }) : /* @__PURE__ */ jsx(
+          InfoField,
+          {
+            label: "Address",
+            value: "123 Business Avenue, Suite 100, New York, NY 10001, US",
+            layout: "horizontal"
+          }
+        )
       ] })
     }
   );
@@ -4601,6 +4937,75 @@ var ListPage = React13.forwardRef(
   }
 );
 ListPage.displayName = "ListPage";
+var StatementHeader = ({ data, onEdit }) => {
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { direction: "row", children: [
+      /* @__PURE__ */ jsx(CardTitle, { size: "md", children: "Statement Summary" }),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onEdit, children: [
+        /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4 mr-2" }),
+        "Edit"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+      /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Account",
+          value: data.account,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Product ID",
+          value: data.productId,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Program ID",
+          value: data.programId,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Start Date",
+          value: data.startDate,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "End Date",
+          value: data.endDate,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Starting Balance",
+          value: data.startingBalance,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Ending Balance",
+          value: data.endingBalance,
+          layout: "horizontal"
+        }
+      )
+    ] }) })
+  ] });
+};
 var ACHDetailsSection = ({ data }) => {
   const formatCurrency = (value) => {
     return new Intl.NumberFormat("en-US", {
@@ -4841,6 +5246,7 @@ function DataTable({
   sortBy,
   sortDirection,
   onSort,
+  onRowClick,
   loading = false,
   emptyMessage = "No data available",
   className
@@ -4878,7 +5284,7 @@ function DataTable({
       "th",
       {
         className: cn(
-          "h-12 px-4 text-left align-middle font-medium text-muted-foreground",
+          "px-3 py-2 text-left align-middle text-sm font-medium bg-muted/50",
           column.align === "center" && "text-center",
           column.align === "right" && "text-right",
           column.width && `w-[${column.width}]`
@@ -4888,7 +5294,7 @@ function DataTable({
           {
             variant: "ghost",
             size: "sm",
-            className: "h-auto p-0 font-medium hover:bg-transparent",
+            className: "h-auto p-0 text-sm font-medium hover:bg-transparent",
             onClick: () => handleSort(column.key),
             children: /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
               column.title,
@@ -4902,12 +5308,16 @@ function DataTable({
     /* @__PURE__ */ jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) }) : data.map((row, index) => /* @__PURE__ */ jsx(
       "tr",
       {
-        className: "border-b transition-colors hover:bg-muted/50",
+        className: cn(
+          "border-b transition-colors hover:bg-muted/50",
+          onRowClick && "cursor-pointer"
+        ),
+        onClick: () => onRowClick?.(row),
         children: columns.map((column) => /* @__PURE__ */ jsx(
           "td",
           {
             className: cn(
-              "p-4 align-middle",
+              "px-3 py-2 align-middle text-sm",
               column.align === "center" && "text-center",
               column.align === "right" && "text-right"
             ),
@@ -5140,50 +5550,6 @@ var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-var EditableInfoField = ({
-  label,
-  value,
-  options,
-  onChange,
-  placeholder = "Select...",
-  renderValue,
-  className
-}) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const handleChange = (newValue) => {
-    onChange(newValue);
-    setIsEditing(false);
-  };
-  if (isEditing) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
-      EnhancedSelect,
-      {
-        label,
-        value: value || "",
-        onValueChange: handleChange,
-        options,
-        placeholder
-      }
-    ) });
-  }
-  const displayValue = value ? renderValue ? renderValue(value) : value : placeholder;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("cursor-pointer transition-colors hover:bg-muted/50 rounded-md -mx-2 px-2 -my-1 py-1", className),
-      onClick: () => setIsEditing(true),
-      role: "button",
-      tabIndex: 0,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          setIsEditing(true);
-        }
-      },
-      children: /* @__PURE__ */ jsx(InfoField, { label, value: displayValue })
-    }
-  );
-};
 var EntityCard = React13.forwardRef(
   ({
     entity,
@@ -6305,22 +6671,10 @@ var mockAlerts = [
     description: "Transaction WIRE_DOMESTIC_CREDIT of $30,000.00 is flagged for velocity limit ..."
   }
 ];
-var RFI_STATUS_OPTIONS = [
-  { value: "Completed", label: "Completed" },
-  { value: "Provided", label: "Provided" },
-  { value: "Pending", label: "Pending" }
-];
-var ASSIGNEE_OPTIONS = [
-  { value: "John Smith", label: "John Smith" },
-  { value: "Sarah Johnson", label: "Sarah Johnson" },
-  { value: "Michael Chen", label: "Michael Chen" },
-  { value: "approverdev", label: "approverdev" },
-  { value: "Unassigned", label: "Unassigned" }
-];
-var AlertDetail = () => {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const alert = mockAlerts.find((a) => a.id === id);
+
+// src/hooks/useAlertDetail.ts
+var useAlertDetail = (id) => {
+  const alert = useMemo(() => mockAlerts.find((a) => a.id === id), [id]);
   const [rfiStatus, setRfiStatus] = useState(alert?.rfiStatus || "");
   const [assignee, setAssignee] = useState(alert?.assignee || "Unassigned");
   const handleRfiStatusChange = (newStatus) => {
@@ -6331,6 +6685,26 @@ var AlertDetail = () => {
     setAssignee(newAssignee);
     console.log("Assignee updated to:", newAssignee);
   };
+  return {
+    alert,
+    isLoading: false,
+    // Set to true when implementing real data fetching
+    rfiStatus,
+    assignee,
+    handleRfiStatusChange,
+    handleAssigneeChange
+  };
+};
+var AlertDetail = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const {
+    alert,
+    rfiStatus,
+    assignee,
+    handleRfiStatusChange,
+    handleAssigneeChange
+  } = useAlertDetail(id);
   if (!alert) {
     return /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-8", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mb-2", children: "Alert Not Found" }),
@@ -6342,32 +6716,6 @@ var AlertDetail = () => {
       /* @__PURE__ */ jsx(Button, { onClick: () => navigate("/alerts"), children: "Back to Alerts" })
     ] }) });
   }
-  const getTypeBadgeVariant = (type) => {
-    switch (type) {
-      case "Ofac":
-        return "alert-ofac";
-      case "Dual Approval":
-        return "alert-dual";
-      case "Transaction Monitoring":
-        return "alert-monitoring";
-      case "Transaction Processing Error":
-        return "alert-error";
-      default:
-        return "outline";
-    }
-  };
-  const getStatusColor = (status) => {
-    switch (status) {
-      case "Unassigned":
-        return "text-destructive";
-      case "Closed":
-        return "text-success";
-      case "In Progress":
-        return "text-warning";
-      default:
-        return "";
-    }
-  };
   return /* @__PURE__ */ jsx(
     PageLayout,
     {
@@ -6391,69 +6739,16 @@ var AlertDetail = () => {
           onClick: () => console.log("Close alert")
         }
       ],
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
-          /* @__PURE__ */ jsx(
-            FormCard,
-            {
-              title: "Alert Information",
-              headerActions: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" }) }),
-              children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ jsx(InfoField, { label: "Alert ID", value: alert.id }),
-                /* @__PURE__ */ jsx(
-                  InfoField,
-                  {
-                    label: "Type",
-                    value: /* @__PURE__ */ jsx(Badge, { variant: getTypeBadgeVariant(alert.type), children: alert.type })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  InfoField,
-                  {
-                    label: "Status",
-                    value: /* @__PURE__ */ jsx("span", { className: cn("font-medium", getStatusColor(alert.status)), children: alert.status })
-                  }
-                ),
-                /* @__PURE__ */ jsx(InfoField, { label: "Created At", value: alert.createdAt }),
-                /* @__PURE__ */ jsx(
-                  InfoField,
-                  {
-                    label: "Context Type",
-                    value: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: alert.contextType })
-                  }
-                ),
-                /* @__PURE__ */ jsx(InfoField, { label: "Context ID", value: alert.contextId || "N/A" }),
-                /* @__PURE__ */ jsx(
-                  EditableInfoField,
-                  {
-                    label: "Assignee",
-                    value: assignee,
-                    options: ASSIGNEE_OPTIONS,
-                    onChange: handleAssigneeChange,
-                    placeholder: "Unassigned"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  EditableInfoField,
-                  {
-                    label: "RFI Status",
-                    value: rfiStatus,
-                    options: RFI_STATUS_OPTIONS,
-                    onChange: handleRfiStatusChange,
-                    placeholder: "Select status",
-                    renderValue: (value) => /* @__PURE__ */ jsx(Badge, { variant: "success", children: value })
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx(InfoField, { label: "Description", value: alert.description }) })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(ContextSection, { alert }),
-          /* @__PURE__ */ jsx(FormCard, { title: "Notes", children: /* @__PURE__ */ jsx(AlertNotes, { alertId: alert.id, notes: alert.notes || [] }) }),
-          /* @__PURE__ */ jsx(FormCard, { title: "Documents", children: /* @__PURE__ */ jsx(AlertDocuments, { alertId: alert.id, documents: alert.documents || [] }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsx(FormCard, { title: "Status Timeline", className: "h-full", children: /* @__PURE__ */ jsx(AlertTimeline, { events: alert.timeline || [] }) }) })
-      ] })
+      children: /* @__PURE__ */ jsx(
+        AlertDetailView,
+        {
+          alert,
+          rfiStatus,
+          assignee,
+          onRfiStatusChange: handleRfiStatusChange,
+          onAssigneeChange: handleAssigneeChange
+        }
+      )
     }
   );
 };
@@ -6512,7 +6807,7 @@ var Alerts = () => {
     setFilteredAlerts(mockAlerts);
     setCurrentPage(1);
   };
-  const getTypeBadgeVariant = (type) => {
+  const getTypeBadgeVariant2 = (type) => {
     switch (type) {
       case "Ofac":
         return "alert-ofac";
@@ -6526,7 +6821,7 @@ var Alerts = () => {
         return "outline";
     }
   };
-  const getStatusColor = (status) => {
+  const getStatusColor2 = (status) => {
     switch (status) {
       case "Unassigned":
         return "text-destructive";
@@ -6667,146 +6962,573 @@ var Alerts = () => {
                 }
               )
             ] })
-          ] }),
-          /* @__PURE__ */ jsxs(SheetFooter, { className: "gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: resetFilters, children: "Reset Filters" }),
-            /* @__PURE__ */ jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
+          ] }),
+          /* @__PURE__ */ jsxs(SheetFooter, { className: "gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: resetFilters, children: "Reset Filters" }),
+            /* @__PURE__ */ jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
+          ] })
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 mt-4 rounded-lg border bg-card overflow-hidden flex flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed", children: [
+        /* @__PURE__ */ jsxs("colgroup", { children: [
+          /* @__PURE__ */ jsx("col", { className: "w-28" }),
+          /* @__PURE__ */ jsx("col", { className: "w-36" }),
+          /* @__PURE__ */ jsx("col", { className: "w-52" }),
+          /* @__PURE__ */ jsx("col", { className: "w-32" }),
+          /* @__PURE__ */ jsx("col", { className: "w-36" }),
+          /* @__PURE__ */ jsx("col", { className: "w-32" }),
+          /* @__PURE__ */ jsx("col", { className: "w-auto" })
+        ] }),
+        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-card z-10 shadow-sm", children: /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Alert ID" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Created At" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Type" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Status" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Context Type" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "RFI Status" }),
+          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Description" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: paginatedAlerts.map((alert) => /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: "border-b hover:bg-muted/50 transition-colors cursor-pointer",
+            onClick: () => navigate(`/alerts/${alert.id}`),
+            children: [
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-xs", children: alert.id }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-xs", children: alert.createdAt }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(Badge, { variant: getTypeBadgeVariant2(alert.type), className: "whitespace-nowrap", children: alert.type }) }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx("span", { className: cn("text-xs font-medium", getStatusColor2(alert.status)), children: alert.status }) }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "whitespace-nowrap", children: alert.contextType }) }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: alert.rfiStatus && /* @__PURE__ */ jsx(Badge, { variant: "success", className: "whitespace-nowrap", children: alert.rfiStatus }) }),
+              /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-xs truncate", children: alert.description })
+            ]
+          },
+          alert.id
+        )) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-none border-t bg-background py-3 px-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page:" }),
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1", children: [
+              rowsPerPage,
+              /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 rotate-90" })
+            ] }) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "bg-background z-50", children: [
+              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(100), children: "100" }),
+              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(200), children: "200" }),
+              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(500), children: "500" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+            "Page ",
+            currentPage,
+            " of ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "h-8 w-8 p-0",
+                onClick: () => handlePageChange(currentPage - 1),
+                disabled: currentPage === 1,
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "h-8 w-8 p-0",
+                onClick: () => handlePageChange(currentPage + 1),
+                disabled: currentPage === totalPages,
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    ] }) }) })
+  ] });
+};
+var Alerts_default = Alerts;
+
+// src/lib/mock-data/businesses-list-data.ts
+var mockBusinessesList = [
+  {
+    id: "8112488",
+    businessName: "RAPIDZ PAY INC",
+    productName: "Fiat Republic Canada Inc. FBO Rapidz Pay",
+    cipStatus: "verified",
+    status: "active",
+    created: "2025-10-05",
+    modified: "2025-10-05"
+  },
+  {
+    id: "8111609",
+    businessName: "Fern Hyper Growth Llc",
+    productName: "Atomic Brokerage FBO Atomic Brokerage Clients",
+    cipStatus: "verified",
+    status: "active",
+    created: "2025-10-04",
+    modified: "2025-10-04"
+  },
+  {
+    id: "8111026",
+    businessName: "ACEROSGALVANISADOS & PREPINTADOS",
+    productName: "SendFriend Inc FBO Conduit Pay Agent",
+    cipStatus: "not_start",
+    status: "active",
+    created: "2025-10-03",
+    modified: "2025-10-03"
+  },
+  {
+    id: "8110892",
+    businessName: "Tech Solutions Corp",
+    productName: "Digital Finance Inc FBO Tech Solutions",
+    cipStatus: "pending",
+    status: "active",
+    created: "2025-10-02",
+    modified: "2025-10-02"
+  },
+  {
+    id: "8110654",
+    businessName: "Global Trade Partners LLC",
+    productName: "Swift Transfer FBO Global Trade",
+    cipStatus: "verified",
+    status: "active",
+    created: "2025-10-01",
+    modified: "2025-10-01"
+  }
+];
+var Businesses = () => {
+  const navigate = useNavigate();
+  const [businesses, setBusinesses] = useState(mockBusinessesList);
+  const [filteredBusinesses, setFilteredBusinesses] = useState(mockBusinessesList);
+  const [sortBy, setSortBy] = useState("created");
+  const [sortDirection, setSortDirection] = useState("desc");
+  const [filters, setFilters] = useState({
+    name: "",
+    productName: "",
+    status: "",
+    createdDateStart: void 0,
+    createdDateEnd: void 0
+  });
+  const handleFilterChange = (field, value) => {
+    setFilters((prev) => ({ ...prev, [field]: value }));
+  };
+  const applyFilters = () => {
+    let filtered = businesses;
+    if (filters.name) {
+      filtered = filtered.filter(
+        (business) => business.businessName.toLowerCase().includes(filters.name.toLowerCase())
+      );
+    }
+    if (filters.productName) {
+      filtered = filtered.filter(
+        (business) => business.productName.toLowerCase().includes(filters.productName.toLowerCase())
+      );
+    }
+    if (filters.status) {
+      filtered = filtered.filter((business) => business.status === filters.status);
+    }
+    if (filters.createdDateStart) {
+      filtered = filtered.filter(
+        (business) => new Date(business.created) >= filters.createdDateStart
+      );
+    }
+    if (filters.createdDateEnd) {
+      filtered = filtered.filter(
+        (business) => new Date(business.created) <= filters.createdDateEnd
+      );
+    }
+    setFilteredBusinesses(filtered);
+  };
+  const resetFilters = () => {
+    setFilters({
+      name: "",
+      productName: "",
+      status: "",
+      createdDateStart: void 0,
+      createdDateEnd: void 0
+    });
+    setFilteredBusinesses(businesses);
+  };
+  const handleSort = (key) => {
+    if (sortBy === key) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortDirection("asc");
+    }
+  };
+  const handleRowClick = (business) => {
+    navigate(`/business/${business.id}`);
+  };
+  const columns = [
+    {
+      key: "id",
+      title: "Business ID",
+      sortable: true
+    },
+    {
+      key: "businessName",
+      title: "Business Name",
+      sortable: true
+    },
+    {
+      key: "productName",
+      title: "Product Name",
+      sortable: true,
+      render: (value) => /* @__PURE__ */ jsx("span", { className: "text-primary hover:underline cursor-pointer", children: value })
+    },
+    {
+      key: "cipStatus",
+      title: "CIP status",
+      sortable: true,
+      render: (value) => {
+        const status = value;
+        const variant = status === "verified" ? "success" : status === "pending" ? "warning" : "default";
+        const label = status === "verified" ? "Verified" : status === "pending" ? "Pending" : "Not Start";
+        return /* @__PURE__ */ jsx(Badge, { variant, children: label });
+      }
+    },
+    {
+      key: "status",
+      title: "Status",
+      sortable: true,
+      render: (value) => {
+        const status = value;
+        const variant = status === "active" ? "success" : "default";
+        const label = status.charAt(0).toUpperCase() + status.slice(1);
+        return /* @__PURE__ */ jsx(Badge, { variant, children: label });
+      }
+    },
+    {
+      key: "created",
+      title: "Created",
+      sortable: true
+    },
+    {
+      key: "modified",
+      title: "Modified",
+      sortable: true
+    }
+  ];
+  const sortedBusinesses = [...filteredBusinesses].sort((a, b) => {
+    const aValue = a[sortBy];
+    const bValue = b[sortBy];
+    if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
+    if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
+    return 0;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-screen bg-gradient-subtle", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-4 max-w-none", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-foreground", children: "Businesses" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: "Manage business entities and their configurations" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(Sheet, { children: [
+          /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "gap-2", children: [
+            /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+            "Filters"
+          ] }) }),
+          /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-xl overflow-y-auto", children: [
+            /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Business Filters" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-6 py-6", children: [
+              /* @__PURE__ */ jsx(
+                EnhancedInput,
+                {
+                  label: "Name",
+                  value: filters.name,
+                  onChange: (e) => handleFilterChange("name", e.target.value),
+                  placeholder: "Enter business name"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                EnhancedInput,
+                {
+                  label: "Product Name",
+                  value: filters.productName,
+                  onChange: (e) => handleFilterChange("productName", e.target.value),
+                  placeholder: "Enter product name"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                EnhancedSelect,
+                {
+                  label: "Status",
+                  value: filters.status,
+                  onValueChange: (value) => handleFilterChange("status", value),
+                  placeholder: "Select status",
+                  options: [
+                    { value: "active", label: "Active" },
+                    { value: "inactive", label: "Inactive" },
+                    { value: "suspended", label: "Suspended" }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Created Date Start" }),
+                  /* @__PURE__ */ jsxs(Popover, { children: [
+                    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: "outline",
+                        className: cn(
+                          "w-full justify-start text-left font-normal",
+                          !filters.createdDateStart && "text-muted-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
+                          filters.createdDateStart ? format(filters.createdDateStart, "MM/dd/yyyy") : /* @__PURE__ */ jsx("span", { children: "MM/DD/YYYY" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsx(
+                      Calendar,
+                      {
+                        mode: "single",
+                        selected: filters.createdDateStart,
+                        onSelect: (date) => handleFilterChange("createdDateStart", date),
+                        initialFocus: true,
+                        className: "pointer-events-auto"
+                      }
+                    ) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Created Date End" }),
+                  /* @__PURE__ */ jsxs(Popover, { children: [
+                    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: "outline",
+                        className: cn(
+                          "w-full justify-start text-left font-normal",
+                          !filters.createdDateEnd && "text-muted-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
+                          filters.createdDateEnd ? format(filters.createdDateEnd, "MM/dd/yyyy") : /* @__PURE__ */ jsx("span", { children: "MM/DD/YYYY" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsx(
+                      Calendar,
+                      {
+                        mode: "single",
+                        selected: filters.createdDateEnd,
+                        onSelect: (date) => handleFilterChange("createdDateEnd", date),
+                        initialFocus: true,
+                        className: "pointer-events-auto"
+                      }
+                    ) })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(SheetFooter, { className: "gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: resetFilters, children: "Reset Filters" }),
+              /* @__PURE__ */ jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
+            ] })
           ] })
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => navigate("/business/create"), children: "Create Business" })
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 mt-4 rounded-lg border bg-card overflow-hidden flex flex-col", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed", children: [
-        /* @__PURE__ */ jsxs("colgroup", { children: [
-          /* @__PURE__ */ jsx("col", { className: "w-28" }),
-          /* @__PURE__ */ jsx("col", { className: "w-36" }),
-          /* @__PURE__ */ jsx("col", { className: "w-52" }),
-          /* @__PURE__ */ jsx("col", { className: "w-32" }),
-          /* @__PURE__ */ jsx("col", { className: "w-36" }),
-          /* @__PURE__ */ jsx("col", { className: "w-32" }),
-          /* @__PURE__ */ jsx("col", { className: "w-auto" })
-        ] }),
-        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-card z-10 shadow-sm", children: /* @__PURE__ */ jsxs("tr", { className: "border-b", children: [
-          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Alert ID" }),
-          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Created At" }),
-          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Type" }),
-          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Status" }),
-          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Context Type" }),
-          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "RFI Status" }),
-          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Description" })
-        ] }) }),
-        /* @__PURE__ */ jsx("tbody", { children: paginatedAlerts.map((alert) => /* @__PURE__ */ jsxs(
-          "tr",
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 mt-4 overflow-auto", children: /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        columns,
+        data: sortedBusinesses,
+        sortBy,
+        sortDirection,
+        onSort: handleSort,
+        onRowClick: handleRowClick
+      }
+    ) }) }) })
+  ] });
+};
+var Businesses_default = Businesses;
+var businessAccounts = [
+  {
+    id: "acc-001",
+    name: "Primary Operating Account",
+    number: "****7890",
+    type: "checking",
+    status: "active",
+    balance: "$125,450.00",
+    currency: "USD",
+    institution: "Chase Bank",
+    routingNumber: "021000021",
+    country: "US"
+  },
+  {
+    id: "acc-002",
+    name: "Business Savings",
+    number: "****4567",
+    type: "savings",
+    status: "active",
+    balance: "$45,230.00",
+    currency: "USD",
+    institution: "Chase Bank",
+    routingNumber: "021000021",
+    country: "US"
+  },
+  {
+    id: "acc-003",
+    name: "Payroll Account",
+    number: "****1234",
+    type: "checking",
+    status: "active",
+    balance: "$78,900.00",
+    currency: "USD",
+    institution: "Wells Fargo",
+    routingNumber: "121000248",
+    country: "US"
+  }
+];
+var businessCounterparties = [
+  {
+    id: "cp-001",
+    name: "Tech Solutions Inc",
+    type: "BUSINESS",
+    status: "active",
+    description: "Technology vendor and service provider",
+    lastTransaction: "2024-01-15"
+  },
+  {
+    id: "cp-002",
+    name: "Global Logistics LLC",
+    type: "BUSINESS",
+    status: "active",
+    description: "Shipping and logistics partner",
+    lastTransaction: "2024-01-10"
+  },
+  {
+    id: "cp-003",
+    name: "Marketing Pros Agency",
+    type: "BUSINESS",
+    status: "active",
+    description: "Marketing and advertising services",
+    lastTransaction: "2024-01-08"
+  },
+  {
+    id: "cp-004",
+    name: "John Smith Consulting",
+    type: "INDIVIDUAL",
+    status: "active",
+    description: "Independent business consultant",
+    lastTransaction: "2023-12-20"
+  }
+];
+var Business = () => {
+  const accountColumns = [
+    {
+      key: "number",
+      title: "Account Number",
+      sortable: true
+    },
+    {
+      key: "name",
+      title: "Account Name",
+      sortable: true
+    },
+    {
+      key: "balance",
+      title: "Available Balance",
+      sortable: true,
+      align: "right"
+    },
+    {
+      key: "status",
+      title: "Status",
+      render: (value) => /* @__PURE__ */ jsx(StatusBadge, { status: value })
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "container mx-auto p-6 space-y-6", children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Business Management" }) }),
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "profile", className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs(TabsList, { className: "inline-flex gap-8 h-auto bg-transparent border-b border-border w-full p-0 rounded-none justify-start", children: [
+        /* @__PURE__ */ jsx(
+          TabsTrigger,
           {
-            className: "border-b hover:bg-muted/50 transition-colors cursor-pointer",
-            onClick: () => navigate(`/alerts/${alert.id}`),
-            children: [
-              /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-xs", children: alert.id }),
-              /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-xs", children: alert.createdAt }),
-              /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(Badge, { variant: getTypeBadgeVariant(alert.type), className: "whitespace-nowrap", children: alert.type }) }),
-              /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx("span", { className: cn("text-xs font-medium", getStatusColor(alert.status)), children: alert.status }) }),
-              /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "whitespace-nowrap", children: alert.contextType }) }),
-              /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: alert.rfiStatus && /* @__PURE__ */ jsx(Badge, { variant: "success", className: "whitespace-nowrap", children: alert.rfiStatus }) }),
-              /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-xs truncate", children: alert.description })
-            ]
-          },
-          alert.id
-        )) })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-none border-t bg-background py-3 px-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page:" }),
-          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1", children: [
-              rowsPerPage,
-              /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 rotate-90" })
-            ] }) }),
-            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "bg-background z-50", children: [
-              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(100), children: "100" }),
-              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(200), children: "200" }),
-              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(500), children: "500" })
-            ] })
+            value: "profile",
+            className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none pb-3",
+            children: "Profile"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TabsTrigger,
+          {
+            value: "kyc",
+            className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none pb-3",
+            children: "KYC"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TabsTrigger,
+          {
+            value: "counterparty",
+            className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none pb-3",
+            children: "Counterparty"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "profile", className: "space-y-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row items-start gap-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-6", children: [
+          /* @__PURE__ */ jsx(BusinessProfileCard, { isEditing: false, onToggleEdit: () => {
+          } }),
+          /* @__PURE__ */ jsxs(Card, { children: [
+            /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-4", children: [
+              /* @__PURE__ */ jsx(CardTitle, { children: "Accounts" }),
+              /* @__PURE__ */ jsx(Button, { size: "sm", children: "+ New Account" })
+            ] }),
+            /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+              DataTable,
+              {
+                columns: accountColumns,
+                data: businessAccounts,
+                emptyMessage: "No accounts found"
+              }
+            ) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-            "Page ",
-            currentPage,
-            " of ",
-            totalPages
+        /* @__PURE__ */ jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsx(BusinessStatusCard, { isEditing: false, onToggleEdit: () => {
+        } }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "kyc", className: "space-y-0", children: /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: "KYC content coming soon" }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "counterparty", className: "space-y-0", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6", children: businessCounterparties.map((counterparty) => /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: counterparty.name }),
+            /* @__PURE__ */ jsx(CounterpartyTypeBadge, { type: counterparty.type })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                size: "sm",
-                className: "h-8 w-8 p-0",
-                onClick: () => handlePageChange(currentPage - 1),
-                disabled: currentPage === 1,
-                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                size: "sm",
-                className: "h-8 w-8 p-0",
-                onClick: () => handlePageChange(currentPage + 1),
-                disabled: currentPage === totalPages,
-                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-              }
-            )
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 mt-2", children: /* @__PURE__ */ jsx(Badge, { variant: counterparty.status === "active" ? "default" : "secondary", children: counterparty.status }) })
+        ] }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: counterparty.description }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Last Transaction" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: counterparty.lastTransaction })
           ] })
         ] })
-      ] }) })
-    ] }) }) })
+      ] }, counterparty.id)) }) })
+    ] })
   ] });
 };
-var Alerts_default = Alerts;
-var Business = () => {
-  return /* @__PURE__ */ jsx(
-    DetailPageLayout,
-    {
-      title: "Business Management",
-      description: "Manage business entities and their configurations",
-      cards: [
-        {
-          key: "profile",
-          component: BusinessProfileCard,
-          expandOnEdit: true
-        },
-        {
-          key: "status",
-          component: BusinessStatusCard,
-          expandOnEdit: true
-        },
-        {
-          key: "contact",
-          component: ContactInfoCard,
-          expandOnEdit: true
-        },
-        {
-          key: "banking",
-          component: BankingDetailsCard,
-          expandOnEdit: true
-        }
-      ],
-      actions: [
-        {
-          label: "Export Data",
-          variant: "outline"
-        },
-        {
-          label: "Edit Business",
-          className: "bg-gradient-primary hover:opacity-90"
-        }
-      ]
-    }
-  );
-};
-var Business_default = Business;
+var BusinessDetail_default = Business;
 var CreateBusiness = () => {
   const [businessType, setBusinessType] = useState("");
   return /* @__PURE__ */ jsx(
@@ -7178,6 +7900,258 @@ var NotFound = () => {
 };
 var NotFound_default = NotFound;
 
+// src/lib/mock-data/statement-data.ts
+var mockStatementHeader = {
+  account: "1234567890",
+  productId: "PROD-001",
+  programId: "PROG-001",
+  startDate: "01/01/2024 00:00:00",
+  endDate: "01/31/2024 23:59:59",
+  startingBalance: "$125,450.00",
+  endingBalance: "$158,320.50"
+};
+var mockStatementTransactions = [
+  { transactionType: "ACH Credit", direction: "CREDIT", amount: 45e3, count: 12 },
+  { transactionType: "ACH Debit", direction: "DEBIT", amount: 23500, count: 8 },
+  { transactionType: "Wire Transfer In", direction: "CREDIT", amount: 15e3, count: 3 },
+  { transactionType: "Wire Transfer Out", direction: "DEBIT", amount: 8200, count: 2 },
+  { transactionType: "Card Purchase", direction: "DEBIT", amount: 5430.5, count: 45 },
+  { transactionType: "Direct Deposit", direction: "CREDIT", amount: 12500, count: 5 },
+  { transactionType: "ATM Withdrawal", direction: "DEBIT", amount: 3200, count: 16 },
+  { transactionType: "Check Deposit", direction: "CREDIT", amount: 8900, count: 4 },
+  { transactionType: "Bill Payment", direction: "DEBIT", amount: 6780, count: 18 },
+  { transactionType: "Transfer In", direction: "CREDIT", amount: 5200, count: 7 },
+  { transactionType: "Transfer Out", direction: "DEBIT", amount: 4350, count: 6 },
+  { transactionType: "Fee", direction: "DEBIT", amount: 125, count: 3 },
+  { transactionType: "Interest", direction: "CREDIT", amount: 85.5, count: 1 },
+  { transactionType: "Refund", direction: "CREDIT", amount: 450, count: 2 }
+];
+var mockPrograms = [
+  { value: "PROG-001", label: "Consumer Banking Program" },
+  { value: "PROG-002", label: "Business Banking Program" },
+  { value: "PROG-003", label: "Premium Rewards Program" }
+];
+var mockProducts = [
+  { value: "PROD-001", label: "Checking Account" },
+  { value: "PROD-002", label: "Savings Account" },
+  { value: "PROD-003", label: "Money Market Account" },
+  { value: "PROD-004", label: "Business Checking" }
+];
+var statementTypes = [
+  { value: "root", label: "Root" },
+  { value: "program", label: "Program" },
+  { value: "product", label: "Product" },
+  { value: "account", label: "Account" }
+];
+function Statement() {
+  const [statementType, setStatementType] = useState("");
+  const [selectedProgram, setSelectedProgram] = useState("");
+  const [selectedProduct, setSelectedProduct] = useState("");
+  const [accountNumber, setAccountNumber] = useState("");
+  const [startDate, setStartDate] = useState();
+  const [endDate, setEndDate] = useState();
+  const [statementGenerated, setStatementGenerated] = useState(false);
+  const handleStatementTypeChange = (value) => {
+    setStatementType(value);
+    setSelectedProgram("");
+    setSelectedProduct("");
+    setAccountNumber("");
+  };
+  const handleGenerateStatement = () => {
+    if (!statementType || !startDate || !endDate) return;
+    if (statementType === "program" && !selectedProgram) return;
+    if (statementType === "product" && !selectedProduct) return;
+    if (statementType === "account" && !accountNumber) return;
+    setStatementGenerated(true);
+  };
+  const isGenerateDisabled = () => {
+    if (!statementType || !startDate || !endDate) return true;
+    if (statementType === "program" && !selectedProgram) return true;
+    if (statementType === "product" && !selectedProduct) return true;
+    if (statementType === "account" && !accountNumber) return true;
+    return false;
+  };
+  const columns = [
+    {
+      key: "transactionType",
+      title: "Transaction Type",
+      sortable: true,
+      align: "left"
+    },
+    {
+      key: "direction",
+      title: "Direction",
+      sortable: true,
+      align: "left",
+      render: (value) => /* @__PURE__ */ jsx(Badge, { variant: value === "CREDIT" ? "success" : "secondary", children: value })
+    },
+    {
+      key: "amount",
+      title: "Amount",
+      sortable: true,
+      align: "right",
+      render: (value) => `$${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+    },
+    {
+      key: "count",
+      title: "Count",
+      sortable: true,
+      align: "right"
+    }
+  ];
+  const handleDownloadCSV = () => {
+    console.log("Downloading CSV...");
+  };
+  const handlePrintPDF = () => {
+    console.log("Printing PDF...");
+  };
+  const handleEdit = () => {
+    setStatementGenerated(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "container mx-auto p-6 space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Statement" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: "Generate and view statement reports" })
+    ] }),
+    !statementGenerated && /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { size: "md", children: "Statement Parameters" }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: [
+          /* @__PURE__ */ jsx(
+            EnhancedSelect,
+            {
+              label: "Statement Type",
+              placeholder: "Select type",
+              options: statementTypes,
+              value: statementType,
+              onValueChange: handleStatementTypeChange
+            }
+          ),
+          statementType === "program" && /* @__PURE__ */ jsx(
+            EnhancedSelect,
+            {
+              label: "Program Name",
+              placeholder: "Select program",
+              options: mockPrograms,
+              value: selectedProgram,
+              onValueChange: setSelectedProgram
+            }
+          ),
+          statementType === "product" && /* @__PURE__ */ jsx(
+            EnhancedSelect,
+            {
+              label: "Product Name",
+              placeholder: "Select product",
+              options: mockProducts,
+              value: selectedProduct,
+              onValueChange: setSelectedProduct
+            }
+          ),
+          statementType === "account" && /* @__PURE__ */ jsx(
+            EnhancedInput,
+            {
+              label: "Account Number",
+              placeholder: "Enter account number",
+              value: accountNumber,
+              onChange: (e) => setAccountNumber(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Start Date" }),
+            /* @__PURE__ */ jsxs(Popover, { children: [
+              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "justify-start text-left font-normal",
+                    !startDate && "text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+                    startDate ? format(startDate, "MM/dd/yyyy") : "Select date"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  selected: startDate,
+                  onSelect: setStartDate,
+                  initialFocus: true
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "End Date" }),
+            /* @__PURE__ */ jsxs(Popover, { children: [
+              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "justify-start text-left font-normal",
+                    !endDate && "text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+                    endDate ? format(endDate, "MM/dd/yyyy") : "Select date"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  selected: endDate,
+                  onSelect: setEndDate,
+                  initialFocus: true
+                }
+              ) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleGenerateStatement,
+            disabled: isGenerateDisabled(),
+            children: "Generate Statement"
+          }
+        ) })
+      ] })
+    ] }),
+    statementGenerated && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(StatementHeader, { data: mockStatementHeader, onEdit: handleEdit }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsxs(CardHeader, { direction: "row", children: [
+          /* @__PURE__ */ jsx(CardTitle, { size: "md", children: "Transaction Summary" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: handleDownloadCSV, children: [
+              /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-2" }),
+              "Download CSV"
+            ] }),
+            /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: handlePrintPDF, children: [
+              /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 mr-2" }),
+              "Print PDF"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            columns,
+            data: mockStatementTransactions,
+            emptyMessage: "No transactions found"
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+
 // src/lib/mock-data/transaction-data.ts
 var mockTransactions = [
   {
@@ -8587,6 +9561,6 @@ function UIKit() {
   ] }) }) });
 }
 
-export { ACHBankCard, ACHBasicInfoCard, ACHDetailsSection, ACHTransferSection, AccountCard, AddressForm, AlertDetail_default as AlertDetail, AlertDocuments, AlertNotes, AlertTimeline, Alerts_default as Alerts, AppSidebar, Badge, BankAddressCard, BankingDetailsCard, BasicInfoCard, BasicInfoSection, BeneficiaryAddress, BeneficiaryCard, BeneficiaryDomesticWire, Breadcrumb, Business_default as Business, BusinessProfileCard, BusinessStatusCard, BusinessTypeBadge, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Cases_default as Cases, ContactInfoCard, Container, ContextSection, CounterpartyBasicInfo, DomesticWire_default as CounterpartyDomesticWire, Manage_default as CounterpartyManage, CounterpartyProfileCard, CounterpartyRecordsCard, CounterpartyTypeBadge, Create_default as CreateBusiness, Create_default2 as CreateCounterparty, Dashboard_default as Dashboard, DashboardDemo, DataGrid, DataTable, DetailPageLayout, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EditableFormCard, EditableInfoField, EnhancedInput, EnhancedSelect, EnhancedTextarea, EntityCard, FormCard, FormField, FormInput, FormProvider, FormSection, FormSelect, InfoField, IntermediaryCard, IntermediaryFI, IntermediaryFIAddress, JsonViewer, Label, ListPage, MainLayout, MetricCard, NewTransaction, NotFound_default as NotFound, OriginatorCard, OriginatorFI, OriginatorFIAddress, PageLayout, PatternLibrary, PaymentInformationSection, Popover, PopoverContent, PopoverTrigger, ReceiverCard, ResponsiveGrid, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Stack, StatusBadge, Tabs, TabsContent, TabsList, TabsTrigger, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransactionDetail_default as TransactionDetail, TransactionHistory_default as TransactionHistory, UIKit, UIKitShowcase, WireDetailsSection, WireTransferSection, badgeVariants, buttonVariants, cardVariants, inputVariants, reducer, textareaVariants, toast, useEditState, useFormWithEditState, useIsMobile, useSidebar, useToast };
+export { ACHBankCard, ACHBasicInfoCard, ACHDetailsSection, ACHTransferSection, AccountCard, AddressForm, AlertDetail_default as AlertDetail, AlertDetailView, AlertDocuments, AlertNotes, AlertTimeline, Alerts_default as Alerts, AppSidebar, Badge, BankAddressCard, BankingDetailsCard, BasicInfoCard, BasicInfoSection, BeneficiaryAddress, BeneficiaryCard, BeneficiaryDomesticWire, Breadcrumb, BusinessDetail_default as BusinessDetail, BusinessProfileCard, BusinessStatusCard, BusinessTypeBadge, Businesses_default as Businesses, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Cases_default as Cases, ContactInfoCard, Container, ContextSection, CounterpartyBasicInfo, DomesticWire_default as CounterpartyDomesticWire, Manage_default as CounterpartyManage, CounterpartyProfileCard, CounterpartyRecordsCard, CounterpartyTypeBadge, Create_default as CreateBusiness, Create_default2 as CreateCounterparty, Dashboard_default as Dashboard, DashboardDemo, DataGrid, DataTable, DetailPageLayout, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EditableFormCard, EditableInfoField, EnhancedInput, EnhancedSelect, EnhancedTextarea, EntityCard, FormCard, FormField, FormInput, FormProvider, FormSection, FormSelect, InfoField, IntermediaryCard, IntermediaryFI, IntermediaryFIAddress, JsonViewer, Label, ListPage, MainLayout, MetricCard, NewTransaction, NotFound_default as NotFound, OriginatorCard, OriginatorFI, OriginatorFIAddress, PageLayout, PatternLibrary, PaymentInformationSection, Popover, PopoverContent, PopoverTrigger, ReceiverCard, ResponsiveGrid, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Stack, Statement, StatementHeader, StatusBadge, Tabs, TabsContent, TabsList, TabsTrigger, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransactionDetail_default as TransactionDetail, TransactionHistory_default as TransactionHistory, UIKit, UIKitShowcase, WireDetailsSection, WireTransferSection, badgeVariants, buttonVariants, cardVariants, inputVariants, reducer, textareaVariants, toast, useAlertDetail, useEditState, useFormWithEditState, useIsMobile, useSidebar, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map