braid-ui 1.0.37 → 1.0.39

package/dist/index.cjs

@@ -22,11 +22,11 @@ var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var dateFns = require('date-fns');
 var reactDayPicker = require('react-day-picker');
 var PopoverPrimitive = require('@radix-ui/react-popover');
+var sonner = require('sonner');
 var LabelPrimitive = require('@radix-ui/react-label');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var nextThemes = require('next-themes');
-var sonner = require('sonner');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var ToastPrimitives = require('@radix-ui/react-toast');
 
@@ -556,8 +556,8 @@ var reducer = (state, action) => {
       if (toastId) {
         addToRemoveQueue(toastId);
       } else {
-        state.toasts.forEach((toast4) => {
-          addToRemoveQueue(toast4.id);
+        state.toasts.forEach((toast5) => {
+          addToRemoveQueue(toast5.id);
         });
       }
       return {
@@ -3588,24 +3588,26 @@ var BusinessProfileCard = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "achCompanyId",
-        label: "ACH Company ID",
-        placeholder: "10-digit company ID"
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "productId",
-        label: "Product ID",
-        type: "number",
-        placeholder: "Product ID",
-        disabled: true
-      }
-    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "achCompanyId",
+          label: "ACH Company ID",
+          placeholder: "10-digit company ID"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "productId",
+          label: "Product ID",
+          type: "number",
+          placeholder: "Product ID",
+          disabled: true
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-muted-foreground mt-6", children: "Contact Person" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3664,6 +3666,34 @@ var BusinessProfileCard = ({
         /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Website", value: formValues?.website || "-", layout: "horizontal" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Business Phone", value: formValues?.mobilePhone || "-", layout: "horizontal" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Address",
+          value: formValues?.address ? (() => {
+            const parts = [];
+            if (formValues.address.line1) parts.push(formValues.address.line1);
+            if (formValues.address.line2) parts.push(formValues.address.line2);
+            const cityStateZip = [
+              formValues.address.city,
+              formValues.address.state,
+              formValues.address.postalCode
+            ].filter(Boolean).join(" ");
+            if (cityStateZip) parts.push(cityStateZip);
+            if (formValues.address.countryCode) parts.push(formValues.address.countryCode);
+            return parts.length > 0 ? parts.join(", ") : "-";
+          })() : "-",
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "MCC", value: formValues?.mcc || "-", layout: "horizontal" }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "NAICS", value: formValues?.naics || "-", layout: "horizontal" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ACH Company ID", value: formValues?.achCompanyId || "-", layout: "horizontal" }),
+        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Product ID", value: formValues?.productId?.toString() || "-", layout: "horizontal" })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           InfoField,
@@ -3689,32 +3719,6 @@ var BusinessProfileCard = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Address",
-          value: formValues?.address ? (() => {
-            const parts = [];
-            if (formValues.address.line1) parts.push(formValues.address.line1);
-            if (formValues.address.line2) parts.push(formValues.address.line2);
-            const cityStateZip = [
-              formValues.address.city,
-              formValues.address.state,
-              formValues.address.postalCode
-            ].filter(Boolean).join(" ");
-            if (cityStateZip) parts.push(cityStateZip);
-            if (formValues.address.countryCode) parts.push(formValues.address.countryCode);
-            return parts.length > 0 ? parts.join(", ") : "-";
-          })() : "-",
-          layout: "horizontal"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "MCC", value: formValues?.mcc || "-", layout: "horizontal" }),
-        /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "NAICS", value: formValues?.naics || "-", layout: "horizontal" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ACH Company ID", value: formValues?.achCompanyId || "-", layout: "horizontal" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Product ID", value: formValues?.productId?.toString() || "-", layout: "horizontal" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-muted-foreground mt-6", children: "Contact Person" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "First Name", value: formValues?.contactPersonFirstName || "-", layout: "horizontal" }),
@@ -4288,93 +4292,575 @@ var PageLayout = React15__namespace.forwardRef(
   }
 );
 PageLayout.displayName = "PageLayout";
-var UBOCard = ({ ubos, onUBOClick }) => {
-  const columns3 = [
-    {
-      key: "name",
-      title: "Name",
-      sortable: true,
-      width: "40%",
-      render: (value, row) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => onUBOClick(row.customerId),
-          className: "text-primary hover:underline font-medium text-left",
-          children: value
-        }
-      )
-    },
-    {
-      key: "title",
-      title: "Title",
-      sortable: true,
-      width: "40%"
-    },
-    {
-      key: "ownershipPercentage",
-      title: "Ownership %",
-      sortable: true,
-      width: "20%",
-      align: "right",
-      render: (value) => `${value}%`
-    }
-  ];
-  return /* @__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: "Ultimate Beneficial Owners (UBO)" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "ghost", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
-        "Add UBO"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: ubos.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.Users, { className: "h-5 w-5 opacity-50" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No UBOs recorded" })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-      DataTable,
+var FormField = React15__namespace.forwardRef(
+  ({ label, description, error, required, children, className, layout = "vertical" }, ref) => {
+    const isHorizontal = layout === "horizontal";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        columns: columns3,
-        data: ubos
+        ref,
+        className: cn(
+          "space-y-2",
+          isHorizontal && "grid grid-cols-1 md:grid-cols-3 gap-4 items-start space-y-0",
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-1", isHorizontal && "pt-2"), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-foreground", children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+            ] }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(isHorizontal && "md:col-span-2"), children: [
+            children,
+            error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive mt-1", children: error })
+          ] })
+        ]
       }
-    ) })
-  ] });
+    );
+  }
+);
+FormField.displayName = "FormField";
+var spacingClasses = {
+  sm: "space-y-3",
+  md: "space-y-4",
+  lg: "space-y-6"
 };
-var BusinessDocuments = ({ businessId, documents, onDocumentUpload }) => {
-  const [isUploading, setIsUploading] = React15.useState(false);
-  const [showUploadDialog, setShowUploadDialog] = React15.useState(false);
-  const [selectedFile, setSelectedFile] = React15.useState(null);
-  const [documentName, setDocumentName] = React15.useState("");
-  const [description, setDescription] = React15.useState("");
-  const [documentType, setDocumentType] = React15.useState("");
-  const handleFileSelect = (e) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    setSelectedFile(file);
-    setDocumentName(file.name);
-  };
-  const handleUploadSubmit = async () => {
-    if (!selectedFile || !documentName || !documentType) {
-      toast({
-        title: "Missing Information",
-        description: "Please fill in all required fields",
-        variant: "destructive"
-      });
-      return;
+var gridClasses = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 md:grid-cols-2",
+  3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+};
+var FormSection = React15__namespace.forwardRef(
+  ({
+    title,
+    description,
+    children,
+    className,
+    spacing: spacing2 = "md",
+    layout = "vertical",
+    columns: columns3 = 2
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("space-y-4", className), children: [
+      (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+        layout === "grid" ? `grid gap-4 ${gridClasses[columns3]}` : spacingClasses[spacing2]
+      ), children })
+    ] });
+  }
+);
+FormSection.displayName = "FormSection";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3 pointer-events-auto", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        button_previous: "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        button_next: "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        day: "h-9 w-9 text-center text-sm p-0 relative hover:bg-accent hover:text-accent-foreground rounded-md",
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal"
+        ),
+        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
+        today: "bg-accent text-accent-foreground",
+        outside: "text-muted-foreground opacity-50",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
+        ...classNames
+      },
+      ...props
     }
-    setIsUploading(true);
-    try {
-      await onDocumentUpload(selectedFile, {
-        name: documentName,
-        description,
-        type: documentType
-      });
-      toast({
-        title: "Upload Successful",
-        description: `${documentName} uploaded successfully`
-      });
-      setShowUploadDialog(false);
-      resetForm();
-    } catch (error) {
+  );
+}
+Calendar.displayName = "Calendar";
+var Popover = PopoverPrimitive__namespace.Root;
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverContent = React15__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  PopoverPrimitive__namespace.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
+function DatePicker({
+  date,
+  onDateChange,
+  placeholder = "Pick a date",
+  disabled = false,
+  className,
+  buttonClassName,
+  calendarClassName,
+  align = "start",
+  disabledDates,
+  label,
+  wrapperClassName
+}) {
+  const [open, setOpen] = React15__namespace.useState(false);
+  const handleSelect = (selectedDate) => {
+    onDateChange?.(selectedDate);
+    setOpen(false);
+  };
+  const picker = /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        variant: "outline",
+        disabled,
+        className: cn(
+          "justify-start text-left font-normal",
+          !date && "text-muted-foreground",
+          buttonClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 h-4 w-4" }),
+          date ? dateFns.format(date, "MM/dd/yyyy") : placeholder
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: cn("w-auto p-0", className), align, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Calendar,
+      {
+        mode: "single",
+        selected: date,
+        onSelect: handleSelect,
+        disabled: disabledDates,
+        initialFocus: true,
+        className: cn("pointer-events-auto", calendarClassName)
+      }
+    ) })
+  ] });
+  if (label) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2", wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: label }),
+      picker
+    ] });
+  }
+  return picker;
+}
+var uboSchema = zod.z.object({
+  legalFirstName: zod.z.string().min(1, "Legal first name is required"),
+  legalLastName: zod.z.string().min(1, "Legal last name is required"),
+  email: zod.z.string().email("Invalid email address"),
+  title: zod.z.string().min(1, "Title is required"),
+  ownershipPercentage: zod.z.number().min(0).max(100, "Must be between 0 and 100"),
+  idNumber: zod.z.string().min(1, "ID number is required"),
+  ssn: zod.z.string().min(1, "SSN is required"),
+  dateOfBirth: zod.z.date({
+    message: "Date of birth is required"
+  }),
+  street: zod.z.string().min(1, "Street is required"),
+  apartment: zod.z.string().optional(),
+  city: zod.z.string().min(1, "City is required"),
+  state: zod.z.string().min(1, "State is required"),
+  country: zod.z.string().min(1, "Country is required")
+});
+var titleOptions = [
+  { value: "CEO", label: "CEO" },
+  { value: "CFO", label: "CFO" },
+  { value: "CTO", label: "CTO" },
+  { value: "COO", label: "COO" },
+  { value: "President", label: "President" },
+  { value: "Vice President", label: "Vice President" },
+  { value: "Director", label: "Director" },
+  { value: "Manager", label: "Manager" },
+  { value: "Board Member", label: "Board Member" },
+  { value: "Partner", label: "Partner" },
+  { value: "Other", label: "Other" }
+];
+var AddUBODialog = ({ open, onOpenChange, onSubmit }) => {
+  const [isSubmitting, setIsSubmitting] = React15.useState(false);
+  const form = reactHookForm.useForm({
+    resolver: zod$1.zodResolver(uboSchema),
+    defaultValues: {
+      legalFirstName: "",
+      legalLastName: "",
+      email: "",
+      title: "",
+      ownershipPercentage: 0,
+      idNumber: "",
+      ssn: "",
+      street: "",
+      apartment: "",
+      city: "",
+      state: "",
+      country: "US"
+    }
+  });
+  const handleSubmit = async (data) => {
+    setIsSubmitting(true);
+    try {
+      await onSubmit(data);
+      form.reset();
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Error adding UBO:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleCancel = () => {
+    form.reset();
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-3xl max-h-[90vh] overflow-y-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add Ultimate Beneficial Owner" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { layout: "grid", columns: 2, spacing: "md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "legalFirstName",
+            label: "Legal first name",
+            placeholder: "Enter first name"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "legalLastName",
+            label: "Legal last name",
+            placeholder: "Enter last name"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormSection, { layout: "vertical", spacing: "md", children: /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "email",
+          label: "Email",
+          type: "email",
+          placeholder: "Enter email address"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { layout: "grid", columns: 2, spacing: "md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormSelect,
+          {
+            name: "title",
+            label: "Title",
+            placeholder: "Select title",
+            options: titleOptions
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "ownershipPercentage",
+            label: "Ownership %",
+            type: "number",
+            placeholder: "Enter ownership percentage"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { layout: "grid", columns: 2, spacing: "md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "idNumber",
+            label: "ID Number",
+            placeholder: "Enter ID number"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "ssn",
+            label: "SSN",
+            placeholder: "Enter SSN"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormSection, { layout: "vertical", spacing: "md", children: /* @__PURE__ */ jsxRuntime.jsx(FormField, { label: "Date of birth", children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactHookForm.Controller,
+        {
+          name: "dateOfBirth",
+          control: form.control,
+          render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
+            DatePicker,
+            {
+              date: field.value,
+              onDateChange: field.onChange,
+              placeholder: "MM/DD/YYYY"
+            }
+          )
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { title: "Address Details", layout: "vertical", spacing: "md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "street",
+            label: "Street",
+            placeholder: "Enter street address"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "apartment",
+            label: "Apartment, suite, or floor",
+            placeholder: "Enter apartment, suite, or floor (optional)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { layout: "grid", columns: 2, spacing: "md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FormInput,
+            {
+              name: "city",
+              label: "City",
+              placeholder: "Enter city"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FormInput,
+            {
+              name: "state",
+              label: "State",
+              placeholder: "Enter state"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "country",
+            label: "Country",
+            placeholder: "Enter country"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "outline", onClick: handleCancel, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? "Adding..." : "Add UBO" })
+      ] })
+    ] }) })
+  ] }) });
+};
+var UBOCard = ({ ubos, onUBOClick }) => {
+  const [isDialogOpen, setIsDialogOpen] = React15.useState(false);
+  const handleAddUBO = (data) => {
+    console.log("New UBO data:", data);
+    sonner.toast.success("UBO added successfully");
+  };
+  const columns3 = [
+    {
+      key: "name",
+      title: "Name",
+      sortable: true,
+      width: "40%",
+      render: (value, row) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onUBOClick(row.customerId),
+          className: "text-primary hover:underline font-medium text-left",
+          children: value
+        }
+      )
+    },
+    {
+      key: "title",
+      title: "Title",
+      sortable: true,
+      width: "40%"
+    },
+    {
+      key: "ownershipPercentage",
+      title: "Ownership %",
+      sortable: true,
+      width: "20%",
+      align: "right",
+      render: (value) => `${value}%`
+    }
+  ];
+  return /* @__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: "Ultimate Beneficial Owners (UBO)" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "ghost", onClick: () => setIsDialogOpen(true), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
+        "Add UBO"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: ubos.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.Users, { className: "h-5 w-5 opacity-50" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No UBOs recorded" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      DataTable,
+      {
+        columns: columns3,
+        data: ubos
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AddUBODialog,
+      {
+        open: isDialogOpen,
+        onOpenChange: setIsDialogOpen,
+        onSubmit: handleAddUBO
+      }
+    )
+  ] });
+};
+var accountSchema = zod.z.object({
+  accountName: zod.z.string().min(1, "Account name is required"),
+  accountType: zod.z.string().min(1, "Account type is required"),
+  fundingFromAccount: zod.z.string().optional(),
+  sweepToAccount: zod.z.string().optional()
+});
+var AddAccountDialog = ({
+  open,
+  onOpenChange,
+  onSubmit,
+  existingAccounts = []
+}) => {
+  const [isLoading, setIsLoading] = React15.useState(false);
+  const form = reactHookForm.useForm({
+    resolver: zod$1.zodResolver(accountSchema),
+    defaultValues: {
+      accountName: "",
+      accountType: void 0,
+      fundingFromAccount: "",
+      sweepToAccount: ""
+    }
+  });
+  const handleSubmit = async (data) => {
+    setIsLoading(true);
+    try {
+      await onSubmit?.(data);
+      form.reset();
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Error creating account:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  existingAccounts.map((acc) => ({
+    value: acc.id,
+    label: `${acc.number}${acc.type ? ` (${acc.type})` : ""}`
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-[600px] max-h-[90vh] overflow-y-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add Account" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { spacing: "md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "accountName",
+            label: "Account Name",
+            placeholder: "Enter account name",
+            required: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormSelect,
+          {
+            name: "accountType",
+            label: "Account Type",
+            placeholder: "Select account type",
+            options: [
+              { value: "CHECKING", label: "Checking" },
+              { value: "SAVINGS", label: "Savings" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "fundingFromAccount",
+            label: "Funding from Account",
+            placeholder: "Enter funding account"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FormInput,
+          {
+            name: "sweepToAccount",
+            label: "Sweep to Account",
+            placeholder: "Enter sweep account"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => onOpenChange(false),
+            disabled: isLoading,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", disabled: isLoading, children: isLoading ? "Creating..." : "Create Account" })
+      ] })
+    ] }) })
+  ] }) });
+};
+var BusinessDocuments = ({ businessId, documents, onDocumentUpload }) => {
+  const [isUploading, setIsUploading] = React15.useState(false);
+  const [showUploadDialog, setShowUploadDialog] = React15.useState(false);
+  const [selectedFile, setSelectedFile] = React15.useState(null);
+  const [documentName, setDocumentName] = React15.useState("");
+  const [description, setDescription] = React15.useState("");
+  const [documentType, setDocumentType] = React15.useState("");
+  const handleFileSelect = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setSelectedFile(file);
+    setDocumentName(file.name);
+  };
+  const handleUploadSubmit = async () => {
+    if (!selectedFile || !documentName || !documentType) {
+      toast({
+        title: "Missing Information",
+        description: "Please fill in all required fields",
+        variant: "destructive"
+      });
+      return;
+    }
+    setIsUploading(true);
+    try {
+      await onDocumentUpload(selectedFile, {
+        name: documentName,
+        description,
+        type: documentType
+      });
+      toast({
+        title: "Upload Successful",
+        description: `${documentName} uploaded successfully`
+      });
+      setShowUploadDialog(false);
+      resetForm();
+    } catch (error) {
       toast({
         title: "Upload Failed",
         description: "Failed to upload document. Please try again.",
@@ -4676,7 +5162,11 @@ var BusinessDetailView = ({
   onUBOClick,
   onDocumentUpload
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const [showAddAccountDialog, setShowAddAccountDialog] = React15.useState(false);
+  const handleAddAccount = (data) => {
+    console.log("New account data:", data);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     PageLayout,
     {
       title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
@@ -4715,164 +5205,64 @@ var BusinessDetailView = ({
         }
       ],
       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(
-            BusinessProfileCard,
-            {
-              data: businessProfile,
-              identityVerification,
-              isEditing: isEditingProfile,
-              onToggleEdit: onToggleProfileEdit,
-              onDataChange: onProfileDataChange
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(UBOCard, { ubos: businessUBOs, onUBOClick }),
-          /* @__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: "External Accounts" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "ghost", onClick: onAddAccount, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
-                "Account"
-              ] })
+      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(
+              BusinessProfileCard,
+              {
+                data: businessProfile,
+                identityVerification,
+                isEditing: isEditingProfile,
+                onToggleEdit: onToggleProfileEdit,
+                onDataChange: onProfileDataChange
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(UBOCard, { ubos: businessUBOs, onUBOClick }),
+            /* @__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: "External Accounts" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", variant: "ghost", onClick: () => setShowAddAccountDialog(true), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
+                  "Account"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: businessAccounts.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 external accounts found" })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                DataTable,
+                {
+                  columns: accountColumns,
+                  data: businessAccounts
+                }
+              ) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: businessAccounts.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 external accounts found" })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-              DataTable,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              BusinessDocuments,
               {
-                columns: accountColumns,
-                data: businessAccounts
+                businessId: business.id,
+                documents: businessDocuments,
+                onDocumentUpload
               }
-            ) })
+            )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BusinessDocuments,
-            {
-              businessId: business.id,
-              documents: businessDocuments,
-              onDocumentUpload
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(BusinessStatusCard, { isEditing: false, onToggleEdit: () => {
+          } }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(BusinessStatusCard, { isEditing: false, onToggleEdit: () => {
-        } }) })
-      ] })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AddAccountDialog,
+          {
+            open: showAddAccountDialog,
+            onOpenChange: setShowAddAccountDialog,
+            onSubmit: handleAddAccount,
+            existingAccounts: businessAccounts
+          }
+        )
+      ]
     }
   );
 };
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactDayPicker.DayPicker,
-    {
-      showOutsideDays,
-      className: cn("p-3 pointer-events-auto", className),
-      classNames: {
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        button_previous: "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-        button_next: "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-        month_grid: "w-full border-collapse space-y-1",
-        weekdays: "flex",
-        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        week: "flex w-full mt-2",
-        day: "h-9 w-9 text-center text-sm p-0 relative hover:bg-accent hover:text-accent-foreground rounded-md",
-        day_button: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal"
-        ),
-        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
-        today: "bg-accent text-accent-foreground",
-        outside: "text-muted-foreground opacity-50",
-        disabled: "text-muted-foreground opacity-50",
-        hidden: "invisible",
-        ...classNames
-      },
-      ...props
-    }
-  );
-}
-Calendar.displayName = "Calendar";
-var Popover = PopoverPrimitive__namespace.Root;
-var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React15__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  PopoverPrimitive__namespace.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
-function DatePicker({
-  date,
-  onDateChange,
-  placeholder = "Pick a date",
-  disabled = false,
-  className,
-  buttonClassName,
-  calendarClassName,
-  align = "start",
-  disabledDates,
-  label,
-  wrapperClassName
-}) {
-  const [open, setOpen] = React15__namespace.useState(false);
-  const handleSelect = (selectedDate) => {
-    onDateChange?.(selectedDate);
-    setOpen(false);
-  };
-  const picker = /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        variant: "outline",
-        disabled,
-        className: cn(
-          "justify-start text-left font-normal",
-          !date && "text-muted-foreground",
-          buttonClassName
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 h-4 w-4" }),
-          date ? dateFns.format(date, "MM/dd/yyyy") : placeholder
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: cn("w-auto p-0", className), align, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Calendar,
-      {
-        mode: "single",
-        selected: date,
-        onSelect: handleSelect,
-        disabled: disabledDates,
-        initialFocus: true,
-        className: cn("pointer-events-auto", calendarClassName)
-      }
-    ) })
-  ] });
-  if (label) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-2", wrapperClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: label }),
-      picker
-    ] });
-  }
-  return picker;
-}
 var BusinessFiltersSheet = ({
   filters,
   onFilterChange,
@@ -5255,98 +5645,137 @@ var CreateBusinessView = ({
     }
   );
 };
+var CounterpartyFiltersSheet = ({
+  filters,
+  onFilterChange,
+  onResetFilters
+}) => {
+  const [localFilters, setLocalFilters] = React15.useState(filters);
+  const [open, setOpen] = React15.useState(false);
+  React15.useEffect(() => {
+    setLocalFilters(filters);
+  }, [filters]);
+  const handleLocalFilterChange = (field, value) => {
+    setLocalFilters((prev) => ({ ...prev, [field]: value }));
+  };
+  const handleApplyFilters = () => {
+    Object.entries(localFilters).forEach(([key, value]) => {
+      onFilterChange(key, value);
+    });
+    setOpen(false);
+  };
+  const handleResetFilters = () => {
+    const resetFilters = {
+      name: "",
+      type: "",
+      status: "",
+      createdDateStart: void 0,
+      createdDateEnd: void 0
+    };
+    setLocalFilters(resetFilters);
+    onResetFilters();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", className: "gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4" }),
+      "Filters"
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-xl overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Counterparty Filters" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Name",
+            value: localFilters.name,
+            onChange: (e) => handleLocalFilterChange("name", e.target.value),
+            placeholder: "Enter counterparty name"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedSelect,
+          {
+            label: "Type",
+            value: localFilters.type,
+            onValueChange: (value) => handleLocalFilterChange("type", value),
+            placeholder: "Select type",
+            options: [
+              { value: "BUSINESS", label: "Business" },
+              { value: "INDIVIDUAL", label: "Individual" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedSelect,
+          {
+            label: "Status",
+            value: localFilters.status,
+            onValueChange: (value) => handleLocalFilterChange("status", value),
+            placeholder: "Select status",
+            options: [
+              { value: "ACTIVE", label: "Active" },
+              { value: "INACTIVE", label: "Inactive" },
+              { value: "PENDING", label: "Pending" },
+              { value: "SUSPENDED", label: "Suspended" }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Created Date Start" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DatePicker,
+              {
+                date: localFilters.createdDateStart,
+                onDateChange: (date) => handleLocalFilterChange("createdDateStart", date),
+                placeholder: "MM/DD/YYYY",
+                buttonClassName: "w-full",
+                className: "bg-background z-50"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Created Date End" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DatePicker,
+              {
+                date: localFilters.createdDateEnd,
+                onDateChange: (date) => handleLocalFilterChange("createdDateEnd", date),
+                placeholder: "MM/DD/YYYY",
+                buttonClassName: "w-full",
+                className: "bg-background z-50"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SheetFooter, { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: handleResetFilters, className: "flex-1", children: "Reset Filters" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleApplyFilters, className: "flex-1", children: "Apply Filters" })
+      ] })
+    ] })
+  ] });
+};
 var CounterpartiesView = ({
   table,
   filters,
   onFilterChange,
   onResetFilters,
-  onApplyFilters,
   onCreateCounterparty
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-screen bg-gradient-subtle", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-6 max-w-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground mb-2", children: "Counterparties" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground", children: "Counterparties" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", className: "gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4" }),
-            "Filters"
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-xl overflow-y-auto", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Counterparty Filters" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-6", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                EnhancedInput,
-                {
-                  label: "Name",
-                  value: filters.name,
-                  onChange: (e) => onFilterChange("name", e.target.value),
-                  placeholder: "Enter counterparty name"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                EnhancedSelect,
-                {
-                  label: "Type",
-                  value: filters.type,
-                  onValueChange: (value) => onFilterChange("type", value),
-                  placeholder: "Select type",
-                  options: [
-                    { value: "BUSINESS", label: "Business" },
-                    { value: "INDIVIDUAL", label: "Individual" }
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                EnhancedSelect,
-                {
-                  label: "Status",
-                  value: filters.status,
-                  onValueChange: (value) => onFilterChange("status", value),
-                  placeholder: "Select status",
-                  options: [
-                    { value: "ACTIVE", label: "Active" },
-                    { value: "INACTIVE", label: "Inactive" },
-                    { value: "PENDING", label: "Pending" },
-                    { value: "SUSPENDED", label: "Suspended" }
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Created Date Start" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DatePicker,
-                    {
-                      date: filters.createdDateStart,
-                      onDateChange: (date) => onFilterChange("createdDateStart", date),
-                      placeholder: "MM/DD/YYYY",
-                      buttonClassName: "w-full",
-                      className: "bg-background z-50"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Created Date End" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DatePicker,
-                    {
-                      date: filters.createdDateEnd,
-                      onDateChange: (date) => onFilterChange("createdDateEnd", date),
-                      placeholder: "MM/DD/YYYY",
-                      buttonClassName: "w-full",
-                      className: "bg-background z-50"
-                    }
-                  )
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(SheetFooter, { className: "gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: onResetFilters, children: "Reset Filters" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onApplyFilters, children: "Apply Filters" })
-            ] })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CounterpartyFiltersSheet,
+          {
+            filters,
+            onFilterChange,
+            onResetFilters
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onCreateCounterparty, children: "Create Counterparty" })
       ] })
     ] }) }) }),
@@ -6450,39 +6879,6 @@ var CounterpartyBasicInfo = ({ onDataChange }) => {
     ] })
   ] });
 };
-var spacingClasses = {
-  sm: "space-y-3",
-  md: "space-y-4",
-  lg: "space-y-6"
-};
-var gridClasses = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 md:grid-cols-2",
-  3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-  4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
-};
-var FormSection = React15__namespace.forwardRef(
-  ({
-    title,
-    description,
-    children,
-    className,
-    spacing: spacing2 = "md",
-    layout = "vertical",
-    columns: columns3 = 2
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("space-y-4", className), children: [
-      (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground", children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-        layout === "grid" ? `grid gap-4 ${gridClasses[columns3]}` : spacingClasses[spacing2]
-      ), children })
-    ] });
-  }
-);
-FormSection.displayName = "FormSection";
 var IntermediaryFI = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border pb-4", children: [
@@ -7949,36 +8345,6 @@ var EntityCard = React15__namespace.forwardRef(
   }
 );
 EntityCard.displayName = "EntityCard";
-var FormField = React15__namespace.forwardRef(
-  ({ label, description, error, required, children, className, layout = "vertical" }, ref) => {
-    const isHorizontal = layout === "horizontal";
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "space-y-2",
-          isHorizontal && "grid grid-cols-1 md:grid-cols-3 gap-4 items-start space-y-0",
-          className
-        ),
-        children: [
-          label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-1", isHorizontal && "pt-2"), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-foreground", children: [
-              label,
-              required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
-            ] }),
-            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: description })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(isHorizontal && "md:col-span-2"), children: [
-            children,
-            error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive mt-1", children: error })
-          ] })
-        ]
-      }
-    );
-  }
-);
-FormField.displayName = "FormField";
 var variantStyles = {
   default: "",
   success: "border-success/20 bg-success/5",
@@ -9357,39 +9723,6 @@ var AccountStatusCard = ({ isEditing, onToggleEdit, className }) => {
     }
   );
 };
-var AccountBalanceCard = React15__namespace.default.forwardRef(
-  ({ balance, availableBalance, accountNumber, accountType, className }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Card,
-      {
-        ref,
-        className: cn(
-          "border-primary/20 bg-gradient-to-br from-primary/5 via-primary/3 to-background",
-          className
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-4 w-4 text-primary" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: accountNumber }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\u2022" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground capitalize", children: accountType })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-8", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Account Balance" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-foreground tracking-tight", children: balance })
-            ] }),
-            availableBalance && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Available Balance" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-foreground tracking-tight", children: availableBalance })
-            ] })
-          ] })
-        ] }) })
-      }
-    );
-  }
-);
-AccountBalanceCard.displayName = "AccountBalanceCard";
 var accountInfoSchema = zod.z.object({
   accountName: zod.z.string().trim().min(1, "Account name is required").max(100, "Account name must be less than 100 characters"),
   canAcceptSweep: zod.z.enum(["Yes", "No"]),
@@ -9419,7 +9752,7 @@ var AccountDetail = () => {
   }
   const formValues = form.watch();
   const customerPath = account.customerType === "business" ? `/business/${account.customerId}` : `/individual/${account.customerId}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     PageLayout,
     {
       title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
@@ -9462,29 +9795,37 @@ var AccountDetail = () => {
         }
       ],
       maxWidth: "full",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AccountBalanceCard,
-          {
-            balance: account.balance,
-            availableBalance: account.balance,
-            accountNumber: account.number,
-            accountType: account.type,
-            className: "mb-4"
-          }
-        ),
-        /* @__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(
-              EditableFormCard,
-              {
-                title: "Account Information",
-                variant: "subtle",
-                isEditing: form.isEditing,
-                onToggleEdit: form.handleToggleEdit,
-                onSave: form.handleSave,
-                onCancel: form.handleCancel,
-                viewContent: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      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(
+            EditableFormCard,
+            {
+              title: "Account Information",
+              variant: "subtle",
+              isEditing: form.isEditing,
+              onToggleEdit: form.handleToggleEdit,
+              onSave: form.handleSave,
+              onCancel: form.handleCancel,
+              viewContent: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 p-6 rounded-lg bg-gradient-to-br from-primary/10 via-primary/5 to-background border border-primary/20", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-4 w-4 text-primary" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: account.number }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\u2022" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground capitalize", children: account.type })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-8", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Account Balance" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-foreground tracking-tight", children: account.balance })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Available Balance" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-foreground tracking-tight", children: account.balance })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     InfoField,
                     {
@@ -9548,8 +9889,28 @@ var AccountDetail = () => {
                       value: formValues.sweepAccountNumber || "-"
                     }
                   )
+                ] })
+              ] }),
+              editContent: /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 p-6 rounded-lg bg-gradient-to-br from-primary/10 via-primary/5 to-background border border-primary/20", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-4 w-4 text-primary" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: account.number }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\u2022" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground capitalize", children: account.type })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-8", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Account Balance" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-foreground tracking-tight", children: account.balance })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Available Balance" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-foreground tracking-tight", children: account.balance })
+                    ] })
+                  ] })
                 ] }),
-                editContent: /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, 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-4", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     InfoField,
                     {
@@ -9621,18 +9982,18 @@ var AccountDetail = () => {
                       placeholder: "Enter sweep account number"
                     }
                   )
-                ] }) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Fees" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-8 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Fees information coming soon" }) }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(AccountStatusCard, { isEditing: false, onToggleEdit: () => {
-          } }) })
-        ] })
-      ]
+                ] })
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Fees" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-8 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Fees information coming soon" }) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(AccountStatusCard, { isEditing: false, onToggleEdit: () => {
+        } }) })
+      ] })
     }
   );
 };
@@ -10867,8 +11228,6 @@ var Counterparties = () => {
       createdDateEnd: void 0
     });
   }, []);
-  const handleApplyFilters = React15.useCallback(() => {
-  }, []);
   const handleSort = React15.useCallback((key) => {
     if (sortBy === key) {
       setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
@@ -10953,7 +11312,6 @@ var Counterparties = () => {
       filters,
       onFilterChange: handleFilterChange,
       onResetFilters: handleResetFilters,
-      onApplyFilters: handleApplyFilters,
       onCreateCounterparty: handleCreateCounterparty
     }
   );
@@ -11080,8 +11438,83 @@ var PaymentMethodCard = ({
           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 = [
   {
@@ -11141,6 +11574,33 @@ var CounterpartyDetail = () => {
       render: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "capitalize", children: value })
     }
   ];
+  const handleStatusChange = (newStatus) => {
+    setCurrentStatus(newStatus);
+  };
+  const handleToggleProfileEdit = () => {
+    setIsEditingProfile(!isEditingProfile);
+  };
+  const handleAddPaymentMethod = () => {
+    console.log("Add payment method");
+  };
+  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" }),
@@ -11148,74 +11608,18 @@ var CounterpartyDetail = () => {
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    PageLayout,
+    CounterpartyDetailView,
     {
-      title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: counterparty.name }),
-        /* @__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: (newStatus) => setCurrentStatus(newStatus),
-            renderValue: (value) => /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: value }),
-            className: "inline-block"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(CounterpartyTypeBadge, { type: counterparty.type })
-      ] }),
-      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: () => setIsEditingProfile(!isEditingProfile)
-            }
-          ),
-          /* @__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", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
-                "Method"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: mockPaymentMethods.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: mockPaymentMethods.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", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-1" }),
-                "Document"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: counterpartyDocuments.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: counterpartyDocuments
-              }
-            ) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(CounterpartyStatusCard, { isEditing: false, onToggleEdit: () => {
-        } }) })
-      ] })
+      counterpartyName: counterparty.name,
+      counterpartyType: counterparty.type,
+      currentStatus,
+      isEditingProfile,
+      mockPaymentMethods,
+      documentsTable,
+      onStatusChange: handleStatusChange,
+      onToggleProfileEdit: handleToggleProfileEdit,
+      onAddPaymentMethod: handleAddPaymentMethod,
+      onAddDocument: handleAddDocument
     }
   );
 };
@@ -13853,7 +14257,7 @@ var TransactionDetail = () => {
       /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => navigate("/transactions/history"), children: "Back to Transaction History" })
     ] }) });
   }
-  const getStatusVariant = (status) => {
+  const getStatusVariant2 = (status) => {
     switch (status) {
       case "POSTED":
         return "success";
@@ -13909,7 +14313,7 @@ var TransactionDetail = () => {
             isInbound: transaction.isInbound
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant(transaction.status), children: transaction.status }),
+        /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant2(transaction.status), children: transaction.status }),
         /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getProcessingStatusVariant(transaction.processingStatus), children: transaction.processingStatus })
       ] }),
       maxWidth: "full",
@@ -14008,6 +14412,341 @@ function UIKit() {
     ] })
   ] }) }) });
 }
+function OFACFiltersSheet({
+  filters,
+  onFilterChange,
+  onResetFilters
+}) {
+  const hasActiveFilters = filters.status !== "" || filters.entityType !== "" || filters.startDate !== void 0 || filters.endDate !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "mr-2 h-4 w-4" }),
+      "Filters",
+      hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground", children: [filters.status, filters.entityType, filters.startDate, filters.endDate].filter(Boolean).length })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "w-full sm:max-w-md overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Filter OFAC Checks" }),
+          hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: onResetFilters,
+              className: "h-8 px-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "mr-1 h-4 w-4" }),
+                "Clear all"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SheetDescription, { children: "Filter OFAC screening results by status, entity type, and date range" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 mt-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedSelect,
+          {
+            label: "Status",
+            placeholder: "All statuses",
+            options: [
+              { value: "all", label: "All statuses" },
+              { value: "NO MATCH", label: "No Match" },
+              { value: "REVIEW", label: "Review" },
+              { value: "CLEARED", label: "Cleared" },
+              { value: "CONFIRMED", label: "Confirmed" }
+            ],
+            value: filters.status || "all",
+            onValueChange: (value) => onFilterChange("status", value === "all" ? "" : value)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedSelect,
+          {
+            label: "Entity Type",
+            placeholder: "All entity types",
+            options: [
+              { value: "all", label: "All entity types" },
+              { value: "Business", label: "Business" },
+              { value: "Individual", label: "Individual" },
+              { value: "Counterparty", label: "Counterparty" }
+            ],
+            value: filters.entityType || "all",
+            onValueChange: (value) => onFilterChange("entityType", value === "all" ? "" : value)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DatePicker,
+          {
+            date: filters.startDate,
+            onDateChange: (date) => onFilterChange("startDate", date),
+            label: "Start Date",
+            placeholder: "MM/DD/YYYY"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DatePicker,
+          {
+            date: filters.endDate,
+            onDateChange: (date) => onFilterChange("endDate", date),
+            label: "End Date",
+            placeholder: "MM/DD/YYYY",
+            disabledDates: (date) => filters.startDate ? date < filters.startDate : false
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/lib/mock-data/ofac-data.ts
+var mockOFACChecks = [
+  {
+    id: "ofac-001",
+    created: "2024-01-15T10:30:00Z",
+    entityId: "8112488",
+    entityName: "Acme Corporation",
+    entityType: "Business",
+    alertId: "ALT-001",
+    status: "CLEARED"
+  },
+  {
+    id: "ofac-002",
+    created: "2024-01-14T14:22:00Z",
+    entityId: "8111609",
+    entityName: "Global Tech Industries",
+    entityType: "Business",
+    alertId: "ALT-002",
+    status: "REVIEW"
+  },
+  {
+    id: "ofac-003",
+    created: "2024-01-14T09:15:00Z",
+    entityId: "IND-001",
+    entityName: "John Smith",
+    entityType: "Individual",
+    alertId: null,
+    status: "NO MATCH"
+  },
+  {
+    id: "ofac-004",
+    created: "2024-01-13T16:45:00Z",
+    entityId: "8111026",
+    entityName: "Innovation Partners LLC",
+    entityType: "Business",
+    alertId: "ALT-003",
+    status: "CONFIRMED"
+  },
+  {
+    id: "ofac-005",
+    created: "2024-01-13T11:20:00Z",
+    entityId: "IND-002",
+    entityName: "Jane Doe",
+    entityType: "Individual",
+    alertId: null,
+    status: "NO MATCH"
+  },
+  {
+    id: "ofac-006",
+    created: "2024-01-12T13:30:00Z",
+    entityId: "CP-001",
+    entityName: "International Suppliers Inc",
+    entityType: "Counterparty",
+    alertId: "ALT-004",
+    status: "REVIEW"
+  },
+  {
+    id: "ofac-007",
+    created: "2024-01-12T08:00:00Z",
+    entityId: "8110892",
+    entityName: "NextGen Solutions",
+    entityType: "Business",
+    alertId: null,
+    status: "NO MATCH"
+  },
+  {
+    id: "ofac-008",
+    created: "2024-01-11T15:10:00Z",
+    entityId: "IND-003",
+    entityName: "Robert Johnson",
+    entityType: "Individual",
+    alertId: "ALT-005",
+    status: "CLEARED"
+  },
+  {
+    id: "ofac-009",
+    created: "2024-01-11T10:45:00Z",
+    entityId: "CP-002",
+    entityName: "Overseas Trading Company",
+    entityType: "Counterparty",
+    alertId: "ALT-006",
+    status: "REVIEW"
+  },
+  {
+    id: "ofac-010",
+    created: "2024-01-10T14:25:00Z",
+    entityId: "8110654",
+    entityName: "Digital Ventures Group",
+    entityType: "Business",
+    alertId: null,
+    status: "NO MATCH"
+  }
+];
+var getStatusVariant = (status) => {
+  switch (status) {
+    case "NO MATCH":
+      return "success";
+    case "REVIEW":
+      return "warning";
+    case "CLEARED":
+      return "active";
+    case "CONFIRMED":
+      return "destructive";
+    default:
+      return "secondary";
+  }
+};
+var getEntityUrl = (entityType, entityId) => {
+  switch (entityType) {
+    case "Business":
+      return `/business/${entityId}`;
+    case "Individual":
+      return `/individual/${entityId}`;
+    case "Counterparty":
+      return `/counterparty/${entityId}`;
+    default:
+      return "#";
+  }
+};
+function OFAC() {
+  const navigate = reactRouterDom.useNavigate();
+  const [sortField, setSortField] = React15.useState("created");
+  const [sortDirection, setSortDirection] = React15.useState("desc");
+  const [filters, setFilters] = React15.useState({
+    status: "",
+    entityType: "",
+    startDate: void 0,
+    endDate: void 0
+  });
+  const handleFilterChange = (field, value) => {
+    setFilters((prev) => ({ ...prev, [field]: value }));
+  };
+  const handleResetFilters = () => {
+    setFilters({
+      status: "",
+      entityType: "",
+      startDate: void 0,
+      endDate: void 0
+    });
+  };
+  const handleSort = (field) => {
+    if (sortField === field) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortField(field);
+      setSortDirection("desc");
+    }
+  };
+  const filteredChecks = React15.useMemo(() => {
+    return mockOFACChecks.filter((check) => {
+      if (filters.status && check.status !== filters.status) {
+        return false;
+      }
+      if (filters.entityType && check.entityType !== filters.entityType) {
+        return false;
+      }
+      if (filters.startDate || filters.endDate) {
+        const checkDate = dateFns.parseISO(check.created);
+        if (filters.startDate && dateFns.isBefore(checkDate, dateFns.startOfDay(filters.startDate))) {
+          return false;
+        }
+        if (filters.endDate && dateFns.isAfter(checkDate, dateFns.endOfDay(filters.endDate))) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }, [filters]);
+  const sortedChecks = [...filteredChecks].sort((a, b) => {
+    const aValue = a[sortField];
+    const bValue = b[sortField];
+    if (aValue == null) return 1;
+    if (bValue == null) return -1;
+    if (sortDirection === "asc") {
+      return aValue > bValue ? 1 : -1;
+    } else {
+      return aValue < bValue ? 1 : -1;
+    }
+  });
+  const columns3 = [
+    {
+      key: "created",
+      title: "Created",
+      sortable: true,
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: dateFns.format(dateFns.parseISO(value), "MMM d, yyyy h:mm a") })
+    },
+    {
+      key: "entityName",
+      title: "Entity",
+      render: (value, row) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => navigate(getEntityUrl(row.entityType, row.entityId)),
+          className: "text-sm text-primary hover:underline font-medium",
+          children: value
+        }
+      )
+    },
+    {
+      key: "entityType",
+      title: "Entity Type",
+      sortable: true,
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+    },
+    {
+      key: "alertId",
+      title: "Alert ID",
+      render: (value) => value ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => navigate(`/alerts/${value}`),
+          className: "text-sm text-primary hover:underline font-medium",
+          children: value
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "\u2014" })
+    },
+    {
+      key: "status",
+      title: "Status",
+      sortable: true,
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getStatusVariant(value), children: value })
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-screen bg-gradient-subtle", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-6 max-w-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground", children: "OFAC Checks" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        OFACFiltersSheet,
+        {
+          filters,
+          onFilterChange: handleFilterChange,
+          onResetFilters: handleResetFilters
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 mt-4 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+      DataTable,
+      {
+        columns: columns3,
+        data: sortedChecks,
+        sortBy: sortField,
+        sortDirection,
+        onSort: handleSort
+      }
+    ) }) }) })
+  ] });
+}
 
 exports.ACHBankCard = ACHBankCard;
 exports.ACHBasicInfoCard = ACHBasicInfoCard;
@@ -14112,6 +14851,7 @@ exports.MainLayout = MainLayout;
 exports.MetricCard = MetricCard;
 exports.NewTransaction = NewTransaction;
 exports.NotFound = NotFound_default;
+exports.OFAC = OFAC;
 exports.OFACAlertView = OFACAlertView;
 exports.OriginatorCard = OriginatorCard;
 exports.OriginatorFI = OriginatorFI;