braid-ui 1.0.66 → 1.0.67

package/dist/index.cjs

@@ -385,10 +385,6 @@ var AlertTimeline = ({ events }) => {
     /* @__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: [
-        "by ",
-        event.user
-      ] }),
       event.details && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: event.details }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/70 pt-0.5", children: event.timestamp })
     ] })
@@ -1363,7 +1359,7 @@ var DialogDescription = React15__namespace.forwardRef(({ className, ...props },
   }
 ));
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
-var JsonViewer = ({ data, className, compact = false, maxHeight = "60vh" }) => {
+var JsonViewer = ({ data, className, compact = false, maxHeight = "60vh", expandFully = false }) => {
   const [copied, setCopied] = React15.useState(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(JSON.stringify(data, null, 2));
@@ -1391,18 +1387,18 @@ var JsonViewer = ({ data, className, compact = false, maxHeight = "60vh" }) => {
       "div",
       {
         className: cn(
-          "overflow-auto bg-muted/30 rounded-lg border font-mono",
-          compact ? "max-h-[300px] p-2 text-xs" : `max-h-[${maxHeight}] p-4 text-xs`
+          "bg-muted/30 rounded-lg border font-mono",
+          expandFully ? "p-4 text-xs" : compact ? "max-h-[300px] overflow-auto p-2 text-xs" : "overflow-auto p-4 text-xs"
         ),
-        style: { maxHeight: compact ? "300px" : maxHeight },
+        style: expandFully ? void 0 : { maxHeight: compact ? "300px" : maxHeight },
         children: /* @__PURE__ */ jsxRuntime.jsx(JsonNode, { data, name: "root", depth: 0, compact })
       }
     )
   ] });
 };
 var JsonNode = ({ data, name, depth, compact = false }) => {
-  const [isExpanded, setIsExpanded] = React15.useState(compact ? depth < 1 : depth < 2);
-  const indent = compact ? depth * 12 : depth * 16;
+  const [isExpanded, setIsExpanded] = React15.useState(true);
+  const indent = depth * 8;
   if (data === null) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: indent }, className: "text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: name }),
@@ -8281,31 +8277,10 @@ var ACHDetailsSection = ({ data }) => {
     /* @__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: "Type", value: data.type, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator Name", value: data.originatorName, layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Originator Account Number",
-          value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: data.originatorAccountNumber }),
-          layout: "horizontal"
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator Account Number", value: data.originatorAccountNumber, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Receiver Name", value: data.receiverName, layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Receiver Account Number",
-          value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: data.receiverAccountNumber }),
-          layout: "horizontal"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Receiver Routing Number",
-          value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: data.receiverRoutingNumber }),
-          layout: "horizontal"
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Receiver Account Number", value: data.receiverAccountNumber, layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Receiver Routing Number", value: data.receiverRoutingNumber, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Amount", value: formatCurrency5(data.amount), layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "SEC Code", value: data.secCode, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Company Entry Description", value: data.companyEntryDescription, layout: "horizontal" }),
@@ -8314,13 +8289,25 @@ var ACHDetailsSection = ({ data }) => {
       data.individualName && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Individual Name", value: data.individualName, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Trace Number", value: data.traceNumber, layout: "horizontal" })
     ] }),
-    data.raw && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 pt-6 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
-      InfoField,
+    data.raw && /* @__PURE__ */ jsxRuntime.jsx(CollapsibleRawSection, { data: data.raw })
+  ] });
+};
+var CollapsibleRawSection = ({ data }) => {
+  const [isExpanded, setIsExpanded] = React15.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 pt-6 border-t border-border", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        label: "Raw",
-        value: /* @__PURE__ */ jsxRuntime.jsx(JsonViewer, { data: data.raw, className: "mt-2", compact: true })
+        type: "button",
+        onClick: () => setIsExpanded(!isExpanded),
+        className: "flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
+        children: [
+          isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }),
+          "Raw message"
+        ]
       }
-    ) })
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(JsonViewer, { data, expandFully: true }) })
   ] });
 };
 var WireDetailsSection = ({ data, onIMADChange }) => {
@@ -8412,67 +8399,39 @@ var WireDetailsSection = ({ data, onIMADChange }) => {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator Name", value: data.originatorName, layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Originator Account Number",
-          value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: data.originatorAccountNumber }),
-          layout: "horizontal"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator Address", value: data.originatorAddress, layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator Account Number", value: data.originatorAccountNumber, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Beneficiary Name", value: data.beneficiaryName, layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Beneficiary Account Number",
-          value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: data.beneficiaryAccountNumber }),
-          layout: "horizontal"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Beneficiary Address", value: data.beneficiaryAddress, layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Beneficiary Account Number", value: data.beneficiaryAccountNumber, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Beneficiary FI Name", value: data.beneficiaryFIName, layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Beneficiary FI Routing Number",
-          value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: data.beneficiaryFIRoutingNumber }),
-          layout: "horizontal"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Beneficiary FI Address", value: data.beneficiaryFIAddress, layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Beneficiary FI Routing Number", value: data.beneficiaryFIRoutingNumber, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator FI Name", value: data.originatorFIName, layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Originator FI Routing Number",
-          value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: data.originatorFIRoutingNumber }),
-          layout: "horizontal"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator FI Address", value: data.originatorFIAddress || "-", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator FI Routing Number", value: data.originatorFIRoutingNumber, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator to Beneficiary Info", value: data.originatorToBeneficiaryInfo || "-", layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "File Handle", value: data.fileHandle || "-", layout: "horizontal" }),
       data.intermediaryFIName && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Intermediary FI Name", value: data.intermediaryFIName, layout: "horizontal" }),
-        data.intermediaryFIRoutingNumber && /* @__PURE__ */ jsxRuntime.jsx(
-          InfoField,
-          {
-            label: "Intermediary FI Routing Number",
-            value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: data.intermediaryFIRoutingNumber }),
-            layout: "horizontal"
-          }
-        ),
-        data.intermediaryFIAddress && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Intermediary FI Address", value: data.intermediaryFIAddress, layout: "horizontal" })
+        data.intermediaryFIRoutingNumber && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Intermediary FI Routing Number", value: data.intermediaryFIRoutingNumber, layout: "horizontal" })
       ] })
     ] }),
-    data.raw && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 pt-6 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
-      InfoField,
+    data.raw && /* @__PURE__ */ jsxRuntime.jsx(CollapsibleRawSection2, { data: data.raw })
+  ] });
+};
+var CollapsibleRawSection2 = ({ data }) => {
+  const [isExpanded, setIsExpanded] = React15.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 pt-6 border-t border-border", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        label: "Raw",
-        value: /* @__PURE__ */ jsxRuntime.jsx(JsonViewer, { data: data.raw, className: "mt-2", compact: true })
+        type: "button",
+        onClick: () => setIsExpanded(!isExpanded),
+        className: "flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
+        children: [
+          isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }),
+          "Raw message"
+        ]
       }
-    ) })
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(JsonViewer, { data, expandFully: true }) })
   ] });
 };
 var formatCurrency2 = (value) => {
@@ -9044,6 +9003,7 @@ var EnhancedMultiSelect = ({
   disabled = false
 }) => {
   const [open, setOpen] = React15__namespace.useState(false);
+  const [searchQuery, setSearchQuery] = React15__namespace.useState("");
   const [popoverContainer, setPopoverContainer] = React15__namespace.useState(null);
   const triggerRef = React15__namespace.useRef(null);
   React15__namespace.useEffect(() => {
@@ -9065,9 +9025,19 @@ var EnhancedMultiSelect = ({
     onValueChange(value.filter((v) => v !== optionValue));
   };
   const selectedLabels = value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
+  const filteredOptions = React15__namespace.useMemo(() => {
+    if (!searchQuery.trim()) return options;
+    const query = searchQuery.toLowerCase();
+    return options.filter(
+      (option) => option.label.toLowerCase().includes(query)
+    );
+  }, [options, searchQuery]);
   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(Popover, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: (isOpen) => {
+      setOpen(isOpen);
+      if (!isOpen) setSearchQuery("");
+    }, modal: false, children: [
       /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         Button,
         {
@@ -9106,7 +9076,7 @@ var EnhancedMultiSelect = ({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs(
         PopoverContent,
         {
           container: popoverContainer,
@@ -9119,44 +9089,63 @@ var EnhancedMultiSelect = ({
               e.preventDefault();
             }
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "max-h-[240px] overflow-y-auto overscroll-contain p-1",
-              onWheel: (e) => e.stopPropagation(),
-              onTouchMove: (e) => e.stopPropagation(),
-              children: options.map((option) => {
-                const isSelected = value.includes(option.value);
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    role: "option",
-                    "aria-selected": isSelected,
-                    className: cn(
-                      "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground select-none",
-                      isSelected && "bg-accent"
-                    ),
-                    onMouseDown: (e) => e.preventDefault(),
-                    onClick: () => handleSelect(option.value),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: cn(
-                            "flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
-                            isSelected ? "bg-primary text-primary-foreground" : "opacity-50"
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search...",
+                  value: searchQuery,
+                  onChange: (e) => setSearchQuery(e.target.value),
+                  className: "w-full pl-8 pr-2 py-1.5 text-sm border rounded-md bg-background focus:outline-none focus:ring-1 focus:ring-ring",
+                  onKeyDown: (e) => e.stopPropagation()
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "max-h-[240px] overflow-y-auto overscroll-contain p-1",
+                onWheel: (e) => e.stopPropagation(),
+                onTouchMove: (e) => e.stopPropagation(),
+                children: [
+                  filteredOptions.map((option) => {
+                    const isSelected = value.includes(option.value);
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        role: "option",
+                        "aria-selected": isSelected,
+                        className: cn(
+                          "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground select-none",
+                          isSelected && "bg-accent"
+                        ),
+                        onMouseDown: (e) => e.preventDefault(),
+                        onClick: () => handleSelect(option.value),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              className: cn(
+                                "flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                                isSelected ? "bg-primary text-primary-foreground" : "opacity-50"
+                              ),
+                              children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" })
+                            }
                           ),
-                          children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
-                    ]
-                  },
-                  option.value
-                );
-              })
-            }
-          )
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+                        ]
+                      },
+                      option.value
+                    );
+                  }),
+                  filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-4 text-sm text-center text-muted-foreground", children: "No options found" })
+                ]
+              }
+            )
+          ]
         }
       )
     ] })
@@ -9621,6 +9610,7 @@ var TransactionDetailView = ({
   onCounterpartyClick,
   onOFACClick,
   onProductClick,
+  onAlertClick,
   onIMADChange,
   isLoading,
   error,
@@ -9647,6 +9637,12 @@ var TransactionDetailView = ({
       ] })
     ] }) });
   }
+  const [copiedField, setCopiedField] = React15.useState(null);
+  const handleCopy = (value, fieldName) => {
+    navigator.clipboard.writeText(value);
+    setCopiedField(fieldName);
+    setTimeout(() => setCopiedField(null), 2e3);
+  };
   if (!transaction) {
     return null;
   }
@@ -9688,15 +9684,26 @@ var TransactionDetailView = ({
               InfoField,
               {
                 label: "Account Number",
-                value: /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    variant: "link",
-                    className: "h-auto p-0 text-sm",
-                    onClick: () => onAccountClick(transaction.accountNumber),
-                    children: transaction.accountNumber
-                  }
-                ),
+                value: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      variant: "link",
+                      className: "h-auto p-0 text-sm",
+                      onClick: () => onAccountClick(transaction.accountNumber),
+                      children: transaction.accountNumber
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleCopy(transaction.accountNumber, "accountNumber"),
+                      className: "text-muted-foreground hover:text-foreground transition-colors",
+                      children: copiedField === "accountNumber" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-success" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" })
+                    }
+                  )
+                ] }),
                 layout: "horizontal"
               }
             ),
@@ -9752,7 +9759,25 @@ var TransactionDetailView = ({
             ),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Original Filename", value: transaction.originalFilename || "-", layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Loaded From File", value: transaction.loadedFromFile || "-", layout: "horizontal" }),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Payment ID", value: transaction.id, layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InfoField,
+              {
+                label: "Payment ID",
+                value: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: transaction.id }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleCopy(transaction.id, "paymentId"),
+                      className: "text-muted-foreground hover:text-foreground transition-colors",
+                      children: copiedField === "paymentId" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5 text-success" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" })
+                    }
+                  )
+                ] }),
+                layout: "horizontal"
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Linked Payment ID", value: transaction.linkedPaymentId || "-", layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Pending until Date", value: transaction.pendingUntilDate || "-", layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Further Credit To", value: transaction.furtherCreditTo || "-", layout: "horizontal" }),
@@ -9778,7 +9803,25 @@ var TransactionDetailView = ({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Returned In File", value: transaction.returnedInFile || "-", layout: "horizontal" }),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Alerts", value: transaction.alerts?.join(", ") || "-", layout: "horizontal" })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InfoField,
+              {
+                label: "Alerts",
+                value: transaction.alerts && transaction.alerts.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: transaction.alerts.map((alertId, index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      variant: "link",
+                      className: "h-auto p-0 text-sm",
+                      onClick: () => onAlertClick?.(alertId),
+                      children: alertId
+                    }
+                  ),
+                  index < transaction.alerts.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: "," })
+                ] }, alertId)) }) : "-",
+                layout: "horizontal"
+              }
+            )
           ] }) }),
           isACHTransfer && transaction.achDetails && /* @__PURE__ */ jsxRuntime.jsx(ACHDetailsSection, { data: transaction.achDetails }),
           isWireTransfer && transaction.wireDetails && /* @__PURE__ */ jsxRuntime.jsx(WireDetailsSection, { data: transaction.wireDetails, onIMADChange })
@@ -14900,72 +14943,156 @@ var mockTransactions = [
       intermediaryFIAddress: "100 Federal Street, Boston, MA 02110",
       imad: "20250930MMQFMP030000123",
       raw: {
-        messageType: "MT103",
-        sender: "WFBIUS6SXXX",
-        receiver: "CHASUS33XXX",
-        transactionReference: "INV-2024-089-TXN-001",
-        relatedReference: "INV-2024-089",
-        bankOperationCode: "CRED",
-        instructionCode: "CHQB",
-        valueDate: "2025-09-30",
-        currency: "USD",
-        amount: "15000.00",
-        orderingCustomer: {
-          account: "445821903456",
-          name: "Tech Solutions LLC",
-          address: [
-            "123 Tech Street",
-            "San Francisco, CA 94105",
-            "United States"
-          ]
-        },
-        orderingInstitution: {
-          bic: "WFBIUS6SXXX",
-          name: "Wells Fargo Bank N.A.",
-          address: [
-            "420 Montgomery Street",
-            "San Francisco, CA 94104"
-          ]
-        },
-        intermediaryInstitution: {
-          bic: "BOFAUS3NXXX",
-          name: "Bank of America N.A.",
-          clearingCode: "026009593",
-          address: [
-            "100 Federal Street",
-            "Boston, MA 02110"
-          ]
-        },
-        beneficiaryInstitution: {
-          bic: "CHASUS33XXX",
-          name: "JPMorgan Chase Bank N.A.",
-          clearingCode: "021000021",
-          address: [
-            "270 Park Avenue",
-            "New York, NY 10017"
-          ]
-        },
-        beneficiaryCustomer: {
-          account: "998877665544",
-          name: "Global Suppliers Inc",
-          address: [
-            "456 Supply Avenue",
-            "New York, NY 10001",
-            "United States"
+        fiToFICstmrCdtTrf: {
+          grpHdr: {
+            msgId: "20250703QMGFT004000033",
+            creDtTm: {
+              dateTime: {
+                date: { year: 2025, month: 7, day: 3 },
+                time: { hour: 12, minute: 26, second: 1, nano: 99e7 }
+              },
+              offset: { totalSeconds: -14400 }
+            },
+            nbOfTxs: "1",
+            sttlmInf: {
+              sttlmMtd: "CLRG",
+              clrSys: { cd: "FDW" }
+            }
+          },
+          cdtTrfTxInf: [
+            {
+              pmtId: {
+                endToEndId: "Test wire #1",
+                uetr: "2638c715-d0a2-4fc9-a79b-a4e78dc9cd49"
+              },
+              pmtTpInf: {
+                lclInstrm: { prtry: "CTRC" }
+              },
+              intrBkSttlmAmt: { value: 38, ccy: "USD" },
+              intrBkSttlmDt: { year: 2025, month: 7, day: 3 },
+              instdAmt: { value: 11, ccy: "USD" },
+              chrgBr: "SHAR",
+              instgAgt: {
+                finInstnId: {
+                  clrSysMmbId: {
+                    clrSysId: { cd: "USABA" },
+                    mmbId: "321177573"
+                  }
+                }
+              },
+              instdAgt: {
+                finInstnId: {
+                  clrSysMmbId: {
+                    clrSysId: { cd: "USABA" },
+                    mmbId: "121182881"
+                  }
+                }
+              },
+              dbtr: {
+                nm: "Sarah Escobar",
+                pstlAdr: {
+                  strtNm: "12345 Kaiser lane",
+                  bldgNb: "E425",
+                  pstCd: "12345",
+                  twnNm: "COSTA MESA",
+                  ctrySubDvsn: "CA",
+                  ctry: "US"
+                }
+              },
+              dbtrAcct: {
+                id: { othr: { id: "12345678910" } }
+              },
+              dbtrAgt: {
+                finInstnId: {
+                  clrSysMmbId: {
+                    clrSysId: { cd: "USABA" },
+                    mmbId: "321177573"
+                  },
+                  nm: "NORTH BAY CREDIT UNION",
+                  pstlAdr: {
+                    strtNm: "397 Aviation Blvd",
+                    pstCd: "95403",
+                    twnNm: "Santa Rosa",
+                    ctrySubDvsn: "CA",
+                    ctry: "US"
+                  }
+                }
+              },
+              cdtrAgt: {
+                finInstnId: {
+                  clrSysMmbId: {
+                    clrSysId: { cd: "USABA" },
+                    mmbId: "121182881"
+                  },
+                  nm: "NORTH BAY CREDIT UNION",
+                  pstlAdr: {
+                    strtNm: "397 Aviation Blvd",
+                    pstCd: "12345",
+                    twnNm: "Santa Rosa",
+                    ctrySubDvsn: "CA",
+                    ctry: "US"
+                  }
+                }
+              },
+              cdtr: {
+                nm: "Jake from Braid LLC",
+                pstlAdr: {
+                  strtNm: "12345 Test Lane",
+                  pstCd: "12345",
+                  twnNm: "Newport Beach",
+                  ctrySubDvsn: "TX",
+                  ctry: "US"
+                }
+              },
+              cdtrAcct: {
+                id: { othr: { id: "9988957447" } }
+              },
+              purp: { prtry: "Test wire #1" },
+              rmtInf: { ustrd: ["Test wire #1"] }
+            }
           ]
         },
-        remittanceInformation: "Invoice Payment for INV-2024-089 - Equipment Purchase",
-        regulatoryReporting: {
-          code: "BENEFRES",
-          country: "US",
-          narrative: "Payment for goods"
+        appHdr: {
+          fr: {
+            fiId: {
+              finInstnId: {
+                clrSysMmbId: { mmbId: "021151080" }
+              }
+            }
+          },
+          to: {
+            fiId: {
+              finInstnId: {
+                clrSysMmbId: { mmbId: "321177573" }
+              }
+            }
+          },
+          bizMsgIdr: "20250703QMGFNP6700018807031250FT01",
+          msgDefIdr: "pacs.008.001.08",
+          bizSvc: "TEST",
+          mktPrctc: {
+            regy: "www2.swift.com/mystandards/#/group/Federal_Reserve_Financial_Services/Fedwire_Funds_Service",
+            id: "frb.fedwire.01"
+          },
+          creDt: {
+            dateTime: {
+              date: { year: 2025, month: 7, day: 3 },
+              time: { hour: 12, minute: 50, second: 30, nano: 22e7 }
+            },
+            offset: { totalSeconds: -14400 }
+          },
+          bizPrcgDt: {
+            dateTime: {
+              date: { year: 2025, month: 7, day: 3 },
+              time: { hour: 12, minute: 50, second: 30, nano: 114e6 }
+            },
+            offset: { totalSeconds: -14400 }
+          },
+          namespace: "urn:iso:std:iso:20022:tech:xsd:head.001.001.03"
         },
-        senderToReceiverInformation: [
-          "Payment for invoice INV-2024-089",
-          "Equipment and supplies purchase",
-          "Net 30 terms - On time payment"
-        ],
-        chargeDetails: "OUR"
+        type: "MX",
+        "@xmlns": "urn:iso:std:iso:20022:tech:xsd:pacs.008.001.08",
+        identifier: "pacs.008.001.08"
       }
     }
   },
@@ -16153,6 +16280,9 @@ var TransactionDetail = () => {
   const handleProductClick = React15.useCallback((productId) => {
     console.log("Navigate to product:", productId);
   }, []);
+  const handleAlertClick = React15.useCallback((alertId) => {
+    navigate(`/alerts/${alertId}`);
+  }, [navigate]);
   const handleIMADChange = React15.useCallback((newImad) => {
     console.log("IMAD changed to:", newImad);
   }, []);
@@ -16184,6 +16314,7 @@ var TransactionDetail = () => {
         onCounterpartyClick: handleCounterpartyClick,
         onOFACClick: handleOFACClick,
         onProductClick: handleProductClick,
+        onAlertClick: handleAlertClick,
         onIMADChange: handleIMADChange,
         isLoading,
         error,