braid-ui 1.0.39 → 1.0.40

package/dist/index.cjs

@@ -5783,169 +5783,377 @@ var CounterpartiesView = ({
   ] });
 };
 
-// src/lib/mock-data/banking-data.ts
-var defaultACHBankDetails = {
-  gatewayRoutingNumber: "043087080",
-  rdfiNumberQualifier: "01"
-};
-var defaultBankAddress = {
-  street: "270 Park Avenue",
-  city: "New York",
-  state: "NY",
-  postalCode: "10017",
-  country: "US"
-};
-var defaultACHTransfer = {
-  basicInfo: {
-    counterpartyName: "Acme Corporation",
-    shortName: "ACME",
-    type: "business",
-    description: "ACH transfer for Acme Corporation"
-  },
-  bankDetails: defaultACHBankDetails
-};
-var ACHBankCard = ({ data, onDataChange, isEditing, onToggleEdit, className, hideActions }) => {
-  const form = useFormWithEditState({
-    schema: achTransferSchema,
-    defaultValues: { ...defaultACHTransfer, ...data },
-    initialEditing: isEditing,
-    onToggleEdit,
-    onSave: onDataChange
-  });
-  const editContent = /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "bankDetails.gatewayRoutingNumber",
-        label: "Gateway Routing Number",
-        placeholder: "Enter gateway routing number",
-        pattern: "[0-9]{9}",
-        maxLength: 9,
-        hint: "9-digit gateway routing number",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "bankDetails.rdfiNumberQualifier",
-        label: "RDFI Number Qualifier",
-        placeholder: "Enter RDFI qualifier",
-        maxLength: 2,
-        hint: "2-digit RDFI number qualifier",
-        required: true
-      }
-    )
-  ] }) }) });
-  const viewContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Gateway Routing Number", value: form.getValues("bankDetails.gatewayRoutingNumber"), layout: "horizontal" }),
-    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "RDFI Number Qualifier", value: form.getValues("bankDetails.rdfiNumberQualifier"), layout: "horizontal" })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    EditableFormCard,
-    {
-      title: "ACH Bank Details",
-      description: "ACH-specific routing and qualification information",
-      variant: "subtle",
-      className,
-      isEditing: form.isEditing,
-      onToggleEdit: form.handleToggleEdit,
-      onSave: form.handleSave,
-      onCancel: form.handleCancel,
-      hideActions,
-      isFormValid: form.isFormValid,
-      isDirty: form.isDirty,
-      editContent,
-      viewContent
-    }
-  );
+// src/lib/mock-data/counterparty-data.ts
+var defaultCounterpartyDetail = {
+  email: "contact@acme.com",
+  phone: "+1 (555) 123-4567",
+  dateOfBirth: "1985-03-15",
+  idNumber: "ID-123456789",
+  idType: "product_id",
+  idValue: "PROD-001",
+  address: {
+    line1: "123 Business Ave",
+    line2: "Suite 100",
+    city: "New York",
+    state: "NY",
+    postalCode: "10001",
+    countryCode: "US",
+    type: "MAILING"
+  }
 };
-var ACHBasicInfoCard = ({
+var CounterpartyProfileCard = ({
   data,
   onDataChange,
-  isEditing,
+  isEditing = false,
   onToggleEdit,
-  className,
-  hideActions
+  hideActions = false,
+  className
 }) => {
+  const navigate = reactRouterDom.useNavigate();
   const form = useFormWithEditState({
-    schema: achTransferSchema,
-    defaultValues: { ...defaultACHTransfer, ...data },
+    schema: counterpartyDetailSchema,
+    defaultValues: { ...defaultCounterpartyDetail, ...data },
     initialEditing: isEditing,
     onToggleEdit,
     onSave: onDataChange
   });
   const editContent = /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormSelect,
+        {
+          name: "idType",
+          label: "Associated with",
+          placeholder: "Select association type",
+          options: [
+            { value: "product_id", label: "Product ID" },
+            { value: "business_id", label: "Business ID" },
+            { value: "individual_id", label: "Individual ID" },
+            { value: "account_number", label: "Account Number" }
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         FormInput,
         {
-          name: "basicInfo.counterpartyName",
-          label: "Counterparty Name",
-          placeholder: "Enter counterparty name",
-          required: true
+          name: "idValue",
+          label: form.watch("idType") === "product_id" ? "Product ID" : form.watch("idType") === "business_id" ? "Business ID" : form.watch("idType") === "individual_id" ? "Individual ID" : "Account Number",
+          placeholder: "Enter ID value"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         FormInput,
         {
-          name: "basicInfo.shortName",
-          label: "Short Name",
-          placeholder: "Enter short name",
-          required: true
+          name: "email",
+          label: "Email",
+          type: "email",
+          placeholder: "Enter email address"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "phone",
+          label: "Phone Number",
+          type: "tel",
+          placeholder: "Enter phone number"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "dateOfBirth",
+          label: "Date of Birth",
+          type: "date",
+          placeholder: "Select date of birth"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "idNumber",
+          label: "ID Number",
+          placeholder: "Enter ID number"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        FormSelect,
+        FormInput,
         {
-          name: "basicInfo.type",
-          label: "Type",
-          placeholder: "Select type",
-          options: [
-            { value: "business", label: "Business" },
-            { value: "individual", label: "Individual" }
-          ]
+          name: "address.line1",
+          label: "Street Address",
+          placeholder: "Enter street address"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         FormInput,
         {
-          name: "basicInfo.description",
-          label: "Description",
-          placeholder: "Enter description"
+          name: "address.line2",
+          label: "Apartment, suite, or floor",
+          placeholder: "Enter apartment, suite, or floor"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.city",
+          label: "City",
+          placeholder: "Enter city"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.state",
+          label: "State",
+          placeholder: "Enter state"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.postalCode",
+          label: "Postal Code",
+          placeholder: "Enter postal code"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.countryCode",
+          label: "Country Code",
+          placeholder: "e.g., US"
         }
       )
     ] })
   ] }) });
-  const viewContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Counterparty Name", value: form.getValues("basicInfo.counterpartyName"), layout: "horizontal" }),
-    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Short Name", value: form.getValues("basicInfo.shortName"), layout: "horizontal" }),
-    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Type", value: form.getValues("basicInfo.type"), layout: "horizontal" }),
-    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Description", value: form.getValues("basicInfo.description") || "N/A", layout: "horizontal" })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    EditableFormCard,
-    {
-      title: "Basic Information",
-      variant: "subtle",
-      className,
-      isEditing: form.isEditing,
-      onToggleEdit: form.handleToggleEdit,
-      onSave: form.handleSave,
-      onCancel: form.handleCancel,
-      hideActions,
-      isFormValid: form.isFormValid,
-      isDirty: form.isDirty,
-      editContent,
-      viewContent
+  const formValues = form.watch();
+  const idTypeLabel = formValues?.idType === "product_id" ? "Product ID" : formValues?.idType === "business_id" ? "Business ID" : formValues?.idType === "individual_id" ? "Individual ID" : "Account Number";
+  const getEntityLink = () => {
+    if (!formValues?.idValue) return null;
+    switch (formValues?.idType) {
+      case "business_id":
+        return `/business/${formValues.idValue}`;
+      case "individual_id":
+        return `/individual/${formValues.idValue}`;
+      case "account_number":
+        return `/account/${formValues.idValue}`;
+      default:
+        return null;
     }
-  );
-};
-var typeClasses = {
-  cards: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-  forms: "grid-cols-1 lg:grid-cols-2",
+  };
+  const entityLink = getEntityLink();
+  const viewContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Associated with", value: formValues?.idType === "product_id" ? "Product ID" : formValues?.idType === "business_id" ? "Business ID" : formValues?.idType === "individual_id" ? "Individual ID" : "Account Number", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: idTypeLabel,
+          value: entityLink ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.preventDefault();
+                navigate(entityLink);
+              },
+              className: "text-primary hover:underline font-medium text-left cursor-pointer",
+              children: formValues?.idValue || "-"
+            }
+          ) : formValues?.idValue || "-",
+          layout: "horizontal"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Email", value: formValues?.email || "-", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Phone Number", value: formValues?.phone || "-", layout: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Date of Birth", value: formValues?.dateOfBirth || "-", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Number", value: formValues?.idNumber || "-", layout: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InfoField,
+      {
+        label: "Address",
+        value: formValues?.address ? `${formValues.address.line1 || ""}${formValues.address.line2 ? ", " + formValues.address.line2 : ""}, ${formValues.address.city || ""}, ${formValues.address.state || ""} ${formValues.address.postalCode || ""}, ${formValues.address.countryCode || ""}` : "-",
+        layout: "horizontal"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EditableFormCard,
+    {
+      title: "Profile Information",
+      variant: "subtle",
+      className,
+      isEditing: form.isEditing,
+      onToggleEdit: form.handleToggleEdit,
+      onSave: form.handleSave,
+      onCancel: form.handleCancel,
+      hideActions,
+      editContent,
+      viewContent
+    }
+  );
+};
+var mockCounterpartyTimeline = [
+  {
+    id: "1",
+    action: "Counterparty Created",
+    user: "admin",
+    details: "Initial counterparty setup",
+    status: "Active",
+    timestamp: "2024-01-15 10:30:00"
+  },
+  {
+    id: "2",
+    action: "Profile Updated",
+    user: "admin",
+    details: "Updated counterparty information",
+    timestamp: "2024-01-20 14:22:00"
+  },
+  {
+    id: "3",
+    action: "OFAC Check Completed",
+    user: "System",
+    details: "Automated compliance check",
+    status: "Verified",
+    timestamp: "2024-01-20 14:30:00"
+  }
+];
+var CounterpartyStatusCard = ({ isEditing, onToggleEdit, className }) => {
+  const getIcon = (action) => {
+    if (action.includes("Created")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-4 w-4" });
+    if (action.includes("Assigned")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserPlus, { className: "h-4 w-4" });
+    if (action.includes("Updated") || action.includes("Modified") || action.includes("Check")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" });
+    if (action.includes("Completed") || action.includes("Verified")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-4 w-4" });
+  };
+  const getStatusColor2 = (status) => {
+    switch (status) {
+      case "Active":
+      case "Verified":
+        return "text-success";
+      case "Pending":
+        return "text-warning";
+      default:
+        return "text-muted-foreground";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormCard,
+    {
+      title: "Timeline",
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: mockCounterpartyTimeline.map((event, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pl-6 pb-3", children: [
+        index !== mockCounterpartyTimeline.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[7px] top-5 bottom-0 w-[2px] bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+          "absolute left-0 top-0 flex-none",
+          getStatusColor2(event.status)
+        ), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4", children: getIcon(event.action) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-foreground", children: event.action }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            "by ",
+            event.user
+          ] }),
+          event.details && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: event.details }),
+          event.status && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-xs font-medium", getStatusColor2(event.status)), children: [
+            "Status: ",
+            event.status
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/70 pt-0.5", children: event.timestamp })
+        ] })
+      ] }, event.id)) })
+    }
+  );
+};
+var typeConfig2 = {
+  BUSINESS: {
+    variant: "business",
+    label: "Business",
+    icon: lucideReact.Building2
+  },
+  INDIVIDUAL: {
+    variant: "individual",
+    label: "Individual",
+    icon: lucideReact.User
+  }
+};
+var CounterpartyTypeBadge = ({ type, className }) => {
+  const config = typeConfig2[type];
+  if (!config) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "w-3 h-3 mr-1" }),
+      type || "Unknown"
+    ] });
+  }
+  const Icon2 = config.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: config.variant, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "w-3 h-3 mr-1" }),
+    config.label
+  ] });
+};
+var PaymentMethodCard = ({
+  type,
+  fiId,
+  accountNumber,
+  bankName,
+  accountType,
+  beneficiaryBankName,
+  correspondentBankId,
+  intermediaryBankId,
+  className
+}) => {
+  const getIcon = () => {
+    switch (type) {
+      case "ACH":
+        return lucideReact.Building2;
+      case "Domestic Wire":
+        return lucideReact.Landmark;
+      case "International Wire":
+        return lucideReact.Globe;
+      default:
+        return lucideReact.Building2;
+    }
+  };
+  const Icon2 = getIcon();
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("hover:bg-muted/50 transition-colors", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-start justify-between space-y-0 pb-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm", children: type })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "h-4 w-4" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Beneficiary FI ID", value: fiId }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Account Number", value: accountNumber })
+      ] }),
+      type === "ACH" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+        bankName && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Bank Name", value: bankName }),
+        accountType && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Account Type", value: accountType })
+      ] }),
+      type === "Domestic Wire" && bankName && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Bank Name", value: bankName }),
+      type === "International Wire" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        beneficiaryBankName && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Beneficiary Bank Name", value: beneficiaryBankName }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+          correspondentBankId && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Correspondent Bank ID", value: correspondentBankId }),
+          intermediaryBankId && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Intermediary Bank ID", value: intermediaryBankId })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+var typeClasses = {
+  cards: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+  forms: "grid-cols-1 lg:grid-cols-2",
   data: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
   custom: ""
 };
@@ -5974,6 +6182,242 @@ var ResponsiveGrid = React15__namespace.forwardRef(
   }
 );
 ResponsiveGrid.displayName = "ResponsiveGrid";
+var CounterpartyDetailView = ({
+  counterpartyName,
+  counterpartyType,
+  currentStatus,
+  isEditingProfile,
+  mockPaymentMethods: mockPaymentMethods2,
+  documentsTable,
+  onStatusChange,
+  onToggleProfileEdit,
+  onAddPaymentMethod,
+  onAddDocument
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PageLayout,
+    {
+      title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: counterpartyName }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EditableInfoField,
+          {
+            label: "",
+            value: currentStatus,
+            options: [
+              { value: "ACTIVE", label: "Active" },
+              { value: "INACTIVE", label: "Inactive" },
+              { value: "PENDING", label: "Pending" },
+              { value: "SUSPENDED", label: "Suspended" }
+            ],
+            onChange: onStatusChange,
+            renderValue: (value) => /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: value }),
+            className: "inline-block"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CounterpartyTypeBadge, { type: counterpartyType })
+      ] }),
+      maxWidth: "full",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row items-start gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CounterpartyProfileCard,
+            {
+              isEditing: isEditingProfile,
+              onToggleEdit: onToggleProfileEdit
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Payment Methods" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "ghost", onClick: onAddPaymentMethod, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
+                "Method"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: mockPaymentMethods2.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 py-4 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-5 w-5 opacity-50" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No payment methods configured" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGrid, { type: "forms", gap: "md", children: mockPaymentMethods2.map((method, index) => /* @__PURE__ */ jsxRuntime.jsx(PaymentMethodCard, { ...method }, index)) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Documents" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "ghost", onClick: onAddDocument, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
+                "Document"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: documentsTable })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(CounterpartyStatusCard, { isEditing: false, onToggleEdit: () => {
+        } }) })
+      ] })
+    }
+  );
+};
+
+// src/lib/mock-data/banking-data.ts
+var defaultACHBankDetails = {
+  gatewayRoutingNumber: "043087080",
+  rdfiNumberQualifier: "01"
+};
+var defaultBankAddress = {
+  street: "270 Park Avenue",
+  city: "New York",
+  state: "NY",
+  postalCode: "10017",
+  country: "US"
+};
+var defaultACHTransfer = {
+  basicInfo: {
+    counterpartyName: "Acme Corporation",
+    shortName: "ACME",
+    type: "business",
+    description: "ACH transfer for Acme Corporation"
+  },
+  bankDetails: defaultACHBankDetails
+};
+var ACHBankCard = ({ data, onDataChange, isEditing, onToggleEdit, className, hideActions }) => {
+  const form = useFormWithEditState({
+    schema: achTransferSchema,
+    defaultValues: { ...defaultACHTransfer, ...data },
+    initialEditing: isEditing,
+    onToggleEdit,
+    onSave: onDataChange
+  });
+  const editContent = /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormInput,
+      {
+        name: "bankDetails.gatewayRoutingNumber",
+        label: "Gateway Routing Number",
+        placeholder: "Enter gateway routing number",
+        pattern: "[0-9]{9}",
+        maxLength: 9,
+        hint: "9-digit gateway routing number",
+        required: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormInput,
+      {
+        name: "bankDetails.rdfiNumberQualifier",
+        label: "RDFI Number Qualifier",
+        placeholder: "Enter RDFI qualifier",
+        maxLength: 2,
+        hint: "2-digit RDFI number qualifier",
+        required: true
+      }
+    )
+  ] }) }) });
+  const viewContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Gateway Routing Number", value: form.getValues("bankDetails.gatewayRoutingNumber"), layout: "horizontal" }),
+    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "RDFI Number Qualifier", value: form.getValues("bankDetails.rdfiNumberQualifier"), layout: "horizontal" })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EditableFormCard,
+    {
+      title: "ACH Bank Details",
+      description: "ACH-specific routing and qualification information",
+      variant: "subtle",
+      className,
+      isEditing: form.isEditing,
+      onToggleEdit: form.handleToggleEdit,
+      onSave: form.handleSave,
+      onCancel: form.handleCancel,
+      hideActions,
+      isFormValid: form.isFormValid,
+      isDirty: form.isDirty,
+      editContent,
+      viewContent
+    }
+  );
+};
+var ACHBasicInfoCard = ({
+  data,
+  onDataChange,
+  isEditing,
+  onToggleEdit,
+  className,
+  hideActions
+}) => {
+  const form = useFormWithEditState({
+    schema: achTransferSchema,
+    defaultValues: { ...defaultACHTransfer, ...data },
+    initialEditing: isEditing,
+    onToggleEdit,
+    onSave: onDataChange
+  });
+  const editContent = /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "basicInfo.counterpartyName",
+          label: "Counterparty Name",
+          placeholder: "Enter counterparty name",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "basicInfo.shortName",
+          label: "Short Name",
+          placeholder: "Enter short name",
+          required: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormSelect,
+        {
+          name: "basicInfo.type",
+          label: "Type",
+          placeholder: "Select type",
+          options: [
+            { value: "business", label: "Business" },
+            { value: "individual", label: "Individual" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "basicInfo.description",
+          label: "Description",
+          placeholder: "Enter description"
+        }
+      )
+    ] })
+  ] }) });
+  const viewContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Counterparty Name", value: form.getValues("basicInfo.counterpartyName"), layout: "horizontal" }),
+    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Short Name", value: form.getValues("basicInfo.shortName"), layout: "horizontal" }),
+    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Type", value: form.getValues("basicInfo.type"), layout: "horizontal" }),
+    /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Description", value: form.getValues("basicInfo.description") || "N/A", layout: "horizontal" })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    EditableFormCard,
+    {
+      title: "Basic Information",
+      variant: "subtle",
+      className,
+      isEditing: form.isEditing,
+      onToggleEdit: form.handleToggleEdit,
+      onSave: form.handleSave,
+      onCancel: form.handleCancel,
+      hideActions,
+      isFormValid: form.isFormValid,
+      isDirty: form.isDirty,
+      editContent,
+      viewContent
+    }
+  );
+};
 var BankAddressCard = ({
   data,
   onDataChange,
@@ -6177,44 +6621,18 @@ var BankingDetailsCard = ({ isEditing, onToggleEdit, className }) => {
     {
       title: "Banking Details",
       className,
-      headerActions: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: onToggleEdit, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: onToggleEdit, children: "Save" })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onToggleEdit, className: "text-primary hover:text-primary/80 hover:bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" }) }) }),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Primary Bank", value: "JPMorgan Chase", layout: "horizontal" }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Account Number", value: "****-****-****-1234", layout: "horizontal" }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Routing Number", value: "021000021", layout: "horizontal" }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Account Type", value: "Business Checking", layout: "horizontal" })
-      ] }) })
-    }
-  );
-};
-var typeConfig2 = {
-  BUSINESS: {
-    variant: "business",
-    label: "Business",
-    icon: lucideReact.Building2
-  },
-  INDIVIDUAL: {
-    variant: "individual",
-    label: "Individual",
-    icon: lucideReact.User
-  }
-};
-var CounterpartyTypeBadge = ({ type, className }) => {
-  const config = typeConfig2[type];
-  if (!config) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "w-3 h-3 mr-1" }),
-      type || "Unknown"
-    ] });
-  }
-  const Icon2 = config.icon;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: config.variant, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "w-3 h-3 mr-1" }),
-    config.label
-  ] });
+      headerActions: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: onToggleEdit, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: onToggleEdit, children: "Save" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onToggleEdit, className: "text-primary hover:text-primary/80 hover:bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" }) }) }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Primary Bank", value: "JPMorgan Chase", layout: "horizontal" }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Account Number", value: "****-****-****-1234", layout: "horizontal" }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Routing Number", value: "021000021", layout: "horizontal" }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Account Type", value: "Business Checking", layout: "horizontal" })
+      ] }) })
+    }
+  );
 };
 var BasicInfoCard = ({ isEditing, onToggleEdit, className, hideActions }) => {
   const [name, setName] = React15.useState("John wire hot");
@@ -6246,273 +6664,54 @@ var BasicInfoCard = ({ isEditing, onToggleEdit, className, hideActions }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 pt-4 border-t border-border", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID", value: "5000541", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Counterparty Type", value: /* @__PURE__ */ jsxRuntime.jsx(CounterpartyTypeBadge, { type: "BUSINESS" }), layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Number", value: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Type", value: "SSN", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Date of Birth", value: "1985-8-20", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created By", value: "admin", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created At", value: "2025-07-14", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Updated By", value: "admin", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Updated At", value: "2025-07-14", layout: "horizontal" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 border-t border-border", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-foreground mb-2", children: "OFAC Details" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC date", value: "2025-07-14", layout: "horizontal" }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC status", value: "Verified", layout: "horizontal" })
-      ] })
-    ] })
-  ] });
-  const viewContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID", value: "5000541", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Name", value: name, layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Counterparty Type", value: /* @__PURE__ */ jsxRuntime.jsx(CounterpartyTypeBadge, { type: "BUSINESS" }), layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Status", value: /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status }), layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Number", value: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Type", value: "SSN", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Date of Birth", value: "1985-8-20", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created By", value: "admin", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created At", value: "2025-07-14", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Updated By", value: "admin", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Updated At", value: "2025-07-14", layout: "horizontal" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 border-t border-border", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-foreground mb-2", children: "OFAC Details" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC date", value: "2025-07-14", layout: "horizontal" }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC status", value: "Verified", layout: "horizontal" })
-      ] })
-    ] })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    EditableFormCard,
-    {
-      title: "Basic Info",
-      className,
-      isEditing,
-      onToggleEdit,
-      hideActions,
-      editContent,
-      viewContent
-    }
-  );
-};
-
-// src/lib/mock-data/counterparty-data.ts
-var defaultCounterpartyDetail = {
-  email: "contact@acme.com",
-  phone: "+1 (555) 123-4567",
-  dateOfBirth: "1985-03-15",
-  idNumber: "ID-123456789",
-  idType: "product_id",
-  idValue: "PROD-001",
-  address: {
-    line1: "123 Business Ave",
-    line2: "Suite 100",
-    city: "New York",
-    state: "NY",
-    postalCode: "10001",
-    countryCode: "US",
-    type: "MAILING"
-  }
-};
-var CounterpartyProfileCard = ({
-  data,
-  onDataChange,
-  isEditing = false,
-  onToggleEdit,
-  hideActions = false,
-  className
-}) => {
-  const navigate = reactRouterDom.useNavigate();
-  const form = useFormWithEditState({
-    schema: counterpartyDetailSchema,
-    defaultValues: { ...defaultCounterpartyDetail, ...data },
-    initialEditing: isEditing,
-    onToggleEdit,
-    onSave: onDataChange
-  });
-  const editContent = /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormSelect,
-        {
-          name: "idType",
-          label: "Associated with",
-          placeholder: "Select association type",
-          options: [
-            { value: "product_id", label: "Product ID" },
-            { value: "business_id", label: "Business ID" },
-            { value: "individual_id", label: "Individual ID" },
-            { value: "account_number", label: "Account Number" }
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "idValue",
-          label: form.watch("idType") === "product_id" ? "Product ID" : form.watch("idType") === "business_id" ? "Business ID" : form.watch("idType") === "individual_id" ? "Individual ID" : "Account Number",
-          placeholder: "Enter ID value"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "email",
-          label: "Email",
-          type: "email",
-          placeholder: "Enter email address"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "phone",
-          label: "Phone Number",
-          type: "tel",
-          placeholder: "Enter phone number"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "dateOfBirth",
-          label: "Date of Birth",
-          type: "date",
-          placeholder: "Select date of birth"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "idNumber",
-          label: "ID Number",
-          placeholder: "Enter ID number"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "address.line1",
-          label: "Street Address",
-          placeholder: "Enter street address"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "address.line2",
-          label: "Apartment, suite, or floor",
-          placeholder: "Enter apartment, suite, or floor"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "address.city",
-          label: "City",
-          placeholder: "Enter city"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "address.state",
-          label: "State",
-          placeholder: "Enter state"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "address.postalCode",
-          label: "Postal Code",
-          placeholder: "Enter postal code"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FormInput,
-        {
-          name: "address.countryCode",
-          label: "Country Code",
-          placeholder: "e.g., US"
-        }
-      )
-    ] })
-  ] }) });
-  const formValues = form.watch();
-  const idTypeLabel = formValues?.idType === "product_id" ? "Product ID" : formValues?.idType === "business_id" ? "Business ID" : formValues?.idType === "individual_id" ? "Individual ID" : "Account Number";
-  const getEntityLink = () => {
-    if (!formValues?.idValue) return null;
-    switch (formValues?.idType) {
-      case "business_id":
-        return `/business/${formValues.idValue}`;
-      case "individual_id":
-        return `/individual/${formValues.idValue}`;
-      case "account_number":
-        return `/account/${formValues.idValue}`;
-      default:
-        return null;
-    }
-  };
-  const entityLink = getEntityLink();
-  const viewContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Associated with", value: formValues?.idType === "product_id" ? "Product ID" : formValues?.idType === "business_id" ? "Business ID" : formValues?.idType === "individual_id" ? "Individual ID" : "Account Number", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: idTypeLabel,
-          value: entityLink ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: (e) => {
-                e.preventDefault();
-                navigate(entityLink);
-              },
-              className: "text-primary hover:underline font-medium text-left cursor-pointer",
-              children: formValues?.idValue || "-"
-            }
-          ) : formValues?.idValue || "-",
-          layout: "horizontal"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Email", value: formValues?.email || "-", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Phone Number", value: formValues?.phone || "-", layout: "horizontal" })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 pt-4 border-t border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID", value: "5000541", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Counterparty Type", value: /* @__PURE__ */ jsxRuntime.jsx(CounterpartyTypeBadge, { type: "BUSINESS" }), layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Number", value: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Type", value: "SSN", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Date of Birth", value: "1985-8-20", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created By", value: "admin", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created At", value: "2025-07-14", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Updated By", value: "admin", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Updated At", value: "2025-07-14", layout: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 border-t border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-foreground mb-2", children: "OFAC Details" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC date", value: "2025-07-14", layout: "horizontal" }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC status", value: "Verified", layout: "horizontal" })
+      ] })
+    ] })
+  ] });
+  const viewContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Date of Birth", value: formValues?.dateOfBirth || "-", layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Number", value: formValues?.idNumber || "-", layout: "horizontal" })
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID", value: "5000541", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Name", value: name, layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Counterparty Type", value: /* @__PURE__ */ jsxRuntime.jsx(CounterpartyTypeBadge, { type: "BUSINESS" }), layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Status", value: /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status }), layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Number", value: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Type", value: "SSN", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Date of Birth", value: "1985-8-20", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created By", value: "admin", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created At", value: "2025-07-14", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Updated By", value: "admin", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Updated At", value: "2025-07-14", layout: "horizontal" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InfoField,
-      {
-        label: "Address",
-        value: formValues?.address ? `${formValues.address.line1 || ""}${formValues.address.line2 ? ", " + formValues.address.line2 : ""}, ${formValues.address.city || ""}, ${formValues.address.state || ""} ${formValues.address.postalCode || ""}, ${formValues.address.countryCode || ""}` : "-",
-        layout: "horizontal"
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 border-t border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-foreground mb-2", children: "OFAC Details" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC date", value: "2025-07-14", layout: "horizontal" }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC status", value: "Verified", layout: "horizontal" })
+      ] })
+    ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
     EditableFormCard,
     {
-      title: "Profile Information",
-      variant: "subtle",
+      title: "Basic Info",
       className,
-      isEditing: form.isEditing,
-      onToggleEdit: form.handleToggleEdit,
-      onSave: form.handleSave,
-      onCancel: form.handleCancel,
+      isEditing,
+      onToggleEdit,
       hideActions,
       editContent,
       viewContent
@@ -11317,205 +11516,6 @@ var Counterparties = () => {
   );
 };
 var Counterparties_default = Counterparties;
-var mockCounterpartyTimeline = [
-  {
-    id: "1",
-    action: "Counterparty Created",
-    user: "admin",
-    details: "Initial counterparty setup",
-    status: "Active",
-    timestamp: "2024-01-15 10:30:00"
-  },
-  {
-    id: "2",
-    action: "Profile Updated",
-    user: "admin",
-    details: "Updated counterparty information",
-    timestamp: "2024-01-20 14:22:00"
-  },
-  {
-    id: "3",
-    action: "OFAC Check Completed",
-    user: "System",
-    details: "Automated compliance check",
-    status: "Verified",
-    timestamp: "2024-01-20 14:30:00"
-  }
-];
-var CounterpartyStatusCard = ({ isEditing, onToggleEdit, className }) => {
-  const getIcon = (action) => {
-    if (action.includes("Created")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-4 w-4" });
-    if (action.includes("Assigned")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserPlus, { className: "h-4 w-4" });
-    if (action.includes("Updated") || action.includes("Modified") || action.includes("Check")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" });
-    if (action.includes("Completed") || action.includes("Verified")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-4 w-4" });
-    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-4 w-4" });
-  };
-  const getStatusColor2 = (status) => {
-    switch (status) {
-      case "Active":
-      case "Verified":
-        return "text-success";
-      case "Pending":
-        return "text-warning";
-      default:
-        return "text-muted-foreground";
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    FormCard,
-    {
-      title: "Timeline",
-      className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: mockCounterpartyTimeline.map((event, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pl-6 pb-3", children: [
-        index !== mockCounterpartyTimeline.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[7px] top-5 bottom-0 w-[2px] bg-border" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-          "absolute left-0 top-0 flex-none",
-          getStatusColor2(event.status)
-        ), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4", children: getIcon(event.action) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-foreground", children: event.action }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
-            "by ",
-            event.user
-          ] }),
-          event.details && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: event.details }),
-          event.status && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-xs font-medium", getStatusColor2(event.status)), children: [
-            "Status: ",
-            event.status
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/70 pt-0.5", children: event.timestamp })
-        ] })
-      ] }, event.id)) })
-    }
-  );
-};
-var PaymentMethodCard = ({
-  type,
-  fiId,
-  accountNumber,
-  bankName,
-  accountType,
-  beneficiaryBankName,
-  correspondentBankId,
-  intermediaryBankId,
-  className
-}) => {
-  const getIcon = () => {
-    switch (type) {
-      case "ACH":
-        return lucideReact.Building2;
-      case "Domestic Wire":
-        return lucideReact.Landmark;
-      case "International Wire":
-        return lucideReact.Globe;
-      default:
-        return lucideReact.Building2;
-    }
-  };
-  const Icon2 = getIcon();
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("hover:bg-muted/50 transition-colors", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-start justify-between space-y-0 pb-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4 text-muted-foreground" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm", children: type })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "h-4 w-4" }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Beneficiary FI ID", value: fiId }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Account Number", value: accountNumber })
-      ] }),
-      type === "ACH" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
-        bankName && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Bank Name", value: bankName }),
-        accountType && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Account Type", value: accountType })
-      ] }),
-      type === "Domestic Wire" && bankName && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Bank Name", value: bankName }),
-      type === "International Wire" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-        beneficiaryBankName && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Beneficiary Bank Name", value: beneficiaryBankName }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
-          correspondentBankId && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Correspondent Bank ID", value: correspondentBankId }),
-          intermediaryBankId && /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Intermediary Bank ID", value: intermediaryBankId })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-var CounterpartyDetailView = ({
-  counterpartyName,
-  counterpartyType,
-  currentStatus,
-  isEditingProfile,
-  mockPaymentMethods: mockPaymentMethods2,
-  documentsTable,
-  onStatusChange,
-  onToggleProfileEdit,
-  onAddPaymentMethod,
-  onAddDocument
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    PageLayout,
-    {
-      title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: counterpartyName }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          EditableInfoField,
-          {
-            label: "",
-            value: currentStatus,
-            options: [
-              { value: "ACTIVE", label: "Active" },
-              { value: "INACTIVE", label: "Inactive" },
-              { value: "PENDING", label: "Pending" },
-              { value: "SUSPENDED", label: "Suspended" }
-            ],
-            onChange: onStatusChange,
-            renderValue: (value) => /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: value }),
-            className: "inline-block"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(CounterpartyTypeBadge, { type: counterpartyType })
-      ] }),
-      maxWidth: "full",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row items-start gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            CounterpartyProfileCard,
-            {
-              isEditing: isEditingProfile,
-              onToggleEdit: onToggleProfileEdit
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Payment Methods" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "ghost", onClick: onAddPaymentMethod, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
-                "Method"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: mockPaymentMethods2.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 py-4 text-sm text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-5 w-5 opacity-50" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No payment methods configured" })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx(ResponsiveGrid, { type: "forms", gap: "md", children: mockPaymentMethods2.map((method, index) => /* @__PURE__ */ jsxRuntime.jsx(PaymentMethodCard, { ...method }, index)) }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Documents" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "ghost", onClick: onAddDocument, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
-                "Document"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: documentsTable })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(CounterpartyStatusCard, { isEditing: false, onToggleEdit: () => {
-        } }) })
-      ] })
-    }
-  );
-};
 var mockPaymentMethods = [
   {
     type: "ACH",
@@ -14798,6 +14798,7 @@ exports.Counterparties = Counterparties_default;
 exports.CounterpartiesView = CounterpartiesView;
 exports.CounterpartyBasicInfo = CounterpartyBasicInfo;
 exports.CounterpartyDetail = CounterpartyDetail_default;
+exports.CounterpartyDetailView = CounterpartyDetailView;
 exports.CounterpartyProfileCard = CounterpartyProfileCard;
 exports.CounterpartyRecordsCard = CounterpartyRecordsCard;
 exports.CounterpartyTypeBadge = CounterpartyTypeBadge;