braid-ui 1.0.4 → 1.0.6

package/dist/index.cjs

@@ -1,31 +1,33 @@
 'use strict';
 
-var React13 = require('react');
+var React15 = require('react');
 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 reactSlot = require('@radix-ui/react-slot');
 var SelectPrimitive = require('@radix-ui/react-select');
-var DialogPrimitive = require('@radix-ui/react-dialog');
 var reactRouterDom = require('react-router-dom');
-var reactCollapsible = require('@radix-ui/react-collapsible');
-var SeparatorPrimitive = require('@radix-ui/react-separator');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+var DialogPrimitive = require('@radix-ui/react-dialog');
 var reactHookForm = require('react-hook-form');
 var zod$1 = require('@hookform/resolvers/zod');
 var zod = require('zod');
+var reactCollapsible = require('@radix-ui/react-collapsible');
+var SeparatorPrimitive = require('@radix-ui/react-separator');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var LabelPrimitive = require('@radix-ui/react-label');
+var dateFns = require('date-fns');
 var reactDayPicker = require('react-day-picker');
-var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var PopoverPrimitive = require('@radix-ui/react-popover');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var nextThemes = require('next-themes');
 var sonner = require('sonner');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var ToastPrimitives = require('@radix-ui/react-toast');
-var dateFns = require('date-fns');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -45,18 +47,20 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React13__namespace = /*#__PURE__*/_interopNamespace(React13);
+var React15__namespace = /*#__PURE__*/_interopNamespace(React15);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
-var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var ToastPrimitives__namespace = /*#__PURE__*/_interopNamespace(ToastPrimitives);
 
-// src/components/ui/form-card.tsx
+// src/components/alerts/OFACAlertView.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -94,7 +98,7 @@ var cardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Card = React13__namespace.forwardRef(
+var Card = React15__namespace.forwardRef(
   ({ className, variant, size, fullHeight, interactive, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -131,7 +135,7 @@ var cardHeaderVariants = classVarianceAuthority.cva(
     }
   }
 );
-var CardHeader = React13__namespace.forwardRef(
+var CardHeader = React15__namespace.forwardRef(
   ({ className, size, align, direction, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -157,7 +161,7 @@ var cardTitleVariants = classVarianceAuthority.cva(
     }
   }
 );
-var CardTitle = React13__namespace.forwardRef(
+var CardTitle = React15__namespace.forwardRef(
   ({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "h3",
     {
@@ -168,7 +172,7 @@ var CardTitle = React13__namespace.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "p",
   {
     ref,
@@ -197,7 +201,7 @@ var cardContentVariants = classVarianceAuthority.cva(
     }
   }
 );
-var CardContent = React13__namespace.forwardRef(
+var CardContent = React15__namespace.forwardRef(
   ({ className, size, fullHeight, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -230,7 +234,7 @@ var cardFooterVariants = classVarianceAuthority.cva(
     }
   }
 );
-var CardFooter = React13__namespace.forwardRef(
+var CardFooter = React15__namespace.forwardRef(
   ({ className, size, justify, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -241,7 +245,7 @@ var CardFooter = React13__namespace.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
-var FormCard = React13__namespace.forwardRef(
+var FormCard = React15__namespace.forwardRef(
   ({ title, description, children, headerActions, className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     Card,
     {
@@ -268,45 +272,6 @@ var FormCard = React13__namespace.forwardRef(
   )
 );
 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",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React13__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "button";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
 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",
   {
@@ -318,6 +283,8 @@ var badgeVariants = classVarianceAuthority.cva(
         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",
+        inbound: "border-transparent bg-blue-500 text-white hover:bg-blue-600",
+        outbound: "border-transparent bg-orange-500 text-white hover:bg-orange-600",
         // 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",
@@ -350,6 +317,11 @@ function Badge({ className, variant, ...props }) {
 }
 var AlertTimeline = ({ events }) => {
   const getIcon = (action) => {
+    if (action.includes("Note added")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.StickyNote, { className: "h-4 w-4" });
+    if (action.includes("Document added")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileUp, { className: "h-4 w-4" });
+    if (action.includes("Alert Approved")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4" });
+    if (action.includes("Alert Declined")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-4 w-4" });
+    if (action.includes("RFI Status change")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" });
     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" });
@@ -357,7 +329,12 @@ var AlertTimeline = ({ events }) => {
     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) => {
+  const getStatusColor2 = (status, action) => {
+    if (action?.includes("Note added")) return "text-blue-500";
+    if (action?.includes("Document added")) return "text-purple-500";
+    if (action?.includes("Alert Approved")) return "text-success";
+    if (action?.includes("Alert Declined")) return "text-destructive";
+    if (action?.includes("RFI Status change")) return "text-warning";
     switch (status) {
       case "Unassigned":
         return "text-destructive";
@@ -374,10 +351,7 @@ var AlertTimeline = ({ events }) => {
   }
   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.jsx("div", { className: cn("absolute left-0 top-0 flex-none", getStatusColor2(event.status, event.action)), 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: [
@@ -385,14 +359,49 @@ var AlertTimeline = ({ events }) => {
         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)) });
 };
+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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React15__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 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",
   {
@@ -410,7 +419,7 @@ var textareaVariants = classVarianceAuthority.cva(
     }
   }
 );
-var EnhancedTextarea = React13__namespace.forwardRef(
+var EnhancedTextarea = React15__namespace.forwardRef(
   ({ className, variant, label, hint, error, success, ...props }, ref) => {
     const textareaVariant = error ? "error" : success ? "success" : props.disabled ? "disabled" : props.readOnly ? "readonly" : variant;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
@@ -449,9 +458,9 @@ var selectVariants = classVarianceAuthority.cva(
     }
   }
 );
-var EnhancedSelect = React13__namespace.forwardRef(({ variant, label, hint, error, success, placeholder, options, disabled, ...props }, ref) => {
+var EnhancedSelect = React15__namespace.forwardRef(({ variant, label, hint, error, success, placeholder, options, disabled, className, ...props }, ref) => {
   const selectVariant = error ? "error" : success ? "success" : disabled ? "disabled" : variant;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2", className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Root, { ...props, disabled, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -465,7 +474,7 @@ var EnhancedSelect = React13__namespace.forwardRef(({ variant, label, hint, erro
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Content, { className: "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Content, { className: "relative z-[9999] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: "p-1", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
           SelectPrimitive__namespace.Item,
@@ -589,8 +598,8 @@ function toast({ ...props }) {
   };
 }
 function useToast() {
-  const [state, setState] = React13__namespace.useState(memoryState);
-  React13__namespace.useEffect(() => {
+  const [state, setState] = React15__namespace.useState(memoryState);
+  React15__namespace.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -610,10 +619,10 @@ var NOTE_TYPE_OPTIONS = [
   { 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 [showNoteDialog, setShowNoteDialog] = React15.useState(false);
+  const [newNote, setNewNote] = React15.useState("");
+  const [noteType, setNoteType] = React15.useState("RFI Note");
+  const [isSubmitting, setIsSubmitting] = React15.useState(false);
   const resetForm = () => {
     setNewNote("");
     setNoteType("RFI Note");
@@ -690,7 +699,8 @@ var AlertNotes = ({ alertId, notes }) => {
                 placeholder: "Enter your note here...",
                 value: newNote,
                 onChange: (e) => setNewNote(e.target.value),
-                rows: 6
+                rows: 6,
+                required: true
               }
             )
           ] }),
@@ -747,7 +757,7 @@ var AlertNotes = ({ alertId, notes }) => {
             /* @__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.jsx(Badge, { variant: note.type === "RFI Note" ? "default" : "outline", children: note.type === "RFI Note" ? "RFI" : "Internal" })
               ] }),
               /* @__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 }),
@@ -794,7 +804,7 @@ var inputVariants = classVarianceAuthority.cva(
     }
   }
 );
-var EnhancedInput = React13__namespace.forwardRef(
+var EnhancedInput = React15__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: [
@@ -821,12 +831,12 @@ var EnhancedInput = React13__namespace.forwardRef(
 );
 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 [isUploading, setIsUploading] = React15.useState(false);
+  const [showUploadDialog, setShowUploadDialog] = React15.useState(false);
+  const [selectedFile, setSelectedFile] = React15.useState(null);
+  const [documentName, setDocumentName] = React15.useState("");
+  const [description, setDescription] = React15.useState("");
+  const [documentType, setDocumentType] = React15.useState("");
   const handleFileSelect = (e) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -1058,10 +1068,8 @@ var AlertDocuments = ({ alertId, documents }) => {
               /* @__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 })
-                  ] }),
+                  /* @__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 inline-block mt-1", 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,
@@ -1133,23 +1141,127 @@ var InfoField = ({ label, value, layout = "vertical", className }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `text-sm text-foreground ${label ? "mt-1" : ""}`, children: value })
   ] });
 };
+var ScrollArea = React15__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  ScrollAreaPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
+var ScrollBar = React15__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
+var Table = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
 var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
 var DialogClose = DialogPrimitive__namespace.Close;
-var DialogOverlay = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogOverlay = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-white/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
   }
 ));
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React13__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+var DialogContent = React15__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     DialogPrimitive__namespace.Content,
@@ -1199,7 +1311,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogTitle = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Title,
   {
     ref,
@@ -1211,7 +1323,7 @@ var DialogTitle = React13__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -1221,7 +1333,7 @@ var DialogDescription = React13__namespace.forwardRef(({ className, ...props },
 ));
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var JsonViewer = ({ data, className, compact = false, maxHeight = "60vh" }) => {
-  const [copied, setCopied] = React13.useState(false);
+  const [copied, setCopied] = React15.useState(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(JSON.stringify(data, null, 2));
     setCopied(true);
@@ -1258,7 +1370,7 @@ var JsonViewer = ({ data, className, compact = false, maxHeight = "60vh" }) => {
   ] });
 };
 var JsonNode = ({ data, name, depth, compact = false }) => {
-  const [isExpanded, setIsExpanded] = React13.useState(compact ? depth < 1 : depth < 2);
+  const [isExpanded, setIsExpanded] = React15.useState(compact ? depth < 1 : depth < 2);
   const indent = compact ? depth * 12 : depth * 16;
   if (data === null) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: indent }, className: "text-muted-foreground", children: [
@@ -1320,45 +1432,124 @@ var JsonNode = ({ data, name, depth, compact = false }) => {
     ] })
   ] });
 };
-var ContextSection = ({ alert }) => {
-  const [isDialogOpen, setIsDialogOpen] = React13.useState(false);
+var OFACAlertView = ({ alert }) => {
+  const [isJsonDialogOpen, setIsJsonDialogOpen] = React15.useState(false);
+  const parseOFACMatches = (data) => {
+    if (!data.rawResults || !data.ofacCheckDetails) return [];
+    try {
+      const rawResults = JSON.parse(data.rawResults);
+      const tableRows = [];
+      const getListName = (listType) => {
+        const listNames = {
+          "SDNs": "OFAC SDN List",
+          "altNames": "OFAC Alternate Names",
+          "sectoralSanctions": "OFAC Sectoral Sanctions",
+          "nonSDNMenuBasedSanctionsList": "OFAC Non-SDN List",
+          "ukConsolidatedSanctionsList": "UK Consolidated List"
+        };
+        return listNames[listType] || listType;
+      };
+      const formatCheckKey = (key) => {
+        return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+      };
+      const listTypes = [
+        { key: "SDNs", nameField: "sdnName" },
+        { key: "altNames", nameField: "alternateName" },
+        { key: "sectoralSanctions", nameField: "Name" },
+        { key: "nonSDNMenuBasedSanctionsList", nameField: "Name" },
+        { key: "ukConsolidatedSanctionsList", nameField: "Names" }
+      ];
+      listTypes.forEach(({ key, nameField }) => {
+        const list = rawResults[key];
+        if (list && Array.isArray(list)) {
+          list.forEach((item) => {
+            data.ofacCheckDetails.forEach((check) => {
+              tableRows.push({
+                type: formatCheckKey(check.checkKey),
+                name: check.checkValue,
+                matchedName: item.matchedName || item[nameField] || "N/A",
+                list: getListName(key),
+                matchScore: item.match ? `${(item.match * 100).toFixed(2)}%` : "N/A"
+              });
+            });
+          });
+        }
+      });
+      return tableRows;
+    } catch (error) {
+      console.error("Error parsing OFAC results:", error);
+      return [];
+    }
+  };
   const renderOFACContext = () => {
     const data = alert.contextData;
     if (!data) return null;
+    const tableRows = parseOFACMatches(data);
+    const entityName = data.counterpartyName || data.businessName || data.individualName || data.transactionPaymentId || "N/A";
+    const entityType = data.counterpartyName ? "Counterparty" : data.businessName ? "Business" : data.individualName ? "Individual" : data.transactionPaymentId ? "Transaction" : "N/A";
+    const entityId = data.counterpartyId || data.businessId || data.individualId || data.transactionPaymentId;
+    const entityLink = entityId ? data.counterpartyId ? `/counterparties/${entityId}` : data.businessId ? `/businesses/${entityId}` : data.individualId ? `/individuals/${entityId}` : data.transactionPaymentId ? `/transactions/${entityId}` : null : null;
     return /* @__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: "Entity Name", value: data.entityName }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Entity Type", value: data.entityType }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Match Score", value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "alert-ofac", children: data.matchScore }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "List Name", value: data.listName })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium mb-3", children: "Flagged Items" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto border rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "border-b bg-muted/50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium", children: "Field" }),
-            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium", children: "Value" }),
-            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium", children: "Match Score" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.flaggedItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b hover:bg-muted/50", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 text-sm font-medium", children: item.field }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 text-sm", children: item.value }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: parseInt(item.matchScore) > 90 ? "alert-ofac" : "outline", children: item.matchScore }) })
-          ] }, index)) })
-        ] }) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          InfoField,
+          {
+            label: "Entity Name",
+            value: entityLink ? /* @__PURE__ */ jsxRuntime.jsx(
+              reactRouterDom.Link,
+              {
+                to: entityLink,
+                className: "text-primary hover:underline",
+                children: entityName
+              }
+            ) : entityName,
+            layout: "horizontal"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Entity Type", value: entityType, layout: "horizontal" })
       ] }),
-      alert.contextData && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          variant: "ghost",
-          className: "w-full justify-between h-auto py-3 px-4 border rounded-lg hover:bg-muted/50",
-          onClick: () => setIsDialogOpen(true),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Detail Result" }),
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-          ]
-        }
-      ) })
+      tableRows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-[300px] rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: "Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: "Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: "Matched Name" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(TableHead, { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "List" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { open: isJsonDialogOpen, onOpenChange: setIsJsonDialogOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-6 w-6 text-primary hover:text-primary/80",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileJson, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-4xl max-h-[80vh]", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "OFAC Raw Results" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Complete JSON response from the OFAC screening check" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  JsonViewer,
+                  {
+                    data: data.rawResults ? JSON.parse(data.rawResults) : {},
+                    maxHeight: "60vh"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: "Match Score" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: tableRows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: row.type }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: row.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: row.matchedName }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: row.list }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: row.matchScore })
+        ] }, index)) })
+      ] }) }) })
     ] });
   };
   const renderTransactionContext = () => {
@@ -1385,20 +1576,6 @@ var ContextSection = ({ alert }) => {
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Reason", value: "Compliance review required" })
     ] });
   };
-  const getContextTitle = () => {
-    switch (alert.contextType) {
-      case "Ofac":
-        return "OFAC Context";
-      case "Transaction":
-        return "Transaction Context";
-      case "File Record":
-        return "File Processing Context";
-      case "Product":
-        return "Product Context";
-      default:
-        return "Context Information";
-    }
-  };
   const renderContext = () => {
     switch (alert.contextType) {
       case "Ofac":
@@ -1413,87 +1590,39 @@ var ContextSection = ({ alert }) => {
         return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No additional context available" });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: getContextTitle(), children: renderContext() }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isDialogOpen, onOpenChange: setIsDialogOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-4xl", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { children: [
-        getContextTitle(),
-        " - Detail Result"
+  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 Details", className: "lg:col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Description", value: alert.description, layout: "horizontal" }),
+        renderContext()
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(JsonViewer, { data: alert.contextData })
-    ] }) })
+      /* @__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 || [] }) }) })
   ] });
 };
-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) {
+var AlertDetailRouter = ({ alert }) => {
+  switch (alert.type) {
     case "Ofac":
-      return "alert-ofac";
-    case "Dual Approval":
-      return "alert-dual";
+      return /* @__PURE__ */ jsxRuntime.jsx(OFACAlertView, { alert });
     case "Transaction Monitoring":
-      return "alert-monitoring";
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Transaction Monitoring view - Coming soon" });
+    case "Prohibited Entity":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Prohibited Entity view - Coming soon" });
+    case "314a":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "314a view - Coming soon" });
+    case "Dual Approval":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Dual Approval view - Coming soon" });
     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";
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Transaction Processing Error view - Coming soon" });
+    case "ACH Return":
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "ACH Return view - Coming soon" });
     default:
-      return "";
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        "Unknown alert type: ",
+        alert.type
+      ] });
   }
 };
 
@@ -1531,134 +1660,505 @@ var ASSIGNEE_OPTIONS = [
   { value: "approverdev", label: "approverdev" },
   { value: "Unassigned", label: "Unassigned" }
 ];
-var AlertDetailView = ({
-  alert,
-  rfiStatus,
+
+// 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 "";
+  }
+};
+var AlertHeaderControls = ({
+  status,
   assignee,
-  onRfiStatusChange,
-  onAssigneeChange
+  rfiStatus,
+  onAssigneeChange,
+  onRfiStatusChange
 }) => {
-  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: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Status:" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium text-sm", getStatusColor(status)), children: status })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-[180px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Assignee:" }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        FormCard,
+        EnhancedSelect,
         {
-          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 }) })
-          ] })
+          value: assignee,
+          onValueChange: onAssigneeChange,
+          options: ASSIGNEE_OPTIONS,
+          placeholder: "Unassigned"
         }
-      ),
-      /* @__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 || [] }) }) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-[180px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "RFI Status:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EnhancedSelect,
+        {
+          value: rfiStatus,
+          onValueChange: onRfiStatusChange,
+          options: RFI_STATUS_OPTIONS,
+          placeholder: "Select status"
+        }
+      )
+    ] })
   ] });
 };
-
-// src/assets/braid-logo.png
-var braid_logo_default = "./braid-logo-343BOQZ2.png";
-var MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React13__namespace.useState(void 0);
-  React13__namespace.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-  return !!isMobile;
-}
-var Separator = React13__namespace.forwardRef(
-  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    SeparatorPrimitive__namespace.Root,
-    {
-      ref,
-      decorative,
-      orientation,
-      className: cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      ),
-      ...props
+var ContextSection = ({ alert }) => {
+  const [isDialogOpen, setIsDialogOpen] = React15.useState(false);
+  const renderOFACContext = () => {
+    const data = alert.contextData;
+    if (!data) return null;
+    return /* @__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: "Entity Name", value: data.entityName }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Entity Type", value: data.entityType }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Match Score", value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "alert-ofac", children: data.matchScore }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "List Name", value: data.listName })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium mb-3", children: "Flagged Items" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto border rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "border-b bg-muted/50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium", children: "Field" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium", children: "Value" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium", children: "Match Score" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.flaggedItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b hover:bg-muted/50", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 text-sm font-medium", children: item.field }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 text-sm", children: item.value }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: parseInt(item.matchScore) > 90 ? "alert-ofac" : "outline", children: item.matchScore }) })
+          ] }, index)) })
+        ] }) })
+      ] }),
+      alert.contextData && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "ghost",
+          className: "w-full justify-between h-auto py-3 px-4 border rounded-lg hover:bg-muted/50",
+          onClick: () => setIsDialogOpen(true),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Detail Result" }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+          ]
+        }
+      ) })
+    ] });
+  };
+  const renderTransactionContext = () => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Transaction ID", value: "TXN-12345" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Amount", value: "$30,000.00" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Transaction Type", value: "Wire Transfer" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Date", value: "2025-09-30" })
+    ] });
+  };
+  const renderFileRecordContext = () => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "File Name", value: "wire_batch_093025.csv" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Record Count", value: "1,234" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Error Count", value: "3" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Status", value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "alert-error", children: "Failed" }) })
+    ] });
+  };
+  const renderProductContext = () => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Product ID", value: "PROD-2787" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Product Name", value: "Business Checking Account" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Status", value: "Pending Deactivation" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Reason", value: "Compliance review required" })
+    ] });
+  };
+  const getContextTitle = () => {
+    switch (alert.contextType) {
+      case "Ofac":
+        return "OFAC Context";
+      case "Transaction":
+        return "Transaction Context";
+      case "File Record":
+        return "File Processing Context";
+      case "Product":
+        return "Product Context";
+      default:
+        return "Context Information";
     }
-  )
-);
-Separator.displayName = SeparatorPrimitive__namespace.Root.displayName;
-var Sheet = DialogPrimitive__namespace.Root;
-var SheetTrigger = DialogPrimitive__namespace.Trigger;
-var SheetClose = DialogPrimitive__namespace.Close;
-var SheetPortal = DialogPrimitive__namespace.Portal;
-var SheetOverlay = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
-  {
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props,
-    ref
-  }
-));
-SheetOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var sheetVariants = classVarianceAuthority.cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+  };
+  const renderContext = () => {
+    switch (alert.contextType) {
+      case "Ofac":
+        return renderOFACContext();
+      case "Transaction":
+        return renderTransactionContext();
+      case "File Record":
+        return renderFileRecordContext();
+      case "Product":
+        return renderProductContext();
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No additional context available" });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: getContextTitle(), children: renderContext() }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isDialogOpen, onOpenChange: setIsDialogOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-4xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { children: [
+        getContextTitle(),
+        " - Detail Result"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(JsonViewer, { data: alert.contextData })
+    ] }) })
+  ] });
+};
+var FormProvider = ({
+  form,
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children });
+};
+var FormInput = ({
+  name,
+  ...props
+}) => {
+  const { control, formState } = reactHookForm.useFormContext();
+  const error = formState.errors[name]?.message;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
+        EnhancedInput,
+        {
+          ...props,
+          ...field,
+          error
+        }
+      )
+    }
+  );
+};
+var FormSelect = ({
+  name,
+  ...props
+}) => {
+  const { control, formState } = reactHookForm.useFormContext();
+  const error = formState.errors[name]?.message;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
+        EnhancedSelect,
+        {
+          ...props,
+          value: field.value,
+          onValueChange: field.onChange,
+          error
+        }
+      )
+    }
+  );
+};
+var useFormWithEditState = ({
+  schema,
+  initialEditing = false,
+  onToggleEdit,
+  onSave,
+  onCancel,
+  ...formProps
+}) => {
+  const [localEditing, setLocalEditing] = React15.useState(initialEditing);
+  const [isLoading, setIsLoading] = React15.useState(false);
+  const form = reactHookForm.useForm({
+    ...formProps,
+    resolver: schema ? zod$1.zodResolver(schema) : void 0
+  });
+  const { formState, reset, setError } = form;
+  const { isValid, isDirty } = formState;
+  React15.useEffect(() => {
+    setLocalEditing(initialEditing);
+  }, [initialEditing]);
+  const isEditing = onToggleEdit !== void 0 ? initialEditing : localEditing;
+  const handleToggleEdit = React15.useCallback(() => {
+    if (onToggleEdit) {
+      onToggleEdit();
+    } else {
+      setLocalEditing((prev) => !prev);
+    }
+  }, [onToggleEdit]);
+  const handleSave = React15.useCallback(async () => {
+    if (!isValid) return;
+    setIsLoading(true);
+    try {
+      const data = form.getValues();
+      if (onSave) {
+        await onSave(data);
+      }
+      if (onToggleEdit) {
+        onToggleEdit();
+      } else {
+        setLocalEditing(false);
+      }
+    } catch (error) {
+      console.error("Form save error:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [form, isValid, onSave, onToggleEdit]);
+  const handleCancel = React15.useCallback(() => {
+    reset();
+    if (onCancel) {
+      onCancel();
+    }
+    if (onToggleEdit) {
+      onToggleEdit();
+    } else {
+      setLocalEditing(false);
+    }
+  }, [reset, onCancel, onToggleEdit]);
+  const setFieldError = React15.useCallback((field, error) => {
+    setError(field, { type: "manual", message: error });
+  }, [setError]);
+  return {
+    ...form,
+    isEditing,
+    isLoading,
+    handleToggleEdit,
+    handleSave,
+    handleCancel,
+    isFormValid: isValid,
+    isDirty,
+    setFieldError
+  };
+};
+var resolveAlertSchema = zod.z.object({
+  action: zod.z.enum(["APPROVE", "DECLINE", "CLOSE"], {
+    required_error: "Please select an action"
+  }),
+  changeToAccount: zod.z.string().optional(),
+  note: zod.z.string().min(1, "Note is required").max(1e3, "Note must be less than 1000 characters"),
+  returnCode: zod.z.string().optional()
+}).refine((data) => {
+  if (data.action === "DECLINE" && !data.returnCode) {
+    return false;
+  }
+  return true;
+}, {
+  message: "Return code is required when declining",
+  path: ["returnCode"]
+});
+var RETURN_CODES = [
+  { value: "R03_NO_ACCOUNT", label: "R03 - No Account/Unable to Locate Account" },
+  { value: "R01_INSUFFICIENT_FUNDS", label: "R01 - Insufficient Funds" },
+  { value: "R02_ACCOUNT_CLOSED", label: "R02 - Account Closed" },
+  { value: "R04_INVALID_ACCOUNT", label: "R04 - Invalid Account Number" },
+  { value: "R10_UNAUTHORIZED", label: "R10 - Customer Advises Unauthorized" },
+  { value: "R07_AUTHORIZATION_REVOKED", label: "R07 - Authorization Revoked" },
+  { value: "R08_PAYMENT_STOPPED", label: "R08 - Payment Stopped" },
+  { value: "R09_UNCOLLECTED_FUNDS", label: "R09 - Uncollected Funds" }
+];
+var ResolveAlertDialog = ({
+  alertId,
+  open,
+  onOpenChange,
+  onResolve
+}) => {
+  const form = useFormWithEditState({
+    schema: resolveAlertSchema,
+    defaultValues: {
+      action: "APPROVE",
+      changeToAccount: "",
+      note: "",
+      returnCode: ""
+    }
+  });
+  const { handleSubmit, watch, control, formState } = form;
+  const action = watch("action");
+  const onSubmit = async (data) => {
+    try {
+      await onResolve(data);
+      toast({
+        title: "Alert Resolved",
+        description: `Alert #${alertId} has been ${data.action.toLowerCase()}d successfully.`
+      });
+      onOpenChange(false);
+      form.reset();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to resolve alert. Please try again.",
+        variant: "destructive"
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-[600px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { children: [
+        "Resolve Alert #",
+        alertId
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Select an action and provide details to resolve this alert." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormSelect,
+        {
+          name: "action",
+          label: "Action",
+          placeholder: "Select action",
+          options: [
+            { value: "APPROVE", label: "Approve" },
+            { value: "DECLINE", label: "Decline" },
+            { value: "CLOSE", label: "Close" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "changeToAccount",
+          label: "Change to Account (Optional)",
+          placeholder: "Enter account number"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-foreground", children: [
+          "Note ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactHookForm.Controller,
+          {
+            name: "note",
+            control,
+            render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
+              EnhancedTextarea,
+              {
+                ...field,
+                placeholder: "Enter resolution notes...",
+                rows: 4,
+                error: formState.errors.note?.message
+              }
+            )
+          }
+        )
+      ] }),
+      action === "DECLINE" && /* @__PURE__ */ jsxRuntime.jsx(
+        FormSelect,
+        {
+          name: "returnCode",
+          label: "Return Code",
+          placeholder: "Select return code",
+          options: RETURN_CODES.map((code) => ({
+            value: code.value,
+            label: code.label
+          }))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => {
+              onOpenChange(false);
+              form.reset();
+            },
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "submit",
+            disabled: !formState.isValid || formState.isSubmitting,
+            children: formState.isSubmitting ? "Submitting..." : "Resolve"
+          }
+        )
+      ] })
+    ] }) })
+  ] }) });
+};
+
+// src/assets/braid-logo.png
+var braid_logo_default = "./braid-logo-343BOQZ2.png";
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React15__namespace.useState(void 0);
+  React15__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+var Separator = React15__namespace.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    SeparatorPrimitive__namespace.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive__namespace.Root.displayName;
+var Sheet = DialogPrimitive__namespace.Root;
+var SheetTrigger = DialogPrimitive__namespace.Trigger;
+var SheetClose = DialogPrimitive__namespace.Close;
+var SheetPortal = DialogPrimitive__namespace.Portal;
+var SheetOverlay = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-white/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+var sheetVariants = classVarianceAuthority.cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
         right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
       }
@@ -1668,7 +2168,7 @@ var sheetVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SheetContent = React13__namespace.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
+var SheetContent = React15__namespace.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     DialogPrimitive__namespace.Content,
@@ -1715,7 +2215,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetTitle = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Title,
   {
     ref,
@@ -1724,7 +2224,7 @@ var SheetTitle = React13__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var SheetDescription = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SheetDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -1736,7 +2236,7 @@ SheetDescription.displayName = DialogPrimitive__namespace.Description.displayNam
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var Tooltip = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-var TooltipContent = React13__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TooltipContent = React15__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TooltipPrimitive__namespace.Content,
   {
     ref,
@@ -1755,15 +2255,15 @@ var SIDEBAR_WIDTH = "15rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React13__namespace.createContext(null);
+var SidebarContext = React15__namespace.createContext(null);
 function useSidebar() {
-  const context = React13__namespace.useContext(SidebarContext);
+  const context = React15__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React13__namespace.forwardRef(
+var SidebarProvider = React15__namespace.forwardRef(
   ({
     defaultOpen = true,
     open: openProp,
@@ -1774,10 +2274,10 @@ var SidebarProvider = React13__namespace.forwardRef(
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React13__namespace.useState(false);
-    const [_open, _setOpen] = React13__namespace.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React15__namespace.useState(false);
+    const [_open, _setOpen] = React15__namespace.useState(defaultOpen);
     const open = openProp ?? _open;
-    const setOpen = React13__namespace.useCallback(
+    const setOpen = React15__namespace.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -1789,10 +2289,10 @@ var SidebarProvider = React13__namespace.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React13__namespace.useCallback(() => {
+    const toggleSidebar = React15__namespace.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React13__namespace.useEffect(() => {
+    React15__namespace.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -1803,7 +2303,7 @@ var SidebarProvider = React13__namespace.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React13__namespace.useMemo(
+    const contextValue = React15__namespace.useMemo(
       () => ({
         state,
         open,
@@ -1835,7 +2335,7 @@ var SidebarProvider = React13__namespace.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React13__namespace.forwardRef(
+var Sidebar = React15__namespace.forwardRef(
   ({
     side = "left",
     variant = "sidebar",
@@ -1922,7 +2422,7 @@ var Sidebar = React13__namespace.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React13__namespace.forwardRef(({ className, onClick, ...props }, ref) => {
+var SidebarTrigger = React15__namespace.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Button,
@@ -1945,7 +2445,7 @@ var SidebarTrigger = React13__namespace.forwardRef(({ className, onClick, ...pro
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarRail = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -1970,7 +2470,7 @@ var SidebarRail = React13__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarInset = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "main",
     {
@@ -1985,7 +2485,7 @@ var SidebarInset = React13__namespace.forwardRef(({ className, ...props }, ref)
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarInput = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -2000,7 +2500,7 @@ var SidebarInput = React13__namespace.forwardRef(({ className, ...props }, ref)
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarHeader = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2012,7 +2512,7 @@ var SidebarHeader = React13__namespace.forwardRef(({ className, ...props }, ref)
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarFooter = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2024,7 +2524,7 @@ var SidebarFooter = React13__namespace.forwardRef(({ className, ...props }, ref)
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarSeparator = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Separator,
     {
@@ -2036,7 +2536,7 @@ var SidebarSeparator = React13__namespace.forwardRef(({ className, ...props }, r
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarContent = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2051,7 +2551,7 @@ var SidebarContent = React13__namespace.forwardRef(({ className, ...props }, ref
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarGroup = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2063,7 +2563,7 @@ var SidebarGroup = React13__namespace.forwardRef(({ className, ...props }, ref)
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React13__namespace.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupLabel = React15__namespace.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? reactSlot.Slot : "div";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Comp,
@@ -2080,7 +2580,7 @@ var SidebarGroupLabel = React13__namespace.forwardRef(({ className, asChild = fa
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React13__namespace.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupAction = React15__namespace.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? reactSlot.Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Comp,
@@ -2099,7 +2599,7 @@ var SidebarGroupAction = React13__namespace.forwardRef(({ className, asChild = f
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarGroupContent = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2111,7 +2611,7 @@ var SidebarGroupContent = React13__namespace.forwardRef(({ className, ...props }
   );
 });
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarMenu = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
     {
@@ -2123,7 +2623,7 @@ var SidebarMenu = React13__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarMenuItem = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
     {
@@ -2155,7 +2655,7 @@ var sidebarMenuButtonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var SidebarMenuButton = React13__namespace.forwardRef(
+var SidebarMenuButton = React15__namespace.forwardRef(
   ({
     asChild = false,
     isActive = false,
@@ -2201,7 +2701,7 @@ var SidebarMenuButton = React13__namespace.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React13__namespace.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+var SidebarMenuAction = React15__namespace.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? reactSlot.Slot : "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Comp,
@@ -2224,7 +2724,7 @@ var SidebarMenuAction = React13__namespace.forwardRef(({ className, asChild = fa
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarMenuBadge = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2244,8 +2744,8 @@ var SidebarMenuBadge = React13__namespace.forwardRef(({ className, ...props }, r
   );
 });
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React13__namespace.forwardRef(({ className, showIcon = false, ...props }, ref) => {
-  const width = React13__namespace.useMemo(() => {
+var SidebarMenuSkeleton = React15__namespace.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+  const width = React15__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2271,7 +2771,7 @@ var SidebarMenuSkeleton = React13__namespace.forwardRef(({ className, showIcon =
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React13__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarMenuSub = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "ul",
     {
@@ -2287,11 +2787,11 @@ var SidebarMenuSub = React13__namespace.forwardRef(({ className, ...props }, ref
   );
 });
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React13__namespace.forwardRef(({ ...props }, ref) => {
+var SidebarMenuSubItem = React15__namespace.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx("li", { ref, ...props });
 });
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React13__namespace.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+var SidebarMenuSubButton = React15__namespace.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
   const Comp = asChild ? reactSlot.Slot : "a";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Comp,
@@ -2524,7 +3024,7 @@ function AppSidebar() {
   const { state } = useSidebar();
   const location = reactRouterDom.useLocation();
   const currentPath = location.pathname;
-  const [openItems, setOpenItems] = React13.useState([]);
+  const [openItems, setOpenItems] = React15.useState([]);
   const isActive = (path) => currentPath === path;
   const toggleItem = (title) => {
     setOpenItems(
@@ -2597,20 +3097,20 @@ var MainLayout = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-screen w-full", children: /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 pl-4", children }) });
 };
 var useEditState = ({ initialEditing = false, onToggleEdit, onSave, onCancel }) => {
-  const [localEditing, setLocalEditing] = React13.useState(initialEditing);
-  const [isLoading, setIsLoading] = React13.useState(false);
-  React13.useEffect(() => {
+  const [localEditing, setLocalEditing] = React15.useState(initialEditing);
+  const [isLoading, setIsLoading] = React15.useState(false);
+  React15.useEffect(() => {
     setLocalEditing(initialEditing);
   }, [initialEditing]);
   const isEditing = onToggleEdit !== void 0 ? initialEditing : localEditing;
-  const handleToggleEdit = React13.useCallback(() => {
+  const handleToggleEdit = React15.useCallback(() => {
     if (onToggleEdit) {
       onToggleEdit();
     } else {
       setLocalEditing((prev) => !prev);
     }
   }, [onToggleEdit]);
-  const handleSave = React13.useCallback(async () => {
+  const handleSave = React15.useCallback(async () => {
     setIsLoading(true);
     try {
       if (onSave) {
@@ -2627,7 +3127,7 @@ var useEditState = ({ initialEditing = false, onToggleEdit, onSave, onCancel })
       setIsLoading(false);
     }
   }, [onSave, onToggleEdit]);
-  const handleCancel = React13.useCallback(() => {
+  const handleCancel = React15.useCallback(() => {
     if (onCancel) {
       onCancel();
     }
@@ -2645,7 +3145,7 @@ var useEditState = ({ initialEditing = false, onToggleEdit, onSave, onCancel })
     handleCancel
   };
 };
-var EditableFormCard = React13__namespace.forwardRef(
+var EditableFormCard = React15__namespace.forwardRef(
   ({
     title,
     description,
@@ -2711,110 +3211,10 @@ var EditableFormCard = React13__namespace.forwardRef(
         ...props,
         children: currentlyEditing ? editContent : viewContent
       }
-    );
-  }
-);
-EditableFormCard.displayName = "EditableFormCard";
-var FormProvider = ({
-  form,
-  children
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children });
-};
-var FormInput = ({
-  name,
-  ...props
-}) => {
-  const { control, formState } = reactHookForm.useFormContext();
-  const error = formState.errors[name]?.message;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactHookForm.Controller,
-    {
-      name,
-      control,
-      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
-        EnhancedInput,
-        {
-          ...props,
-          ...field,
-          error
-        }
-      )
-    }
-  );
-};
-var useFormWithEditState = ({
-  schema,
-  initialEditing = false,
-  onToggleEdit,
-  onSave,
-  onCancel,
-  ...formProps
-}) => {
-  const [localEditing, setLocalEditing] = React13.useState(initialEditing);
-  const [isLoading, setIsLoading] = React13.useState(false);
-  const form = reactHookForm.useForm({
-    ...formProps,
-    resolver: schema ? zod$1.zodResolver(schema) : void 0
-  });
-  const { formState, reset, setError } = form;
-  const { isValid, isDirty } = formState;
-  React13.useEffect(() => {
-    setLocalEditing(initialEditing);
-  }, [initialEditing]);
-  const isEditing = onToggleEdit !== void 0 ? initialEditing : localEditing;
-  const handleToggleEdit = React13.useCallback(() => {
-    if (onToggleEdit) {
-      onToggleEdit();
-    } else {
-      setLocalEditing((prev) => !prev);
-    }
-  }, [onToggleEdit]);
-  const handleSave = React13.useCallback(async () => {
-    if (!isValid) return;
-    setIsLoading(true);
-    try {
-      const data = form.getValues();
-      if (onSave) {
-        await onSave(data);
-      }
-      if (onToggleEdit) {
-        onToggleEdit();
-      } else {
-        setLocalEditing(false);
-      }
-    } catch (error) {
-      console.error("Form save error:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [form, isValid, onSave, onToggleEdit]);
-  const handleCancel = React13.useCallback(() => {
-    reset();
-    if (onCancel) {
-      onCancel();
-    }
-    if (onToggleEdit) {
-      onToggleEdit();
-    } else {
-      setLocalEditing(false);
-    }
-  }, [reset, onCancel, onToggleEdit]);
-  const setFieldError = React13.useCallback((field, error) => {
-    setError(field, { type: "manual", message: error });
-  }, [setError]);
-  return {
-    ...form,
-    isEditing,
-    isLoading,
-    handleToggleEdit,
-    handleSave,
-    handleCancel,
-    isFormValid: isValid,
-    isDirty,
-    setFieldError
-  };
-};
+    );
+  }
+);
+EditableFormCard.displayName = "EditableFormCard";
 var achBasicInfoSchema = zod.z.object({
   counterpartyName: zod.z.string().min(1, "Counterparty name is required"),
   shortName: zod.z.string().min(1, "Short name is required"),
@@ -2913,29 +3313,6 @@ var ACHBankCard = ({ data, onDataChange, isEditing, onToggleEdit, className, hid
     }
   );
 };
-var FormSelect = ({
-  name,
-  ...props
-}) => {
-  const { control, formState } = reactHookForm.useFormContext();
-  const error = formState.errors[name]?.message;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactHookForm.Controller,
-    {
-      name,
-      control,
-      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
-        EnhancedSelect,
-        {
-          ...props,
-          value: field.value,
-          onValueChange: field.onChange,
-          error
-        }
-      )
-    }
-  );
-};
 var ACHBasicInfoCard = ({
   data,
   onDataChange,
@@ -3031,7 +3408,7 @@ var gapClasses = {
   lg: "gap-6",
   xl: "gap-8"
 };
-var ResponsiveGrid = React13__namespace.forwardRef(
+var ResponsiveGrid = React15__namespace.forwardRef(
   ({ children, type = "cards", gap = "md", editMode = false, className }, ref) => {
     const gridClasses2 = editMode ? "grid-cols-1" : typeClasses[type];
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3224,7 +3601,7 @@ var BankAddressCard = ({
   );
 };
 var ACHTransferSection = ({ isEditing, onToggleEdit, className, hideActions }) => {
-  const [achData, setAchData] = React13.useState(defaultACHTransfer);
+  const [achData, setAchData] = React15.useState(defaultACHTransfer);
   const handleDataChange = (newData) => {
     setAchData(newData);
   };
@@ -3456,8 +3833,8 @@ var StatusBadge = ({ status, className }) => {
   ] });
 };
 var BasicInfoCard = ({ isEditing, onToggleEdit, className, hideActions }) => {
-  const [name, setName] = React13.useState("John wire hot");
-  const [status, setStatus] = React13.useState("ACTIVE");
+  const [name, setName] = React15.useState("John wire hot");
+  const [status, setStatus] = React15.useState("ACTIVE");
   const editContent = /* @__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(
@@ -3711,8 +4088,8 @@ var columnClasses = {
   3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
   4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
 };
-var DataGrid = React13__namespace.forwardRef(
-  ({ data, columns = 2, gap = "md", className }, ref) => {
+var DataGrid = React15__namespace.forwardRef(
+  ({ data, columns: columns2 = 2, gap = "md", className }, ref) => {
     const isItemArray = data.length > 0 && "label" in data[0];
     if (isItemArray) {
       const items = data;
@@ -3722,7 +4099,7 @@ var DataGrid = React13__namespace.forwardRef(
           ref,
           className: cn(
             "grid",
-            columnClasses[columns],
+            columnClasses[columns2],
             gapClasses2[gap],
             className
           ),
@@ -3743,7 +4120,7 @@ var DataGrid = React13__namespace.forwardRef(
       section.title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-foreground mb-2", children: section.title }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
         "grid",
-        columnClasses[columns],
+        columnClasses[columns2],
         gapClasses2[gap]
       ), children: section.items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx(
         InfoField,
@@ -4186,7 +4563,7 @@ var ContactInfoCard = ({ isEditing, onToggleEdit, className }) => {
 var labelVariants = classVarianceAuthority.cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Label = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   LabelPrimitive__namespace.Root,
   {
     ref,
@@ -4196,7 +4573,7 @@ var Label = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @
 ));
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
 var CounterpartyBasicInfo = ({ onDataChange }) => {
-  const [formData, setFormData] = React13.useState({
+  const [formData, setFormData] = React15.useState({
     name: "",
     type: "business",
     email: "",
@@ -4307,7 +4684,7 @@ var gridClasses = {
   3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
   4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
 };
-var FormSection = React13__namespace.forwardRef(
+var FormSection = React15__namespace.forwardRef(
   ({
     title,
     description,
@@ -4315,7 +4692,7 @@ var FormSection = React13__namespace.forwardRef(
     className,
     spacing: spacing2 = "md",
     layout = "vertical",
-    columns = 2
+    columns: columns2 = 2
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("space-y-4", className), children: [
       (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
@@ -4323,7 +4700,7 @@ var FormSection = React13__namespace.forwardRef(
         description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-        layout === "grid" ? `grid gap-4 ${gridClasses[columns]}` : spacingClasses[spacing2]
+        layout === "grid" ? `grid gap-4 ${gridClasses[columns2]}` : spacingClasses[spacing2]
       ), children })
     ] });
   }
@@ -4611,9 +4988,9 @@ var ReceiverCard = ({
   );
 };
 var PaymentInformationSection = () => {
-  const [paymentMethods, setPaymentMethods] = React13.useState([]);
-  const [showAddMenu, setShowAddMenu] = React13.useState(false);
-  const [achData, setAchData] = React13.useState(defaultACHTransfer);
+  const [paymentMethods, setPaymentMethods] = React15.useState([]);
+  const [showAddMenu, setShowAddMenu] = React15.useState(false);
+  const [achData, setAchData] = React15.useState(defaultACHTransfer);
   const addPaymentMethod = (type) => {
     const newMethod = {
       id: `${type}-${Date.now()}`,
@@ -4738,7 +5115,7 @@ var PaymentInformationSection = () => {
   ] });
 };
 var WireTransferSection = ({ isEditing, onToggleEdit, className, hideActions }) => {
-  const [wireTransferType, setWireTransferType] = React13.useState("INTERNATIONAL");
+  const [wireTransferType, setWireTransferType] = React15.useState("INTERNATIONAL");
   const editContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(
       EnhancedSelect,
@@ -4773,267 +5150,614 @@ var WireTransferSection = ({ isEditing, onToggleEdit, className, hideActions })
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    EditableFormCard,
+    EditableFormCard,
+    {
+      title: "Wire Transfer Configuration",
+      description: "Configure wire transfer settings and participants",
+      variant: "subtle",
+      className,
+      isEditing,
+      onToggleEdit,
+      hideActions,
+      editContent,
+      viewContent
+    }
+  );
+};
+var sizeClasses = {
+  sm: "max-w-2xl",
+  md: "max-w-4xl",
+  lg: "max-w-6xl",
+  xl: "max-w-7xl",
+  full: "max-w-full"
+};
+var paddingClasses = {
+  none: "",
+  sm: "px-4 py-4",
+  md: "px-6 py-6",
+  lg: "px-8 py-8"
+};
+var Container = React15__namespace.forwardRef(
+  ({ children, size = "lg", padding = "md", center = true, className }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          sizeClasses[size],
+          paddingClasses[padding],
+          center && "mx-auto",
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+var spacingClasses2 = {
+  vertical: {
+    none: "",
+    xs: "space-y-1",
+    sm: "space-y-2",
+    md: "space-y-4",
+    lg: "space-y-6",
+    xl: "space-y-8"
+  },
+  horizontal: {
+    none: "",
+    xs: "space-x-1",
+    sm: "space-x-2",
+    md: "space-x-4",
+    lg: "space-x-6",
+    xl: "space-x-8"
+  }
+};
+var alignClasses = {
+  vertical: {
+    start: "",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  },
+  horizontal: {
+    start: "",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  }
+};
+var justifyClasses = {
+  start: "",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around"
+};
+var Stack = React15__namespace.forwardRef(
+  ({ children, direction = "vertical", spacing: spacing2 = "md", align = "start", justify = "start", className }, ref) => {
+    const isHorizontal = direction === "horizontal";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex",
+          isHorizontal ? "flex-row" : "flex-col",
+          spacingClasses2[direction][spacing2],
+          alignClasses[direction][align],
+          justifyClasses[justify],
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+var Breadcrumb = React15__namespace.forwardRef(
+  ({ items, showHome = true, separator, className }, ref) => {
+    const defaultSeparator = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-muted-foreground" });
+    const separatorElement = separator || defaultSeparator;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": "Breadcrumb",
+        className: cn("flex items-center space-x-1 text-sm", className),
+        children: [
+          showHome && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactRouterDom.NavLink,
+              {
+                to: "/",
+                className: "flex items-center text-muted-foreground hover:text-foreground transition-colors",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "w-4 h-4" })
+              }
+            ),
+            items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: separatorElement })
+          ] }),
+          items.map((item, index) => {
+            const isLast = index === items.length - 1;
+            return /* @__PURE__ */ jsxRuntime.jsxs(React15__namespace.Fragment, { children: [
+              item.href && !isLast ? /* @__PURE__ */ jsxRuntime.jsxs(
+                reactRouterDom.NavLink,
+                {
+                  to: item.href,
+                  className: "flex items-center text-muted-foreground hover:text-foreground transition-colors",
+                  children: [
+                    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: item.icon }),
+                    item.label
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+                "flex items-center",
+                isLast ? "text-foreground font-medium" : "text-muted-foreground"
+              ), children: [
+                item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: item.icon }),
+                item.label
+              ] }),
+              !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: separatorElement })
+            ] }, index);
+          })
+        ]
+      }
+    );
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+var ListPage = React15__namespace.forwardRef(
+  ({
+    title,
+    description,
+    breadcrumbs,
+    actions,
+    children,
+    maxWidth = "xl",
+    loading = false,
+    emptyState,
+    className
+  }, ref) => {
+    const hasData = React15__namespace.Children.count(children) > 0;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("min-h-screen bg-gradient-subtle", className), children: /* @__PURE__ */ jsxRuntime.jsx(Container, { size: maxWidth, children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { spacing: "lg", children: [
+      breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { items: breadcrumbs }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Stack, { spacing: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground max-w-2xl", children: description })
+        ] }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "horizontal", spacing: "sm", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: action.variant || "default",
+            onClick: action.onClick,
+            children: [
+              action.icon,
+              action.label
+            ]
+          },
+          index
+        )) })
+      ] }),
+      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse text-muted-foreground", children: "Loading..." }) }) : hasData ? /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGrid, { type: "cards", gap: "lg", children }) : emptyState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: emptyState }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No items found" }) }) })
+    ] }) }) });
+  }
+);
+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"
+        }
+      )
+    ] }) })
+  ] });
+};
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.DayPicker,
     {
-      title: "Wire Transfer Configuration",
-      description: "Configure wire transfer settings and participants",
-      variant: "subtle",
-      className,
-      isEditing,
-      onToggleEdit,
-      hideActions,
-      editContent,
-      viewContent
+      showOutsideDays,
+      className: cn("p-3 pointer-events-auto", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        button_previous: "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        button_next: "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        day: "h-9 w-9 text-center text-sm p-0 relative hover:bg-accent hover:text-accent-foreground rounded-md",
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal"
+        ),
+        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
+        today: "bg-accent text-accent-foreground",
+        outside: "text-muted-foreground opacity-50",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
+        ...classNames
+      },
+      ...props
     }
   );
-};
-var sizeClasses = {
-  sm: "max-w-2xl",
-  md: "max-w-4xl",
-  lg: "max-w-6xl",
-  xl: "max-w-7xl",
-  full: "max-w-full"
-};
-var paddingClasses = {
-  none: "",
-  sm: "px-4 py-4",
-  md: "px-6 py-6",
-  lg: "px-8 py-8"
-};
-var Container = React13__namespace.forwardRef(
-  ({ children, size = "lg", padding = "md", center = true, className }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          sizeClasses[size],
-          paddingClasses[padding],
-          center && "mx-auto",
-          className
-        ),
-        children
-      }
-    );
-  }
-);
-Container.displayName = "Container";
-var spacingClasses2 = {
-  vertical: {
-    none: "",
-    xs: "space-y-1",
-    sm: "space-y-2",
-    md: "space-y-4",
-    lg: "space-y-6",
-    xl: "space-y-8"
-  },
-  horizontal: {
-    none: "",
-    xs: "space-x-1",
-    sm: "space-x-2",
-    md: "space-x-4",
-    lg: "space-x-6",
-    xl: "space-x-8"
+}
+Calendar.displayName = "Calendar";
+var Popover = PopoverPrimitive__namespace.Root;
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverContent = React15__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  PopoverPrimitive__namespace.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
   }
-};
-var alignClasses = {
-  vertical: {
-    start: "",
-    center: "items-center",
-    end: "items-end",
-    stretch: "items-stretch"
-  },
-  horizontal: {
-    start: "",
-    center: "items-center",
-    end: "items-end",
-    stretch: "items-stretch"
+) }));
+PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
+function DataTable({
+  columns: columns2,
+  data,
+  sortBy,
+  sortDirection,
+  onSort,
+  onRowClick,
+  loading = false,
+  emptyMessage = "No data available",
+  className
+}) {
+  const handleSort = (key) => {
+    if (onSort) {
+      onSort(key);
+    }
+  };
+  const renderSortIcon = (column) => {
+    if (!column.sortable || !onSort) return null;
+    if (sortBy === column.key) {
+      return sortDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "w-4 h-4 ml-1" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-4 h-4 ml-1" });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-4 h-4 ml-1 opacity-50" });
+  };
+  const renderCell = (column, row) => {
+    const value = row[column.key];
+    if (column.render) {
+      return column.render(value, row);
+    }
+    if (typeof value === "boolean") {
+      return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: value ? "success" : "secondary", children: value ? "Yes" : "No" });
+    }
+    if (Array.isArray(value)) {
+      return value.join(", ");
+    }
+    return value?.toString() || "-";
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse text-muted-foreground", children: "Loading..." }) }) });
   }
-};
-var justifyClasses = {
-  start: "",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around"
-};
-var Stack = React13__namespace.forwardRef(
-  ({ children, direction = "vertical", spacing: spacing2 = "md", align = "start", justify = "start", className }, ref) => {
-    const isHorizontal = direction === "horizontal";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b bg-muted/50", children: columns2.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
       {
-        ref,
         className: cn(
-          "flex",
-          isHorizontal ? "flex-row" : "flex-col",
-          spacingClasses2[direction][spacing2],
-          alignClasses[direction][align],
-          justifyClasses[justify],
-          className
+          "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}]`
         ),
-        children
-      }
-    );
-  }
-);
-Stack.displayName = "Stack";
-var Breadcrumb = React13__namespace.forwardRef(
-  ({ items, showHome = true, separator, className }, ref) => {
-    const defaultSeparator = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-muted-foreground" });
-    const separatorElement = separator || defaultSeparator;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "nav",
+        children: column.sortable && onSort ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            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,
+              renderSortIcon(column)
+            ] })
+          }
+        ) : column.title
+      },
+      column.key
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns2.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) }) : data.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
       {
-        ref,
-        "aria-label": "Breadcrumb",
-        className: cn("flex items-center space-x-1 text-sm", className),
-        children: [
-          showHome && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactRouterDom.NavLink,
-              {
-                to: "/",
-                className: "flex items-center text-muted-foreground hover:text-foreground transition-colors",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "w-4 h-4" })
-              }
+        className: cn(
+          "border-b transition-colors hover:bg-muted/50",
+          onRowClick && "cursor-pointer"
+        ),
+        onClick: () => onRowClick?.(row),
+        children: columns2.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+          "td",
+          {
+            className: cn(
+              "px-3 py-2 align-middle text-sm",
+              column.align === "center" && "text-center",
+              column.align === "right" && "text-right"
             ),
-            items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: separatorElement })
+            children: renderCell(column, row)
+          },
+          column.key
+        ))
+      },
+      index
+    )) })
+  ] }) }) });
+}
+var statementTypes = [
+  { value: "root", label: "Root" },
+  { value: "program", label: "Program" },
+  { value: "product", label: "Product" },
+  { value: "account", label: "Account" }
+];
+var 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"
+  }
+];
+var StatementView = ({
+  statementType,
+  selectedProgram,
+  selectedProduct,
+  accountNumber,
+  startDate,
+  endDate,
+  statementGenerated,
+  programs,
+  products,
+  statementHeader,
+  statementTransactions,
+  onStatementTypeChange,
+  onProgramChange,
+  onProductChange,
+  onAccountNumberChange,
+  onStartDateChange,
+  onEndDateChange,
+  onGenerateStatement,
+  onEdit,
+  onDownloadCSV,
+  onPrintPDF,
+  isGenerateDisabled
+}) => {
+  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: onStatementTypeChange
+            }
+          ),
+          statementType === "program" && /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedSelect,
+            {
+              label: "Program Name",
+              placeholder: "Select program",
+              options: programs,
+              value: selectedProgram,
+              onValueChange: onProgramChange
+            }
+          ),
+          statementType === "product" && /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedSelect,
+            {
+              label: "Product Name",
+              placeholder: "Select product",
+              options: products,
+              value: selectedProduct,
+              onValueChange: onProductChange
+            }
+          ),
+          statementType === "account" && /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedInput,
+            {
+              label: "Account Number",
+              placeholder: "Enter account number",
+              value: accountNumber,
+              onChange: (e) => onAccountNumberChange(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: onStartDateChange,
+                  initialFocus: true
+                }
+              ) })
+            ] })
           ] }),
-          items.map((item, index) => {
-            const isLast = index === items.length - 1;
-            return /* @__PURE__ */ jsxRuntime.jsxs(React13__namespace.Fragment, { children: [
-              item.href && !isLast ? /* @__PURE__ */ jsxRuntime.jsxs(
-                reactRouterDom.NavLink,
+          /* @__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,
                 {
-                  to: item.href,
-                  className: "flex items-center text-muted-foreground hover:text-foreground transition-colors",
+                  variant: "outline",
+                  className: cn(
+                    "justify-start text-left font-normal",
+                    !endDate && "text-muted-foreground"
+                  ),
                   children: [
-                    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: item.icon }),
-                    item.label
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 h-4 w-4" }),
+                    endDate ? dateFns.format(endDate, "MM/dd/yyyy") : "Select date"
                   ]
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
-                "flex items-center",
-                isLast ? "text-foreground font-medium" : "text-muted-foreground"
-              ), children: [
-                item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: item.icon }),
-                item.label
-              ] }),
-              !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: separatorElement })
-            ] }, index);
-          })
-        ]
-      }
-    );
-  }
-);
-Breadcrumb.displayName = "Breadcrumb";
-var ListPage = React13__namespace.forwardRef(
-  ({
-    title,
-    description,
-    breadcrumbs,
-    actions,
-    children,
-    maxWidth = "xl",
-    loading = false,
-    emptyState,
-    className
-  }, ref) => {
-    const hasData = React13__namespace.Children.count(children) > 0;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("min-h-screen bg-gradient-subtle", className), children: /* @__PURE__ */ jsxRuntime.jsx(Container, { size: maxWidth, children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { spacing: "lg", children: [
-      breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { items: breadcrumbs }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Stack, { spacing: "sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground max-w-2xl", children: description })
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  selected: endDate,
+                  onSelect: onEndDateChange,
+                  initialFocus: true
+                }
+              ) })
+            ] })
+          ] })
         ] }),
-        actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "horizontal", spacing: "sm", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
-            variant: action.variant || "default",
-            onClick: action.onClick,
-            children: [
-              action.icon,
-              action.label
-            ]
-          },
-          index
-        )) })
-      ] }),
-      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse text-muted-foreground", children: "Loading..." }) }) : hasData ? /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGrid, { type: "cards", gap: "lg", children }) : emptyState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: emptyState }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No items found" }) }) })
-    ] }) }) });
-  }
-);
-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"
+            onClick: onGenerateStatement,
+            disabled: isGenerateDisabled,
+            children: "Generate Statement"
+          }
+        ) })
       ] })
     ] }),
-    /* @__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"
-        }
-      )
-    ] }) })
+    statementGenerated && statementHeader && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StatementHeader, { data: statementHeader, onEdit }),
+      /* @__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: onDownloadCSV, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4 mr-2" }),
+              "Download CSV"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: onPrintPDF, 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: statementTransactions,
+            emptyMessage: "No transactions found"
+          }
+        ) })
+      ] })
+    ] })
   ] });
 };
 var ACHDetailsSection = ({ data }) => {
@@ -5168,7 +5892,7 @@ var typeLabels = {
   credit: "Credit",
   investment: "Investment"
 };
-var AccountCard = React13__namespace.forwardRef(
+var AccountCard = React15__namespace.forwardRef(
   ({ account, showBalance = true, className }, ref) => {
     const TypeIcon = typeIcons[account.type];
     const accountData = [
@@ -5230,136 +5954,25 @@ var BusinessTypeBadge = ({ type, className }) => {
     config.label
   ] });
 };
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactDayPicker.DayPicker,
-    {
-      showOutsideDays,
-      className: cn("p-3 pointer-events-auto", className),
-      classNames: {
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        button_previous: "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-        button_next: "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-        month_grid: "w-full border-collapse space-y-1",
-        weekdays: "flex",
-        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        week: "flex w-full mt-2",
-        day: "h-9 w-9 text-center text-sm p-0 relative hover:bg-accent hover:text-accent-foreground rounded-md",
-        day_button: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal"
-        ),
-        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
-        today: "bg-accent text-accent-foreground",
-        outside: "text-muted-foreground opacity-50",
-        disabled: "text-muted-foreground opacity-50",
-        hidden: "invisible",
-        ...classNames
-      },
-      ...props
-    }
-  );
-}
-Calendar.displayName = "Calendar";
-function DataTable({
-  columns,
-  data,
-  sortBy,
-  sortDirection,
-  onSort,
-  onRowClick,
-  loading = false,
-  emptyMessage = "No data available",
-  className
-}) {
-  const handleSort = (key) => {
-    if (onSort) {
-      onSort(key);
-    }
-  };
-  const renderSortIcon = (column) => {
-    if (!column.sortable || !onSort) return null;
-    if (sortBy === column.key) {
-      return sortDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "w-4 h-4 ml-1" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-4 h-4 ml-1" });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-4 h-4 ml-1 opacity-50" });
-  };
-  const renderCell = (column, row) => {
-    const value = row[column.key];
-    if (column.render) {
-      return column.render(value, row);
-    }
-    if (typeof value === "boolean") {
-      return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: value ? "success" : "secondary", children: value ? "Yes" : "No" });
-    }
-    if (Array.isArray(value)) {
-      return value.join(", ");
-    }
-    return value?.toString() || "-";
-  };
-  if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse text-muted-foreground", children: "Loading..." }) }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b bg-muted/50", children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
-      "th",
-      {
-        className: cn(
-          "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}]`
-        ),
-        children: column.sortable && onSort ? /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            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,
-              renderSortIcon(column)
-            ] })
-          }
-        ) : column.title
-      },
-      column.key
-    )) }) }),
-    /* @__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",
+var Checkbox = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CheckboxPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxPrimitive__namespace.Indicator,
       {
-        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(
-              "px-3 py-2 align-middle text-sm",
-              column.align === "center" && "text-center",
-              column.align === "right" && "text-right"
-            ),
-            children: renderCell(column, row)
-          },
-          column.key
-        ))
-      },
-      index
-    )) })
-  ] }) }) });
-}
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
 var maxWidthClasses = {
   sm: "max-w-2xl",
   md: "max-w-4xl",
@@ -5391,7 +6004,7 @@ var getGridClasses = (gridCols, responsive) => {
       return "grid-cols-1 lg:grid-cols-2";
   }
 };
-var PageLayout = React13__namespace.forwardRef(
+var PageLayout = React15__namespace.forwardRef(
   ({
     title,
     description,
@@ -5402,9 +6015,10 @@ var PageLayout = React13__namespace.forwardRef(
     maxWidth = "xl",
     gridCols = 2,
     responsive = true,
-    className
+    className,
+    headerContent
   }, ref) => {
-    const [editingCards, setEditingCards] = React13__namespace.useState(/* @__PURE__ */ new Set());
+    const [editingCards, setEditingCards] = React15__namespace.useState(/* @__PURE__ */ new Set());
     const toggleEdit = (cardKey) => {
       setEditingCards((prev) => {
         const next = new Set(prev);
@@ -5421,11 +6035,12 @@ var PageLayout = React13__namespace.forwardRef(
         "sticky top-0 z-10 bg-gradient-subtle border-b border-border/40",
         "container mx-auto px-4 pt-8 pb-4",
         maxWidthClasses[maxWidth]
-      ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground mb-2", children: title }),
           description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: description })
         ] }),
+        headerContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: headerContent }),
         actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: actions.map((action, index) => {
           const Icon2 = action.icon;
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5488,7 +6103,7 @@ var DetailPageLayout = ({
   actions,
   initialEditingState = {}
 }) => {
-  const [editingCards, setEditingCards] = React13.useState(
+  const [editingCards, setEditingCards] = React15.useState(
     initialEditingState
   );
   const toggleEdit = (cardKey) => {
@@ -5532,7 +6147,7 @@ var DetailPageLayout = ({
 };
 var DropdownMenu = DropdownMenuPrimitive__namespace.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
-var DropdownMenuContent = React13__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuContent = React15__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Content,
   {
     ref,
@@ -5545,7 +6160,7 @@ var DropdownMenuContent = React13__namespace.forwardRef(({ className, sideOffset
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-var DropdownMenuItem = React13__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuItem = React15__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Item,
   {
     ref,
@@ -5558,7 +6173,7 @@ var DropdownMenuItem = React13__namespace.forwardRef(({ className, inset, ...pro
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-var DropdownMenuLabel = React13__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuLabel = React15__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Label,
   {
     ref,
@@ -5571,7 +6186,7 @@ var DropdownMenuLabel = React13__namespace.forwardRef(({ className, inset, ...pr
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-var DropdownMenuSeparator = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuSeparator = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Separator,
   {
     ref,
@@ -5580,7 +6195,51 @@ var DropdownMenuSeparator = React13__namespace.forwardRef(({ className, ...props
   }
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
-var EntityCard = React13__namespace.forwardRef(
+var EditableInfoField = ({
+  label,
+  value,
+  options,
+  onChange,
+  placeholder = "Select...",
+  renderValue,
+  className
+}) => {
+  const [isEditing, setIsEditing] = React15.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 = React15__namespace.forwardRef(
   ({
     entity,
     actions,
@@ -5626,7 +6285,7 @@ var EntityCard = React13__namespace.forwardRef(
         ] }),
         allActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-4 h-4" }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", children: allActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(React13__namespace.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", children: allActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(React15__namespace.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               DropdownMenuItem,
               {
@@ -5652,7 +6311,7 @@ var EntityCard = React13__namespace.forwardRef(
   }
 );
 EntityCard.displayName = "EntityCard";
-var FormField = React13__namespace.forwardRef(
+var FormField = React15__namespace.forwardRef(
   ({ label, description, error, required, children, className, layout = "vertical" }, ref) => {
     const isHorizontal = layout === "horizontal";
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5698,7 +6357,7 @@ var trendColors = {
   down: "destructive",
   neutral: "secondary"
 };
-var MetricCard = React13__namespace.forwardRef(
+var MetricCard = React15__namespace.forwardRef(
   ({ title, value, description, trend, icon, variant = "default", className }, ref) => {
     const TrendIcon = trend ? trendIcons[trend.direction] : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5730,22 +6389,6 @@ var MetricCard = React13__namespace.forwardRef(
   }
 );
 MetricCard.displayName = "MetricCard";
-var Popover = PopoverPrimitive__namespace.Root;
-var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React13__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  PopoverPrimitive__namespace.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = nextThemes.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5766,7 +6409,7 @@ var Toaster = ({ ...props }) => {
   );
 };
 var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsList = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
     ref,
@@ -5778,7 +6421,7 @@ var TabsList = React13__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsTrigger = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
@@ -5790,7 +6433,7 @@ var TabsTrigger = React13__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Content,
   {
     ref,
@@ -5803,7 +6446,7 @@ var TabsContent = React13__namespace.forwardRef(({ className, ...props }, ref) =
 ));
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
 var ToastProvider = ToastPrimitives__namespace.Provider;
-var ToastViewport = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastViewport = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastPrimitives__namespace.Viewport,
   {
     ref,
@@ -5829,7 +6472,7 @@ var toastVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toast = React13__namespace.forwardRef(({ className, variant, ...props }, ref) => {
+var Toast = React15__namespace.forwardRef(({ className, variant, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Root,
     {
@@ -5840,7 +6483,7 @@ var Toast = React13__namespace.forwardRef(({ className, variant, ...props }, ref
   );
 });
 Toast.displayName = ToastPrimitives__namespace.Root.displayName;
-var ToastAction = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastAction = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastPrimitives__namespace.Action,
   {
     ref,
@@ -5852,7 +6495,7 @@ var ToastAction = React13__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 ToastAction.displayName = ToastPrimitives__namespace.Action.displayName;
-var ToastClose = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastClose = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastPrimitives__namespace.Close,
   {
     ref,
@@ -5866,7 +6509,7 @@ var ToastClose = React13__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ToastClose.displayName = ToastPrimitives__namespace.Close.displayName;
-var ToastTitle = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastTitle = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastPrimitives__namespace.Title,
   {
     ref,
@@ -5875,7 +6518,7 @@ var ToastTitle = React13__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ToastTitle.displayName = ToastPrimitives__namespace.Title.displayName;
-var ToastDescription = React13__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastPrimitives__namespace.Description,
   {
     ref,
@@ -5884,6 +6527,19 @@ var ToastDescription = React13__namespace.forwardRef(({ className, ...props }, r
   }
 ));
 ToastDescription.displayName = ToastPrimitives__namespace.Description.displayName;
+var TransactionTypeBadge = ({
+  transactionType,
+  isInbound,
+  className
+}) => {
+  const Icon2 = isInbound ? lucideReact.ArrowDownRight : lucideReact.ArrowUpRight;
+  const variant = "outline";
+  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant, className, children: [
+    isInbound && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "w-3 h-3 mr-1" }),
+    transactionType,
+    !isInbound && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "w-3 h-3 ml-1" })
+  ] });
+};
 var mockCounterparties = [
   {
     id: "1",
@@ -6098,8 +6754,8 @@ var transactionColumns = [
   { key: "date", title: "Date", sortable: true }
 ];
 function DashboardDemo() {
-  const [sortBy, setSortBy] = React13__namespace.useState();
-  const [sortDirection, setSortDirection] = React13__namespace.useState("asc");
+  const [sortBy, setSortBy] = React15__namespace.useState();
+  const [sortDirection, setSortDirection] = React15__namespace.useState("asc");
   const handleSort = (key) => {
     if (sortBy === key) {
       setSortDirection(sortDirection === "asc" ? "desc" : "asc");
@@ -6233,7 +6889,7 @@ var badgeVariants2 = [
   "suspended"
 ];
 function ColorSwatch({ color }) {
-  const [copied, setCopied] = React13__namespace.useState(false);
+  const [copied, setCopied] = React15__namespace.useState(false);
   const copyToClipboard = () => {
     navigator.clipboard.writeText(color.value);
     setCopied(true);
@@ -6339,8 +6995,8 @@ var tableColumns = [
   { key: "verified", title: "Verified", sortable: true }
 ];
 function UIKitShowcase() {
-  const [sortBy, setSortBy] = React13__namespace.useState();
-  const [sortDirection, setSortDirection] = React13__namespace.useState("asc");
+  const [sortBy, setSortBy] = React15__namespace.useState();
+  const [sortDirection, setSortDirection] = React15__namespace.useState("asc");
   const handleSort = (key) => {
     if (sortBy === key) {
       setSortDirection(sortDirection === "asc" ? "desc" : "asc");
@@ -6477,10 +7133,15 @@ var mockAlerts = [
     type: "Ofac",
     status: "Unassigned",
     contextType: "Ofac",
-    description: "INDIVIDUAL: ali hassan is flagged for OFAC",
+    description: "WIRE TRANSFER: Multiple OFAC matches detected for beneficiary bank",
     timeline: [
       { id: "1", timestamp: "2025-09-30 03:00:21", user: "System", action: "Alert Created", status: "Unassigned" },
-      { id: "2", timestamp: "2025-09-30 09:15:32", user: "John Smith", action: "Alert Assigned", details: "Assigned to compliance team", status: "In Progress" }
+      { id: "2", timestamp: "2025-09-30 09:15:32", user: "John Smith", action: "Alert Assigned", details: "Assigned to compliance team", status: "In Progress" },
+      { id: "3", timestamp: "2025-09-30 10:22:15", user: "John Smith", action: "Note added", details: "Added RFI note requesting documentation" },
+      { id: "4", timestamp: "2025-09-30 10:25:00", user: "John Smith", action: "Document added", details: "Uploaded passport_scan.pdf" },
+      { id: "5", timestamp: "2025-09-30 11:50:00", user: "Sarah Johnson", action: "Document added", details: "Uploaded proof_of_address.jpg" },
+      { id: "6", timestamp: "2025-10-01 08:30:00", user: "System", action: "RFI Status change", details: "Status changed from Pending to Provided" },
+      { id: "7", timestamp: "2025-10-01 14:20:00", user: "Michael Chen", action: "Alert Approved", details: "Approved after review - false positive confirmed" }
     ],
     notes: [
       { id: "1", timestamp: "2025-09-30 10:22:15", user: "John Smith", content: "Reviewing OFAC match. Need to verify identity documents.", type: "RFI Note" },
@@ -6511,111 +7172,45 @@ var mockAlerts = [
       }
     ],
     contextData: {
-      entityName: "Ali Hassan",
-      entityType: "Individual",
-      matchScore: "95%",
-      listName: "OFAC SDN List",
-      flaggedItems: [
-        { field: "Name", value: "Ali Hassan", matchScore: "95%" },
-        { field: "DOB", value: "1985-03-12", matchScore: "100%" }
-      ],
-      sdns: [
-        {
-          uid: 12345,
-          firstName: "Ali",
-          lastName: "Hassan",
-          sdnType: "Individual",
-          programs: ["SYRIA", "SDGT"],
-          title: "Military Commander",
-          remarks: "DOB 12 Mar 1985; POB Damascus, Syria; Passport D1234567 (Syria); alt. Passport E7654321 (Lebanon); Linked to Entity XYZ",
-          nationalities: ["Syria", "Lebanon"],
-          citizenships: ["Syria"],
-          dateOfBirthList: [
-            { dateOfBirth: "1985-03-12", mainEntry: true },
-            { dateOfBirth: "1985-03-15", mainEntry: false }
-          ],
-          placeOfBirthList: [
-            { placeOfBirth: "Damascus, Syria", mainEntry: true },
-            { placeOfBirth: "Aleppo, Syria", mainEntry: false }
-          ],
-          akaList: [
-            { category: "strong", firstName: "Ali", lastName: "Al-Hassan" },
-            { category: "weak", firstName: "Ali", lastName: "Hasan" },
-            { category: "strong", firstName: "Ali Hassan", lastName: "Mohamed" }
-          ],
-          idList: [
-            { idType: "Passport", idNumber: "D1234567", idCountry: "Syria", issueDate: "2010-01-15", expirationDate: "2020-01-15" },
-            { idType: "Passport", idNumber: "E7654321", idCountry: "Lebanon", issueDate: "2015-06-20", expirationDate: "2025-06-20" },
-            { idType: "National ID", idNumber: "SY123456789", idCountry: "Syria" }
-          ]
-        }
-      ],
-      addresses: [
-        {
-          uid: 67890,
-          address1: "Building 42, Al-Mazzeh",
-          city: "Damascus",
-          stateOrProvince: "Damascus Governorate",
-          postalCode: "12345",
-          country: "Syria",
-          addressRemarks: "Primary Residence"
-        },
+      ofacId: 5043462,
+      counterpartyName: null,
+      counterpartyId: null,
+      businessName: null,
+      businessId: null,
+      individualName: null,
+      individualId: null,
+      uboId: null,
+      transactionPaymentId: "5c73200c-3ade-4ba5-b6e6-39ad4b519fab",
+      tenantId: "JakeUAT",
+      alertId: 4425,
+      note: null,
+      status: "REVIEW",
+      createdAt: 1760162113,
+      updatedAt: 176016211300416e-5,
+      updatedBy: null,
+      ofacCheckDetails: [
         {
-          uid: 67891,
-          address1: "Apartment 15, Hamra Street",
-          city: "Beirut",
-          country: "Lebanon",
-          addressRemarks: "Secondary Address"
+          id: 24870,
+          checkKey: "originatorName",
+          checkValue: "Kim jung un"
         },
         {
-          uid: 67892,
-          address1: "Office 203, Business District",
-          city: "Aleppo",
-          stateOrProvince: "Aleppo Governorate",
-          country: "Syria",
-          addressRemarks: "Business Address - Suspected Front Company"
-        }
-      ],
-      alt_names: [
-        { uid: 54321, type: "aka", category: "strong", firstName: "Ali", lastName: "Al-Hassan" },
-        { uid: 54322, type: "aka", category: "weak", firstName: "Ali", lastName: "Hasan" },
-        { uid: 54323, type: "aka", category: "strong", firstName: "Ali Hassan", lastName: "Mohamed" },
-        { uid: 54324, type: "fka", category: "weak", firstName: "Ali", lastName: "Hassani" }
-      ],
-      sanctions_entries: [
-        {
-          program: "SYRIA",
-          effectiveDate: "2015-03-15",
-          authority: "Executive Order 13572",
-          legalBasis: "Involvement in human rights abuses in Syria"
+          id: 24871,
+          checkKey: "originatorBankName",
+          checkValue: "TD bank"
         },
         {
-          program: "SDGT",
-          effectiveDate: "2016-08-22",
-          authority: "Executive Order 13224",
-          legalBasis: "Specially Designated Global Terrorist"
-        }
-      ],
-      associated_entities: [
-        {
-          entityName: "XYZ Trading Company",
-          relationship: "Director",
-          entityType: "Business"
+          id: 24872,
+          checkKey: "beneficiaryName",
+          checkValue: "Jake from Braid LLC"
         },
         {
-          entityName: "Hassan Family Trust",
-          relationship: "Beneficiary",
-          entityType: "Trust"
+          id: 24873,
+          checkKey: "beneficiaryBankName",
+          checkValue: "RUssian bank"
         }
       ],
-      screening_metadata: {
-        screenedAt: "2025-09-30T03:00:21Z",
-        screeningEngine: "OFAC Advanced Matcher v3.2",
-        datasetVersion: "2025-09-25",
-        totalRecordsScreened: 1,
-        matchAlgorithm: "Fuzzy + Phonetic",
-        confidenceThreshold: 0.85
-      }
+      rawResults: `{"SDNs":[{"entityID":"51656","sdnName":"RUSSIAN UNIVERSAL BANK","sdnType":"","program":["RUSSIA-EO14024"],"title":"","callSign":"","vesselType":"","tonnage":"","grossRegisteredTonnage":"","vesselFlag":"","vesselOwner":"","remarks":"SWIFT/BIC RUNIRUMM; Website www.rubank.ru; Secondary sanctions risk: See Section 11 of Executive Order 14024.; Target Type Financial Institution; Tax ID No. 7718120593 (Russia); Legal Entity Number 253400YYHA5GJQB46R62; Registration Number 1027739671288 (Russia).","match":0.9325,"matchedName":"russian universal bank"},{"entityID":"17755","sdnName":"RUSSIAN NATIONAL COMMERCIAL BANK","sdnType":"","program":["UKRAINE-EO13685"],"title":"","callSign":"","vesselType":"","tonnage":"","grossRegisteredTonnage":"","vesselFlag":"","vesselOwner":"","remarks":"SWIFT/BIC RNCORUMM; Website http://www.rncb.ru; Email Address rncb@rncb.ru; BIK (RU) 044525607; Secondary sanctions risk: Ukraine-/Russia-Related Sanctions Regulations, 31 CFR 589.201 and/or 589.209; Registration ID 1027700381290 (Russia); Tax ID No. 7701105460 (Russia); Government Gazette Number 09610705 (Russia); a.k.a. 'RNCB'.","match":0.906896551724138,"matchedName":"russian national commercial bank"}],"altNames":[{"entityID":"51760","alternateID":"81078","alternateType":"aka","alternateName":"RUSSITA BANK","alternateRemarks":"","match":0.9636363636363636,"matchedName":"russita bank"},{"entityID":"18268","alternateID":"28201","alternateType":"aka","alternateName":"RUSSIAN EXPORT-IMPORT BANK","alternateRemarks":"","match":0.9217391304347826,"matchedName":"russian export import bank"},{"entityID":"16681","alternateID":"25333","alternateType":"fka","alternateName":"AKTSIONERNY BANK RUSSIAN FEDERATION","alternateRemarks":"","match":0.9015625,"matchedName":"aktsionerny bank russian federation"}],"sectoralSanctions":[{"Addresses":["3, Gagarinsky Pereulok, Moscow, 119034, RU","3 Gagarinsky per., Moscow, 119034, RU"],"AlternateNames":["Russian Agricultural Bank","Russian Agricultural Bank Open Joint Stock Company","Rosselkhozbank","Russian Agricultural Bank OJSC","RusAg"],"EntityID":"17014","IDsOnRecord":["Registration Number, 1027700342890, RU","Government Gazette Number, 52750822, RU","Website, http://www.rshb.ru","SWIFT/BIC, RUAGRUMM","Executive Order 13662 Directive Determination -, Subject to Directive 1","Executive Order 14024 Directive Information -, For more information on directives, please visit the following link: https://home.treasury.gov/policy-issues/financial-sanctions/sanctions-programs-and-country-information/russian-harmful-foreign-activities-sanctions#directives","Executive Order 14024 Directive Information, Subject to Directive 3 - All transactions in, provision of financing for, and other dealings in new debt of longer than 14 days maturity or new equity where such new debt or new equity is issued on or after the 'Effective Date (EO 14024 Directive)' associated with this name are prohibited.","Listing Date (EO 14024 Directive 3):, 2022-02-24","Effective Date (EO 14024 Directive 3):, 2022-03-26","Secondary sanctions risk:, Ukraine-/Russia-Related Sanctions Regulations, 31 CFR 589.201 and/or 589.209"],"Name":"Joint Stock Company Russian Agricultural Bank","Programs":["UKRAINE-EO13662","RUSSIA-EO14024"],"Remarks":["For more information on directives, please visit the following link: http://www.treasury.gov/resource-center/sanctions/Programs/Pages/ukraine.aspx#directives."],"SourceInfoURL":"https://ofac.treasury.gov/other-ofac-sanctions-lists","SourceListURL":"https://sanctionslist.ofac.treas.gov/Home/ConsolidatedList","Type":"Entity","match":0.9217391304347826,"matchedName":"russian agricultural bank"},{"Addresses":["12 Krasnopresnenskaya Embankments, Moscow, 123610, RU"],"AlternateNames":["ROSEKSIMBANK, ZAO","RUSSIAN EXPORT-IMPORT BANK","GOSUDARSTVENNY SPETSIALIZIROVANNY ROSSISKI EKSPORTNO-IMPORTNY BANK (ZAKRYTOE AKTSIONERNOE OBSHCHESTVO)","STATE SPECIALIZED RUSSIAN EXPORT-IMPORT BANK JOINT-STOCK COMPANY","Eximbank of Russia ZAO","Eximbank of Russia","AO Roseksimbank"],"EntityID":"18268","IDsOnRecord":["Registration Number, 1027739109133, RU","Tax ID No., 7704001959, RU","Legal Entity Number, 253400HA6URWT39X2982","SWIFT/BIC, EXIRRUMM","Website, eximbank.ru","Executive Order 13662 Directive Determination -, Subject to Directive 1","Organization Established Date, 1994-05-24","Target Type, Financial Institution","Secondary sanctions risk:, Ukraine-/Russia-Related Sanctions Regulations, 31 CFR 589.201 and/or 589.209","Secondary sanctions risk:, See Section 11 of Executive Order 14024."],"Name":"EXIMBANK OF RUSSIA JSC","Programs":["UKRAINE-EO13662","RUSSIA-EO14024"],"Remarks":["All offices worldwide","for more information on directives, please visit the following link: http://www.treasury.gov/resource-center/sanctions/Programs/Pages/ukraine.aspx#directives."],"SourceInfoURL":"https://ofac.treasury.gov/other-ofac-sanctions-lists","SourceListURL":"https://sanctionslist.ofac.treas.gov/Home/ConsolidatedList","Type":"Entity","match":0.9217391304347826,"matchedName":"russian export import bank"},{"Addresses":["65/1 Suschevsky Val, Moscow, 129594, RU","65 Sushchevskiy val, Moscow, 129594, RU"],"AlternateNames":["RUSSIAN REGIONAL DEVELOPMENT BANK","VBRR"],"EntityID":"18298","IDsOnRecord":["Registration ID, 3287, RU","Website, www.vbrr.ru","Executive Order 13662 Directive Determination -, Subject to Directive 2","Executive Order 13662 Directive Determination -, Subject to Directive 4","Secondary sanctions risk:, Ukraine-/Russia-Related Sanctions Regulations, 31 CFR 589.201 and/or 589.209"],"Name":"OJSC RUSSIAN REGIONAL DEVELOPMENT BANK","Programs":["UKRAINE-EO13662"],"Remarks":["For more information on directives, please visit the following link: http://www.treasury.gov/resource-center/sanctions/Programs/Pages/ukraine.aspx#directives."],"SourceInfoURL":"https://ofac.treasury.gov/other-ofac-sanctions-lists","SourceListURL":"https://sanctionslist.ofac.treas.gov/Home/ConsolidatedList","Type":"Entity","match":0.905,"matchedName":"russian regional development bank"}],"nonSDNMenuBasedSanctionsList":[{"Addresses":["Neglinnaya St 12, Moscow, 107016, RU","Moscow, RU"],"AlternateNames":["Bank Rossi, Federal State Budgetary Institution","Bank of Russia","Bank of Russia, Central Bank","Tsentralny Bank Rossiskoi Federatsii","Central Bank of Russia"],"EntityID":"31695","EntityNumber":"31695","IDs":["Registration Number, 1037700013020, RU","Government Gazette Number, 00032253, RU","Tax ID No., 7702235133, RU","SWIFT/BIC, CBRFRUMM","Website, www.cbr.ru","Organization Established Date, 1990-07-13","Organization Type:, Central banking","Executive Order 14024 Directive Information -, For more information on directives, please visit the following link: https://home.treasury.gov/policy-issues/financial-sanctions/sanctions-programs-and-country-information/russian-harmful-foreign-activities-sanctions#directives","Executive Order 14024 Directive Information, Subject to Directive 1a - As of the effective date, participation in the secondary market for ruble or non-ruble denominated bonds issued on or after the effective date by the Central Bank of the Russian Federation, the National Wealth Fund of the Russian Federation, or the Ministry of Finance of the Russian Federation is prohibited.","Target Type, Government Entity","Listing Date (EO 14024 Directive 1a):, 2022-02-22","Effective Date (EO 14024 Directive 1a):, 2022-03-01","Executive Order 14024 Directive Information, Subject to Directive 4 - any transaction involving the Central Bank of the Russian Federation, the National Wealth Fund of the Russian Federation, or the Ministry of Finance of the Russian Federation, including any transfer of assets to such entities or any foreign exchange transaction for or on behalf of such entities is prohibited."],"Name":"Central Bank of the Russian Federation","Programs":["RUSSIA-EO14024"],"SourceInfoURL":"https://ofac.treasury.gov/other-ofac-sanctions-lists","Type":"Entity","match":0.9326268221574344,"matchedName":"bank of russia"},{"Addresses":["3, Gagarinsky Pereulok, Moscow, 119034, RU","3 Gagarinsky per., Moscow, 119034, RU"],"AlternateNames":["Russian Agricultural Bank","Russian Agricultural Bank Open Joint Stock Company","Rosselkhozbank","Russian Agricultural Bank OJSC","RusAg"],"EntityID":"17014","EntityNumber":"17014","IDs":["Registration Number, 1027700342890, RU","Government Gazette Number, 52750822, RU","Website, http://www.rshb.ru","SWIFT/BIC, RUAGRUMM","Executive Order 13662 Directive Determination -, Subject to Directive 1","Executive Order 14024 Directive Information -, For more information on directives, please visit the following link: https://home.treasury.gov/policy-issues/financial-sanctions/sanctions-programs-and-country-information/russian-harmful-foreign-activities-sanctions#directives","Executive Order 14024 Directive Information, Subject to Directive 3 - All transactions in, provision of financing for, and other dealings in new debt of longer than 14 days maturity or new equity where such new debt or new equity is issued on or after the 'Effective Date (EO 14024 Directive)' associated with this name are prohibited.","Listing Date (EO 14024 Directive 3):, 2022-02-24","Effective Date (EO 14024 Directive 3):, 2022-03-26","Secondary sanctions risk:, Ukraine-/Russia-Related Sanctions Regulations, 31 CFR 589.201 and/or 589.209"],"Name":"Joint Stock Company Russian Agricultural Bank","Programs":["UKRAINE-EO13662","RUSSIA-EO14024"],"Remarks":["For more information on directives, please visit the following link: http://www.treasury.gov/resource-center/sanctions/Programs/Pages/ukraine.aspx#directives."],"SourceInfoURL":"https://ofac.treasury.gov/other-ofac-sanctions-lists","Type":"Entity","match":0.9217391304347826,"matchedName":"russian agricultural bank"}],"ukConsolidatedSanctionsList":[{"Addresses":["Rastrelli Square, 2A, Saint-Petersburg"],"GroupID":14177,"GroupType":"Entity","LastUpdates":["15/12/2023"],"ListedDates":["22/02/2022"],"Names":["BANK OF RUSSIA","BANK ROSSIYA","RUSSIA BANK"],"OtherInfos":["(UK Sanctions List Ref):RUS0232. Financial sanctions imposed in addition to an asset freeze: Correspondent banking relationships etc. Trust services. Date trust services sanctions imposed: 21/03/2023. The prohibition on correspondent banking relationships etc. measure was imposed on 15/12/2023. (UK Statement of Reasons):Bank \\"Rossiya\\" is a Russian bank privately owned by elite Russian billionaires with direct links to Putin. Bank \\"Rossiya\\" also has important stakes in the National Media Group, which controls television stations which actively support the Russian Government's policies of destabilisation in Ukraine.  Since the annexation of Crimea, Bank \\"Rossiya\\" has opened branches across Crimea and Sevastopol, and provided travel cards for the public to travel across the peninsula thereby supporting the integration of Crimea and Sevastopol into the Russian Federation through the financial system.  Bank \\"Rossiya\\" has also contributed to the provision of insurance and investment throughout Crimea and Sevastopol and services to support military capability and major transport links.  Bank \\"Rossiya\\" therefore is or has been involved in providing financial services, or making available funds, economic resources, goods or technology and  engaging in, providing support for, or promoting any policy or action  that could contribute to destabilising Ukraine or undermining or threatening the territorial integrity, sovereignty or independence of Ukraine. (Website):https://abr.ru/ (Type of entity):Public Joint Stock Company (PJSC) (Business Reg No):License number: 328 INN: 7831000122 OGRN: 1027800000084"],"PostalCodes":["191124"],"SanctionListDates":["22/02/2022"],"match":0.9565403304178814,"matchedName":"russia bank"},{"Addresses":["0 Bld. 2 Presnenskaya Emb. (Moscow City, IQ-quarter Complex), Moscow","3, Gagarinsky Pereulok, Moscow"],"Countries":["Russia"],"GroupID":15016,"GroupType":"Entity","LastUpdates":["15/12/2023"],"ListedDates":["24/03/2022"],"Names":["JSC ROSSELKHOZBANK","RUSAG","RUSSIAN AGRICULTURAL BANK"],"OtherInfos":["(UK Sanctions List Ref):RUS1073. Financial sanctions imposed in addition to an asset freeze: Dealing with transferable securities or money-market instruments. Loans and credit arrangements. Correspondent banking relationships etc. Trust services. Date trust services sanctions imposed: 21/03/2023. The prohibition on correspondent banking relationships etc. measure was imposed on 15/12/2023. (UK Statement of Reasons):RUSSIAN AGRICULTURAL BANK is a Russian bank. RUSSIAN AGRICULTURAL BANK is or has been involved in obtaining a benefit from or supporting the Government of Russia by carrying on business in the financial services sector - a sector of strategic significance to the Government of Russia. (Phone number):(1) 7 (495) 777-11-00 (2) 7 (495) 787-7-787 (3) 8 (800) 100-0-100 (Website):(1) http://www.rshb.ru/en/ (2) https://www.rshb.ru/ (Email address):office@rshb.ru"],"PostalCodes":["123112","119034"],"SanctionListDates":["24/03/2022"],"match":0.9217391304347826,"matchedName":"russian agricultural bank"},{"Addresses":["27 Kalanchevskaya str., Moscow"],"Countries":["Russia"],"GroupID":15017,"GroupType":"Entity","LastUpdates":["15/12/2023"],"ListedDates":["24/03/2022"],"Names":["ALFA-BANK JSC","ALFA-BANK RUSSIA"],"OtherInfos":["(UK Sanctions List Ref):RUS1074. Financial sanctions imposed in addition to an asset freeze: Correspondent banking relationships etc. Trust services. Date trust services sanctions imposed: 21/03/2023. The prohibition on correspondent banking relationships etc. measure was imposed on 15/12/2023. (UK Statement of Reasons):Alfa-Bank JSC is a Russian bank. There are reasonable grounds to suspect that Alfa-Bank JSC is or has been involved in obtaining a benefit from or supporting the Government of Russia by carrying on business in the financial services sector - a sector of strategic significance to the Government of Russia. (Phone number):7 495 755-58-58. 7 495 78-888-78 (Website):https://alfabank.ru/ (Type of entity):Bank, Financial Services Company, JSC"],"PostalCodes":["107078"],"SanctionListDates":["24/03/2022"],"match":0.9155457448285437,"matchedName":"alfa bank russia"},{"Addresses":["Naberezhnaja street, 34, Simferopol, The Autonomous Republic of Crimea and the city of Sevastopol"],"Countries":["Ukraine"],"GroupID":13078,"GroupType":"Entity","LastUpdates":["21/03/2023"],"ListedDates":["31/07/2014"],"Names":["RUSSIAN NATIONAL COMMERCIAL BANK"],"OtherInfos":["(UK Sanctions List Ref):RUS0193. Financial sanctions imposed in addition to an asset freeze: Trust services. Date trust services sanctions imposed: 21/03/2023. (UK Statement of Reasons):After the illegal annexation of Crimea, Russian National Commercial Bank (RNCB) became fully owned by the so-called 'Republic of Crimea'. In January 2016 became a property of Federal Agency for State Property Management also known as Rosimushchestvo. It has become the dominant player in the market, while it had no presence in Crimea before the annexation. By buying or taking over from branches of retreating banks operating in Crimea, RNBC supported materially and financially the actions of the Russian government to integrate Crimea into the Russian Federation, thus undermining Ukraine's territorial integrity. (Website):http://www.rncb.ru"],"PostalCodes":["295000"],"SanctionListDates":["31/12/2020"],"match":0.906896551724138,"matchedName":"russian national commercial bank"},{"Addresses":["65 Sushchevskiy val, Moscow"],"Countries":["Russia"],"GroupID":15918,"GroupType":"Entity","LastUpdates":["15/12/2023"],"ListedDates":["19/05/2023"],"Names":["RUSSIAN REGIONAL DEVELOPMENT BANK"],"OtherInfos":["(UK Sanctions List Ref):RUS1860. Financial sanctions imposed in addition to an asset freeze: Correspondent banking relationships etc. Trust services. Date trust services sanctions imposed: 18/05/2023. The prohibition on correspondent banking relationships etc. measure was imposed on 15/12/2023. (UK Statement of Reasons):RUSSIAN REGIONAL DEVELOPMENT BANK is an involved person under the Russia (EU Exit) (Sanctions) Regulations 2019 because it is or has been involved in obtaining a benefit from or supporting the Government of Russia by carrying on business in a sector of strategic significance to the Government of Russia, namely the Russian financial services sector."],"PostalCodes":["129594"],"SanctionListDates":["18/05/2023"],"match":0.905,"matchedName":"russian regional development bank"}],"refreshedAt":"2025-10-11T00:54:13.808076626Z"}`
     }
   },
   {
@@ -6704,9 +7299,9 @@ var mockAlerts = [
 
 // 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 alert = React15.useMemo(() => mockAlerts.find((a) => a.id === id), [id]);
+  const [rfiStatus, setRfiStatus] = React15.useState(alert?.rfiStatus || "");
+  const [assignee, setAssignee] = React15.useState(alert?.assignee || "Unassigned");
   const handleRfiStatusChange = (newStatus) => {
     setRfiStatus(newStatus);
     console.log("RFI Status updated to:", newStatus);
@@ -6715,6 +7310,11 @@ var useAlertDetail = (id) => {
     setAssignee(newAssignee);
     console.log("Assignee updated to:", newAssignee);
   };
+  const handleResolveAlert = async (data) => {
+    console.log("Resolving alert with data:", data);
+    await new Promise((resolve) => setTimeout(resolve, 1e3));
+    console.log("Alert resolved successfully");
+  };
   return {
     alert,
     isLoading: false,
@@ -6722,18 +7322,21 @@ var useAlertDetail = (id) => {
     rfiStatus,
     assignee,
     handleRfiStatusChange,
-    handleAssigneeChange
+    handleAssigneeChange,
+    handleResolveAlert
   };
 };
 var AlertDetail = () => {
   const { id } = reactRouterDom.useParams();
   const navigate = reactRouterDom.useNavigate();
+  const [resolveDialogOpen, setResolveDialogOpen] = React15.useState(false);
   const {
     alert,
     rfiStatus,
     assignee,
     handleRfiStatusChange,
-    handleAssigneeChange
+    handleAssigneeChange,
+    handleResolveAlert
   } = 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: [
@@ -6746,46 +7349,53 @@ var AlertDetail = () => {
       /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => navigate("/alerts"), children: "Back to Alerts" })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     PageLayout,
     {
-      title: `Alert #${alert.id}`,
-      description: alert.description,
+      title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Alert #",
+          alert.id
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getTypeBadgeVariant(alert.type), children: alert.type })
+      ] }),
       maxWidth: "full",
-      actions: [
+      headerContent: /* @__PURE__ */ jsxRuntime.jsx(
+        AlertHeaderControls,
         {
-          label: "Back to Alerts",
-          variant: "outline",
-          onClick: () => navigate("/alerts")
-        },
-        {
-          label: "Assign",
-          variant: "outline",
-          onClick: () => console.log("Assign alert")
-        },
+          status: alert.status,
+          assignee,
+          rfiStatus,
+          onAssigneeChange: handleAssigneeChange,
+          onRfiStatusChange: handleRfiStatusChange
+        }
+      ),
+      actions: [
         {
-          label: "Close Alert",
+          label: "Resolve Alert",
           variant: "default",
-          onClick: () => console.log("Close alert")
+          onClick: () => setResolveDialogOpen(true)
         }
       ],
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        AlertDetailView,
-        {
-          alert,
-          rfiStatus,
-          assignee,
-          onRfiStatusChange: handleRfiStatusChange,
-          onAssigneeChange: handleAssigneeChange
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDetailRouter, { alert }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ResolveAlertDialog,
+          {
+            alertId: alert.id,
+            open: resolveDialogOpen,
+            onOpenChange: setResolveDialogOpen,
+            onResolve: handleResolveAlert
+          }
+        )
+      ]
     }
   );
 };
 var AlertDetail_default = AlertDetail;
 var Alerts = () => {
   const navigate = reactRouterDom.useNavigate();
-  const [filters, setFilters] = React13.useState({
+  const [filters, setFilters] = React15.useState({
     alertId: "",
     contextId: "",
     contextType: "",
@@ -6796,9 +7406,9 @@ var Alerts = () => {
     startDate: "",
     endDate: ""
   });
-  const [filteredAlerts, setFilteredAlerts] = React13.useState(mockAlerts);
-  const [currentPage, setCurrentPage] = React13.useState(1);
-  const [rowsPerPage, setRowsPerPage] = React13.useState(100);
+  const [filteredAlerts, setFilteredAlerts] = React15.useState(mockAlerts);
+  const [currentPage, setCurrentPage] = React15.useState(1);
+  const [rowsPerPage, setRowsPerPage] = React15.useState(100);
   const handleFilterChange = (field, value) => {
     setFilters((prev) => ({ ...prev, [field]: value }));
   };
@@ -7141,11 +7751,11 @@ var mockBusinessesList = [
 ];
 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({
+  const [businesses, setBusinesses] = React15.useState(mockBusinessesList);
+  const [filteredBusinesses, setFilteredBusinesses] = React15.useState(mockBusinessesList);
+  const [sortBy, setSortBy] = React15.useState("created");
+  const [sortDirection, setSortDirection] = React15.useState("desc");
+  const [filters, setFilters] = React15.useState({
     name: "",
     productName: "",
     status: "",
@@ -7203,7 +7813,7 @@ var Businesses = () => {
   const handleRowClick = (business) => {
     navigate(`/business/${business.id}`);
   };
-  const columns = [
+  const columns2 = [
     {
       key: "id",
       title: "Business ID",
@@ -7380,7 +7990,7 @@ var Businesses = () => {
     /* @__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,
+        columns: columns2,
         data: sortedBusinesses,
         sortBy,
         sortDirection,
@@ -7464,6 +8074,9 @@ var businessCounterparties = [
   }
 ];
 var Business = () => {
+  const { id } = reactRouterDom.useParams();
+  const business = mockBusinessesList.find((b) => b.id === id);
+  const [currentStatus, setCurrentStatus] = React15.useState(business?.status || "active");
   const accountColumns = [
     {
       key: "number",
@@ -7487,80 +8100,107 @@ var Business = () => {
       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,
-          {
-            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"
-          }
-        ),
+  if (!business) {
+    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: "Business Not Found" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-4", children: "The business could not be found." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PageLayout,
+    {
+      title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: business.businessName }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          TabsTrigger,
+          EditableInfoField,
           {
-            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"
+            label: "",
+            value: currentStatus,
+            options: [
+              { value: "active", label: "Active" },
+              { value: "inactive", label: "Inactive" },
+              { value: "suspended", label: "Suspended" }
+            ],
+            onChange: (newStatus) => setCurrentStatus(newStatus),
+            renderValue: (value) => /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: value.toUpperCase() }),
+            className: "inline-block"
           }
         )
       ] }),
-      /* @__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"
-              }
-            ) })
-          ] })
+      maxWidth: "full",
+      children: /* @__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,
+            {
+              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("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.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.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 })
+          /* @__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.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)) }) })
-    ] })
-  ] });
+        ] }, counterparty.id)) }) })
+      ] })
+    }
+  );
 };
 var BusinessDetail_default = Business;
 var CreateBusiness = () => {
-  const [businessType, setBusinessType] = React13.useState("");
+  const [businessType, setBusinessType] = React15.useState("");
   return /* @__PURE__ */ jsxRuntime.jsx(
     PageLayout,
     {
@@ -7759,7 +8399,7 @@ var Cases = () => {
 };
 var Cases_default = Cases;
 var CreateCounterparty = () => {
-  const [counterpartyData, setCounterpartyData] = React13.useState(null);
+  const [counterpartyData, setCounterpartyData] = React15.useState(null);
   const handleBasicInfoChange = (data) => {
     setCounterpartyData(data);
   };
@@ -7786,7 +8426,7 @@ var CreateCounterparty = () => {
 var Create_default2 = CreateCounterparty;
 var CounterpartyDomesticWire = () => {
   const { isEditing, handleToggleEdit, handleSave, handleCancel } = useEditState({});
-  const [transferType, setTransferType] = React13.useState("DOMESTIC");
+  const [transferType, setTransferType] = React15.useState("DOMESTIC");
   return /* @__PURE__ */ jsxRuntime.jsx(
     PageLayout,
     {
@@ -7916,7 +8556,7 @@ var Dashboard = () => {
 var Dashboard_default = Dashboard;
 var NotFound = () => {
   const location = reactRouterDom.useLocation();
-  React13.useEffect(() => {
+  React15.useEffect(() => {
     console.error(
       "404 Error: User attempted to access non-existent route:",
       location.pathname
@@ -7967,20 +8607,18 @@ var mockProducts = [
   { 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 [statementType, setStatementType] = React15.useState("");
+  const [selectedProgram, setSelectedProgram] = React15.useState("");
+  const [selectedProduct, setSelectedProduct] = React15.useState("");
+  const [accountNumber, setAccountNumber] = React15.useState("");
+  const [startDate, setStartDate] = React15.useState();
+  const [endDate, setEndDate] = React15.useState();
+  const [statementGenerated, setStatementGenerated] = React15.useState(false);
+  const [programs] = React15.useState(mockPrograms);
+  const [products] = React15.useState(mockProducts);
+  const [statementHeader, setStatementHeader] = React15.useState(null);
+  const [statementTransactions, setStatementTransactions] = React15.useState([]);
   const handleStatementTypeChange = (value) => {
     setStatementType(value);
     setSelectedProgram("");
@@ -7992,6 +8630,16 @@ function Statement() {
     if (statementType === "program" && !selectedProgram) return;
     if (statementType === "product" && !selectedProduct) return;
     if (statementType === "account" && !accountNumber) return;
+    console.log("Generating statement with:", {
+      statementType,
+      selectedProgram,
+      selectedProduct,
+      accountNumber,
+      startDate,
+      endDate
+    });
+    setStatementHeader(mockStatementHeader);
+    setStatementTransactions(mockStatementTransactions);
     setStatementGenerated(true);
   };
   const isGenerateDisabled = () => {
@@ -8001,34 +8649,6 @@ function Statement() {
     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...");
   };
@@ -8038,148 +8658,33 @@ function Statement() {
   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"
-          }
-        ) })
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StatementView,
+    {
+      statementType,
+      selectedProgram,
+      selectedProduct,
+      accountNumber,
+      startDate,
+      endDate,
+      statementGenerated,
+      programs,
+      products,
+      statementHeader,
+      statementTransactions,
+      onStatementTypeChange: handleStatementTypeChange,
+      onProgramChange: setSelectedProgram,
+      onProductChange: setSelectedProduct,
+      onAccountNumberChange: setAccountNumber,
+      onStartDateChange: setStartDate,
+      onEndDateChange: setEndDate,
+      onGenerateStatement: handleGenerateStatement,
+      onEdit: handleEdit,
+      onDownloadCSV: handleDownloadCSV,
+      onPrintPDF: handlePrintPDF,
+      isGenerateDisabled: isGenerateDisabled()
+    }
+  );
 }
 
 // src/lib/mock-data/transaction-data.ts
@@ -8188,13 +8693,15 @@ var mockTransactions = [
     id: "1",
     created: "2025-10-01 00:16",
     accountNumber: "126713605718",
-    amount: -7293.32,
+    amount: 34539.18,
     customer: "Rise Works Inc",
     counterparty: "VEDANT JAYESHKUMAR PATI",
     description: "4NnuJKyD9a8LUmkm",
     transactionType: "Ach Originator Credit",
     status: "PENDING",
+    processingStatus: "SENT",
     updated: "2025-10-01 00:16",
+    isInbound: true,
     achDetails: {
       type: "ACH Credit",
       originatorName: "Rise Works Inc",
@@ -8249,7 +8756,9 @@ var mockTransactions = [
     description: "ACH Fee",
     transactionType: "Fee Ach Transaction",
     status: "POSTED",
-    updated: "2025-10-01 00:09"
+    processingStatus: "CONFIRMED",
+    updated: "2025-10-01 00:09",
+    isInbound: false
   },
   {
     id: "3",
@@ -8261,7 +8770,9 @@ var mockTransactions = [
     description: "Invoice Payment #INV-2024-089",
     transactionType: "Wire Domestic Credit",
     status: "POSTED",
+    processingStatus: "CONFIRMED",
     updated: "2025-10-01 00:12",
+    isInbound: false,
     wireDetails: {
       type: "Domestic Wire",
       originatorName: "Tech Solutions LLC",
@@ -8359,7 +8870,9 @@ var mockTransactions = [
     description: "Vendor Payment",
     transactionType: "Ach Originator Debit",
     status: "POSTED",
-    updated: "2025-09-30 23:01"
+    processingStatus: "CONFIRMED",
+    updated: "2025-09-30 23:01",
+    isInbound: false
   },
   {
     id: "5",
@@ -8371,7 +8884,9 @@ var mockTransactions = [
     description: "Contractor Payment",
     transactionType: "Ach Originator Credit",
     status: "PENDING",
-    updated: "2025-09-30 21:05"
+    processingStatus: "CUSTOMER_REVIEW",
+    updated: "2025-09-30 21:05",
+    isInbound: false
   },
   {
     id: "6",
@@ -8383,7 +8898,9 @@ var mockTransactions = [
     description: "Monthly Rent Payment",
     transactionType: "Wire Domestic Debit",
     status: "POSTED",
-    updated: "2025-09-30 20:15"
+    processingStatus: "CONFIRMED",
+    updated: "2025-09-30 20:15",
+    isInbound: false
   },
   {
     id: "7",
@@ -8395,7 +8912,9 @@ var mockTransactions = [
     description: "Wire Transfer Fee",
     transactionType: "Fee Wire Transaction",
     status: "POSTED",
-    updated: "2025-09-30 17:22"
+    processingStatus: "CONFIRMED",
+    updated: "2025-09-30 17:22",
+    isInbound: false
   },
   {
     id: "8",
@@ -8407,7 +8926,9 @@ var mockTransactions = [
     description: "R&D Funding Transfer",
     transactionType: "Ach Originator Credit",
     status: "FAILED",
-    updated: "2025-09-30 16:10"
+    processingStatus: "MANUAL_REVIEW",
+    updated: "2025-09-30 16:10",
+    isInbound: false
   }
 ];
 var mockTransactionTimeline = [
@@ -8452,9 +8973,9 @@ var mockTransactionTimeline = [
 ];
 var TransactionHistory = () => {
   const navigate = reactRouterDom.useNavigate();
-  const [currentPage, setCurrentPage] = React13.useState(1);
-  const [rowsPerPage, setRowsPerPage] = React13.useState(100);
-  const [filters, setFilters] = React13.useState({
+  const [currentPage, setCurrentPage] = React15.useState(1);
+  const [rowsPerPage, setRowsPerPage] = React15.useState(100);
+  const [filters, setFilters] = React15.useState({
     accountNumber: "",
     product: "",
     customerId: "",
@@ -8946,7 +9467,10 @@ var newTransactionSchema = zod.z.object({
   counterpartyName: zod.z.string().min(1, "Counterparty name is required"),
   amount: zod.z.string().min(1, "Amount is required"),
   currency: zod.z.string().min(1, "Currency is required"),
-  description: zod.z.string().optional()
+  description: zod.z.string().optional(),
+  certifyInformation: zod.z.boolean().refine((val) => val === true, {
+    message: "You must certify the information is correct"
+  })
 });
 var TRANSACTION_TYPES = [
   { value: "transfer", label: "Transfer", icon: lucideReact.ArrowLeftRight },
@@ -8986,14 +9510,14 @@ var mockCounterpartyData = {
 };
 function NewTransaction() {
   const navigate = reactRouterDom.useNavigate();
-  const [accountLookedUp, setAccountLookedUp] = React13.useState(false);
-  const [accountData, setAccountData] = React13.useState(null);
-  const [counterpartyLookedUp, setCounterpartyLookedUp] = React13.useState(false);
-  const [counterpartyData, setCounterpartyData] = React13.useState(null);
-  const [confirmationOpen, setConfirmationOpen] = React13.useState(false);
-  const [submissionStatus, setSubmissionStatus] = React13.useState(null);
-  const [errorMessage, setErrorMessage] = React13.useState("");
-  const [transactionId, setTransactionId] = React13.useState("");
+  const [accountLookedUp, setAccountLookedUp] = React15.useState(false);
+  const [accountData, setAccountData] = React15.useState(null);
+  const [counterpartyLookedUp, setCounterpartyLookedUp] = React15.useState(false);
+  const [counterpartyData, setCounterpartyData] = React15.useState(null);
+  const [confirmationOpen, setConfirmationOpen] = React15.useState(false);
+  const [submissionStatus, setSubmissionStatus] = React15.useState(null);
+  const [errorMessage, setErrorMessage] = React15.useState("");
+  const [transactionId, setTransactionId] = React15.useState("");
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(newTransactionSchema),
     defaultValues: {
@@ -9002,7 +9526,8 @@ function NewTransaction() {
       counterpartyName: "",
       amount: "",
       currency: "USD",
-      description: ""
+      description: "",
+      certifyInformation: false
     }
   });
   const transactionType = form.watch("transactionType");
@@ -9128,7 +9653,6 @@ function NewTransaction() {
     PageLayout,
     {
       title: "New Transaction",
-      description: "Complete the form below to initiate a new transaction",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto space-y-6", children: [
         /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => e.preventDefault(), children: [
           !accountLookedUp ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -9136,21 +9660,20 @@ function NewTransaction() {
             {
               title: "Account Lookup",
               variant: "default",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 items-start w-full", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                   FormInput,
                   {
                     name: "accountNumber",
-                    label: "Account Number",
                     placeholder: "Enter account number"
                   }
-                ),
+                ) }),
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   Button,
                   {
                     onClick: handleAccountLookup,
-                    className: "w-full sm:w-auto",
                     disabled: !accountNumber,
+                    className: "shrink-0 mt-0 w-48",
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 mr-2" }),
                       "Lookup Account"
@@ -9227,22 +9750,21 @@ function NewTransaction() {
               title: "Counterparty Lookup",
               variant: "default",
               className: cn(!transactionType && "opacity-50 pointer-events-none"),
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 items-start w-full", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                   FormInput,
                   {
                     name: "counterpartyName",
-                    label: "Counterparty Name",
                     placeholder: "Enter counterparty name",
                     disabled: !transactionType
                   }
-                ),
+                ) }),
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   Button,
                   {
                     onClick: handleCounterpartyLookup,
-                    className: "w-full sm:w-auto",
                     disabled: !transactionType || !counterpartyName,
+                    className: "shrink-0 mt-0 w-48",
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 mr-2" }),
                       "Lookup Counterparty"
@@ -9301,7 +9823,8 @@ function NewTransaction() {
                       name: "currency",
                       label: "Currency",
                       options: CURRENCY_OPTIONS,
-                      disabled: !counterpartyLookedUp
+                      disabled: !counterpartyLookedUp,
+                      className: "w-48"
                     }
                   )
                 ] }),
@@ -9324,6 +9847,34 @@ function NewTransaction() {
               variant: "default",
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(DataGrid, { data: reviewData, columns: 2 }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted/30 rounded-lg p-4 border border-border/50", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  reactHookForm.Controller,
+                  {
+                    name: "certifyInformation",
+                    control: form.control,
+                    render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          Checkbox,
+                          {
+                            id: "certifyInformation",
+                            checked: field.value,
+                            onCheckedChange: field.onChange
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "label",
+                          {
+                            htmlFor: "certifyInformation",
+                            className: "text-sm font-medium leading-relaxed cursor-pointer select-none",
+                            children: "I certify that all information entered is correct and accurate to the best of my knowledge"
+                          }
+                        )
+                      ] }),
+                      form.formState.errors.certifyInformation && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive ml-7", children: form.formState.errors.certifyInformation.message })
+                    ] })
+                  }
+                ) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-end pt-4 border-t border-border", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Button,
@@ -9341,7 +9892,7 @@ function NewTransaction() {
                       type: "button",
                       onClick: handleSubmit,
                       className: "w-48",
-                      disabled: !transactionType || !accountNumber || !counterpartyName || !amount,
+                      disabled: !transactionType || !accountNumber || !counterpartyName || !amount || !form.watch("certifyInformation"),
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-4 w-4 mr-2" }),
                         "Submit Transaction"
@@ -9451,6 +10002,24 @@ var TransactionDetail = () => {
         return "outline";
     }
   };
+  const getProcessingStatusVariant = (status) => {
+    switch (status) {
+      case "CONFIRMED":
+        return "success";
+      case "SENT":
+        return "success";
+      case "SUBMITTED":
+        return "warning";
+      case "CUSTOMER_REVIEW":
+        return "warning";
+      case "MANUAL_REVIEW":
+        return "warning";
+      case "INITIATED":
+        return "outline";
+      default:
+        return "outline";
+    }
+  };
   const formatCurrency = (value) => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
@@ -9463,7 +10032,21 @@ var TransactionDetail = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     PageLayout,
     {
-      title: `Transaction #${transaction.id}`,
+      title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+          "font-semibold",
+          transaction.amount < 0 ? "text-destructive" : "text-success"
+        ), children: formatCurrency(transaction.amount) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionTypeBadge,
+          {
+            transactionType: transaction.transactionType,
+            isInbound: transaction.isInbound
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant(transaction.status), children: transaction.status }),
+        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getProcessingStatusVariant(transaction.processingStatus), children: transaction.processingStatus })
+      ] }),
       maxWidth: "full",
       actions: [
         {
@@ -9480,33 +10063,6 @@ var TransactionDetail = () => {
       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(FormCard, { title: "Details", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              InfoField,
-              {
-                label: "Transaction Type",
-                value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: transaction.transactionType }),
-                layout: "horizontal"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              InfoField,
-              {
-                label: "Status",
-                value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant(transaction.status), children: transaction.status }),
-                layout: "horizontal"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              InfoField,
-              {
-                label: "Amount",
-                value: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                  "font-semibold",
-                  transaction.amount < 0 ? "text-destructive" : "text-success"
-                ), children: formatCurrency(transaction.amount) }),
-                layout: "horizontal"
-              }
-            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               InfoField,
               {
@@ -9518,7 +10074,7 @@ var TransactionDetail = () => {
             /* @__PURE__ */ jsxRuntime.jsx(
               InfoField,
               {
-                label: "Customer Name",
+                label: "Customer",
                 value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: transaction.customer }),
                 layout: "horizontal"
               }
@@ -9527,21 +10083,18 @@ var TransactionDetail = () => {
             /* @__PURE__ */ jsxRuntime.jsx(
               InfoField,
               {
-                label: "Direction",
-                value: transaction.amount < 0 ? "DEBIT" : "CREDIT",
+                label: "Counterparty",
+                value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: transaction.counterparty }),
                 layout: "horizontal"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Counterparty Name", value: transaction.counterparty, layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Post Date", value: transaction.created.split(" ")[0], layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "OFAC ID", value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: "18323208" }), layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Original Filename", value: "-", layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Loaded From File", value: "iso21130757012764355B7.xml.126534273Q299", layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Payment ID", value: transaction.id, layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Linked Payment ID", value: "-", layout: "horizontal" }),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Is Inbound", value: "True", layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Pending until Date", value: "-", layout: "horizontal" }),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Processing Status", value: "Sent", layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Further Credit To", value: "-", layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Balance Available Date", value: "-", layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Requester Username", value: "-", layout: "horizontal" }),
@@ -9598,8 +10151,9 @@ exports.ACHTransferSection = ACHTransferSection;
 exports.AccountCard = AccountCard;
 exports.AddressForm = AddressForm;
 exports.AlertDetail = AlertDetail_default;
-exports.AlertDetailView = AlertDetailView;
+exports.AlertDetailRouter = AlertDetailRouter;
 exports.AlertDocuments = AlertDocuments;
+exports.AlertHeaderControls = AlertHeaderControls;
 exports.AlertNotes = AlertNotes;
 exports.AlertTimeline = AlertTimeline;
 exports.Alerts = Alerts_default;
@@ -9627,6 +10181,7 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Cases = Cases_default;
+exports.Checkbox = Checkbox;
 exports.ContactInfoCard = ContactInfoCard;
 exports.Container = Container;
 exports.ContextSection = ContextSection;
@@ -9682,6 +10237,7 @@ exports.MainLayout = MainLayout;
 exports.MetricCard = MetricCard;
 exports.NewTransaction = NewTransaction;
 exports.NotFound = NotFound_default;
+exports.OFACAlertView = OFACAlertView;
 exports.OriginatorCard = OriginatorCard;
 exports.OriginatorFI = OriginatorFI;
 exports.OriginatorFIAddress = OriginatorFIAddress;
@@ -9692,7 +10248,10 @@ exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.ReceiverCard = ReceiverCard;
+exports.ResolveAlertDialog = ResolveAlertDialog;
 exports.ResponsiveGrid = ResponsiveGrid;
+exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
 exports.Separator = Separator;
 exports.Sheet = Sheet;
 exports.SheetClose = SheetClose;
@@ -9730,7 +10289,16 @@ exports.SidebarTrigger = SidebarTrigger;
 exports.Stack = Stack;
 exports.Statement = Statement;
 exports.StatementHeader = StatementHeader;
+exports.StatementView = StatementView;
 exports.StatusBadge = StatusBadge;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
@@ -9749,6 +10317,7 @@ exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.TransactionDetail = TransactionDetail_default;
 exports.TransactionHistory = TransactionHistory_default;
+exports.TransactionTypeBadge = TransactionTypeBadge;
 exports.UIKit = UIKit;
 exports.UIKitShowcase = UIKitShowcase;
 exports.WireDetailsSection = WireDetailsSection;