braid-ui 1.0.56 → 1.0.58

package/dist/index.cjs

@@ -8257,7 +8257,7 @@ var StatementView = ({
   ] });
 };
 var ACHDetailsSection = ({ data }) => {
-  const formatCurrency3 = (value) => {
+  const formatCurrency4 = (value) => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
@@ -8293,7 +8293,7 @@ var ACHDetailsSection = ({ data }) => {
           layout: "horizontal"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Amount", value: formatCurrency3(data.amount), layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Amount", value: formatCurrency4(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" }),
       data.companyDiscretionaryData && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Company Discretionary Data", value: data.companyDiscretionaryData, layout: "horizontal" }),
@@ -8460,7 +8460,6 @@ var NewTransactionView = ({
   onEditCounterparty,
   onTransactionTypeChange,
   onSubmit,
-  onCancel,
   onConfirmationClose,
   onConfirmationOpenChange,
   onNewTransaction,
@@ -8478,7 +8477,9 @@ var NewTransactionView = ({
   onEditReceiverAccount,
   isReviewReady,
   adjustmentTypeOptions,
-  transactionTypeOptions
+  transactionTypeOptions,
+  showSuccessInfoBox = false,
+  successInfoMessage = ""
 }) => {
   const transactionType = form.watch("transactionType");
   const accountNumber = form.watch("accountNumber");
@@ -8487,6 +8488,7 @@ var NewTransactionView = ({
   const receiverAccountNumber = form.watch("receiverAccountNumber");
   const adjustmentDirection = form.watch("adjustmentDirection");
   const adjustmentType = form.watch("adjustmentType");
+  const description = form.watch("description");
   const requiresCounterparty = ["ach", "wire"].includes(transactionType);
   const isTransfer = transactionType === "transfer";
   const isAdjustment = transactionType === "adjustment";
@@ -8847,56 +8849,71 @@ var NewTransactionView = ({
             ] })
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-end pt-4 border-t border-border", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: onCancel, className: "w-32", children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              onClick: onSubmit,
-              className: "w-48",
-              disabled: !transactionType || !accountNumber || requiresCounterparty && !counterpartyName || isTransfer && !receiverAccountLookedUp || isAdjustment && (!adjustmentDirection || !adjustmentType) || !amount || !form.watch("certifyInformation") || isSubmitting,
-              children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-                "Submitting..."
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-4 w-4 mr-2" }),
-                "Submit Transaction"
-              ] })
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-4 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            onClick: onSubmit,
+            className: "w-48",
+            disabled: !transactionType || !accountNumber || requiresCounterparty && !counterpartyName || isTransfer && !receiverAccountLookedUp || isAdjustment && (!adjustmentDirection || !adjustmentType) || !amount || !form.watch("certifyInformation") || isSubmitting,
+            children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+              "Submitting..."
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-4 w-4 mr-2" }),
+              "Submit Transaction"
+            ] })
+          }
+        ) })
       ] }) })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: confirmationOpen, onOpenChange: () => {
     }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md flex flex-col max-h-[85vh]", hideCloseButton: true, children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
         submissionStatus === "success" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 rounded-full bg-success/10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-6 w-6 text-success" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 rounded-full bg-destructive/10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-6 w-6 text-destructive" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-xl", children: submissionStatus === "success" ? "Transaction Successful" : "Transaction Failed" })
+        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-xl", children: submissionStatus === "success" ? "Transaction Submitted" : "Transaction Failed" })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto min-h-0", children: submissionStatus === "success" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 pt-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground", children: "Your transaction has been successfully submitted and is being processed." }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted/50 rounded-lg p-4 space-y-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Transaction ID:" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium", children: transactionId })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Payment ID:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium text-xs", children: crypto.randomUUID() })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Account:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: accountData ? `${accountData.accountName} (${accountData.accountNumber})` : "N/A" })
+          ] }),
+          transactionType === "transfer" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Receiver Account:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: receiverAccountData ? `${receiverAccountData.accountName} (${receiverAccountData.accountNumber})` : "N/A" })
+          ] }),
+          transactionType === "adjustment" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Direction:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: adjustmentDirection === "debit" ? "Debit" : "Credit" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Adjustment Type:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: adjustmentTypeOptions.find((t) => t.value === adjustmentType)?.label || "N/A" })
+            ] })
+          ] }),
+          (transactionType === "wire" || transactionType === "ach") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Customer Name:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: counterpartyName || "N/A" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Amount:" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatCurrency2(amount) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Type:" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: transactionTypeOptions.find((t) => t.value === transactionType)?.label })
-          ] }),
-          requiresCounterparty && counterpartyName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Counterparty:" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: counterpartyName })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Description:" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: description || "N/A" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg", children: [
+        showSuccessInfoBox && successInfoMessage && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-5 w-5 text-blue-500 mt-0.5 flex-shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-blue-700 dark:text-blue-300", children: "You will receive a confirmation email once the transaction is completed." })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-blue-700 dark:text-blue-300", children: successInfoMessage })
         ] })
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 pt-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 p-4 bg-destructive/10 border border-destructive/20 rounded-lg", children: [
@@ -8909,17 +8926,11 @@ var NewTransactionView = ({
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Please review the error message above and try again. If the problem persists, contact support." })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { className: "sm:justify-end gap-2 flex-shrink-0", children: [
-        submissionStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: () => onConfirmationOpenChange(false), children: "Edit" }),
-        submissionStatus === "success" && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: onNewTransaction, children: "New Transaction" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            onClick: onConfirmationClose,
-            variant: submissionStatus === "success" ? "default" : "outline",
-            children: submissionStatus === "success" ? "View Transaction" : "Close"
-          }
-        )
+        submissionStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", onClick: () => onConfirmationOpenChange(false), children: "Edit" }),
+        submissionStatus === "success" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: onNewTransaction, children: "New Transaction" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", onClick: onConfirmationClose, children: "View Transaction" })
+        ] })
       ] })
     ] }) })
   ] });
@@ -14011,7 +14022,7 @@ var TransactionHistory = () => {
     setRowsPerPage(value);
     setCurrentPage(1);
   };
-  const formatCurrency3 = (value) => {
+  const formatCurrency4 = (value) => {
     const formatted = new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
@@ -14300,7 +14311,7 @@ var TransactionHistory = () => {
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: transaction.created }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: transaction.accountNumber }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs text-right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: transaction.amount < 0 ? "text-destructive" : "", children: formatCurrency3(transaction.amount) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs text-right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: transaction.amount < 0 ? "text-destructive" : "", children: formatCurrency4(transaction.amount) }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 font-normal text-xs", children: transaction.customer }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 font-normal text-xs", children: transaction.counterparty }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs truncate", children: transaction.description }),
@@ -14729,7 +14740,7 @@ function NewTransaction() {
       };
       console.log("Transaction submission payload:", submissionPayload);
       await new Promise((resolve) => setTimeout(resolve, 1500));
-      const hasError = Math.random() > 0.1;
+      const hasError = Math.random() > 0.7;
       if (hasError) {
         const errorScenarios = [
           "Insufficient funds. Current balance: $125,450.00, Required: $" + parseFloat(data.amount).toFixed(2),
@@ -14738,9 +14749,7 @@ function NewTransaction() {
           "Invalid routing number for the selected transaction type."
         ];
         setSubmissionStatus("error");
-        setErrorMessage(
-          'JSON parse error: Cannot deserialize value of type `io.ropechain.api.enums.TransactionEnums$DebitAdjustmentTypes` from String "mapSubTypeStringToEnum(data.adjustmentType ?? "")": not one of the values accepted for Enum class: [COLLECTION, TRANSACTION_REVERSAL, TRANSACTION_ADJUSTMENT]; nested exception is com.fasterxml.jackson.databind.exc.InvalidFormatException: Cannot deserialize value of type `io.ropechain.api.enums.TransactionEnums$DebitAdjustmentTypes` from String "mapSubTypeStringToEnum(data.adjustmentType ?? "")": not one of the values accepted for Enum class: [COLLECTION, TRANSACTION_REVERSAL, TRANSACTION_ADJUSTMENT]\n at [Source: (org.springframework.util.StreamUtils$NonClosingInputStream); line: 1, column: 51] (through reference chain: io.ropechain.api.model.transaction.internal.TransactionDebitAdjustmentRequest["subType"])'
-        );
+        setErrorMessage(errorScenarios[Math.floor(Math.random() * errorScenarios.length)]);
       } else {
         const txId = "TXN-" + Math.random().toString(36).substr(2, 9).toUpperCase();
         setTransactionId(txId);
@@ -14785,9 +14794,6 @@ function NewTransaction() {
     setConfirmationOpen(false);
     resetForm();
   };
-  const handleCancel = () => {
-    navigate("/dashboard");
-  };
   const isReviewReady = React15.useMemo(() => {
     const data = form.watch();
     const requiresCounterparty = ["ach", "wire"].includes(data.transactionType);
@@ -14832,7 +14838,6 @@ function NewTransaction() {
       onEditCounterparty: handleEditCounterparty,
       onTransactionTypeChange: handleTransactionTypeChange,
       onSubmit: handleSubmit,
-      onCancel: handleCancel,
       onConfirmationClose: handleConfirmationClose,
       onConfirmationOpenChange: setConfirmationOpen,
       onNewTransaction: handleNewTransaction,
@@ -14843,66 +14848,60 @@ function NewTransaction() {
       onEditReceiverAccount: handleEditReceiverAccount,
       isReviewReady,
       adjustmentTypeOptions,
-      transactionTypeOptions
+      transactionTypeOptions,
+      showSuccessInfoBox: true,
+      successInfoMessage: "The transaction is being manually reviewed"
     }
   );
 }
-var TransactionDetail = () => {
-  const { id } = reactRouterDom.useParams();
-  const navigate = reactRouterDom.useNavigate();
-  const transaction = mockTransactions.find((t) => t.id === id);
-  if (!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" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground mb-4", children: [
-        "The transaction #",
-        id,
-        " could not be found."
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => navigate("/transactions/history"), children: "Back to Transaction History" })
-    ] }) });
+var getStatusVariant = (status) => {
+  switch (status) {
+    case "POSTED":
+      return "success";
+    case "PENDING":
+      return "warning";
+    case "FAILED":
+      return "destructive";
+    case "CANCELLED":
+      return "outline";
+    default:
+      return "outline";
   }
-  const getStatusVariant3 = (status) => {
-    switch (status) {
-      case "POSTED":
-        return "success";
-      case "PENDING":
-        return "warning";
-      case "FAILED":
-        return "destructive";
-      case "CANCELLED":
-        return "outline";
-      default:
-        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 formatCurrency3 = (value) => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      minimumFractionDigits: 2
-    }).format(value);
-  };
-  const isWireTransfer = transaction.transactionType.toLowerCase().includes("wire");
-  const isACHTransfer = transaction.transactionType.toLowerCase().includes("ach");
+};
+var getProcessingStatusVariant = (status) => {
+  switch (status) {
+    case "CONFIRMED":
+    case "SENT":
+      return "success";
+    case "SUBMITTED":
+    case "CUSTOMER_REVIEW":
+    case "MANUAL_REVIEW":
+      return "warning";
+    case "INITIATED":
+    default:
+      return "outline";
+  }
+};
+var formatCurrency3 = (value) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2
+  }).format(value);
+};
+var TransactionDetailView = ({
+  transaction,
+  timelineEvents,
+  isWireTransfer,
+  isACHTransfer,
+  onReturn,
+  onCancel,
+  onAccountClick,
+  onCustomerClick,
+  onCounterpartyClick,
+  onOFACClick,
+  onProductClick
+}) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     PageLayout,
     {
@@ -14918,7 +14917,7 @@ var TransactionDetail = () => {
             isInbound: transaction.isInbound
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant3(transaction.status), children: transaction.status }),
+        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant(transaction.status), children: transaction.status }),
         /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getProcessingStatusVariant(transaction.processingStatus), children: transaction.processingStatus })
       ] }),
       maxWidth: "full",
@@ -14926,12 +14925,12 @@ var TransactionDetail = () => {
         {
           label: "Return",
           variant: "outline",
-          onClick: () => console.log("Return transaction")
+          onClick: onReturn
         },
         {
           label: "Cancel",
           variant: "default",
-          onClick: () => console.log("Cancel transaction")
+          onClick: onCancel
         }
       ],
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row items-start gap-6", children: [
@@ -14941,7 +14940,15 @@ var TransactionDetail = () => {
               InfoField,
               {
                 label: "Account Number",
-                value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: transaction.accountNumber }),
+                value: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "link",
+                    className: "h-auto p-0 text-sm",
+                    onClick: () => onAccountClick(transaction.accountNumber),
+                    children: transaction.accountNumber
+                  }
+                ),
                 layout: "horizontal"
               }
             ),
@@ -14949,7 +14956,15 @@ var TransactionDetail = () => {
               InfoField,
               {
                 label: "Customer",
-                value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: transaction.customer }),
+                value: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "link",
+                    className: "h-auto p-0 text-sm",
+                    onClick: () => onCustomerClick(transaction.customer),
+                    children: transaction.customer
+                  }
+                ),
                 layout: "horizontal"
               }
             ),
@@ -14958,12 +14973,35 @@ var TransactionDetail = () => {
               InfoField,
               {
                 label: "Counterparty",
-                value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: transaction.counterparty }),
+                value: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "link",
+                    className: "h-auto p-0 text-sm",
+                    onClick: () => onCounterpartyClick(transaction.counterparty),
+                    children: 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: "OFAC ID",
+                value: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "link",
+                    className: "h-auto p-0 text-sm",
+                    onClick: () => onOFACClick("18323208"),
+                    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" }),
@@ -14979,7 +15017,15 @@ var TransactionDetail = () => {
               InfoField,
               {
                 label: "Product ID",
-                value: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 text-sm", children: "130" }),
+                value: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "link",
+                    className: "h-auto p-0 text-sm",
+                    onClick: () => onProductClick("130"),
+                    children: "130"
+                  }
+                ),
                 layout: "horizontal"
               }
             ),
@@ -14989,11 +15035,66 @@ var TransactionDetail = () => {
           isACHTransfer && transaction.achDetails && /* @__PURE__ */ jsxRuntime.jsx(ACHDetailsSection, { data: transaction.achDetails }),
           isWireTransfer && transaction.wireDetails && /* @__PURE__ */ jsxRuntime.jsx(WireDetailsSection, { data: transaction.wireDetails })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Transaction Timeline", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTimeline, { events: mockTransactionTimeline }) }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Transaction Timeline", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTimeline, { events: timelineEvents }) }) })
       ] })
     }
   );
 };
+var TransactionDetail = () => {
+  const { id } = reactRouterDom.useParams();
+  const navigate = reactRouterDom.useNavigate();
+  const transaction = mockTransactions.find((t) => t.id === id);
+  if (!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" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground mb-4", children: [
+        "The transaction #",
+        id,
+        " could not be found."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => navigate("/transactions/history"), children: "Back to Transaction History" })
+    ] }) });
+  }
+  const isWireTransfer = transaction.transactionType.toLowerCase().includes("wire");
+  const isACHTransfer = transaction.transactionType.toLowerCase().includes("ach");
+  const handleReturn = () => {
+    console.log("Return transaction");
+  };
+  const handleCancel = () => {
+    console.log("Cancel transaction");
+  };
+  const handleAccountClick = (accountNumber) => {
+    navigate(`/accounts/${accountNumber}`);
+  };
+  const handleCustomerClick = (customer) => {
+    console.log("Navigate to customer:", customer);
+  };
+  const handleCounterpartyClick = (counterparty) => {
+    console.log("Navigate to counterparty:", counterparty);
+  };
+  const handleOFACClick = (ofacId) => {
+    navigate(`/compliance/ofac/${ofacId}`);
+  };
+  const handleProductClick = (productId) => {
+    console.log("Navigate to product:", productId);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TransactionDetailView,
+    {
+      transaction,
+      timelineEvents: mockTransactionTimeline,
+      isWireTransfer,
+      isACHTransfer,
+      onReturn: handleReturn,
+      onCancel: handleCancel,
+      onAccountClick: handleAccountClick,
+      onCustomerClick: handleCustomerClick,
+      onCounterpartyClick: handleCounterpartyClick,
+      onOFACClick: handleOFACClick,
+      onProductClick: handleProductClick
+    }
+  );
+};
 var TransactionDetail_default = TransactionDetail;
 function UIKit() {
   const breadcrumbs = [
@@ -15312,7 +15413,7 @@ var mockVelocityLimits = [
     comparisonMethod: "fuzzy"
   }
 ];
-var getStatusVariant = (status) => {
+var getStatusVariant2 = (status) => {
   switch (status) {
     case "ACTIVE":
       return "success";
@@ -15428,7 +15529,7 @@ function VelocityLimits() {
       key: "status",
       title: "Status",
       sortable: true,
-      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant(value), children: value })
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant2(value), children: value })
     },
     {
       key: "associatedEntity",
@@ -15811,7 +15912,7 @@ function CreateVelocityLimit() {
     ] }) }) }) }) })
   ] });
 }
-var getStatusVariant2 = (status) => {
+var getStatusVariant3 = (status) => {
   switch (status) {
     case "ACTIVE":
       return "success";
@@ -16048,7 +16149,7 @@ function VelocityLimitDetail() {
     {
       title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: limit.limitName }),
-        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant2(limit.status), children: limit.status })
+        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant3(limit.status), children: limit.status })
       ] }),
       cards: [
         {