npm - braid-ui - Versions diffs - 1.0.47 → 1.0.49 - Mend

braid-ui 1.0.47 → 1.0.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.cjs CHANGED Viewed

@@ -4477,7 +4477,7 @@ function DatePicker({
     ) })
   ] });
   if (label) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", wrapperClassName), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2", wrapperClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: label }),
       picker
     ] });
@@ -8376,6 +8376,370 @@ var WireDetailsSection = ({ data }) => {
     ) })
   ] });
 };
+var Checkbox = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CheckboxPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxPrimitive__namespace.Indicator,
+      {
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
+var TRANSACTION_TYPES = [
+  { value: "transfer", label: "Transfer", icon: lucideReact.ArrowLeftRight },
+  { value: "adjustment", label: "Adjustment", icon: lucideReact.Settings },
+  { value: "ach", label: "ACH", icon: lucideReact.Building2 },
+  { value: "wire", label: "Wire", icon: lucideReact.Zap }
+];
+var CURRENCY_OPTIONS = [
+  { value: "USD", label: "USD - US Dollar" },
+  { value: "EUR", label: "EUR - Euro" },
+  { value: "GBP", label: "GBP - British Pound" },
+  { value: "JPY", label: "JPY - Japanese Yen" },
+  { value: "CAD", label: "CAD - Canadian Dollar" },
+  { value: "AUD", label: "AUD - Australian Dollar" },
+  { value: "CHF", label: "CHF - Swiss Franc" },
+  { value: "CNY", label: "CNY - Chinese Yuan" }
+];
+var NewTransactionView = ({
+  form,
+  accountLookedUp,
+  accountData,
+  counterpartyLookedUp,
+  counterpartyData,
+  confirmationOpen,
+  submissionStatus,
+  errorMessage,
+  transactionId,
+  onAccountLookup,
+  onCounterpartyLookup,
+  onEditAccount,
+  onEditCounterparty,
+  onSubmit,
+  onCancel,
+  onConfirmationClose,
+  onConfirmationOpenChange
+}) => {
+  const transactionType = form.watch("transactionType");
+  const accountNumber = form.watch("accountNumber");
+  const counterpartyName = form.watch("counterpartyName");
+  const amount = form.watch("amount");
+  const accountDataGrid = accountData ? [
+    {
+      title: "Account Information",
+      items: [
+        { label: "Account Number", value: accountData.accountNumber },
+        { label: "Account Name", value: accountData.accountName },
+        { label: "Account Type", value: accountData.accountType },
+        { label: "Balance", value: accountData.balance },
+        { label: "Customer Name", value: accountData.customerName },
+        { label: "Customer ID", value: accountData.customerId }
+      ]
+    }
+  ] : [];
+  const counterpartyDataGrid = counterpartyData ? [
+    {
+      title: "Counterparty Information",
+      items: [
+        { label: "Counterparty Name", value: counterpartyData.counterpartyName },
+        { label: "Counterparty ID", value: counterpartyData.counterpartyId },
+        { label: "Type", value: counterpartyData.counterpartyType },
+        { label: "Status", value: counterpartyData.status },
+        { label: "Tax ID", value: counterpartyData.taxId },
+        { label: "Primary Contact", value: counterpartyData.primaryContact },
+        { label: "Contact Email", value: counterpartyData.contactEmail },
+        { label: "Contact Phone", value: counterpartyData.contactPhone },
+        { label: "Address", value: counterpartyData.address }
+      ]
+    }
+  ] : [];
+  const reviewData = [
+    {
+      title: "Transaction Summary",
+      items: [
+        { label: "Transaction Type", value: TRANSACTION_TYPES.find((t) => t.value === transactionType)?.label || "-" },
+        { label: "Account Number", value: accountNumber || "-" },
+        { label: "Counterparty", value: counterpartyName || "-" },
+        { label: "Amount", value: amount ? `$${amount}` : "-" },
+        { label: "Description", value: form.watch("description") || "N/A" }
+      ]
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(PageLayout, { title: "New Transaction", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => e.preventDefault(), children: [
+      !accountLookedUp ? /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Account Lookup", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 items-start w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "accountNumber",
+            placeholder: "Enter account number"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            onClick: onAccountLookup,
+            disabled: !accountNumber,
+            className: "shrink-0 mt-0 w-48",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 mr-2" }),
+              "Lookup Account"
+            ]
+          }
+        )
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        FormCard,
+        {
+          title: "Account Information",
+          variant: "subtle",
+          headerActions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-5 w-5 text-success" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: onEditAccount, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4 mr-1" }),
+              "Edit"
+            ] })
+          ] }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(DataGrid, { data: accountDataGrid, columns: 2 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormCard,
+        {
+          title: "Transaction Type",
+          variant: "default",
+          className: cn(!accountLookedUp && "opacity-50 pointer-events-none"),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4", children: TRANSACTION_TYPES.map((type) => {
+            const Icon2 = type.icon;
+            const isSelected = transactionType === type.value;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => form.setValue("transactionType", type.value),
+                disabled: !accountLookedUp,
+                className: cn(
+                  "flex flex-col items-center justify-center p-4 lg:p-3 rounded-lg border-2 transition-all",
+                  "hover:border-primary/50 hover:shadow-md",
+                  isSelected ? "border-primary bg-primary/5 shadow-sm" : "border-border bg-card"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: cn(
+                    "h-6 w-6 lg:h-5 lg:w-5 mb-2",
+                    isSelected ? "text-primary" : "text-muted-foreground"
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                    "text-sm font-medium",
+                    isSelected ? "text-primary" : "text-foreground"
+                  ), children: type.label })
+                ]
+              },
+              type.value
+            );
+          }) })
+        }
+      ),
+      !counterpartyLookedUp ? /* @__PURE__ */ jsxRuntime.jsx(
+        FormCard,
+        {
+          title: "Counterparty Lookup",
+          variant: "default",
+          className: cn(!transactionType && "opacity-50 pointer-events-none"),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 items-start w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+              FormInput,
+              {
+                name: "counterpartyName",
+                placeholder: "Enter counterparty name",
+                disabled: !transactionType
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                onClick: onCounterpartyLookup,
+                disabled: !transactionType || !counterpartyName,
+                className: "shrink-0 mt-0 w-48",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 mr-2" }),
+                  "Lookup Counterparty"
+                ]
+              }
+            )
+          ] })
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        FormCard,
+        {
+          title: "Counterparty Information",
+          variant: "subtle",
+          headerActions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-5 w-5 text-success" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", onClick: onEditCounterparty, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4 mr-1" }),
+              "Edit"
+            ] })
+          ] }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(DataGrid, { data: counterpartyDataGrid, columns: 2 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormCard,
+        {
+          title: "Transaction Details",
+          variant: "default",
+          className: cn(!counterpartyLookedUp && "opacity-50 pointer-events-none"),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FormInput,
+                {
+                  name: "amount",
+                  label: "Amount",
+                  placeholder: "0.00",
+                  type: "number",
+                  disabled: !counterpartyLookedUp
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FormSelect,
+                {
+                  name: "currency",
+                  label: "Currency",
+                  options: CURRENCY_OPTIONS,
+                  disabled: !counterpartyLookedUp,
+                  className: "w-48"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FormInput,
+              {
+                name: "description",
+                label: "Description (Optional)",
+                placeholder: "Enter transaction description",
+                disabled: !counterpartyLookedUp
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Review & Submit", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DataGrid, { data: reviewData, columns: 2 }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted/30 rounded-lg p-4 border border-border/50", children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactHookForm.Controller,
+          {
+            name: "certifyInformation",
+            control: form.control,
+            render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox,
+                  {
+                    id: "certifyInformation",
+                    checked: field.value,
+                    onCheckedChange: field.onChange
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "label",
+                  {
+                    htmlFor: "certifyInformation",
+                    className: "text-sm font-medium leading-relaxed cursor-pointer select-none",
+                    children: "I certify that all information entered is correct and accurate to the best of my knowledge"
+                  }
+                )
+              ] }),
+              form.formState.errors.certifyInformation && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive ml-7", children: form.formState.errors.certifyInformation.message })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-end pt-4 border-t border-border", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: onCancel, className: "w-32", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              type: "button",
+              onClick: onSubmit,
+              className: "w-48",
+              disabled: !transactionType || !accountNumber || !counterpartyName || !amount || !form.watch("certifyInformation"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-4 w-4 mr-2" }),
+                "Submit Transaction"
+              ]
+            }
+          )
+        ] })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: confirmationOpen, onOpenChange: onConfirmationOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { 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(DialogDescription, { className: "text-left", 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.jsxs("div", { className: "flex justify-between text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Amount:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+                "$",
+                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: TRANSACTION_TYPES.find((t) => t.value === transactionType)?.label })
+            ] }),
+            /* @__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.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.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: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-5 w-5 text-destructive mt-0.5 flex-shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-destructive", children: "Error Processing Transaction" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: errorMessage })
+            ] })
+          ] }),
+          /* @__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", children: [
+        submissionStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: () => onConfirmationOpenChange(false), children: "Try Again" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            onClick: onConfirmationClose,
+            variant: submissionStatus === "success" ? "default" : "outline",
+            children: submissionStatus === "success" ? "View Transactions" : "Close"
+          }
+        )
+      ] })
+    ] }) })
+  ] }) });
+};
 var typeIcons = {
   checking: lucideReact.CreditCard,
   savings: lucideReact.Building,
@@ -8450,25 +8814,6 @@ var BusinessTypeBadge = ({ type, className }) => {
     config.label
   ] });
 };
-var Checkbox = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  CheckboxPrimitive__namespace.Root,
-  {
-    ref,
-    className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      CheckboxPrimitive__namespace.Indicator,
-      {
-        className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })
-      }
-    )
-  }
-));
-Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
 var DetailPageLayout = ({
   title,
   description,
@@ -13850,22 +14195,6 @@ var newTransactionSchema = zod.z.object({
     message: "You must certify the information is correct"
   })
 });
-var TRANSACTION_TYPES = [
-  { value: "transfer", label: "Transfer", icon: lucideReact.ArrowLeftRight },
-  { value: "adjustment", label: "Adjustment", icon: lucideReact.Settings },
-  { value: "ach", label: "ACH", icon: lucideReact.Building2 },
-  { value: "wire", label: "Wire", icon: lucideReact.Zap }
-];
-var CURRENCY_OPTIONS = [
-  { value: "USD", label: "USD - US Dollar" },
-  { value: "EUR", label: "EUR - Euro" },
-  { value: "GBP", label: "GBP - British Pound" },
-  { value: "JPY", label: "JPY - Japanese Yen" },
-  { value: "CAD", label: "CAD - Canadian Dollar" },
-  { value: "AUD", label: "AUD - Australian Dollar" },
-  { value: "CHF", label: "CHF - Swiss Franc" },
-  { value: "CNY", label: "CNY - Chinese Yuan" }
-];
 var mockAccountData = {
   accountNumber: "****1234",
   accountName: "Business Checking",
@@ -13908,10 +14237,6 @@ function NewTransaction() {
       certifyInformation: false
     }
   });
-  const transactionType = form.watch("transactionType");
-  const accountNumber = form.watch("accountNumber");
-  const counterpartyName = form.watch("counterpartyName");
-  const amount = form.watch("amount");
   const handleAccountLookup = () => {
     const accNum = form.getValues("accountNumber");
     if (!accNum) {
@@ -13958,11 +14283,10 @@ function NewTransaction() {
       sonner.toast.error("Please lookup both account and counterparty");
       return;
     }
-    const amount2 = parseFloat(data.amount);
     const hasError = Math.random() > 0.7;
     if (hasError) {
       const errorScenarios = [
-        "Insufficient funds. Current balance: $125,450.00, Required: $" + amount2.toFixed(2),
+        "Insufficient funds. Current balance: $125,450.00, Required: $" + parseFloat(data.amount).toFixed(2),
         "Transaction limit exceeded. Daily limit: $50,000.00",
         "Counterparty account is temporarily unavailable. Please try again later.",
         "Invalid routing number for the selected transaction type."
@@ -13986,368 +14310,26 @@ function NewTransaction() {
   const handleCancel = () => {
     navigate("/dashboard");
   };
-  const accountDataGrid = accountData ? [
-    {
-      title: "Account Information",
-      items: [
-        { label: "Account Number", value: accountData.accountNumber },
-        { label: "Account Name", value: accountData.accountName },
-        { label: "Account Type", value: accountData.accountType },
-        { label: "Balance", value: accountData.balance },
-        { label: "Customer Name", value: accountData.customerName },
-        { label: "Customer ID", value: accountData.customerId }
-      ]
-    }
-  ] : [];
-  const counterpartyDataGrid = counterpartyData ? [
-    {
-      title: "Counterparty Information",
-      items: [
-        { label: "Counterparty Name", value: counterpartyData.counterpartyName },
-        { label: "Counterparty ID", value: counterpartyData.counterpartyId },
-        { label: "Type", value: counterpartyData.counterpartyType },
-        { label: "Status", value: counterpartyData.status },
-        { label: "Tax ID", value: counterpartyData.taxId },
-        { label: "Primary Contact", value: counterpartyData.primaryContact },
-        { label: "Contact Email", value: counterpartyData.contactEmail },
-        { label: "Contact Phone", value: counterpartyData.contactPhone },
-        { label: "Address", value: counterpartyData.address }
-      ]
-    }
-  ] : [];
-  const reviewData = [
-    {
-      title: "Transaction Summary",
-      items: [
-        { label: "Transaction Type", value: TRANSACTION_TYPES.find((t) => t.value === transactionType)?.label || "-" },
-        { label: "Account Number", value: accountNumber || "-" },
-        { label: "Counterparty", value: counterpartyName || "-" },
-        { label: "Amount", value: amount ? `$${amount}` : "-" },
-        { label: "Description", value: form.watch("description") || "N/A" }
-      ]
-    }
-  ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    PageLayout,
+    NewTransactionView,
     {
-      title: "New Transaction",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto space-y-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => e.preventDefault(), children: [
-          !accountLookedUp ? /* @__PURE__ */ jsxRuntime.jsx(
-            FormCard,
-            {
-              title: "Account Lookup",
-              variant: "default",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 items-start w-full", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  FormInput,
-                  {
-                    name: "accountNumber",
-                    placeholder: "Enter account number"
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  Button,
-                  {
-                    onClick: handleAccountLookup,
-                    disabled: !accountNumber,
-                    className: "shrink-0 mt-0 w-48",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 mr-2" }),
-                      "Lookup Account"
-                    ]
-                  }
-                )
-              ] })
-            }
-          ) : (
-            /* Account Information (Read-only) */
-            /* @__PURE__ */ jsxRuntime.jsx(
-              FormCard,
-              {
-                title: "Account Information",
-                variant: "subtle",
-                headerActions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-5 w-5 text-success" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "sm",
-                      onClick: handleEditAccount,
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4 mr-1" }),
-                        "Edit"
-                      ]
-                    }
-                  )
-                ] }),
-                children: /* @__PURE__ */ jsxRuntime.jsx(DataGrid, { data: accountDataGrid, columns: 2 })
-              }
-            )
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FormCard,
-            {
-              title: "Transaction Type",
-              variant: "default",
-              className: cn(!accountLookedUp && "opacity-50 pointer-events-none"),
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4", children: TRANSACTION_TYPES.map((type) => {
-                const Icon2 = type.icon;
-                const isSelected = transactionType === type.value;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => form.setValue("transactionType", type.value),
-                    disabled: !accountLookedUp,
-                    className: cn(
-                      "flex flex-col items-center justify-center p-4 lg:p-3 rounded-lg border-2 transition-all",
-                      "hover:border-primary/50 hover:shadow-md",
-                      isSelected ? "border-primary bg-primary/5 shadow-sm" : "border-border bg-card"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: cn(
-                        "h-6 w-6 lg:h-5 lg:w-5 mb-2",
-                        isSelected ? "text-primary" : "text-muted-foreground"
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                        "text-sm font-medium",
-                        isSelected ? "text-primary" : "text-foreground"
-                      ), children: type.label })
-                    ]
-                  },
-                  type.value
-                );
-              }) })
-            }
-          ),
-          !counterpartyLookedUp ? /* @__PURE__ */ jsxRuntime.jsx(
-            FormCard,
-            {
-              title: "Counterparty Lookup",
-              variant: "default",
-              className: cn(!transactionType && "opacity-50 pointer-events-none"),
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 items-start w-full", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  FormInput,
-                  {
-                    name: "counterpartyName",
-                    placeholder: "Enter counterparty name",
-                    disabled: !transactionType
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  Button,
-                  {
-                    onClick: handleCounterpartyLookup,
-                    disabled: !transactionType || !counterpartyName,
-                    className: "shrink-0 mt-0 w-48",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 mr-2" }),
-                      "Lookup Counterparty"
-                    ]
-                  }
-                )
-              ] })
-            }
-          ) : (
-            /* Counterparty Information (Read-only) */
-            /* @__PURE__ */ jsxRuntime.jsx(
-              FormCard,
-              {
-                title: "Counterparty Information",
-                variant: "subtle",
-                headerActions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-5 w-5 text-success" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "sm",
-                      onClick: handleEditCounterparty,
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4 mr-1" }),
-                        "Edit"
-                      ]
-                    }
-                  )
-                ] }),
-                children: /* @__PURE__ */ jsxRuntime.jsx(DataGrid, { data: counterpartyDataGrid, columns: 2 })
-              }
-            )
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FormCard,
-            {
-              title: "Transaction Details",
-              variant: "default",
-              className: cn(!counterpartyLookedUp && "opacity-50 pointer-events-none"),
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    FormInput,
-                    {
-                      name: "amount",
-                      label: "Amount",
-                      placeholder: "0.00",
-                      type: "number",
-                      disabled: !counterpartyLookedUp
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    FormSelect,
-                    {
-                      name: "currency",
-                      label: "Currency",
-                      options: CURRENCY_OPTIONS,
-                      disabled: !counterpartyLookedUp,
-                      className: "w-48"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  FormInput,
-                  {
-                    name: "description",
-                    label: "Description (Optional)",
-                    placeholder: "Enter transaction description",
-                    disabled: !counterpartyLookedUp
-                  }
-                )
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FormCard,
-            {
-              title: "Review & Submit",
-              variant: "default",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DataGrid, { data: reviewData, columns: 2 }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted/30 rounded-lg p-4 border border-border/50", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  reactHookForm.Controller,
-                  {
-                    name: "certifyInformation",
-                    control: form.control,
-                    render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          Checkbox,
-                          {
-                            id: "certifyInformation",
-                            checked: field.value,
-                            onCheckedChange: field.onChange
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "label",
-                          {
-                            htmlFor: "certifyInformation",
-                            className: "text-sm font-medium leading-relaxed cursor-pointer select-none",
-                            children: "I certify that all information entered is correct and accurate to the best of my knowledge"
-                          }
-                        )
-                      ] }),
-                      form.formState.errors.certifyInformation && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive ml-7", children: form.formState.errors.certifyInformation.message })
-                    ] })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-end pt-4 border-t border-border", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "outline",
-                      onClick: handleCancel,
-                      className: "w-32",
-                      children: "Cancel"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    Button,
-                    {
-                      type: "button",
-                      onClick: handleSubmit,
-                      className: "w-48",
-                      disabled: !transactionType || !accountNumber || !counterpartyName || !amount || !form.watch("certifyInformation"),
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-4 w-4 mr-2" }),
-                        "Submit Transaction"
-                      ]
-                    }
-                  )
-                ] })
-              ] })
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: confirmationOpen, onOpenChange: setConfirmationOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { 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(DialogDescription, { className: "text-left", 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.jsxs("div", { className: "flex justify-between text-sm", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Amount:" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-                    "$",
-                    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: TRANSACTION_TYPES.find((t) => t.value === transactionType)?.label })
-                ] }),
-                /* @__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.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.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: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-5 w-5 text-destructive mt-0.5 flex-shrink-0" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-destructive", children: "Error Processing Transaction" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: errorMessage })
-                ] })
-              ] }),
-              /* @__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", children: [
-            submissionStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                type: "button",
-                variant: "outline",
-                onClick: () => setConfirmationOpen(false),
-                children: "Try Again"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                type: "button",
-                onClick: handleConfirmationClose,
-                variant: submissionStatus === "success" ? "default" : "outline",
-                children: submissionStatus === "success" ? "View Transactions" : "Close"
-              }
-            )
-          ] })
-        ] }) })
-      ] })
+      form,
+      accountLookedUp,
+      accountData,
+      counterpartyLookedUp,
+      counterpartyData,
+      confirmationOpen,
+      submissionStatus,
+      errorMessage,
+      transactionId,
+      onAccountLookup: handleAccountLookup,
+      onCounterpartyLookup: handleCounterpartyLookup,
+      onEditAccount: handleEditAccount,
+      onEditCounterparty: handleEditCounterparty,
+      onSubmit: handleSubmit,
+      onCancel: handleCancel,
+      onConfirmationClose: handleConfirmationClose,
+      onConfirmationOpenChange: setConfirmationOpen
     }
   );
 }
@@ -16414,6 +16396,7 @@ exports.BusinessTypeBadge = BusinessTypeBadge;
 exports.Businesses = Businesses_default;
 exports.Button = Button;
 exports.CIPStatusBadge = CIPStatusBadge;
+exports.CURRENCY_OPTIONS = CURRENCY_OPTIONS;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.CardContent = CardContent;
@@ -16485,6 +16468,7 @@ exports.ListPage = ListPage;
 exports.MainLayout = MainLayout;
 exports.MetricCard = MetricCard;
 exports.NewTransaction = NewTransaction;
+exports.NewTransactionView = NewTransactionView;
 exports.NotFound = NotFound_default;
 exports.OFACAlertView = OFACAlertView;
 exports.OriginatorCard = OriginatorCard;
@@ -16542,6 +16526,7 @@ exports.Statement = Statement;
 exports.StatementHeader = StatementHeader;
 exports.StatementView = StatementView;
 exports.StatusBadge = StatusBadge;
+exports.TRANSACTION_TYPES = TRANSACTION_TYPES;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;
@@ -16581,6 +16566,7 @@ exports.cardVariants = cardVariants;
 exports.downloadCSV = downloadCSV;
 exports.generateStatementCSV = generateStatementCSV;
 exports.inputVariants = inputVariants;
+exports.newTransactionSchema = newTransactionSchema;
 exports.reducer = reducer;
 exports.textareaVariants = textareaVariants;
 exports.toast = toast;