braid-ui 1.0.50 → 1.0.52

package/dist/index.cjs

@@ -1279,7 +1279,7 @@ var DialogOverlay = React15__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React15__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+var DialogContent = React15__namespace.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     DialogPrimitive__namespace.Content,
@@ -1292,7 +1292,7 @@ var DialogContent = React15__namespace.forwardRef(({ className, children, ...pro
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+        !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
         ] })
@@ -3099,7 +3099,7 @@ function AppSidebar() {
   ] });
 }
 var MainLayout = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-screen w-full", children: /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 h-full overflow-y-auto", children });
 };
 var useEditState = ({ initialEditing = false, onToggleEdit, onSave, onCancel }) => {
   const [localEditing, setLocalEditing] = React15.useState(initialEditing);
@@ -8257,7 +8257,7 @@ var StatementView = ({
   ] });
 };
 var ACHDetailsSection = ({ data }) => {
-  const formatCurrency = (value) => {
+  const formatCurrency3 = (value) => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
@@ -8293,7 +8293,7 @@ var ACHDetailsSection = ({ data }) => {
           layout: "horizontal"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Amount", value: formatCurrency(data.amount), layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Amount", value: formatCurrency3(data.amount), layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "SEC Code", value: data.secCode, layout: "horizontal" }),
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Company Entry Description", value: data.companyEntryDescription, layout: "horizontal" }),
       data.companyDiscretionaryData && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Company Discretionary Data", value: data.companyDiscretionaryData, layout: "horizontal" }),
@@ -8376,6 +8376,37 @@ var WireDetailsSection = ({ data }) => {
     ) })
   ] });
 };
+var formatCurrency = (value) => {
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numValue)) return "";
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2
+  }).format(numValue);
+};
+var CurrencyInput = ({ value, onChange, ...props }) => {
+  const [isFocused, setIsFocused] = React15__namespace.useState(false);
+  const displayValue = value ? isFocused ? value : formatCurrency(value) : "";
+  const handleChange = (e) => {
+    const rawValue = e.target.value.replace(/[^0-9.]/g, "");
+    const parts = rawValue.split(".");
+    const sanitized = parts[0] + (parts.length > 1 ? "." + parts[1]?.slice(0, 2) : "");
+    onChange(sanitized);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EnhancedInput,
+    {
+      ...props,
+      value: displayValue,
+      onChange: handleChange,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      inputMode: "decimal",
+      placeholder: props.placeholder || "$0.00"
+    }
+  );
+};
 var Checkbox = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   CheckboxPrimitive__namespace.Root,
   {
@@ -8395,6 +8426,15 @@ var Checkbox = React15__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
+var formatCurrency2 = (value) => {
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numValue)) return "-";
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2
+  }).format(numValue);
+};
 var TRANSACTION_TYPES = [
   { value: "transfer", label: "Transfer", icon: lucideReact.ArrowLeftRight },
   { value: "adjustment", label: "Adjustment", icon: lucideReact.Settings },
@@ -8434,6 +8474,7 @@ var NewTransactionView = ({
   onCancel,
   onConfirmationClose,
   onConfirmationOpenChange,
+  onNewTransaction,
   onCounterpartySearchChange,
   onCounterpartySelect,
   onCounterpartyDropdownClose,
@@ -8441,7 +8482,8 @@ var NewTransactionView = ({
   receiverAccountData,
   isReceiverAccountLoading,
   onReceiverAccountLookup,
-  onEditReceiverAccount
+  onEditReceiverAccount,
+  isReviewReady
 }) => {
   const transactionType = form.watch("transactionType");
   const accountNumber = form.watch("accountNumber");
@@ -8499,7 +8541,7 @@ var NewTransactionView = ({
     ] : [],
     ...isTransfer ? [{ label: "Receiver Account", value: receiverAccountNumber || "-" }] : [],
     ...requiresCounterparty ? [{ label: "Counterparty", value: counterpartyName || "-" }] : [],
-    { label: "Amount", value: amount ? `$${amount}` : "-" },
+    { label: "Amount", value: amount ? formatCurrency2(amount) : "-" },
     { label: "Description", value: form.watch("description") || "N/A" }
   ];
   const reviewData = [
@@ -8508,7 +8550,8 @@ var NewTransactionView = ({
       items: reviewItems
     }
   ];
-  return /* @__PURE__ */ jsxRuntime.jsx(PageLayout, { title: "New Transaction", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto space-y-6", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto p-6 space-y-6 max-w-4xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "New Transaction" }) }),
     /* @__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(
@@ -8728,13 +8771,20 @@ var NewTransactionView = ({
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              FormInput,
+              reactHookForm.Controller,
               {
                 name: "amount",
-                label: "Amount",
-                placeholder: "0.00",
-                type: "number",
-                disabled: requiresCounterparty ? !counterpartyLookedUp : isTransfer ? !receiverAccountLookedUp : !transactionType
+                control: form.control,
+                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
+                  CurrencyInput,
+                  {
+                    label: "Amount",
+                    value: field.value,
+                    onChange: field.onChange,
+                    disabled: requiresCounterparty ? !counterpartyLookedUp : isTransfer ? !receiverAccountLookedUp : !transactionType,
+                    error: form.formState.errors.amount?.message
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -8749,7 +8799,7 @@ var NewTransactionView = ({
           ] })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Review & Submit", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Review & Submit", variant: "default", className: cn(!isReviewReady && "opacity-50 pointer-events-none"), 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,
@@ -8800,7 +8850,8 @@ var NewTransactionView = ({
         ] })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: confirmationOpen, onOpenChange: onConfirmationOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: confirmationOpen, onOpenChange: () => {
+    }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-md", hideCloseButton: true, 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" }) }),
@@ -8815,10 +8866,7 @@ var NewTransactionView = ({
             ] }),
             /* @__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.jsx("span", { className: "font-medium", children: formatCurrency2(amount) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Type:" }),
@@ -8845,19 +8893,20 @@ var NewTransactionView = ({
         ] }) })
       ] }),
       /* @__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" }),
+        submissionStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: () => onConfirmationOpenChange(false), children: "Edit" }),
+        submissionStatus === "success" && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: onNewTransaction, children: "New Transaction" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
             type: "button",
             onClick: onConfirmationClose,
             variant: submissionStatus === "success" ? "default" : "outline",
-            children: submissionStatus === "success" ? "View Transactions" : "Close"
+            children: submissionStatus === "success" ? "View Transaction" : "Close"
           }
         )
       ] })
     ] }) })
-  ] }) });
+  ] });
 };
 var typeIcons = {
   checking: lucideReact.CreditCard,
@@ -13946,7 +13995,7 @@ var TransactionHistory = () => {
     setRowsPerPage(value);
     setCurrentPage(1);
   };
-  const formatCurrency = (value) => {
+  const formatCurrency3 = (value) => {
     const formatted = new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
@@ -14123,23 +14172,19 @@ var TransactionHistory = () => {
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                EnhancedInput,
+                CurrencyInput,
                 {
                   label: "Min Amount",
-                  type: "number",
                   value: filters.minAmount,
-                  onChange: (e) => handleFilterChange("minAmount", e.target.value),
-                  placeholder: "0.00"
+                  onChange: (value) => handleFilterChange("minAmount", value)
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                EnhancedInput,
+                CurrencyInput,
                 {
                   label: "Max Amount",
-                  type: "number",
                   value: filters.maxAmount,
-                  onChange: (e) => handleFilterChange("maxAmount", e.target.value),
-                  placeholder: "0.00"
+                  onChange: (value) => handleFilterChange("maxAmount", value)
                 }
               )
             ] }),
@@ -14239,7 +14284,7 @@ var TransactionHistory = () => {
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: transaction.created }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: transaction.accountNumber }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs text-right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: transaction.amount < 0 ? "text-destructive" : "", children: formatCurrency(transaction.amount) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs text-right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: transaction.amount < 0 ? "text-destructive" : "", children: formatCurrency3(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 }),
@@ -14609,15 +14654,57 @@ function NewTransaction() {
       setIsSubmitting(false);
     }
   };
+  const resetForm = () => {
+    form.reset({
+      transactionType: "",
+      accountNumber: "",
+      counterpartyName: "",
+      amount: "",
+      description: "",
+      certifyInformation: false,
+      adjustmentDirection: "",
+      adjustmentType: "",
+      receiverAccountNumber: ""
+    });
+    setAccountLookedUp(false);
+    setAccountData(null);
+    setCounterpartyLookedUp(false);
+    setCounterpartyData(null);
+    setCounterpartySearchResults([]);
+    setShowCounterpartyDropdown(false);
+    setReceiverAccountLookedUp(false);
+    setReceiverAccountData(null);
+    setSubmissionStatus(null);
+    setErrorMessage("");
+    setTransactionId("");
+  };
   const handleConfirmationClose = () => {
     setConfirmationOpen(false);
     if (submissionStatus === "success") {
-      navigate("/transactions/history");
+      navigate(`/transactions/${transactionId}`);
     }
   };
+  const handleNewTransaction = () => {
+    setConfirmationOpen(false);
+    resetForm();
+  };
   const handleCancel = () => {
     navigate("/dashboard");
   };
+  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;
+    if (!accountLookedUp) return false;
+    if (data.transactionType === "adjustment") {
+      if (!data.adjustmentDirection || !data.adjustmentType) return false;
+    }
+    if (data.transactionType === "transfer") {
+      if (!data.receiverAccountNumber || !receiverAccountLookedUp) return false;
+    }
+    return true;
+  }, [form.watch(), accountLookedUp, counterpartyLookedUp, receiverAccountLookedUp]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NewTransactionView,
     {
@@ -14647,11 +14734,13 @@ function NewTransaction() {
       onCancel: handleCancel,
       onConfirmationClose: handleConfirmationClose,
       onConfirmationOpenChange: setConfirmationOpen,
+      onNewTransaction: handleNewTransaction,
       receiverAccountLookedUp,
       receiverAccountData,
       isReceiverAccountLoading,
       onReceiverAccountLookup: handleReceiverAccountLookup,
-      onEditReceiverAccount: handleEditReceiverAccount
+      onEditReceiverAccount: handleEditReceiverAccount,
+      isReviewReady
     }
   );
 }
@@ -14702,7 +14791,7 @@ var TransactionDetail = () => {
         return "outline";
     }
   };
-  const formatCurrency = (value) => {
+  const formatCurrency3 = (value) => {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
@@ -14718,7 +14807,7 @@ var TransactionDetail = () => {
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
           "font-semibold",
           transaction.amount < 0 ? "text-destructive" : "text-success"
-        ), children: formatCurrency(transaction.amount) }),
+        ), children: formatCurrency3(transaction.amount) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           TransactionTypeBadge,
           {
@@ -15340,11 +15429,11 @@ function CreateVelocityLimit() {
       case "round_number":
         return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            EnhancedInput,
+            CurrencyInput,
             {
               label: "Amount Threshold",
-              placeholder: "Enter amount",
-              onChange: (e) => handleFieldChange("amountThreshold", e.target.value)
+              value: formData.amountThreshold || "",
+              onChange: (value) => handleFieldChange("amountThreshold", value)
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -15457,11 +15546,11 @@ function CreateVelocityLimit() {
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
+              CurrencyInput,
               {
                 label: "Max Transaction Amount",
-                placeholder: "Enter amount",
-                onChange: (e) => handleFieldChange("maxAmount", e.target.value)
+                value: formData.maxAmount || "",
+                onChange: (value) => handleFieldChange("maxAmount", value)
               }
             ),
             formData.aggregationLevel !== "transaction" && /* @__PURE__ */ jsxRuntime.jsx(