braid-ui 1.0.2 → 1.0.4

package/dist/index.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
 var React13 = require('react');
-var reactDom = require('react-dom');
-var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
 var lucideReact = require('lucide-react');
+var reactDom = require('react-dom');
 var SelectPrimitive = require('@radix-ui/react-select');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var reactRouterDom = require('react-router-dom');
@@ -56,10 +56,218 @@ var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitiv
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var ToastPrimitives__namespace = /*#__PURE__*/_interopNamespace(ToastPrimitives);
 
-// src/components/alerts/AlertDocuments.tsx
+// src/components/ui/form-card.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var cardVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, variant, size, fullHeight, interactive, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardVariants({ variant, size, fullHeight, interactive }), className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var cardHeaderVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, size, align, direction, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardHeaderVariants({ size, align, direction }), className),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var cardTitleVariants = classVarianceAuthority.cva(
+  "font-semibold leading-none tracking-tight",
+  {
+    variants: {
+      size: {
+        sm: "text-base",
+        md: "text-lg",
+        lg: "text-xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var CardTitle = React13__namespace.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h3",
+    {
+      ref,
+      className: cn(cardTitleVariants({ size }), className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var cardContentVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, size, fullHeight, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardContentVariants({ size, fullHeight }), className),
+      ...props
+    }
+  )
+);
+CardContent.displayName = "CardContent";
+var cardFooterVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, size, justify, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(cardFooterVariants({ size, justify }), className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+var FormCard = React13__namespace.forwardRef(
+  ({ title, description, children, headerActions, className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    Card,
+    {
+      ref,
+      variant,
+      fullHeight: true,
+      className: cn("", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          CardHeader,
+          {
+            direction: headerActions ? "row" : "column",
+            size: "md",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { size: "md", children: title }) }),
+              headerActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: headerActions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CardContent, { size: "md", fullHeight: true, children })
+      ]
+    }
+  )
+);
+FormCard.displayName = "FormCard";
 var buttonVariants = classVarianceAuthority.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",
   {
@@ -99,171 +307,92 @@ var Button = React13__namespace.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__namespace.useState(memoryState);
-  React13__namespace.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 = classVarianceAuthority.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 = classVarianceAuthority.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__namespace.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__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [
-        label,
-        props.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+var AlertTimeline = ({ events }) => {
+  const getIcon = (action) => {
+    if (action.includes("Created")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-4 w-4" });
+    if (action.includes("Assigned")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserPlus, { className: "h-4 w-4" });
+    if (action.includes("Updated") || action.includes("Modified")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" });
+    if (action.includes("Closed") || action.includes("Resolved")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4" });
+    if (action.includes("Rejected")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx("div", { className: "text-center py-8 text-muted-foreground", children: "No timeline events yet" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: events.map((event, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pl-6 pb-3", children: [
+    index !== events.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[7px] top-5 bottom-0 w-[2px] bg-border" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+      "absolute left-0 top-0 flex-none",
+      getStatusColor2(event.status)
+    ), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4", children: getIcon(event.action) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-foreground", children: event.action }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        "by ",
+        event.user
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            className: cn(inputVariants({ variant: inputVariant, size, className })),
-            ref,
-            ...props
-          }
-        ),
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-primary border-t-transparent" }) })
+      event.details && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: event.details }),
+      event.status && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-xs font-medium", getStatusColor2(event.status)), children: [
+        "Status: ",
+        event.status
       ] }),
-      hint && !error && !success && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: hint }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: error }),
-      success && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-success", children: success })
-    ] });
-  }
-);
-EnhancedInput.displayName = "EnhancedInput";
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/70 pt-0.5", children: event.timestamp })
+    ] })
+  ] }, event.id)) });
+};
 var textareaVariants = classVarianceAuthority.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",
   {
@@ -360,179 +489,208 @@ var EnhancedSelect = React13__namespace.forwardRef(({ variant, label, hint, erro
   ] });
 });
 EnhancedSelect.displayName = "EnhancedSelect";
-var AlertDocuments = ({ alertId, documents }) => {
-  const [isUploading, setIsUploading] = React13.useState(false);
-  const [showUploadDialog, setShowUploadDialog] = React13.useState(false);
-  const [selectedFile, setSelectedFile] = React13.useState(null);
-  const [documentName, setDocumentName] = React13.useState("");
-  const [description, setDescription] = React13.useState("");
-  const [documentType, setDocumentType] = React13.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__namespace.useState(memoryState);
+  React13__namespace.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] = React13.useState(false);
+  const [newNote, setNewNote] = React13.useState("");
+  const [noteType, setNoteType] = React13.useState("RFI Note");
+  const [isSubmitting, setIsSubmitting] = React13.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__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-    showUploadDialog && reactDom.createPortal(
+    showNoteDialog && reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[100] flex items-center justify-center p-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
-            onClick: handleCancelUpload
+            onClick: handleCancelNote
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-card border rounded-lg shadow-lg max-w-lg w-full p-6 z-[101]", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold", children: "Upload Document" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold", children: "Add Note" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 variant: "ghost",
                 size: "sm",
                 className: "h-8 w-8 p-0",
-                onClick: handleCancelUpload,
+                onClick: handleCancelNote,
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
               }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-2 border-dashed rounded-lg p-6 text-center hover:border-primary/50 transition-colors", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "file",
-                  id: "file-upload-dialog",
-                  className: "hidden",
-                  onChange: handleFileSelect,
-                  disabled: isUploading
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-8 w-8 text-muted-foreground" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: selectedFile ? "Change file" : "Click to upload or drag and drop" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "PDF, DOC, DOCX, JPG, PNG up to 10MB" })
-                    ] })
-                  ]
-                }
-              )
-            ] }),
-            selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-muted/50 rounded-lg", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Selected file:" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: selectedFile.name }),
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
-                (selectedFile.size / 1024 / 1024).toFixed(2),
-                " MB"
-              ] })
-            ] }),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
               EnhancedTextarea,
               {
-                label: "Description",
-                value: description,
-                onChange: (e) => setDescription(e.target.value),
-                placeholder: "Enter document description (optional)",
-                rows: 3
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.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
               }
             )
           ] }),
@@ -541,8 +699,8 @@ var AlertDocuments = ({ alertId, documents }) => {
               Button,
               {
                 variant: "outline",
-                onClick: handleCancelUpload,
-                disabled: isUploading,
+                onClick: handleCancelNote,
+                disabled: isSubmitting,
                 className: "flex-1",
                 children: "Cancel"
               }
@@ -550,10 +708,10 @@ var AlertDocuments = ({ alertId, documents }) => {
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
-                onClick: handleUploadSubmit,
-                disabled: isUploading,
+                onClick: handleAddNote,
+                disabled: isSubmitting || !newNote.trim(),
                 className: "flex-1",
-                children: isUploading ? "Uploading..." : "Upload"
+                children: isSubmitting ? "Adding..." : "Add Note"
               }
             )
           ] })
@@ -561,224 +719,280 @@ var AlertDocuments = ({ alertId, documents }) => {
       ] }),
       document.body
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-foreground", children: "Uploaded Documents" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-foreground", children: "Note History" }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           Button,
           {
-            onClick: () => setShowUploadDialog(true),
+            onClick: () => setShowNoteDialog(true),
             variant: "ghost",
             size: "sm",
             className: "gap-2 text-primary hover:text-primary",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-4 w-4" }),
-              "Upload"
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
+              "Add Note"
             ]
           }
         )
       ] }),
-      documents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No documents uploaded yet" })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: documents.map((doc) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "border rounded-lg hover:bg-muted/30 transition-colors overflow-hidden",
+      notes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No notes yet" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: notes.map((note) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "border rounded-lg p-4 bg-muted/30",
           children: [
-            isImageType(doc.name) && doc.url && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-muted/50", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: doc.url,
-                alt: doc.name,
-                className: "w-full h-48 object-cover"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
-                !isImageType(doc.name) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getFileTypeColor(doc.type)), children: getFileIcon(doc.type) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm truncate", children: doc.name }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs px-2 py-0.5 rounded-full bg-muted", getFileTypeColor(doc.type)), children: doc.type })
-                  ] }),
-                  doc.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground mt-1", children: doc.description }),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 mb-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-sm text-foreground", children: note.user }),
+                /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: note.type === "RFI Note" ? "default" : "outline", children: note.type })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    className: "h-8 w-8 p-0",
-                    onClick: () => toast({ title: "Preview", description: `Viewing ${doc.name}` }),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4" })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    className: "h-8 w-8 p-0",
-                    onClick: () => toast({ title: "Download", description: `Downloading ${doc.name}` }),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
-                  }
-                ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: note.timestamp }),
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
                   }
                 )
               ] })
-            ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: note.content })
           ]
         },
-        doc.id
+        note.id
       )) })
     ] })
   ] });
 };
-var badgeVariants = classVarianceAuthority.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 = classVarianceAuthority.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__ */ jsxRuntime.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] = React13.useState(false);
-  const [newNote, setNewNote] = React13.useState("");
-  const [noteType, setNoteType] = React13.useState("RFI Note");
-  const [isSubmitting, setIsSubmitting] = React13.useState(false);
-  const resetForm = () => {
-    setNewNote("");
-    setNoteType("RFI Note");
-  };
-  const handleCancelNote = () => {
-    setShowNoteDialog(false);
-    resetForm();
+var EnhancedInput = React13__namespace.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__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [
+        label,
+        props.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            className: cn(inputVariants({ variant: inputVariant, size, className })),
+            ref,
+            ...props
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-primary border-t-transparent" }) })
+      ] }),
+      hint && !error && !success && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: hint }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: error }),
+      success && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-success", children: success })
+    ] });
+  }
+);
+EnhancedInput.displayName = "EnhancedInput";
+var AlertDocuments = ({ alertId, documents }) => {
+  const [isUploading, setIsUploading] = React13.useState(false);
+  const [showUploadDialog, setShowUploadDialog] = React13.useState(false);
+  const [selectedFile, setSelectedFile] = React13.useState(null);
+  const [documentName, setDocumentName] = React13.useState("");
+  const [description, setDescription] = React13.useState("");
+  const [documentType, setDocumentType] = React13.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__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-    showNoteDialog && reactDom.createPortal(
+    showUploadDialog && reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[100] flex items-center justify-center p-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
-            onClick: handleCancelNote
+            onClick: handleCancelUpload
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-card border rounded-lg shadow-lg max-w-lg w-full p-6 z-[101]", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold", children: "Add Note" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold", children: "Upload Document" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 variant: "ghost",
                 size: "sm",
                 className: "h-8 w-8 p-0",
-                onClick: handleCancelNote,
+                onClick: handleCancelUpload,
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
               }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedSelect,
-              {
-                label: "Note Type",
-                value: noteType,
-                onValueChange: (value) => setNoteType(value),
-                options: NOTE_TYPE_OPTIONS
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-2 border-dashed rounded-lg p-6 text-center hover:border-primary/50 transition-colors", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "file",
+                  id: "file-upload-dialog",
+                  className: "hidden",
+                  onChange: handleFileSelect,
+                  disabled: isUploading
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-8 w-8 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: selectedFile ? "Change file" : "Click to upload or drag and drop" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "PDF, DOC, DOCX, JPG, PNG up to 10MB" })
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-muted/50 rounded-lg", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Selected file:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: selectedFile.name }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                (selectedFile.size / 1024 / 1024).toFixed(2),
+                " MB"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              EnhancedInput,
+              {
+                label: "Document name",
+                value: documentName,
+                onChange: (e) => setDocumentName(e.target.value),
+                placeholder: "Enter document name"
               }
             ),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              EnhancedSelect,
+              {
+                label: "Document type",
+                value: documentType,
+                onValueChange: setDocumentType,
+                placeholder: "Select document type",
+                options: documentTypeOptions
               }
             )
           ] }),
@@ -787,8 +1001,8 @@ var AlertNotes = ({ alertId, notes }) => {
               Button,
               {
                 variant: "outline",
-                onClick: handleCancelNote,
-                disabled: isSubmitting,
+                onClick: handleCancelUpload,
+                disabled: isUploading,
                 className: "flex-1",
                 children: "Cancel"
               }
@@ -796,10 +1010,10 @@ var AlertNotes = ({ alertId, notes }) => {
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
-                onClick: handleAddNote,
-                disabled: isSubmitting || !newNote.trim(),
+                onClick: handleUploadSubmit,
+                disabled: isUploading,
                 className: "flex-1",
-                children: isSubmitting ? "Adding..." : "Add Note"
+                children: isUploading ? "Uploading..." : "Upload"
               }
             )
           ] })
@@ -807,311 +1021,97 @@ var AlertNotes = ({ alertId, notes }) => {
       ] }),
       document.body
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-foreground", children: "Note History" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-foreground", children: "Uploaded Documents" }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           Button,
           {
-            onClick: () => setShowNoteDialog(true),
+            onClick: () => setShowUploadDialog(true),
             variant: "ghost",
             size: "sm",
             className: "gap-2 text-primary hover:text-primary",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
-              "Add Note"
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-4 w-4" }),
+              "Upload"
             ]
           }
         )
       ] }),
-      notes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No notes yet" })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: notes.map((note) => /* @__PURE__ */ jsxRuntime.jsxs(
+      documents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No documents uploaded yet" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: documents.map((doc) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 mb-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-sm text-foreground", children: note.user }),
-                /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: note.type === "RFI Note" ? "default" : "outline", children: note.type })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: note.timestamp }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: note.content })
-          ]
-        },
-        note.id
-      )) })
-    ] })
-  ] });
-};
-var AlertTimeline = ({ events }) => {
-  const getIcon = (action) => {
-    if (action.includes("Created")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-4 w-4" });
-    if (action.includes("Assigned")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserPlus, { className: "h-4 w-4" });
-    if (action.includes("Updated") || action.includes("Modified")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" });
-    if (action.includes("Closed") || action.includes("Resolved")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4" });
-    if (action.includes("Rejected")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-4 w-4" });
-    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx("div", { className: "text-center py-8 text-muted-foreground", children: "No timeline events yet" });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: events.map((event, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pl-6 pb-3", children: [
-    index !== events.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[7px] top-5 bottom-0 w-[2px] bg-border" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-      "absolute left-0 top-0 flex-none",
-      getStatusColor(event.status)
-    ), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4", children: getIcon(event.action) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-foreground", children: event.action }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
-        "by ",
-        event.user
-      ] }),
-      event.details && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: event.details }),
-      event.status && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-xs font-medium", getStatusColor(event.status)), children: [
-        "Status: ",
-        event.status
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/70 pt-0.5", children: event.timestamp })
-    ] })
-  ] }, event.id)) });
-};
-var cardVariants = classVarianceAuthority.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__namespace.forwardRef(
-  ({ className, variant, size, fullHeight, interactive, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardVariants({ variant, size, fullHeight, interactive }), className),
-      ...props
-    }
-  )
-);
-Card.displayName = "Card";
-var cardHeaderVariants = classVarianceAuthority.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__namespace.forwardRef(
-  ({ className, size, align, direction, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardHeaderVariants({ size, align, direction }), className),
-      ...props
-    }
-  )
-);
-CardHeader.displayName = "CardHeader";
-var cardTitleVariants = classVarianceAuthority.cva(
-  "font-semibold leading-none tracking-tight",
-  {
-    variants: {
-      size: {
-        sm: "text-base",
-        md: "text-lg",
-        lg: "text-xl"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var CardTitle = React13__namespace.forwardRef(
-  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "h3",
-    {
-      ref,
-      className: cn(cardTitleVariants({ size }), className),
-      ...props
-    }
-  )
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "p",
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-CardDescription.displayName = "CardDescription";
-var cardContentVariants = classVarianceAuthority.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__namespace.forwardRef(
-  ({ className, size, fullHeight, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardContentVariants({ size, fullHeight }), className),
-      ...props
-    }
-  )
-);
-CardContent.displayName = "CardContent";
-var cardFooterVariants = classVarianceAuthority.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__namespace.forwardRef(
-  ({ className, size, justify, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardFooterVariants({ size, justify }), className),
-      ...props
-    }
-  )
-);
-CardFooter.displayName = "CardFooter";
-var FormCard = React13__namespace.forwardRef(
-  ({ title, description, children, headerActions, className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-    Card,
-    {
-      ref,
-      variant,
-      fullHeight: true,
-      className: cn("", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          CardHeader,
-          {
-            direction: headerActions ? "row" : "column",
-            size: "md",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { size: "md", children: title }) }),
-              headerActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: headerActions })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(CardContent, { size: "md", fullHeight: true, children })
-      ]
-    }
-  )
-);
-FormCard.displayName = "FormCard";
+            isImageType(doc.name) && doc.url && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-muted/50", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: doc.url,
+                alt: doc.name,
+                className: "w-full h-48 object-cover"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+                !isImageType(doc.name) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getFileTypeColor(doc.type)), children: getFileIcon(doc.type) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm truncate", children: doc.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs px-2 py-0.5 rounded-full bg-muted", getFileTypeColor(doc.type)), children: doc.type })
+                  ] }),
+                  doc.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground mt-1", children: doc.description }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-8 w-8 p-0",
+                    onClick: () => toast({ title: "Preview", description: `Viewing ${doc.name}` }),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-8 w-8 p-0",
+                    onClick: () => toast({ title: "Download", description: `Downloading ${doc.name}` }),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        doc.id
+      )) })
+    ] })
+  ] });
+};
 var InfoField = ({ label, value, layout = "vertical", className }) => {
   if (layout === "horizontal") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-start gap-3 ${className || ""}`, children: [
@@ -1424,6 +1424,184 @@ var ContextSection = ({ alert }) => {
     ] }) })
   ] });
 };
+var EditableInfoField = ({
+  label,
+  value,
+  options,
+  onChange,
+  placeholder = "Select...",
+  renderValue,
+  className
+}) => {
+  const [isEditing, setIsEditing] = React13.useState(false);
+  const handleChange = (newValue) => {
+    onChange(newValue);
+    setIsEditing(false);
+  };
+  if (isEditing) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
+      EnhancedSelect,
+      {
+        label,
+        value: value || "",
+        onValueChange: handleChange,
+        options,
+        placeholder
+      }
+    ) });
+  }
+  const displayValue = value ? renderValue ? renderValue(value) : value : placeholder;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormCard,
+        {
+          title: "Alert Information",
+          headerActions: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" }) }),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Alert ID", value: alert.id }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InfoField,
+              {
+                label: "Type",
+                value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getTypeBadgeVariant(alert.type), children: alert.type })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InfoField,
+              {
+                label: "Status",
+                value: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", getStatusColor(alert.status)), children: alert.status })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created At", value: alert.createdAt }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InfoField,
+              {
+                label: "Context Type",
+                value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: alert.contextType })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Context ID", value: alert.contextId || "N/A" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              EditableInfoField,
+              {
+                label: "Assignee",
+                value: assignee,
+                options: ASSIGNEE_OPTIONS,
+                onChange: onAssigneeChange,
+                placeholder: "Unassigned"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              EditableInfoField,
+              {
+                label: "RFI Status",
+                value: rfiStatus,
+                options: RFI_STATUS_OPTIONS,
+                onChange: onRfiStatusChange,
+                placeholder: "Select status",
+                renderValue: (value) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Description", value: alert.description }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ContextSection, { alert }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Notes", children: /* @__PURE__ */ jsxRuntime.jsx(AlertNotes, { alertId: alert.id, notes: alert.notes || [] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Documents", children: /* @__PURE__ */ jsxRuntime.jsx(AlertDocuments, { alertId: alert.id, documents: alert.documents || [] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Status Timeline", className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTimeline, { events: alert.timeline || [] }) }) })
+  ] });
+};
 
 // src/assets/braid-logo.png
 var braid_logo_default = "./braid-logo-343BOQZ2.png";
@@ -2941,9 +3119,14 @@ var businessProfileSchema = zod.z.object({
   dbaName: zod.z.string().optional(),
   businessType: zod.z.string().min(1, "Business type is required"),
   taxId: zod.z.string().min(1, "Tax ID is required"),
-  businessPhone: zod.z.string().min(1, "Business phone is required"),
-  businessEmail: zod.z.string().email("Invalid email format"),
+  formationDate: zod.z.string().optional(),
+  idType: zod.z.string().optional(),
+  incorporationState: zod.z.string().optional(),
   website: zod.z.string().url("Invalid URL format").optional().or(zod.z.literal("")),
+  contactFirstName: zod.z.string().optional(),
+  contactLastName: zod.z.string().optional(),
+  contactEmail: zod.z.string().optional(),
+  contactPhone: zod.z.string().optional(),
   address: addressSchema
 });
 zod.z.object({
@@ -3087,29 +3270,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,
@@ -3654,8 +3814,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",
@@ -3682,75 +3843,176 @@ var BusinessProfileCard = ({
     onToggleEdit,
     onSave: onDataChange
   });
-  const editContent = /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "legalName",
-        label: "Legal Name",
-        placeholder: "Enter legal business name",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "dbaName",
-        label: "DBA Name",
-        placeholder: "Enter doing business as name"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "taxId",
-        label: "Tax ID",
-        placeholder: "Enter tax identification number",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "businessPhone",
-        label: "Business Phone",
-        placeholder: "Enter business phone number",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "businessEmail",
-        label: "Business Email",
-        type: "email",
-        placeholder: "Enter business email",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "website",
-        label: "Website",
-        placeholder: "Enter website URL"
-      }
-    )
-  ] }) }) });
+  const editContent = /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "legalName",
+          label: "Legal Name",
+          placeholder: "Enter legal business name",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "dbaName",
+          label: "DBA Name",
+          placeholder: "Enter doing business as name"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "taxId",
+          label: "Tax ID",
+          placeholder: "Enter tax identification number",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "formationDate",
+          label: "Formation Date",
+          type: "date",
+          placeholder: "Enter formation date"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "incorporationState",
+          label: "Incorporation State",
+          placeholder: "Enter incorporation state"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "website",
+          label: "Website",
+          placeholder: "Enter website URL"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.streetAddress",
+          label: "Street Address",
+          placeholder: "Enter street address"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.apartment",
+          label: "Apartment, suite, or floor",
+          placeholder: "Enter apartment, suite, or floor"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.city",
+          label: "City",
+          placeholder: "Enter city"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.state",
+          label: "State",
+          placeholder: "Enter state"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.postalCode",
+          label: "Postal Code",
+          placeholder: "Enter postal code"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.country",
+          label: "Country Code",
+          placeholder: "Enter country code"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-muted-foreground mt-6", children: "Contact Person" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "contactFirstName",
+          label: "First Name",
+          placeholder: "Enter first name"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "contactLastName",
+          label: "Last Name",
+          placeholder: "Enter last name"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "contactEmail",
+          label: "Email",
+          type: "email",
+          placeholder: "Enter email"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "contactPhone",
+          label: "Phone Number",
+          placeholder: "Enter phone number"
+        }
+      )
+    ] })
+  ] }) });
   const formValues = form.watch();
   const viewContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
@@ -3762,10 +4024,30 @@ var BusinessProfileCard = ({
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Tax ID", value: formValues?.taxId, layout: "horizontal" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Business Phone", value: formValues?.businessPhone, layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Business Email", value: formValues?.businessEmail, layout: "horizontal" })
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Formation Date", value: formValues?.formationDate || "2020-01-15", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Type", value: formValues?.idType || "EIN", layout: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Incorporation State", value: formValues?.incorporationState || "Delaware", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Website", value: formValues?.website, layout: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-muted-foreground mt-6", children: "Contact Person" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "First Name", value: formValues?.contactFirstName || "John", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last Name", value: formValues?.contactLastName || "Smith", layout: "horizontal" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Website", value: formValues?.website, layout: "horizontal" }) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Email", value: formValues?.contactEmail || "john.smith@acme.com", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Phone Number", value: formValues?.contactPhone || "+1 (555) 123-4567", layout: "horizontal" })
+    ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
     EditableFormCard,
@@ -3783,30 +4065,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__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-4 w-4" });
+    if (action.includes("Assigned")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserPlus, { className: "h-4 w-4" });
+    if (action.includes("Updated") || action.includes("Modified") || action.includes("Check")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" });
+    if (action.includes("Completed") || action.includes("Verified")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(
     FormCard,
     {
-      title: "Business Status & Records",
+      title: "Timeline",
       className,
-      headerActions: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: onToggleEdit, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: onToggleEdit, children: "Save" })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onToggleEdit, className: "text-primary hover:text-primary/80 hover:bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" }) }) }),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Status", value: /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: "ACTIVE" }), layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "CIP Status", value: "NOT_START", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created Date", value: "2025-08-03", layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Updated Date", value: "2025-09-05", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC Date", value: "2025-09-05", layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC Status", value: "View Status", layout: "horizontal", className: "text-primary cursor-pointer" })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: mockBusinessTimeline.map((event, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pl-6 pb-3", children: [
+        index !== mockBusinessTimeline.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[7px] top-5 bottom-0 w-[2px] bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+          "absolute left-0 top-0 flex-none",
+          getStatusColor2(event.status)
+        ), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4", children: getIcon(event.action) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-foreground", children: event.action }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            "by ",
+            event.user
+          ] }),
+          event.details && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: event.details }),
+          event.status && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-xs font-medium", getStatusColor2(event.status)), children: [
+            "Status: ",
+            event.status
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/70 pt-0.5", children: event.timestamp })
         ] })
-      ] })
+      ] }, event.id)) })
     }
   );
 };
@@ -3831,18 +4158,27 @@ var ContactInfoCard = ({ isEditing, onToggleEdit, className }) => {
           /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Phone Number", value: "", layout: "horizontal" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-muted-foreground mt-6", children: "Mailing Address" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Street Address", value: "", layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Apartment, suite, or floor", value: "", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "City", value: "", layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "State", value: "Alabama", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Postal Code", value: "", layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Country Code", value: "US", layout: "horizontal" })
-        ] })
+        isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Street Address", value: "", layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Apartment, suite, or floor", value: "", layout: "horizontal" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "City", value: "", layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "State", value: "Alabama", layout: "horizontal" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Postal Code", value: "", layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Country Code", value: "US", layout: "horizontal" })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          InfoField,
+          {
+            label: "Address",
+            value: "123 Business Avenue, Suite 100, New York, NY 10001, US",
+            layout: "horizontal"
+          }
+        )
       ] })
     }
   );
@@ -4631,6 +4967,75 @@ var ListPage = React13__namespace.forwardRef(
   }
 );
 ListPage.displayName = "ListPage";
+var StatementHeader = ({ data, onEdit }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { direction: "row", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { size: "md", children: "Statement Summary" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", onClick: onEdit, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4 mr-2" }),
+        "Edit"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Account",
+          value: data.account,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Product ID",
+          value: data.productId,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Program ID",
+          value: data.programId,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Start Date",
+          value: data.startDate,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "End Date",
+          value: data.endDate,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Starting Balance",
+          value: data.startingBalance,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Ending Balance",
+          value: data.endingBalance,
+          layout: "horizontal"
+        }
+      )
+    ] }) })
+  ] });
+};
 var ACHDetailsSection = ({ data }) => {
   const formatCurrency = (value) => {
     return new Intl.NumberFormat("en-US", {
@@ -4871,6 +5276,7 @@ function DataTable({
   sortBy,
   sortDirection,
   onSort,
+  onRowClick,
   loading = false,
   emptyMessage = "No data available",
   className
@@ -4908,7 +5314,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}]`
@@ -4918,7 +5324,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__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
               column.title,
@@ -4932,12 +5338,16 @@ function DataTable({
     /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) }) : data.map((row, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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"
             ),
@@ -5170,50 +5580,6 @@ var DropdownMenuSeparator = React13__namespace.forwardRef(({ className, ...props
   }
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
-var EditableInfoField = ({
-  label,
-  value,
-  options,
-  onChange,
-  placeholder = "Select...",
-  renderValue,
-  className
-}) => {
-  const [isEditing, setIsEditing] = React13.useState(false);
-  const handleChange = (newValue) => {
-    onChange(newValue);
-    setIsEditing(false);
-  };
-  if (isEditing) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
-      EnhancedSelect,
-      {
-        label,
-        value: value || "",
-        onValueChange: handleChange,
-        options,
-        placeholder
-      }
-    ) });
-  }
-  const displayValue = value ? renderValue ? renderValue(value) : value : placeholder;
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(InfoField, { label, value: displayValue })
-    }
-  );
-};
 var EntityCard = React13__namespace.forwardRef(
   ({
     entity,
@@ -6335,22 +6701,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 } = reactRouterDom.useParams();
-  const navigate = reactRouterDom.useNavigate();
-  const alert = mockAlerts.find((a) => a.id === id);
+
+// src/hooks/useAlertDetail.ts
+var useAlertDetail = (id) => {
+  const alert = React13.useMemo(() => mockAlerts.find((a) => a.id === id), [id]);
   const [rfiStatus, setRfiStatus] = React13.useState(alert?.rfiStatus || "");
   const [assignee, setAssignee] = React13.useState(alert?.assignee || "Unassigned");
   const handleRfiStatusChange = (newStatus) => {
@@ -6361,6 +6715,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 } = reactRouterDom.useParams();
+  const navigate = reactRouterDom.useNavigate();
+  const {
+    alert,
+    rfiStatus,
+    assignee,
+    handleRfiStatusChange,
+    handleAssigneeChange
+  } = useAlertDetail(id);
   if (!alert) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold mb-2", children: "Alert Not Found" }),
@@ -6372,32 +6746,6 @@ var AlertDetail = () => {
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     PageLayout,
     {
@@ -6421,69 +6769,16 @@ var AlertDetail = () => {
           onClick: () => console.log("Close alert")
         }
       ],
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FormCard,
-            {
-              title: "Alert Information",
-              headerActions: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" }) }),
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Alert ID", value: alert.id }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  InfoField,
-                  {
-                    label: "Type",
-                    value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getTypeBadgeVariant(alert.type), children: alert.type })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  InfoField,
-                  {
-                    label: "Status",
-                    value: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", getStatusColor(alert.status)), children: alert.status })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created At", value: alert.createdAt }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  InfoField,
-                  {
-                    label: "Context Type",
-                    value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: alert.contextType })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Context ID", value: alert.contextId || "N/A" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  EditableInfoField,
-                  {
-                    label: "Assignee",
-                    value: assignee,
-                    options: ASSIGNEE_OPTIONS,
-                    onChange: handleAssigneeChange,
-                    placeholder: "Unassigned"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  EditableInfoField,
-                  {
-                    label: "RFI Status",
-                    value: rfiStatus,
-                    options: RFI_STATUS_OPTIONS,
-                    onChange: handleRfiStatusChange,
-                    placeholder: "Select status",
-                    renderValue: (value) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", children: value })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Description", value: alert.description }) })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ContextSection, { alert }),
-          /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Notes", children: /* @__PURE__ */ jsxRuntime.jsx(AlertNotes, { alertId: alert.id, notes: alert.notes || [] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Documents", children: /* @__PURE__ */ jsxRuntime.jsx(AlertDocuments, { alertId: alert.id, documents: alert.documents || [] }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Status Timeline", className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTimeline, { events: alert.timeline || [] }) }) })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        AlertDetailView,
+        {
+          alert,
+          rfiStatus,
+          assignee,
+          onRfiStatusChange: handleRfiStatusChange,
+          onAssigneeChange: handleAssigneeChange
+        }
+      )
     }
   );
 };
@@ -6542,7 +6837,7 @@ var Alerts = () => {
     setFilteredAlerts(mockAlerts);
     setCurrentPage(1);
   };
-  const getTypeBadgeVariant = (type) => {
+  const getTypeBadgeVariant2 = (type) => {
     switch (type) {
       case "Ofac":
         return "alert-ofac";
@@ -6556,7 +6851,7 @@ var Alerts = () => {
         return "outline";
     }
   };
-  const getStatusColor = (status) => {
+  const getStatusColor2 = (status) => {
     switch (status) {
       case "Unassigned":
         return "text-destructive";
@@ -6697,146 +6992,573 @@ var Alerts = () => {
                 }
               )
             ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SheetFooter, { className: "gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: resetFilters, children: "Reset Filters" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SheetFooter, { className: "gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: resetFilters, children: "Reset Filters" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
+          ] })
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 mt-4 rounded-lg border bg-card overflow-hidden flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full table-fixed", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-28" }),
+          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-36" }),
+          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-52" }),
+          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-32" }),
+          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-36" }),
+          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-32" }),
+          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-auto" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 bg-card z-10 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Alert ID" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Created At" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Status" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Context Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "RFI Status" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Description" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: paginatedAlerts.map((alert) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "tr",
+          {
+            className: "border-b hover:bg-muted/50 transition-colors cursor-pointer",
+            onClick: () => navigate(`/alerts/${alert.id}`),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: alert.id }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: alert.createdAt }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getTypeBadgeVariant2(alert.type), className: "whitespace-nowrap", children: alert.type }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium", getStatusColor2(alert.status)), children: alert.status }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "whitespace-nowrap", children: alert.contextType }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: alert.rfiStatus && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", className: "whitespace-nowrap", children: alert.rfiStatus }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs truncate", children: alert.description })
+            ]
+          },
+          alert.id
+        )) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none border-t bg-background py-3 px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page:" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1", children: [
+              rowsPerPage,
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 rotate-90" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "start", className: "bg-background z-50", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(100), children: "100" }),
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(200), children: "200" }),
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(500), children: "500" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+            "Page ",
+            currentPage,
+            " of ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "h-8 w-8 p-0",
+                onClick: () => handlePageChange(currentPage - 1),
+                disabled: currentPage === 1,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                className: "h-8 w-8 p-0",
+                onClick: () => handlePageChange(currentPage + 1),
+                disabled: currentPage === totalPages,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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 = reactRouterDom.useNavigate();
+  const [businesses, setBusinesses] = React13.useState(mockBusinessesList);
+  const [filteredBusinesses, setFilteredBusinesses] = React13.useState(mockBusinessesList);
+  const [sortBy, setSortBy] = React13.useState("created");
+  const [sortDirection, setSortDirection] = React13.useState("desc");
+  const [filters, setFilters] = React13.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-screen bg-gradient-subtle", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-4 max-w-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground", children: "Businesses" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1", children: "Manage business entities and their configurations" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", className: "gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4" }),
+            "Filters"
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-xl overflow-y-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Business Filters" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-6", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                EnhancedInput,
+                {
+                  label: "Name",
+                  value: filters.name,
+                  onChange: (e) => handleFilterChange("name", e.target.value),
+                  placeholder: "Enter business name"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                EnhancedInput,
+                {
+                  label: "Product Name",
+                  value: filters.productName,
+                  onChange: (e) => handleFilterChange("productName", e.target.value),
+                  placeholder: "Enter product name"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Created Date Start" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      Button,
+                      {
+                        variant: "outline",
+                        className: cn(
+                          "w-full justify-start text-left font-normal",
+                          !filters.createdDateStart && "text-muted-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "mr-2 h-4 w-4" }),
+                          filters.createdDateStart ? dateFns.format(filters.createdDateStart, "MM/dd/yyyy") : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "MM/DD/YYYY" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Calendar,
+                      {
+                        mode: "single",
+                        selected: filters.createdDateStart,
+                        onSelect: (date) => handleFilterChange("createdDateStart", date),
+                        initialFocus: true,
+                        className: "pointer-events-auto"
+                      }
+                    ) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Created Date End" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      Button,
+                      {
+                        variant: "outline",
+                        className: cn(
+                          "w-full justify-start text-left font-normal",
+                          !filters.createdDateEnd && "text-muted-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "mr-2 h-4 w-4" }),
+                          filters.createdDateEnd ? dateFns.format(filters.createdDateEnd, "MM/dd/yyyy") : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "MM/DD/YYYY" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Calendar,
+                      {
+                        mode: "single",
+                        selected: filters.createdDateEnd,
+                        onSelect: (date) => handleFilterChange("createdDateEnd", date),
+                        initialFocus: true,
+                        className: "pointer-events-auto"
+                      }
+                    ) })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(SheetFooter, { className: "gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: resetFilters, children: "Reset Filters" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
+            ] })
           ] })
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => navigate("/business/create"), children: "Create Business" })
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 mt-4 rounded-lg border bg-card overflow-hidden flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full table-fixed", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-28" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-36" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-52" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-32" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-36" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-32" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-auto" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 bg-card z-10 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Alert ID" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Created At" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Type" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Status" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Context Type" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "RFI Status" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Description" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: paginatedAlerts.map((alert) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "tr",
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 mt-4 overflow-auto", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StatusBadge, { status: value })
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto p-6 space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Business Management" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: "profile", className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          TabsTrigger,
           {
-            className: "border-b hover:bg-muted/50 transition-colors cursor-pointer",
-            onClick: () => navigate(`/alerts/${alert.id}`),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: alert.id }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: alert.createdAt }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getTypeBadgeVariant(alert.type), className: "whitespace-nowrap", children: alert.type }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium", getStatusColor(alert.status)), children: alert.status }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "whitespace-nowrap", children: alert.contextType }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: alert.rfiStatus && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", className: "whitespace-nowrap", children: alert.rfiStatus }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs truncate", children: alert.description })
-            ]
-          },
-          alert.id
-        )) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none border-t bg-background py-3 px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page:" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1", children: [
-              rowsPerPage,
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 rotate-90" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "start", className: "bg-background z-50", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(100), children: "100" }),
-              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(200), children: "200" }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TabsContent, { value: "profile", className: "space-y-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row items-start gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(BusinessProfileCard, { isEditing: false, onToggleEdit: () => {
+          } }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Accounts" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", children: "+ New Account" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              DataTable,
+              {
+                columns: accountColumns,
+                data: businessAccounts,
+                emptyMessage: "No accounts found"
+              }
+            ) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
-            "Page ",
-            currentPage,
-            " of ",
-            totalPages
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(BusinessStatusCard, { isEditing: false, onToggleEdit: () => {
+        } }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "kyc", className: "space-y-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground", children: "KYC content coming soon" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "counterparty", className: "space-y-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6", children: businessCounterparties.map((counterparty) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-lg", children: counterparty.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(CounterpartyTypeBadge, { type: counterparty.type })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "outline",
-                size: "sm",
-                className: "h-8 w-8 p-0",
-                onClick: () => handlePageChange(currentPage - 1),
-                disabled: currentPage === 1,
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "outline",
-                size: "sm",
-                className: "h-8 w-8 p-0",
-                onClick: () => handlePageChange(currentPage + 1),
-                disabled: currentPage === totalPages,
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-              }
-            )
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: counterparty.status === "active" ? "default" : "secondary", children: counterparty.status }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: counterparty.description }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Last Transaction" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: counterparty.lastTransaction })
           ] })
         ] })
-      ] }) })
-    ] }) }) })
+      ] }, counterparty.id)) }) })
+    ] })
   ] });
 };
-var Alerts_default = Alerts;
-var Business = () => {
-  return /* @__PURE__ */ jsxRuntime.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] = React13.useState("");
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7208,6 +7930,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] = React13.useState("");
+  const [selectedProgram, setSelectedProgram] = React13.useState("");
+  const [selectedProduct, setSelectedProduct] = React13.useState("");
+  const [accountNumber, setAccountNumber] = React13.useState("");
+  const [startDate, setStartDate] = React13.useState();
+  const [endDate, setEndDate] = React13.useState();
+  const [statementGenerated, setStatementGenerated] = React13.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "container mx-auto p-6 space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Statement" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1", children: "Generate and view statement reports" })
+    ] }),
+    !statementGenerated && /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { size: "md", children: "Statement Parameters" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedSelect,
+            {
+              label: "Statement Type",
+              placeholder: "Select type",
+              options: statementTypes,
+              value: statementType,
+              onValueChange: handleStatementTypeChange
+            }
+          ),
+          statementType === "program" && /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedSelect,
+            {
+              label: "Program Name",
+              placeholder: "Select program",
+              options: mockPrograms,
+              value: selectedProgram,
+              onValueChange: setSelectedProgram
+            }
+          ),
+          statementType === "product" && /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedSelect,
+            {
+              label: "Product Name",
+              placeholder: "Select product",
+              options: mockProducts,
+              value: selectedProduct,
+              onValueChange: setSelectedProduct
+            }
+          ),
+          statementType === "account" && /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedInput,
+            {
+              label: "Account Number",
+              placeholder: "Enter account number",
+              value: accountNumber,
+              onChange: (e) => setAccountNumber(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Start Date" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "justify-start text-left font-normal",
+                    !startDate && "text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 h-4 w-4" }),
+                    startDate ? dateFns.format(startDate, "MM/dd/yyyy") : "Select date"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  selected: startDate,
+                  onSelect: setStartDate,
+                  initialFocus: true
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "End Date" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "justify-start text-left font-normal",
+                    !endDate && "text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 h-4 w-4" }),
+                    endDate ? dateFns.format(endDate, "MM/dd/yyyy") : "Select date"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  selected: endDate,
+                  onSelect: setEndDate,
+                  initialFocus: true
+                }
+              ) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            onClick: handleGenerateStatement,
+            disabled: isGenerateDisabled(),
+            children: "Generate Statement"
+          }
+        ) })
+      ] })
+    ] }),
+    statementGenerated && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StatementHeader, { data: mockStatementHeader, onEdit: handleEdit }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { direction: "row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { size: "md", children: "Transaction Summary" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: handleDownloadCSV, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4 mr-2" }),
+              "Download CSV"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: handlePrintPDF, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-4 w-4 mr-2" }),
+              "Print PDF"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          DataTable,
+          {
+            columns,
+            data: mockStatementTransactions,
+            emptyMessage: "No transactions found"
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+
 // src/lib/mock-data/transaction-data.ts
 var mockTransactions = [
   {
@@ -8624,6 +9598,7 @@ exports.ACHTransferSection = ACHTransferSection;
 exports.AccountCard = AccountCard;
 exports.AddressForm = AddressForm;
 exports.AlertDetail = AlertDetail_default;
+exports.AlertDetailView = AlertDetailView;
 exports.AlertDocuments = AlertDocuments;
 exports.AlertNotes = AlertNotes;
 exports.AlertTimeline = AlertTimeline;
@@ -8638,10 +9613,11 @@ exports.BeneficiaryAddress = BeneficiaryAddress;
 exports.BeneficiaryCard = BeneficiaryCard;
 exports.BeneficiaryDomesticWire = BeneficiaryDomesticWire;
 exports.Breadcrumb = Breadcrumb;
-exports.Business = Business_default;
+exports.BusinessDetail = BusinessDetail_default;
 exports.BusinessProfileCard = BusinessProfileCard;
 exports.BusinessStatusCard = BusinessStatusCard;
 exports.BusinessTypeBadge = BusinessTypeBadge;
+exports.Businesses = Businesses_default;
 exports.Button = Button;
 exports.Calendar = Calendar;
 exports.Card = Card;
@@ -8752,6 +9728,8 @@ exports.SidebarRail = SidebarRail;
 exports.SidebarSeparator = SidebarSeparator;
 exports.SidebarTrigger = SidebarTrigger;
 exports.Stack = Stack;
+exports.Statement = Statement;
+exports.StatementHeader = StatementHeader;
 exports.StatusBadge = StatusBadge;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
@@ -8782,6 +9760,7 @@ exports.inputVariants = inputVariants;
 exports.reducer = reducer;
 exports.textareaVariants = textareaVariants;
 exports.toast = toast;
+exports.useAlertDetail = useAlertDetail;
 exports.useEditState = useEditState;
 exports.useFormWithEditState = useFormWithEditState;
 exports.useIsMobile = useIsMobile;