braid-ui 1.0.64 → 1.0.66

package/dist/index.cjs

@@ -4428,7 +4428,7 @@ function Calendar({
 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(
+var PopoverContent = React15__namespace.forwardRef(({ className, align = "center", sideOffset = 4, container, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive__namespace.Content,
   {
     ref,
@@ -8323,10 +8323,94 @@ var ACHDetailsSection = ({ data }) => {
     ) })
   ] });
 };
-var WireDetailsSection = ({ data }) => {
+var WireDetailsSection = ({ data, onIMADChange }) => {
+  const [isEditingImad, setIsEditingImad] = React15.useState(false);
+  const [imadValue, setImadValue] = React15.useState(data.imad || "");
+  const inputRef = React15.useRef(null);
+  React15.useEffect(() => {
+    if (isEditingImad && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditingImad]);
+  const handleImadSave = () => {
+    if (onIMADChange && imadValue !== data.imad) {
+      onIMADChange(imadValue);
+    }
+    setIsEditingImad(false);
+  };
+  const handleImadCancel = () => {
+    setImadValue(data.imad || "");
+    setIsEditingImad(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleImadSave();
+    } else if (e.key === "Escape") {
+      handleImadCancel();
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(FormCard, { title: "Wire Transfer 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: "Type", value: data.type, layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "IMAD",
+          value: isEditingImad ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                value: imadValue,
+                onChange: (e) => setImadValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                className: "h-7 text-sm px-2 border border-border rounded-md bg-background focus:outline-none focus:ring-1 focus:ring-primary"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7",
+                onClick: handleImadSave,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-success" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7",
+                onClick: handleImadCancel,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4 text-muted-foreground" })
+              }
+            )
+          ] }) : data.imad ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: data.imad }),
+            onIMADChange && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-6 w-6",
+                onClick: () => setIsEditingImad(true),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3 w-3 text-muted-foreground" })
+              }
+            )
+          ] }) : onIMADChange ? /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "link",
+              className: "h-auto p-0 text-sm",
+              onClick: () => setIsEditingImad(true),
+              children: "Add IMAD"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "-" }),
+          layout: "horizontal"
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator Name", value: data.originatorName, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         InfoField,
@@ -8366,7 +8450,9 @@ var WireDetailsSection = ({ data }) => {
           layout: "horizontal"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator FI Address", value: data.originatorFIAddress, layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Originator FI Address", value: data.originatorFIAddress || "-", 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(
@@ -8958,6 +9044,14 @@ var EnhancedMultiSelect = ({
   disabled = false
 }) => {
   const [open, setOpen] = React15__namespace.useState(false);
+  const [popoverContainer, setPopoverContainer] = React15__namespace.useState(null);
+  const triggerRef = React15__namespace.useRef(null);
+  React15__namespace.useEffect(() => {
+    if (triggerRef.current) {
+      const sheetContent = triggerRef.current.closest("[data-radix-dialog-content]");
+      setPopoverContainer(sheetContent);
+    }
+  }, []);
   const handleSelect = (optionValue) => {
     if (value.includes(optionValue)) {
       onValueChange(value.filter((v) => v !== optionValue));
@@ -8966,16 +9060,18 @@ var EnhancedMultiSelect = ({
     }
   };
   const handleRemove = (optionValue, e) => {
+    e.preventDefault();
     e.stopPropagation();
     onValueChange(value.filter((v) => v !== optionValue));
   };
   const selectedLabels = value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
   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, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
       /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         Button,
         {
+          ref: triggerRef,
           variant: "outline",
           role: "combobox",
           "aria-expanded": open,
@@ -8990,10 +9086,16 @@ var EnhancedMultiSelect = ({
                 children: [
                   label2,
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    lucideReact.X,
+                    "span",
                     {
-                      className: "ml-1 h-3 w-3 cursor-pointer",
-                      onClick: (e) => handleRemove(value[index], e)
+                      role: "button",
+                      className: "ml-1 rounded-sm hover:bg-secondary-foreground/20 inline-flex items-center justify-center",
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      },
+                      onClick: (e) => handleRemove(value[index], e),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3 cursor-pointer" })
                     }
                   )
                 ]
@@ -9004,30 +9106,59 @@ var EnhancedMultiSelect = ({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-full min-w-[200px] p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto p-1", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PopoverContent,
         {
-          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",
-            value.includes(option.value) && "bg-accent"
-          ),
-          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",
-                  value.includes(option.value) ? "bg-primary text-primary-foreground" : "opacity-50"
-                ),
-                children: value.includes(option.value) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
-          ]
-        },
-        option.value
-      )) }) })
+          container: popoverContainer,
+          className: "w-[var(--radix-popover-trigger-width)] min-w-[200px] p-0 bg-popover z-[100] pointer-events-auto",
+          align: "start",
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onInteractOutside: (e) => {
+            const target = e.target;
+            if (target.closest('[role="option"]')) {
+              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: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        }
+      )
     ] })
   ] });
 };
@@ -9490,6 +9621,7 @@ var TransactionDetailView = ({
   onCounterpartyClick,
   onOFACClick,
   onProductClick,
+  onIMADChange,
   isLoading,
   error,
   onRetry
@@ -9606,50 +9738,50 @@ var TransactionDetailView = ({
               InfoField,
               {
                 label: "OFAC ID",
-                value: /* @__PURE__ */ jsxRuntime.jsx(
+                value: transaction.ofacId ? /* @__PURE__ */ jsxRuntime.jsx(
                   Button,
                   {
                     variant: "link",
                     className: "h-auto p-0 text-sm",
-                    onClick: () => onOFACClick("18323208"),
-                    children: "18323208"
+                    onClick: () => onOFACClick(transaction.ofacId),
+                    children: transaction.ofacId
                   }
-                ),
+                ) : "-",
                 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: "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: "Linked Payment ID", value: "-", layout: "horizontal" }),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Pending until Date", value: "-", 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" }),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Requester IP Address", value: "-", layout: "horizontal" }),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Settlement Filename", value: "-", layout: "horizontal" }),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Duplicate of Payment ID", value: "-", 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" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Balance Available Date", value: transaction.balanceAvailableDate || "-", layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Requester Username", value: transaction.requesterUsername || "-", layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Requester IP Address", value: transaction.requesterIpAddress || "-", layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Settlement Filename", value: transaction.settlementFilename || "-", layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Duplicate of Payment ID", value: transaction.duplicateOfPaymentId || "-", layout: "horizontal" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               InfoField,
               {
                 label: "Product ID",
-                value: /* @__PURE__ */ jsxRuntime.jsx(
+                value: transaction.productId ? /* @__PURE__ */ jsxRuntime.jsx(
                   Button,
                   {
                     variant: "link",
                     className: "h-auto p-0 text-sm",
-                    onClick: () => onProductClick("130"),
-                    children: "130"
+                    onClick: () => onProductClick(transaction.productId),
+                    children: transaction.productId
                   }
-                ),
+                ) : "-",
                 layout: "horizontal"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Returned In File", value: "-", layout: "horizontal" }),
-            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Alerts", value: "-", layout: "horizontal" })
+            /* @__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" })
           ] }) }),
           isACHTransfer && transaction.achDetails && /* @__PURE__ */ jsxRuntime.jsx(ACHDetailsSection, { data: transaction.achDetails }),
-          isWireTransfer && transaction.wireDetails && /* @__PURE__ */ jsxRuntime.jsx(WireDetailsSection, { data: transaction.wireDetails })
+          isWireTransfer && transaction.wireDetails && /* @__PURE__ */ jsxRuntime.jsx(WireDetailsSection, { data: transaction.wireDetails, onIMADChange })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Transaction Timeline", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTimeline, { events: timelineEvents }) }) })
       ] })
@@ -14669,6 +14801,11 @@ var mockTransactions = [
     processingStatus: "SENT",
     updated: "2025-10-01 00:16",
     isInbound: true,
+    ofacId: "18323208",
+    productId: "130",
+    loadedFromFile: "iso21130757012764355B7.xml.126534273Q299",
+    requesterUsername: "admin@riseworks.com",
+    requesterIpAddress: "192.168.1.100",
     achDetails: {
       type: "ACH Credit",
       originatorName: "Rise Works Inc",
@@ -14740,6 +14877,8 @@ var mockTransactions = [
     processingStatus: "CONFIRMED",
     updated: "2025-10-01 00:12",
     isInbound: false,
+    settlementFilename: "settlement_20250930.csv",
+    alerts: ["OFAC Review Pending"],
     wireDetails: {
       type: "Domestic Wire",
       originatorName: "Tech Solutions LLC",
@@ -14752,11 +14891,14 @@ var mockTransactions = [
       beneficiaryFIRoutingNumber: "021000021",
       beneficiaryFIAddress: "270 Park Avenue, New York, NY 10017",
       originatorFIName: "Wells Fargo Bank",
+      originatorToBeneficiaryInfo: "Invoice Payment for INV-2024-089 - Equipment Purchase",
+      fileHandle: "WR20250930-0001234",
       originatorFIRoutingNumber: "121000248",
       originatorFIAddress: "420 Montgomery Street, San Francisco, CA 94104",
       intermediaryFIName: "Bank of America",
       intermediaryFIRoutingNumber: "026009593",
       intermediaryFIAddress: "100 Federal Street, Boston, MA 02110",
+      imad: "20250930MMQFMP030000123",
       raw: {
         messageType: "MT103",
         sender: "WFBIUS6SXXX",
@@ -14864,10 +15006,25 @@ var mockTransactions = [
     counterparty: "Property Management LLC",
     description: "Monthly Rent Payment",
     transactionType: "Wire Domestic Debit",
-    status: "POSTED",
-    processingStatus: "CONFIRMED",
+    status: "PENDING",
+    processingStatus: "SENT",
     updated: "2025-09-30 20:15",
-    isInbound: false
+    isInbound: false,
+    wireDetails: {
+      type: "Domestic Wire",
+      originatorName: "Real Estate Holdings",
+      originatorAccountNumber: "998877665544",
+      originatorAddress: "789 Property Lane, Chicago, IL 60601",
+      beneficiaryName: "Property Management LLC",
+      beneficiaryAccountNumber: "112233445566",
+      beneficiaryAddress: "321 Management Blvd, Chicago, IL 60602",
+      beneficiaryFIName: "US Bank",
+      beneficiaryFIRoutingNumber: "091000019",
+      beneficiaryFIAddress: "800 Nicollet Mall, Minneapolis, MN 55402",
+      originatorFIName: "Fifth Third Bank",
+      originatorFIRoutingNumber: "042000314",
+      originatorFIAddress: "38 Fountain Square Plaza, Cincinnati, OH 45263"
+    }
   },
   {
     id: "7",
@@ -15996,6 +16153,9 @@ var TransactionDetail = () => {
   const handleProductClick = React15.useCallback((productId) => {
     console.log("Navigate to product:", productId);
   }, []);
+  const handleIMADChange = React15.useCallback((newImad) => {
+    console.log("IMAD changed to:", newImad);
+  }, []);
   if (!isLoading && !error && !transaction) {
     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: "Transaction Not Found" }),
@@ -16024,6 +16184,7 @@ var TransactionDetail = () => {
         onCounterpartyClick: handleCounterpartyClick,
         onOFACClick: handleOFACClick,
         onProductClick: handleProductClick,
+        onIMADChange: handleIMADChange,
         isLoading,
         error,
         onRetry: handleRetry