braid-ui 1.0.39 → 1.0.41

package/dist/index.cjs

@@ -5783,6 +5783,506 @@ var CounterpartiesView = ({
   ] });
 };
 
+// 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,
+  onEntityClick
+}) => {
+  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 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: formValues?.idValue && formValues?.idType && onEntityClick ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.preventDefault();
+                onEntityClick(formValues.idType, formValues.idValue);
+              },
+              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: ""
+};
+var gapClasses = {
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8"
+};
+var ResponsiveGrid = React15__namespace.forwardRef(
+  ({ children, type = "cards", gap = "md", editMode = false, className }, ref) => {
+    const gridClasses2 = editMode ? "grid-cols-1" : typeClasses[type];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "grid",
+          gridClasses2,
+          gapClasses[gap],
+          className
+        ),
+        children
+      }
+    );
+  }
+);
+ResponsiveGrid.displayName = "ResponsiveGrid";
+var CounterpartyDetailView = ({
+  counterpartyName,
+  counterpartyType,
+  currentStatus,
+  isEditingProfile,
+  mockPaymentMethods: mockPaymentMethods2,
+  documents,
+  onStatusChange,
+  onToggleProfileEdit,
+  onAddPaymentMethod,
+  onAddDocument,
+  onEntityClick
+}) => {
+  const documentColumns = [
+    {
+      key: "name",
+      title: "Document Name",
+      sortable: true,
+      width: "40%"
+    },
+    {
+      key: "type",
+      title: "Type",
+      sortable: true,
+      width: "20%"
+    },
+    {
+      key: "uploadedDate",
+      title: "Uploaded",
+      sortable: true,
+      width: "20%"
+    },
+    {
+      key: "status",
+      title: "Status",
+      sortable: true,
+      width: "20%",
+      align: "right",
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "capitalize", children: value })
+    }
+  ];
+  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,
+              onEntityClick
+            }
+          ),
+          /* @__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: documents.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.FileText, { className: "h-5 w-5 opacity-50" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No documents found" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+              DataTable,
+              {
+                columns: documentColumns,
+                data: documents
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__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",
@@ -5931,49 +6431,18 @@ var ACHBasicInfoCard = ({
       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 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: ""
-};
-var gapClasses = {
-  sm: "gap-3",
-  md: "gap-4",
-  lg: "gap-6",
-  xl: "gap-8"
-};
-var ResponsiveGrid = React15__namespace.forwardRef(
-  ({ children, type = "cards", gap = "md", editMode = false, className }, ref) => {
-    const gridClasses2 = editMode ? "grid-cols-1" : typeClasses[type];
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "grid",
-          gridClasses2,
-          gapClasses[gap],
-          className
-        ),
-        children
-      }
-    );
-  }
-);
-ResponsiveGrid.displayName = "ResponsiveGrid";
+      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,
@@ -6190,32 +6659,6 @@ var BankingDetailsCard = ({ isEditing, onToggleEdit, className }) => {
     }
   );
 };
-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 BasicInfoCard = ({ isEditing, onToggleEdit, className, hideActions }) => {
   const [name, setName] = React15.useState("John wire hot");
   const [status, setStatus] = React15.useState("ACTIVE");
@@ -6274,245 +6717,26 @@ var BasicInfoCard = ({ isEditing, onToggleEdit, className, hideActions }) => {
       /* @__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", 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"
-      }
-    )
+      /* @__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: "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 +11541,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",
@@ -11541,39 +11566,24 @@ var mockPaymentMethods = [
 ];
 var CounterpartyDetail = () => {
   const { id } = reactRouterDom.useParams();
-  reactRouterDom.useNavigate();
+  const navigate = reactRouterDom.useNavigate();
   const counterparty = mockCounterpartiesList.find((c) => c.id === id);
   const counterpartyDocuments = id ? mockBusinessDocuments[id] || [] : [];
   const [currentStatus, setCurrentStatus] = React15.useState(counterparty?.status || "ACTIVE");
   const [isEditingProfile, setIsEditingProfile] = React15.useState(false);
-  const documentColumns = [
-    {
-      key: "name",
-      title: "Document Name",
-      sortable: true,
-      width: "40%"
-    },
-    {
-      key: "type",
-      title: "Type",
-      sortable: true,
-      width: "20%"
-    },
-    {
-      key: "uploadedDate",
-      title: "Uploaded",
-      sortable: true,
-      width: "20%"
-    },
-    {
-      key: "status",
-      title: "Status",
-      sortable: true,
-      width: "20%",
-      align: "right",
-      render: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "capitalize", children: value })
+  const handleEntityClick = (entityType, entityId) => {
+    switch (entityType) {
+      case "business_id":
+        navigate(`/business/${entityId}`);
+        break;
+      case "individual_id":
+        navigate(`/individual/${entityId}`);
+        break;
+      case "account_number":
+        navigate(`/account/${entityId}`);
+        break;
     }
-  ];
+  };
   const handleStatusChange = (newStatus) => {
     setCurrentStatus(newStatus);
   };
@@ -11586,21 +11596,6 @@ var CounterpartyDetail = () => {
   const handleAddDocument = () => {
     console.log("Add document");
   };
-  const documentsTable = React15.useMemo(() => {
-    if (counterpartyDocuments.length === 0) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 py-4 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-5 w-5 opacity-50" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No documents found" })
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      DataTable,
-      {
-        columns: documentColumns,
-        data: counterpartyDocuments
-      }
-    );
-  }, [counterpartyDocuments, documentColumns]);
   if (!counterparty) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold mb-2", children: "Counterparty Not Found" }),
@@ -11615,11 +11610,12 @@ var CounterpartyDetail = () => {
       currentStatus,
       isEditingProfile,
       mockPaymentMethods,
-      documentsTable,
+      documents: counterpartyDocuments,
       onStatusChange: handleStatusChange,
       onToggleProfileEdit: handleToggleProfileEdit,
       onAddPaymentMethod: handleAddPaymentMethod,
-      onAddDocument: handleAddDocument
+      onAddDocument: handleAddDocument,
+      onEntityClick: handleEntityClick
     }
   );
 };
@@ -14798,6 +14794,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;