braid-ui 1.0.59 → 1.0.61

package/dist/index.cjs

@@ -13953,40 +13953,29 @@ var mockTransactionTimeline = [
     timestamp: "2025-10-01 00:19:45"
   }
 ];
-var TransactionHistory = () => {
-  const navigate = reactRouterDom.useNavigate();
-  const [currentPage, setCurrentPage] = React15.useState(1);
-  const [rowsPerPage, setRowsPerPage] = React15.useState(100);
-  const [filters, setFilters] = React15.useState({
-    accountNumber: "",
-    product: "",
-    customerId: "",
-    counterpartyId: "",
-    settlementFileName: "",
-    originalFileName: "",
-    requesterIpAddress: "",
-    requesterUsername: "",
-    wireFileHandle: "",
-    paymentId: "",
-    transactionType: "",
-    transactionStatus: "",
-    processingStatus: "",
-    direction: "",
-    minAmount: "",
-    maxAmount: "",
-    creationDateStart: void 0,
-    creationDateEnd: void 0,
-    postDateStart: void 0,
-    postDateEnd: void 0
-  });
-  const handleFilterChange = (field, value) => {
-    setFilters((prev) => ({ ...prev, [field]: value }));
+var TransactionHistoryFiltersSheet = ({
+  filters,
+  onFilterChange,
+  onResetFilters,
+  onApplyFilters
+}) => {
+  const [localFilters, setLocalFilters] = React15.useState(filters);
+  const [open, setOpen] = React15.useState(false);
+  React15.useEffect(() => {
+    setLocalFilters(filters);
+  }, [filters]);
+  const handleLocalFilterChange = (field, value) => {
+    setLocalFilters((prev) => ({ ...prev, [field]: value }));
   };
-  const applyFilters = () => {
-    console.log("Applying filters:", filters);
+  const handleApplyFilters = () => {
+    Object.entries(localFilters).forEach(([key, value]) => {
+      onFilterChange(key, value);
+    });
+    onApplyFilters();
+    setOpen(false);
   };
-  const resetFilters = () => {
-    setFilters({
+  const handleResetFilters = () => {
+    const resetFilters = {
       accountNumber: "",
       product: "",
       customerId: "",
@@ -14007,373 +13996,467 @@ var TransactionHistory = () => {
       creationDateEnd: void 0,
       postDateStart: void 0,
       postDateEnd: void 0
-    });
-  };
-  const totalPages = Math.ceil(mockTransactions.length / rowsPerPage);
-  const startIndex = (currentPage - 1) * rowsPerPage;
-  const endIndex = startIndex + rowsPerPage;
-  const paginatedTransactions = mockTransactions.slice(startIndex, endIndex);
-  const handlePageChange = (newPage) => {
-    if (newPage >= 1 && newPage <= totalPages) {
-      setCurrentPage(newPage);
-    }
-  };
-  const handleRowsPerPageChange = (value) => {
-    setRowsPerPage(value);
-    setCurrentPage(1);
-  };
-  const formatCurrency4 = (value) => {
-    const formatted = new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      minimumFractionDigits: 2
-    }).format(value);
-    return formatted;
+    };
+    setLocalFilters(resetFilters);
+    onResetFilters();
+    setOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-screen bg-gradient-subtle", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-4 max-w-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground", children: "Transaction History" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", className: "gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4" }),
-          "Filters"
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-xl overflow-y-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Transaction Filters" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                EnhancedInput,
-                {
-                  label: "Account Number",
-                  value: filters.accountNumber,
-                  onChange: (e) => handleFilterChange("accountNumber", e.target.value),
-                  placeholder: "Enter account number"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                EnhancedSelect,
-                {
-                  label: "Product",
-                  value: filters.product,
-                  onValueChange: (value) => handleFilterChange("product", value),
-                  placeholder: "Select product",
-                  options: [
-                    { value: "wire", label: "Wire" },
-                    { value: "ach", label: "ACH" },
-                    { value: "check", label: "Check" }
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                EnhancedInput,
-                {
-                  label: "Customer ID",
-                  value: filters.customerId,
-                  onChange: (e) => handleFilterChange("customerId", e.target.value),
-                  placeholder: "Enter customer ID"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                EnhancedInput,
-                {
-                  label: "Counterparty ID",
-                  value: filters.counterpartyId,
-                  onChange: (e) => handleFilterChange("counterpartyId", e.target.value),
-                  placeholder: "Enter counterparty ID"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Settlement File Name",
-                value: filters.settlementFileName,
-                onChange: (e) => handleFilterChange("settlementFileName", e.target.value),
-                placeholder: "Enter settlement file name"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Original File Name",
-                value: filters.originalFileName,
-                onChange: (e) => handleFilterChange("originalFileName", e.target.value),
-                placeholder: "Enter original file name"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Requester IP Address",
-                value: filters.requesterIpAddress,
-                onChange: (e) => handleFilterChange("requesterIpAddress", e.target.value),
-                placeholder: "Enter IP address"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Requester Username",
-                value: filters.requesterUsername,
-                onChange: (e) => handleFilterChange("requesterUsername", e.target.value),
-                placeholder: "Enter username"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Wire File Handle",
-                value: filters.wireFileHandle,
-                onChange: (e) => handleFilterChange("wireFileHandle", e.target.value),
-                placeholder: "Enter wire file handle"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Payment ID",
-                value: filters.paymentId,
-                onChange: (e) => handleFilterChange("paymentId", e.target.value),
-                placeholder: "Enter payment ID"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedSelect,
-              {
-                label: "Transaction Type",
-                value: filters.transactionType,
-                onValueChange: (value) => handleFilterChange("transactionType", value),
-                placeholder: "Select transaction type",
-                options: [
-                  { value: "ach_credit", label: "ACH Credit" },
-                  { value: "ach_debit", label: "ACH Debit" },
-                  { value: "wire_domestic", label: "Wire Domestic" },
-                  { value: "wire_international", label: "Wire International" }
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedSelect,
-              {
-                label: "Transaction Status",
-                value: filters.transactionStatus,
-                onValueChange: (value) => handleFilterChange("transactionStatus", value),
-                placeholder: "Select transaction status",
-                options: [
-                  { value: "PENDING", label: "Pending" },
-                  { value: "POSTED", label: "Posted" },
-                  { value: "FAILED", label: "Failed" },
-                  { value: "CANCELLED", label: "Cancelled" }
-                ]
-              }
-            ),
+  return /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", className: "gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4" }),
+      "Filters"
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-xl overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Transaction Filters" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedInput,
+            {
+              label: "Account Number",
+              value: localFilters.accountNumber,
+              onChange: (e) => handleLocalFilterChange("accountNumber", e.target.value),
+              placeholder: "Enter account number"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedSelect,
+            {
+              label: "Product",
+              value: localFilters.product,
+              onValueChange: (value) => handleLocalFilterChange("product", value),
+              placeholder: "Select product",
+              options: [
+                { value: "wire", label: "Wire" },
+                { value: "ach", label: "ACH" },
+                { value: "check", label: "Check" }
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedInput,
+            {
+              label: "Customer ID",
+              value: localFilters.customerId,
+              onChange: (e) => handleLocalFilterChange("customerId", e.target.value),
+              placeholder: "Enter customer ID"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedInput,
+            {
+              label: "Counterparty ID",
+              value: localFilters.counterpartyId,
+              onChange: (e) => handleLocalFilterChange("counterpartyId", e.target.value),
+              placeholder: "Enter counterparty ID"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Settlement File Name",
+            value: localFilters.settlementFileName,
+            onChange: (e) => handleLocalFilterChange("settlementFileName", e.target.value),
+            placeholder: "Enter settlement file name"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Original File Name",
+            value: localFilters.originalFileName,
+            onChange: (e) => handleLocalFilterChange("originalFileName", e.target.value),
+            placeholder: "Enter original file name"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Requester IP Address",
+            value: localFilters.requesterIpAddress,
+            onChange: (e) => handleLocalFilterChange("requesterIpAddress", e.target.value),
+            placeholder: "Enter IP address"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Requester Username",
+            value: localFilters.requesterUsername,
+            onChange: (e) => handleLocalFilterChange("requesterUsername", e.target.value),
+            placeholder: "Enter username"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Wire File Handle",
+            value: localFilters.wireFileHandle,
+            onChange: (e) => handleLocalFilterChange("wireFileHandle", e.target.value),
+            placeholder: "Enter wire file handle"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Payment ID",
+            value: localFilters.paymentId,
+            onChange: (e) => handleLocalFilterChange("paymentId", e.target.value),
+            placeholder: "Enter payment ID"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedSelect,
+          {
+            label: "Transaction Type",
+            value: localFilters.transactionType,
+            onValueChange: (value) => handleLocalFilterChange("transactionType", value),
+            placeholder: "Select transaction type",
+            options: [
+              { value: "ach_credit", label: "ACH Credit" },
+              { value: "ach_debit", label: "ACH Debit" },
+              { value: "wire_domestic", label: "Wire Domestic" },
+              { value: "wire_international", label: "Wire International" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedSelect,
+          {
+            label: "Transaction Status",
+            value: localFilters.transactionStatus,
+            onValueChange: (value) => handleLocalFilterChange("transactionStatus", value),
+            placeholder: "Select transaction status",
+            options: [
+              { value: "PENDING", label: "Pending" },
+              { value: "POSTED", label: "Posted" },
+              { value: "FAILED", label: "Failed" },
+              { value: "CANCELLED", label: "Cancelled" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedSelect,
+          {
+            label: "Processing Status",
+            value: localFilters.processingStatus,
+            onValueChange: (value) => handleLocalFilterChange("processingStatus", value),
+            placeholder: "Select processing status",
+            options: [
+              { value: "processing", label: "Processing" },
+              { value: "completed", label: "Completed" },
+              { value: "error", label: "Error" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedSelect,
+          {
+            label: "Direction",
+            value: localFilters.direction,
+            onValueChange: (value) => handleLocalFilterChange("direction", value),
+            placeholder: "Select direction",
+            options: [
+              { value: "credit", label: "Credit" },
+              { value: "debit", label: "Debit" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CurrencyInput,
+            {
+              label: "Min Amount",
+              value: localFilters.minAmount,
+              onChange: (value) => handleLocalFilterChange("minAmount", value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CurrencyInput,
+            {
+              label: "Max Amount",
+              value: localFilters.maxAmount,
+              onChange: (value) => handleLocalFilterChange("maxAmount", value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Creation Date Start" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedSelect,
+              DatePicker,
               {
-                label: "Processing Status",
-                value: filters.processingStatus,
-                onValueChange: (value) => handleFilterChange("processingStatus", value),
-                placeholder: "Select processing status",
-                options: [
-                  { value: "processing", label: "Processing" },
-                  { value: "completed", label: "Completed" },
-                  { value: "error", label: "Error" }
-                ]
+                date: localFilters.creationDateStart,
+                onDateChange: (date) => handleLocalFilterChange("creationDateStart", date),
+                placeholder: "MM/DD/YYYY",
+                buttonClassName: "w-full",
+                className: "bg-background z-50"
               }
-            ),
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Creation Date End" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedSelect,
+              DatePicker,
               {
-                label: "Direction",
-                value: filters.direction,
-                onValueChange: (value) => handleFilterChange("direction", value),
-                placeholder: "Select direction",
-                options: [
-                  { value: "credit", label: "Credit" },
-                  { value: "debit", label: "Debit" }
-                ]
+                date: localFilters.creationDateEnd,
+                onDateChange: (date) => handleLocalFilterChange("creationDateEnd", date),
+                placeholder: "MM/DD/YYYY",
+                buttonClassName: "w-full",
+                className: "bg-background z-50"
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CurrencyInput,
-                {
-                  label: "Min Amount",
-                  value: filters.minAmount,
-                  onChange: (value) => handleFilterChange("minAmount", value)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CurrencyInput,
-                {
-                  label: "Max Amount",
-                  value: filters.maxAmount,
-                  onChange: (value) => handleFilterChange("maxAmount", value)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Creation Date Start" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  DatePicker,
-                  {
-                    date: filters.creationDateStart,
-                    onDateChange: (date) => handleFilterChange("creationDateStart", date),
-                    placeholder: "MM/DD/YYYY",
-                    buttonClassName: "w-full",
-                    className: "bg-background z-50"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Creation Date End" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  DatePicker,
-                  {
-                    date: filters.creationDateEnd,
-                    onDateChange: (date) => handleFilterChange("creationDateEnd", date),
-                    placeholder: "MM/DD/YYYY",
-                    buttonClassName: "w-full",
-                    className: "bg-background z-50"
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Post Date Start" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  DatePicker,
-                  {
-                    date: filters.postDateStart,
-                    onDateChange: (date) => handleFilterChange("postDateStart", date),
-                    placeholder: "MM/DD/YYYY",
-                    buttonClassName: "w-full",
-                    className: "bg-background z-50"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Post Date End" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  DatePicker,
-                  {
-                    date: filters.postDateEnd,
-                    onDateChange: (date) => handleFilterChange("postDateEnd", date),
-                    placeholder: "MM/DD/YYYY",
-                    buttonClassName: "w-full",
-                    className: "bg-background z-50"
-                  }
-                )
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SheetFooter, { className: "gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: resetFilters, children: "Reset Filters" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
-          ] })
-        ] })
-      ] })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 mt-4 rounded-lg border bg-card overflow-hidden flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full table-fixed", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-28" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-28" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-24" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-36" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-36" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-auto" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-36" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-24" }),
-          /* @__PURE__ */ jsxRuntime.jsx("col", { className: "w-28" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 bg-card z-10 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Created" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Account Number" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-right text-xs font-medium bg-muted/50", children: "Amount" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Customer" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Counterparty" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Description" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Transaction Type" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Status" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left text-xs font-medium bg-muted/50", children: "Updated" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: paginatedTransactions.map((transaction) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "tr",
-          {
-            onClick: () => navigate(`/transactions/${transaction.id}`),
-            className: "border-b hover:bg-muted/50 transition-colors cursor-pointer",
-            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: 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 }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "font-normal whitespace-nowrap text-xs", children: transaction.transactionType }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: transaction.status }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: transaction.updated })
-            ]
-          },
-          transaction.id
-        )) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none border-t bg-background py-3 px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page:" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1", children: [
-              rowsPerPage,
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 rotate-90" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "start", className: "bg-background z-50", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(100), children: "100" }),
-              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(200), children: "200" }),
-              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => handleRowsPerPageChange(500), children: "500" })
-            ] })
+            )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
-            "Page ",
-            currentPage,
-            " of ",
-            totalPages
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Post Date Start" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
+              DatePicker,
               {
-                variant: "outline",
-                size: "sm",
-                className: "h-8 w-8 p-0",
-                onClick: () => handlePageChange(currentPage - 1),
-                disabled: currentPage === 1,
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
+                date: localFilters.postDateStart,
+                onDateChange: (date) => handleLocalFilterChange("postDateStart", date),
+                placeholder: "MM/DD/YYYY",
+                buttonClassName: "w-full",
+                className: "bg-background z-50"
               }
-            ),
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Post Date End" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
+              DatePicker,
               {
-                variant: "outline",
-                size: "sm",
-                className: "h-8 w-8 p-0",
-                onClick: () => handlePageChange(currentPage + 1),
-                disabled: currentPage === totalPages,
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+                date: localFilters.postDateEnd,
+                onDateChange: (date) => handleLocalFilterChange("postDateEnd", date),
+                placeholder: "MM/DD/YYYY",
+                buttonClassName: "w-full",
+                className: "bg-background z-50"
               }
             )
           ] })
         ] })
-      ] }) })
-    ] }) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SheetFooter, { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: handleResetFilters, className: "flex-1", children: "Reset Filters" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleApplyFilters, className: "flex-1", children: "Apply Filters" })
+      ] })
+    ] })
   ] });
 };
+var TransactionHistoryView = ({
+  table,
+  filters,
+  onFilterChange,
+  onResetFilters,
+  onApplyFilters
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-screen bg-gradient-subtle", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-4 max-w-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground", children: "Transaction History" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TransactionHistoryFiltersSheet,
+        {
+          filters,
+          onFilterChange,
+          onResetFilters,
+          onApplyFilters
+        }
+      )
+    ] }) }) }),
+    /* @__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: table }) }) })
+  ] });
+};
+var TransactionHistory = () => {
+  const navigate = reactRouterDom.useNavigate();
+  const [sortBy, setSortBy] = React15.useState("created");
+  const [sortDirection, setSortDirection] = React15.useState("desc");
+  const [filters, setFilters] = React15.useState({
+    accountNumber: "",
+    product: "",
+    customerId: "",
+    counterpartyId: "",
+    settlementFileName: "",
+    originalFileName: "",
+    requesterIpAddress: "",
+    requesterUsername: "",
+    wireFileHandle: "",
+    paymentId: "",
+    transactionType: "",
+    transactionStatus: "",
+    processingStatus: "",
+    direction: "",
+    minAmount: "",
+    maxAmount: "",
+    creationDateStart: void 0,
+    creationDateEnd: void 0,
+    postDateStart: void 0,
+    postDateEnd: void 0
+  });
+  const filteredTransactions = React15.useMemo(() => {
+    let filtered = [...mockTransactions];
+    if (filters.accountNumber) {
+      filtered = filtered.filter(
+        (t) => t.accountNumber.toLowerCase().includes(filters.accountNumber.toLowerCase())
+      );
+    }
+    if (filters.transactionType) {
+      filtered = filtered.filter((t) => t.transactionType === filters.transactionType);
+    }
+    if (filters.transactionStatus) {
+      filtered = filtered.filter((t) => t.status === filters.transactionStatus);
+    }
+    if (filters.minAmount) {
+      const minAmount = parseFloat(filters.minAmount.replace(/[^0-9.-]/g, ""));
+      if (!isNaN(minAmount)) {
+        filtered = filtered.filter((t) => t.amount >= minAmount);
+      }
+    }
+    if (filters.maxAmount) {
+      const maxAmount = parseFloat(filters.maxAmount.replace(/[^0-9.-]/g, ""));
+      if (!isNaN(maxAmount)) {
+        filtered = filtered.filter((t) => t.amount <= maxAmount);
+      }
+    }
+    return filtered;
+  }, [filters]);
+  const sortedTransactions = React15.useMemo(() => {
+    return [...filteredTransactions].sort((a, b) => {
+      const aValue = a[sortBy];
+      const bValue = b[sortBy];
+      if (aValue === void 0 || bValue === void 0) return 0;
+      if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
+      if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
+      return 0;
+    });
+  }, [filteredTransactions, sortBy, sortDirection]);
+  const handleFilterChange = React15.useCallback((field, value) => {
+    setFilters((prev) => ({ ...prev, [field]: value }));
+  }, []);
+  const handleResetFilters = React15.useCallback(() => {
+    setFilters({
+      accountNumber: "",
+      product: "",
+      customerId: "",
+      counterpartyId: "",
+      settlementFileName: "",
+      originalFileName: "",
+      requesterIpAddress: "",
+      requesterUsername: "",
+      wireFileHandle: "",
+      paymentId: "",
+      transactionType: "",
+      transactionStatus: "",
+      processingStatus: "",
+      direction: "",
+      minAmount: "",
+      maxAmount: "",
+      creationDateStart: void 0,
+      creationDateEnd: void 0,
+      postDateStart: void 0,
+      postDateEnd: void 0
+    });
+  }, []);
+  const handleApplyFilters = React15.useCallback(() => {
+    console.log("Applying filters:", filters);
+  }, [filters]);
+  const handleSort = React15.useCallback((key) => {
+    if (sortBy === key) {
+      setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortDirection("asc");
+    }
+  }, [sortBy]);
+  const handleRowClick = React15.useCallback((transaction) => {
+    navigate(`/transactions/${transaction.id}`);
+  }, [navigate]);
+  const formatCurrency4 = (value) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2
+    }).format(value);
+  };
+  const columns3 = React15.useMemo(() => [
+    {
+      key: "created",
+      title: "Created",
+      sortable: true
+    },
+    {
+      key: "accountNumber",
+      title: "Account Number",
+      sortable: true
+    },
+    {
+      key: "amount",
+      title: "Amount",
+      sortable: true,
+      align: "right",
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: value < 0 ? "text-destructive" : "", children: formatCurrency4(value) })
+    },
+    {
+      key: "customer",
+      title: "Customer",
+      sortable: true,
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 font-normal text-xs", children: value })
+    },
+    {
+      key: "counterparty",
+      title: "Counterparty",
+      sortable: true,
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", className: "h-auto p-0 font-normal text-xs", children: value })
+    },
+    {
+      key: "description",
+      title: "Description",
+      sortable: true,
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate block max-w-[200px]", children: value })
+    },
+    {
+      key: "transactionType",
+      title: "Transaction Type",
+      sortable: true,
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "font-normal whitespace-nowrap text-xs", children: value })
+    },
+    {
+      key: "status",
+      title: "Status",
+      sortable: true,
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: value })
+    },
+    {
+      key: "updated",
+      title: "Updated",
+      sortable: true
+    }
+  ], []);
+  const table = React15.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx(
+    DataTable,
+    {
+      columns: columns3,
+      data: sortedTransactions,
+      sortBy,
+      sortDirection,
+      onSort: handleSort,
+      onRowClick: handleRowClick
+    }
+  ), [columns3, sortedTransactions, sortBy, sortDirection, handleSort, handleRowClick]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TransactionHistoryView,
+    {
+      table,
+      filters,
+      onFilterChange: handleFilterChange,
+      onResetFilters: handleResetFilters,
+      onApplyFilters: handleApplyFilters
+    }
+  );
+};
 var TransactionHistory_default = TransactionHistory;
 var newTransactionSchema = zod.z.object({
   transactionType: zod.z.string().min(1, "Transaction type is required"),
@@ -14794,20 +14877,20 @@ function NewTransaction() {
     setConfirmationOpen(false);
     resetForm();
   };
+  const formValues = form.watch();
   const isReviewReady = React15.useMemo(() => {
-    const data = form.watch();
-    const requiresCounterparty = ["ach", "wire"].includes(data.transactionType);
-    if (!data.transactionType || !data.accountNumber || !data.amount) return false;
-    if (requiresCounterparty && (!data.counterpartyName || !counterpartyLookedUp)) return false;
+    const requiresCounterparty = ["ach", "wire"].includes(formValues.transactionType);
+    if (!formValues.transactionType || !formValues.accountNumber || !formValues.amount || !formValues.description) return false;
+    if (requiresCounterparty && (!formValues.counterpartyName || !counterpartyLookedUp)) return false;
     if (!accountLookedUp) return false;
-    if (data.transactionType === "adjustment") {
-      if (!data.adjustmentDirection || !data.adjustmentType) return false;
+    if (formValues.transactionType === "adjustment") {
+      if (!formValues.adjustmentDirection || !formValues.adjustmentType) return false;
     }
-    if (data.transactionType === "transfer") {
-      if (!data.receiverAccountNumber || !receiverAccountLookedUp) return false;
+    if (formValues.transactionType === "transfer") {
+      if (!formValues.receiverAccountNumber || !receiverAccountLookedUp) return false;
     }
     return true;
-  }, [form.watch(), accountLookedUp, counterpartyLookedUp, receiverAccountLookedUp]);
+  }, [formValues, accountLookedUp, counterpartyLookedUp, receiverAccountLookedUp]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NewTransactionView,
     {
@@ -14854,6 +14937,8 @@ function NewTransaction() {
     }
   );
 }
+
+// src/lib/utils/transaction-utils.ts
 var getStatusVariant = (status) => {
   switch (status) {
     case "POSTED":
@@ -14894,8 +14979,10 @@ var TransactionDetailView = ({
   timelineEvents,
   isWireTransfer,
   isACHTransfer,
-  onReturn,
-  onCancel,
+  showCancelButton,
+  showReturnButton,
+  onReturnClick,
+  onCancelClick,
   onAccountClick,
   onCustomerClick,
   onCounterpartyClick,
@@ -14922,16 +15009,16 @@ var TransactionDetailView = ({
       ] }),
       maxWidth: "full",
       actions: [
-        {
+        ...showReturnButton ? [{
           label: "Return",
           variant: "outline",
-          onClick: onReturn
-        },
-        {
+          onClick: onReturnClick
+        }] : [],
+        ...showCancelButton ? [{
           label: "Cancel",
           variant: "default",
-          onClick: onCancel
-        }
+          onClick: onCancelClick
+        }] : []
       ],
       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: [
@@ -15040,10 +15127,251 @@ var TransactionDetailView = ({
     }
   );
 };
+var cancelTransactionSchema = zod.z.object({
+  reason: zod.z.string().min(1, "Reason is required").max(500, "Reason must be less than 500 characters")
+});
+var returnTransactionSchema = zod.z.object({
+  reasonCode: zod.z.string().min(1, "Reason code is required")
+});
+var CancelTransactionDialog = ({
+  transactionId,
+  open,
+  onOpenChange,
+  onCancel
+}) => {
+  const { toast: toast6 } = useToast();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset
+  } = useFormWithEditState({
+    schema: cancelTransactionSchema,
+    defaultValues: {
+      reason: ""
+    }
+  });
+  const onSubmit = async (data) => {
+    try {
+      await onCancel(data);
+      toast6({
+        title: "Transaction Cancelled",
+        description: `Transaction ${transactionId} has been cancelled successfully.`
+      });
+      reset();
+      onOpenChange(false);
+    } catch (error) {
+      toast6({
+        title: "Error",
+        description: "Failed to cancel the transaction. Please try again.",
+        variant: "destructive"
+      });
+    }
+  };
+  const handleClose = () => {
+    reset();
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Cancel Transaction" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { children: [
+        "Please provide a reason for cancelling transaction ",
+        transactionId,
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EnhancedTextarea,
+        {
+          label: "Cancellation Reason",
+          placeholder: "Enter the reason for cancellation...",
+          error: errors.reason?.message,
+          ...register("reason")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: handleClose,
+            disabled: isSubmitting,
+            children: "Close"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "submit",
+            variant: "destructive",
+            disabled: isSubmitting,
+            children: isSubmitting ? "Cancelling..." : "Cancel Transaction"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+function ReturnTransactionDialog({
+  transactionId,
+  open,
+  onOpenChange,
+  onReturn,
+  reasonCodes
+}) {
+  const {
+    watch,
+    setValue,
+    handleSave,
+    handleCancel,
+    isLoading,
+    formState: { errors }
+  } = useFormWithEditState({
+    schema: returnTransactionSchema,
+    initialEditing: true,
+    onSave: async (data) => {
+      try {
+        await onReturn(data);
+        toast({
+          title: "Transaction returned",
+          description: `Transaction #${transactionId} has been returned successfully.`
+        });
+        onOpenChange(false);
+      } catch (error) {
+        toast({
+          title: "Error",
+          description: "Failed to return transaction. Please try again.",
+          variant: "destructive"
+        });
+        throw error;
+      }
+    },
+    onCancel: () => {
+      onOpenChange(false);
+    }
+  });
+  const reasonCode = watch("reasonCode");
+  const selectOptions = reasonCodes.map((code) => ({
+    value: code.value,
+    label: code.label
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Return Transaction" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogDescription, { children: [
+        "Select a reason code to return transaction #",
+        transactionId,
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      EnhancedSelect,
+      {
+        label: "Reason Code",
+        placeholder: "Select a reason code",
+        options: selectOptions,
+        value: reasonCode || "",
+        onValueChange: (value) => setValue("reasonCode", value),
+        error: errors.reasonCode?.message
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: handleCancel,
+          disabled: isLoading,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "destructive",
+          onClick: handleSave,
+          disabled: isLoading || !reasonCode,
+          children: isLoading ? "Returning..." : "Return Transaction"
+        }
+      )
+    ] })
+  ] }) });
+}
+var returnReasonCodes = [
+  { value: "R01", label: "R01 - Insufficient Funds" },
+  { value: "R02", label: "R02 - Account Closed" },
+  { value: "R03", label: "R03 - No Account/Unable to Locate" },
+  { value: "R04", label: "R04 - Invalid Account Number" },
+  { value: "R05", label: "R05 - Unauthorized Debit" },
+  { value: "R06", label: "R06 - Returned per ODFI Request" },
+  { value: "R07", label: "R07 - Authorization Revoked" },
+  { value: "R08", label: "R08 - Payment Stopped" },
+  { value: "R09", label: "R09 - Uncollected Funds" },
+  { value: "R10", label: "R10 - Customer Advises Not Authorized" }
+];
 var TransactionDetail = () => {
   const { id } = reactRouterDom.useParams();
   const navigate = reactRouterDom.useNavigate();
-  const transaction = mockTransactions.find((t) => t.id === id);
+  const [isCancelDialogOpen, setIsCancelDialogOpen] = React15.useState(false);
+  const [isReturnDialogOpen, setIsReturnDialogOpen] = React15.useState(false);
+  const transaction = React15.useMemo(
+    () => mockTransactions.find((t) => t.id === id),
+    [id]
+  );
+  const isWireTransfer = React15.useMemo(
+    () => transaction?.transactionType.toLowerCase().includes("wire") ?? false,
+    [transaction?.transactionType]
+  );
+  const isACHTransfer = React15.useMemo(
+    () => transaction?.transactionType.toLowerCase().includes("ach") ?? false,
+    [transaction?.transactionType]
+  );
+  const timelineEvents = React15.useMemo(
+    () => mockTransactionTimeline,
+    []
+  );
+  const showCancelButton = React15.useMemo(() => {
+    if (!transaction) return false;
+    const cancelableStatuses = ["INITIATED", "SUBMITTED", "CUSTOMER_REVIEW", "MANUAL_REVIEW"];
+    return transaction.status === "PENDING" && cancelableStatuses.includes(transaction.processingStatus);
+  }, [transaction]);
+  const showReturnButton = React15.useMemo(() => {
+    if (!transaction) return false;
+    const returnableStatuses = ["POSTED", "SETTLED", "CONFIRMED"];
+    return returnableStatuses.includes(transaction.processingStatus);
+  }, [transaction]);
+  const handleOpenReturnDialog = React15.useCallback(() => {
+    setIsReturnDialogOpen(true);
+  }, []);
+  const handleReturnTransaction = React15.useCallback(async (data) => {
+    console.log("Returning transaction with reason code:", data.reasonCode);
+  }, []);
+  const handleOpenCancelDialog = React15.useCallback(() => {
+    setIsCancelDialogOpen(true);
+  }, []);
+  const handleCancelTransaction = React15.useCallback(async (data) => {
+    console.log("Cancelling transaction with reason:", data.reason);
+  }, []);
+  const handleAccountClick = React15.useCallback((accountNumber) => {
+    navigate(`/accounts/${accountNumber}`);
+  }, [navigate]);
+  const handleCustomerClick = React15.useCallback((customer) => {
+    console.log("Navigate to customer:", customer);
+  }, []);
+  const handleCounterpartyClick = React15.useCallback((counterparty) => {
+    console.log("Navigate to counterparty:", counterparty);
+  }, []);
+  const handleOFACClick = React15.useCallback((ofacId) => {
+    navigate(`/compliance/ofac/${ofacId}`);
+  }, [navigate]);
+  const handleProductClick = React15.useCallback((productId) => {
+    console.log("Navigate to product:", productId);
+  }, []);
   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" }),
@@ -15055,45 +15383,45 @@ var TransactionDetail = () => {
       /* @__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
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TransactionDetailView,
+      {
+        transaction,
+        timelineEvents,
+        isWireTransfer,
+        isACHTransfer,
+        showCancelButton,
+        showReturnButton,
+        onReturnClick: handleOpenReturnDialog,
+        onCancelClick: handleOpenCancelDialog,
+        onAccountClick: handleAccountClick,
+        onCustomerClick: handleCustomerClick,
+        onCounterpartyClick: handleCounterpartyClick,
+        onOFACClick: handleOFACClick,
+        onProductClick: handleProductClick
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CancelTransactionDialog,
+      {
+        transactionId: transaction.id,
+        open: isCancelDialogOpen,
+        onOpenChange: setIsCancelDialogOpen,
+        onCancel: handleCancelTransaction
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ReturnTransactionDialog,
+      {
+        transactionId: transaction.id,
+        open: isReturnDialogOpen,
+        onOpenChange: setIsReturnDialogOpen,
+        onReturn: handleReturnTransaction,
+        reasonCodes: returnReasonCodes
+      }
+    )
+  ] });
 };
 var TransactionDetail_default = TransactionDetail;
 function UIKit() {