braid-ui 1.0.1 → 1.0.3

package/dist/index.cjs

@@ -868,7 +868,7 @@ var AlertTimeline = ({ events }) => {
     if (action.includes("Rejected")) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-4 w-4" });
     return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-4 w-4" });
   };
-  const getStatusColor = (status) => {
+  const getStatusColor2 = (status) => {
     switch (status) {
       case "Unassigned":
         return "text-destructive";
@@ -887,7 +887,7 @@ var AlertTimeline = ({ events }) => {
     index !== events.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",
-      getStatusColor(event.status)
+      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 }),
@@ -896,7 +896,7 @@ var AlertTimeline = ({ events }) => {
         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", getStatusColor(event.status)), children: [
+      event.status && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-xs font-medium", getStatusColor2(event.status)), children: [
         "Status: ",
         event.status
       ] }),
@@ -2941,9 +2941,14 @@ var businessProfileSchema = zod.z.object({
   dbaName: zod.z.string().optional(),
   businessType: zod.z.string().min(1, "Business type is required"),
   taxId: zod.z.string().min(1, "Tax ID is required"),
-  businessPhone: zod.z.string().min(1, "Business phone is required"),
-  businessEmail: zod.z.string().email("Invalid email format"),
+  formationDate: zod.z.string().optional(),
+  idType: zod.z.string().optional(),
+  incorporationState: zod.z.string().optional(),
   website: zod.z.string().url("Invalid URL format").optional().or(zod.z.literal("")),
+  contactFirstName: zod.z.string().optional(),
+  contactLastName: zod.z.string().optional(),
+  contactEmail: zod.z.string().optional(),
+  contactPhone: zod.z.string().optional(),
   address: addressSchema
 });
 zod.z.object({
@@ -3110,6 +3115,18 @@ var ADDRESS_TYPE_OPTIONS = {
     { value: "correspondent", label: "Correspondent Bank" }
   ]
 };
+var RFI_STATUS_OPTIONS = [
+  { value: "Completed", label: "Completed" },
+  { value: "Provided", label: "Provided" },
+  { value: "Pending", label: "Pending" }
+];
+var ASSIGNEE_OPTIONS = [
+  { value: "John Smith", label: "John Smith" },
+  { value: "Sarah Johnson", label: "Sarah Johnson" },
+  { value: "Michael Chen", label: "Michael Chen" },
+  { value: "approverdev", label: "approverdev" },
+  { value: "Unassigned", label: "Unassigned" }
+];
 var AddressForm = ({
   title,
   description,
@@ -3654,8 +3671,9 @@ var defaultBusinessProfile = {
   dbaName: "ACME Tech",
   businessType: "corporation",
   taxId: "12-3456789",
-  businessPhone: "+1 (555) 123-4567",
-  businessEmail: "contact@acme.com",
+  formationDate: "2020-01-15",
+  idType: "EIN",
+  incorporationState: "Delaware",
   website: "https://acme.com",
   address: {
     streetAddress: "123 Business Avenue",
@@ -3682,75 +3700,176 @@ var BusinessProfileCard = ({
     onToggleEdit,
     onSave: onDataChange
   });
-  const editContent = /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "legalName",
-        label: "Legal Name",
-        placeholder: "Enter legal business name",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "dbaName",
-        label: "DBA Name",
-        placeholder: "Enter doing business as name"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormSelect,
-      {
-        name: "businessType",
-        label: "Business Type",
-        placeholder: "Select business type",
-        options: [
-          { value: "corporation", label: "Corporation" },
-          { value: "llc", label: "LLC" },
-          { value: "partnership", label: "Partnership" },
-          { value: "sole_proprietorship", label: "Sole Proprietorship" }
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "taxId",
-        label: "Tax ID",
-        placeholder: "Enter tax identification number",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "businessPhone",
-        label: "Business Phone",
-        placeholder: "Enter business phone number",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "businessEmail",
-        label: "Business Email",
-        type: "email",
-        placeholder: "Enter business email",
-        required: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FormInput,
-      {
-        name: "website",
-        label: "Website",
-        placeholder: "Enter website URL"
-      }
-    )
-  ] }) }) });
+  const editContent = /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { form, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "legalName",
+          label: "Legal Name",
+          placeholder: "Enter legal business name",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "dbaName",
+          label: "DBA Name",
+          placeholder: "Enter doing business as name"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormSelect,
+        {
+          name: "businessType",
+          label: "Business Type",
+          placeholder: "Select business type",
+          options: [
+            { value: "corporation", label: "Corporation" },
+            { value: "llc", label: "LLC" },
+            { value: "partnership", label: "Partnership" },
+            { value: "sole_proprietorship", label: "Sole Proprietorship" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "taxId",
+          label: "Tax ID",
+          placeholder: "Enter tax identification number",
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "formationDate",
+          label: "Formation Date",
+          type: "date",
+          placeholder: "Enter formation date"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormSelect,
+        {
+          name: "idType",
+          label: "ID Type",
+          placeholder: "Select ID type",
+          options: [
+            { value: "ein", label: "EIN" },
+            { value: "ssn", label: "SSN" },
+            { value: "itin", label: "ITIN" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "incorporationState",
+          label: "Incorporation State",
+          placeholder: "Enter incorporation state"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "website",
+          label: "Website",
+          placeholder: "Enter website URL"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.streetAddress",
+          label: "Street Address",
+          placeholder: "Enter street address"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "address.apartment",
+          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.country",
+          label: "Country Code",
+          placeholder: "Enter country code"
+        }
+      )
+    ] }),
+    /* @__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(
+        FormInput,
+        {
+          name: "contactFirstName",
+          label: "First Name",
+          placeholder: "Enter first name"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "contactLastName",
+          label: "Last Name",
+          placeholder: "Enter last name"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "contactEmail",
+          label: "Email",
+          type: "email",
+          placeholder: "Enter email"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormInput,
+        {
+          name: "contactPhone",
+          label: "Phone Number",
+          placeholder: "Enter phone number"
+        }
+      )
+    ] })
+  ] }) });
   const formValues = form.watch();
   const viewContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
@@ -3762,10 +3881,30 @@ var BusinessProfileCard = ({
       /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Tax ID", value: formValues?.taxId, layout: "horizontal" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Business Phone", value: formValues?.businessPhone, layout: "horizontal" }),
-      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Business Email", value: formValues?.businessEmail, layout: "horizontal" })
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Formation Date", value: formValues?.formationDate || "2020-01-15", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "ID Type", value: formValues?.idType || "EIN", layout: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Incorporation State", value: formValues?.incorporationState || "Delaware", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Website", value: formValues?.website, layout: "horizontal" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InfoField,
+      {
+        label: "Address",
+        value: formValues?.address ? `${formValues.address.streetAddress}${formValues.address.apartment ? ", " + formValues.address.apartment : ""}, ${formValues.address.city}, ${formValues.address.state} ${formValues.address.postalCode}, ${formValues.address.country}` : "123 Business Avenue, Suite 100, New York, NY 10001, US",
+        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?.contactFirstName || "John", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last Name", value: formValues?.contactLastName || "Smith", layout: "horizontal" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Website", value: formValues?.website, layout: "horizontal" }) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Email", value: formValues?.contactEmail || "john.smith@acme.com", layout: "horizontal" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Phone Number", value: formValues?.contactPhone || "+1 (555) 123-4567", layout: "horizontal" })
+    ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
     EditableFormCard,
@@ -3783,30 +3922,75 @@ var BusinessProfileCard = ({
     }
   );
 };
+var mockBusinessTimeline = [
+  {
+    id: "1",
+    action: "Business Created",
+    user: "admin",
+    details: "Initial business setup",
+    status: "Active",
+    timestamp: "2025-08-03 10:30:00"
+  },
+  {
+    id: "2",
+    action: "Profile Updated",
+    user: "admin",
+    details: "Updated business information",
+    timestamp: "2025-09-05 14:22:00"
+  },
+  {
+    id: "3",
+    action: "OFAC Check Completed",
+    user: "System",
+    details: "Automated compliance check",
+    status: "Verified",
+    timestamp: "2025-09-05 14:30:00"
+  }
+];
 var BusinessStatusCard = ({ 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: "Business Status & Records",
+      title: "Timeline",
       className,
-      headerActions: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: onToggleEdit, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: onToggleEdit, children: "Save" })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onToggleEdit, className: "text-primary hover:text-primary/80 hover:bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" }) }) }),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Status", value: /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: "ACTIVE" }), layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "CIP Status", value: "NOT_START", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created Date", value: "2025-08-03", layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Updated Date", value: "2025-09-05", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC Date", value: "2025-09-05", layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Last OFAC Status", value: "View Status", layout: "horizontal", className: "text-primary cursor-pointer" })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: mockBusinessTimeline.map((event, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pl-6 pb-3", children: [
+        index !== mockBusinessTimeline.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)) })
     }
   );
 };
@@ -3831,18 +4015,27 @@ var ContactInfoCard = ({ isEditing, onToggleEdit, className }) => {
           /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Phone Number", value: "", layout: "horizontal" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-muted-foreground mt-6", children: "Mailing Address" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Street Address", value: "", layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Apartment, suite, or floor", value: "", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "City", value: "", layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "State", value: "Alabama", layout: "horizontal" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Postal Code", value: "", layout: "horizontal" }),
-          /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Country Code", value: "US", layout: "horizontal" })
-        ] })
+        isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Street Address", value: "", layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Apartment, suite, or floor", value: "", layout: "horizontal" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "City", value: "", layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "State", value: "Alabama", layout: "horizontal" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Postal Code", value: "", layout: "horizontal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Country Code", value: "US", layout: "horizontal" })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          InfoField,
+          {
+            label: "Address",
+            value: "123 Business Avenue, Suite 100, New York, NY 10001, US",
+            layout: "horizontal"
+          }
+        )
       ] })
     }
   );
@@ -4871,6 +5064,7 @@ function DataTable({
   sortBy,
   sortDirection,
   onSort,
+  onRowClick,
   loading = false,
   emptyMessage = "No data available",
   className
@@ -4908,7 +5102,7 @@ function DataTable({
       "th",
       {
         className: cn(
-          "h-12 px-4 text-left align-middle font-medium text-muted-foreground",
+          "px-3 py-2 text-left align-middle text-sm font-medium bg-muted/50",
           column.align === "center" && "text-center",
           column.align === "right" && "text-right",
           column.width && `w-[${column.width}]`
@@ -4918,7 +5112,7 @@ function DataTable({
           {
             variant: "ghost",
             size: "sm",
-            className: "h-auto p-0 font-medium hover:bg-transparent",
+            className: "h-auto p-0 text-sm font-medium hover:bg-transparent",
             onClick: () => handleSort(column.key),
             children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
               column.title,
@@ -4932,12 +5126,16 @@ function DataTable({
     /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) }) : data.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "tr",
       {
-        className: "border-b transition-colors hover:bg-muted/50",
+        className: cn(
+          "border-b transition-colors hover:bg-muted/50",
+          onRowClick && "cursor-pointer"
+        ),
+        onClick: () => onRowClick?.(row),
         children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
           "td",
           {
             className: cn(
-              "p-4 align-middle",
+              "px-3 py-2 align-middle text-sm",
               column.align === "center" && "text-center",
               column.align === "right" && "text-right"
             ),
@@ -6335,22 +6533,10 @@ var mockAlerts = [
     description: "Transaction WIRE_DOMESTIC_CREDIT of $30,000.00 is flagged for velocity limit ..."
   }
 ];
-var RFI_STATUS_OPTIONS = [
-  { value: "Completed", label: "Completed" },
-  { value: "Provided", label: "Provided" },
-  { value: "Pending", label: "Pending" }
-];
-var ASSIGNEE_OPTIONS = [
-  { value: "John Smith", label: "John Smith" },
-  { value: "Sarah Johnson", label: "Sarah Johnson" },
-  { value: "Michael Chen", label: "Michael Chen" },
-  { value: "approverdev", label: "approverdev" },
-  { value: "Unassigned", label: "Unassigned" }
-];
-var AlertDetail = () => {
-  const { id } = reactRouterDom.useParams();
-  const navigate = reactRouterDom.useNavigate();
-  const alert = mockAlerts.find((a) => a.id === id);
+
+// src/hooks/useAlertDetail.ts
+var useAlertDetail = (id) => {
+  const alert = React13.useMemo(() => mockAlerts.find((a) => a.id === id), [id]);
   const [rfiStatus, setRfiStatus] = React13.useState(alert?.rfiStatus || "");
   const [assignee, setAssignee] = React13.useState(alert?.assignee || "Unassigned");
   const handleRfiStatusChange = (newStatus) => {
@@ -6361,43 +6547,136 @@ var AlertDetail = () => {
     setAssignee(newAssignee);
     console.log("Assignee updated to:", newAssignee);
   };
-  if (!alert) {
-    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: "Alert Not Found" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground mb-4", children: [
-        "The alert #",
-        id,
-        " could not be found."
+  return {
+    alert,
+    isLoading: false,
+    // Set to true when implementing real data fetching
+    rfiStatus,
+    assignee,
+    handleRfiStatusChange,
+    handleAssigneeChange
+  };
+};
+
+// src/lib/utils/alert-utils.ts
+var getTypeBadgeVariant = (type) => {
+  switch (type) {
+    case "Ofac":
+      return "alert-ofac";
+    case "Dual Approval":
+      return "alert-dual";
+    case "Transaction Monitoring":
+      return "alert-monitoring";
+    case "Transaction Processing Error":
+      return "alert-error";
+    default:
+      return "outline";
+  }
+};
+var getStatusColor = (status) => {
+  switch (status) {
+    case "Unassigned":
+      return "text-destructive";
+    case "Closed":
+      return "text-success";
+    case "In Progress":
+      return "text-warning";
+    default:
+      return "";
+  }
+};
+var AlertDetailView = ({
+  alert,
+  rfiStatus,
+  assignee,
+  onRfiStatusChange,
+  onAssigneeChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormCard,
+        {
+          title: "Alert Information",
+          headerActions: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" }) }),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Alert ID", value: alert.id }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InfoField,
+              {
+                label: "Type",
+                value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getTypeBadgeVariant(alert.type), children: alert.type })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InfoField,
+              {
+                label: "Status",
+                value: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", getStatusColor(alert.status)), children: alert.status })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created At", value: alert.createdAt }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InfoField,
+              {
+                label: "Context Type",
+                value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: alert.contextType })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Context ID", value: alert.contextId || "N/A" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              EditableInfoField,
+              {
+                label: "Assignee",
+                value: assignee,
+                options: ASSIGNEE_OPTIONS,
+                onChange: onAssigneeChange,
+                placeholder: "Unassigned"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              EditableInfoField,
+              {
+                label: "RFI Status",
+                value: rfiStatus,
+                options: RFI_STATUS_OPTIONS,
+                onChange: onRfiStatusChange,
+                placeholder: "Select status",
+                renderValue: (value) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Description", value: alert.description }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ContextSection, { alert }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Notes", children: /* @__PURE__ */ jsxRuntime.jsx(AlertNotes, { alertId: alert.id, notes: alert.notes || [] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Documents", children: /* @__PURE__ */ jsxRuntime.jsx(AlertDocuments, { alertId: alert.id, documents: alert.documents || [] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Status Timeline", className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTimeline, { events: alert.timeline || [] }) }) })
+  ] });
+};
+var AlertDetail = () => {
+  const { id } = reactRouterDom.useParams();
+  const navigate = reactRouterDom.useNavigate();
+  const {
+    alert,
+    rfiStatus,
+    assignee,
+    handleRfiStatusChange,
+    handleAssigneeChange
+  } = useAlertDetail(id);
+  if (!alert) {
+    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: "Alert Not Found" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground mb-4", children: [
+        "The alert #",
+        id,
+        " could not be found."
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => navigate("/alerts"), children: "Back to Alerts" })
     ] }) });
   }
-  const getTypeBadgeVariant = (type) => {
-    switch (type) {
-      case "Ofac":
-        return "alert-ofac";
-      case "Dual Approval":
-        return "alert-dual";
-      case "Transaction Monitoring":
-        return "alert-monitoring";
-      case "Transaction Processing Error":
-        return "alert-error";
-      default:
-        return "outline";
-    }
-  };
-  const getStatusColor = (status) => {
-    switch (status) {
-      case "Unassigned":
-        return "text-destructive";
-      case "Closed":
-        return "text-success";
-      case "In Progress":
-        return "text-warning";
-      default:
-        return "";
-    }
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     PageLayout,
     {
@@ -6421,69 +6700,16 @@ var AlertDetail = () => {
           onClick: () => console.log("Close alert")
         }
       ],
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FormCard,
-            {
-              title: "Alert Information",
-              headerActions: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" }) }),
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Alert ID", value: alert.id }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  InfoField,
-                  {
-                    label: "Type",
-                    value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getTypeBadgeVariant(alert.type), children: alert.type })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  InfoField,
-                  {
-                    label: "Status",
-                    value: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-medium", getStatusColor(alert.status)), children: alert.status })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Created At", value: alert.createdAt }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  InfoField,
-                  {
-                    label: "Context Type",
-                    value: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: alert.contextType })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Context ID", value: alert.contextId || "N/A" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  EditableInfoField,
-                  {
-                    label: "Assignee",
-                    value: assignee,
-                    options: ASSIGNEE_OPTIONS,
-                    onChange: handleAssigneeChange,
-                    placeholder: "Unassigned"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  EditableInfoField,
-                  {
-                    label: "RFI Status",
-                    value: rfiStatus,
-                    options: RFI_STATUS_OPTIONS,
-                    onChange: handleRfiStatusChange,
-                    placeholder: "Select status",
-                    renderValue: (value) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", children: value })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(InfoField, { label: "Description", value: alert.description }) })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ContextSection, { alert }),
-          /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Notes", children: /* @__PURE__ */ jsxRuntime.jsx(AlertNotes, { alertId: alert.id, notes: alert.notes || [] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Documents", children: /* @__PURE__ */ jsxRuntime.jsx(AlertDocuments, { alertId: alert.id, documents: alert.documents || [] }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(FormCard, { title: "Status Timeline", className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTimeline, { events: alert.timeline || [] }) }) })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        AlertDetailView,
+        {
+          alert,
+          rfiStatus,
+          assignee,
+          onRfiStatusChange: handleRfiStatusChange,
+          onAssigneeChange: handleAssigneeChange
+        }
+      )
     }
   );
 };
@@ -6542,7 +6768,7 @@ var Alerts = () => {
     setFilteredAlerts(mockAlerts);
     setCurrentPage(1);
   };
-  const getTypeBadgeVariant = (type) => {
+  const getTypeBadgeVariant2 = (type) => {
     switch (type) {
       case "Ofac":
         return "alert-ofac";
@@ -6556,7 +6782,7 @@ var Alerts = () => {
         return "outline";
     }
   };
-  const getStatusColor = (status) => {
+  const getStatusColor2 = (status) => {
     switch (status) {
       case "Unassigned":
         return "text-destructive";
@@ -6733,8 +6959,8 @@ var Alerts = () => {
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: alert.id }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs", children: alert.createdAt }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getTypeBadgeVariant(alert.type), className: "whitespace-nowrap", children: alert.type }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium", getStatusColor(alert.status)), children: alert.status }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: getTypeBadgeVariant2(alert.type), className: "whitespace-nowrap", children: alert.type }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium", getStatusColor2(alert.status)), children: alert.status }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "whitespace-nowrap", children: alert.contextType }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2", children: alert.rfiStatus && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", className: "whitespace-nowrap", children: alert.rfiStatus }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-xs truncate", children: alert.description })
@@ -6795,48 +7021,475 @@ var Alerts = () => {
   ] });
 };
 var Alerts_default = Alerts;
+
+// src/lib/mock-data/businesses-list-data.ts
+var mockBusinessesList = [
+  {
+    id: "8112488",
+    businessName: "RAPIDZ PAY INC",
+    productName: "Fiat Republic Canada Inc. FBO Rapidz Pay",
+    cipStatus: "verified",
+    status: "active",
+    created: "2025-10-05",
+    modified: "2025-10-05"
+  },
+  {
+    id: "8111609",
+    businessName: "Fern Hyper Growth Llc",
+    productName: "Atomic Brokerage FBO Atomic Brokerage Clients",
+    cipStatus: "verified",
+    status: "active",
+    created: "2025-10-04",
+    modified: "2025-10-04"
+  },
+  {
+    id: "8111026",
+    businessName: "ACEROSGALVANISADOS & PREPINTADOS",
+    productName: "SendFriend Inc FBO Conduit Pay Agent",
+    cipStatus: "not_start",
+    status: "active",
+    created: "2025-10-03",
+    modified: "2025-10-03"
+  },
+  {
+    id: "8110892",
+    businessName: "Tech Solutions Corp",
+    productName: "Digital Finance Inc FBO Tech Solutions",
+    cipStatus: "pending",
+    status: "active",
+    created: "2025-10-02",
+    modified: "2025-10-02"
+  },
+  {
+    id: "8110654",
+    businessName: "Global Trade Partners LLC",
+    productName: "Swift Transfer FBO Global Trade",
+    cipStatus: "verified",
+    status: "active",
+    created: "2025-10-01",
+    modified: "2025-10-01"
+  }
+];
+var Businesses = () => {
+  const navigate = reactRouterDom.useNavigate();
+  const [businesses, setBusinesses] = React13.useState(mockBusinessesList);
+  const [filteredBusinesses, setFilteredBusinesses] = React13.useState(mockBusinessesList);
+  const [sortBy, setSortBy] = React13.useState("created");
+  const [sortDirection, setSortDirection] = React13.useState("desc");
+  const [filters, setFilters] = React13.useState({
+    name: "",
+    productName: "",
+    status: "",
+    createdDateStart: void 0,
+    createdDateEnd: void 0
+  });
+  const handleFilterChange = (field, value) => {
+    setFilters((prev) => ({ ...prev, [field]: value }));
+  };
+  const applyFilters = () => {
+    let filtered = businesses;
+    if (filters.name) {
+      filtered = filtered.filter(
+        (business) => business.businessName.toLowerCase().includes(filters.name.toLowerCase())
+      );
+    }
+    if (filters.productName) {
+      filtered = filtered.filter(
+        (business) => business.productName.toLowerCase().includes(filters.productName.toLowerCase())
+      );
+    }
+    if (filters.status) {
+      filtered = filtered.filter((business) => business.status === filters.status);
+    }
+    if (filters.createdDateStart) {
+      filtered = filtered.filter(
+        (business) => new Date(business.created) >= filters.createdDateStart
+      );
+    }
+    if (filters.createdDateEnd) {
+      filtered = filtered.filter(
+        (business) => new Date(business.created) <= filters.createdDateEnd
+      );
+    }
+    setFilteredBusinesses(filtered);
+  };
+  const resetFilters = () => {
+    setFilters({
+      name: "",
+      productName: "",
+      status: "",
+      createdDateStart: void 0,
+      createdDateEnd: void 0
+    });
+    setFilteredBusinesses(businesses);
+  };
+  const handleSort = (key) => {
+    if (sortBy === key) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortDirection("asc");
+    }
+  };
+  const handleRowClick = (business) => {
+    navigate(`/business/${business.id}`);
+  };
+  const columns = [
+    {
+      key: "id",
+      title: "Business ID",
+      sortable: true
+    },
+    {
+      key: "businessName",
+      title: "Business Name",
+      sortable: true
+    },
+    {
+      key: "productName",
+      title: "Product Name",
+      sortable: true,
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary hover:underline cursor-pointer", children: value })
+    },
+    {
+      key: "cipStatus",
+      title: "CIP status",
+      sortable: true,
+      render: (value) => {
+        const status = value;
+        const variant = status === "verified" ? "success" : status === "pending" ? "warning" : "default";
+        const label = status === "verified" ? "Verified" : status === "pending" ? "Pending" : "Not Start";
+        return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, children: label });
+      }
+    },
+    {
+      key: "status",
+      title: "Status",
+      sortable: true,
+      render: (value) => {
+        const status = value;
+        const variant = status === "active" ? "success" : "default";
+        const label = status.charAt(0).toUpperCase() + status.slice(1);
+        return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, children: label });
+      }
+    },
+    {
+      key: "created",
+      title: "Created",
+      sortable: true
+    },
+    {
+      key: "modified",
+      title: "Modified",
+      sortable: true
+    }
+  ];
+  const sortedBusinesses = [...filteredBusinesses].sort((a, b) => {
+    const aValue = a[sortBy];
+    const bValue = b[sortBy];
+    if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
+    if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
+    return 0;
+  });
+  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-4 max-w-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground", children: "Businesses" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1", children: "Manage business entities and their configurations" })
+      ] }),
+      /* @__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: "Business Filters" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 py-6", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                EnhancedInput,
+                {
+                  label: "Name",
+                  value: filters.name,
+                  onChange: (e) => handleFilterChange("name", e.target.value),
+                  placeholder: "Enter business name"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                EnhancedInput,
+                {
+                  label: "Product Name",
+                  value: filters.productName,
+                  onChange: (e) => handleFilterChange("productName", e.target.value),
+                  placeholder: "Enter product name"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                EnhancedSelect,
+                {
+                  label: "Status",
+                  value: filters.status,
+                  onValueChange: (value) => handleFilterChange("status", value),
+                  placeholder: "Select status",
+                  options: [
+                    { value: "active", label: "Active" },
+                    { value: "inactive", label: "Inactive" },
+                    { 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.jsxs(Popover, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      Button,
+                      {
+                        variant: "outline",
+                        className: cn(
+                          "w-full justify-start text-left font-normal",
+                          !filters.createdDateStart && "text-muted-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "mr-2 h-4 w-4" }),
+                          filters.createdDateStart ? dateFns.format(filters.createdDateStart, "MM/dd/yyyy") : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "MM/DD/YYYY" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Calendar,
+                      {
+                        mode: "single",
+                        selected: filters.createdDateStart,
+                        onSelect: (date) => handleFilterChange("createdDateStart", date),
+                        initialFocus: true,
+                        className: "pointer-events-auto"
+                      }
+                    ) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Created Date End" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      Button,
+                      {
+                        variant: "outline",
+                        className: cn(
+                          "w-full justify-start text-left font-normal",
+                          !filters.createdDateEnd && "text-muted-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "mr-2 h-4 w-4" }),
+                          filters.createdDateEnd ? dateFns.format(filters.createdDateEnd, "MM/dd/yyyy") : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "MM/DD/YYYY" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Calendar,
+                      {
+                        mode: "single",
+                        selected: filters.createdDateEnd,
+                        onSelect: (date) => handleFilterChange("createdDateEnd", date),
+                        initialFocus: true,
+                        className: "pointer-events-auto"
+                      }
+                    ) })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(SheetFooter, { className: "gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: resetFilters, children: "Reset Filters" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => navigate("/business/create"), children: "Create Business" })
+      ] })
+    ] }) }) }),
+    /* @__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,
+        data: sortedBusinesses,
+        sortBy,
+        sortDirection,
+        onSort: handleSort,
+        onRowClick: handleRowClick
+      }
+    ) }) }) })
+  ] });
+};
+var Businesses_default = Businesses;
+var businessAccounts = [
+  {
+    id: "acc-001",
+    name: "Primary Operating Account",
+    number: "****7890",
+    type: "checking",
+    status: "active",
+    balance: "$125,450.00",
+    currency: "USD",
+    institution: "Chase Bank",
+    routingNumber: "021000021",
+    country: "US"
+  },
+  {
+    id: "acc-002",
+    name: "Business Savings",
+    number: "****4567",
+    type: "savings",
+    status: "active",
+    balance: "$45,230.00",
+    currency: "USD",
+    institution: "Chase Bank",
+    routingNumber: "021000021",
+    country: "US"
+  },
+  {
+    id: "acc-003",
+    name: "Payroll Account",
+    number: "****1234",
+    type: "checking",
+    status: "active",
+    balance: "$78,900.00",
+    currency: "USD",
+    institution: "Wells Fargo",
+    routingNumber: "121000248",
+    country: "US"
+  }
+];
+var businessCounterparties = [
+  {
+    id: "cp-001",
+    name: "Tech Solutions Inc",
+    type: "BUSINESS",
+    status: "active",
+    description: "Technology vendor and service provider",
+    lastTransaction: "2024-01-15"
+  },
+  {
+    id: "cp-002",
+    name: "Global Logistics LLC",
+    type: "BUSINESS",
+    status: "active",
+    description: "Shipping and logistics partner",
+    lastTransaction: "2024-01-10"
+  },
+  {
+    id: "cp-003",
+    name: "Marketing Pros Agency",
+    type: "BUSINESS",
+    status: "active",
+    description: "Marketing and advertising services",
+    lastTransaction: "2024-01-08"
+  },
+  {
+    id: "cp-004",
+    name: "John Smith Consulting",
+    type: "INDIVIDUAL",
+    status: "active",
+    description: "Independent business consultant",
+    lastTransaction: "2023-12-20"
+  }
+];
 var Business = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DetailPageLayout,
+  const accountColumns = [
     {
-      title: "Business Management",
-      description: "Manage business entities and their configurations",
-      cards: [
-        {
-          key: "profile",
-          component: BusinessProfileCard,
-          expandOnEdit: true
-        },
-        {
-          key: "status",
-          component: BusinessStatusCard,
-          expandOnEdit: true
-        },
-        {
-          key: "contact",
-          component: ContactInfoCard,
-          expandOnEdit: true
-        },
-        {
-          key: "banking",
-          component: BankingDetailsCard,
-          expandOnEdit: true
-        }
-      ],
-      actions: [
-        {
-          label: "Export Data",
-          variant: "outline"
-        },
-        {
-          label: "Edit Business",
-          className: "bg-gradient-primary hover:opacity-90"
-        }
-      ]
+      key: "number",
+      title: "Account Number",
+      sortable: true
+    },
+    {
+      key: "name",
+      title: "Account Name",
+      sortable: true
+    },
+    {
+      key: "balance",
+      title: "Available Balance",
+      sortable: true,
+      align: "right"
+    },
+    {
+      key: "status",
+      title: "Status",
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: value })
     }
-  );
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto p-6 space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Business Management" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: "profile", className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "inline-flex gap-8 h-auto bg-transparent border-b border-border w-full p-0 rounded-none justify-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TabsTrigger,
+          {
+            value: "profile",
+            className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none pb-3",
+            children: "Profile"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TabsTrigger,
+          {
+            value: "kyc",
+            className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none pb-3",
+            children: "KYC"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TabsTrigger,
+          {
+            value: "counterparty",
+            className: "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none pb-3",
+            children: "Counterparty"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "profile", className: "space-y-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row items-start gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(BusinessProfileCard, { isEditing: false, onToggleEdit: () => {
+          } }),
+          /* @__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: "Accounts" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", children: "+ New Account" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              DataTable,
+              {
+                columns: accountColumns,
+                data: businessAccounts,
+                emptyMessage: "No accounts found"
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:w-64", children: /* @__PURE__ */ jsxRuntime.jsx(BusinessStatusCard, { isEditing: false, onToggleEdit: () => {
+        } }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "kyc", className: "space-y-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground", children: "KYC content coming soon" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "counterparty", className: "space-y-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6", children: businessCounterparties.map((counterparty) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-lg", children: counterparty.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(CounterpartyTypeBadge, { type: counterparty.type })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: counterparty.status === "active" ? "default" : "secondary", children: counterparty.status }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: counterparty.description }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Last Transaction" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: counterparty.lastTransaction })
+          ] })
+        ] })
+      ] }, counterparty.id)) }) })
+    ] })
+  ] });
 };
-var Business_default = Business;
+var BusinessDetail_default = Business;
 var CreateBusiness = () => {
   const [businessType, setBusinessType] = React13.useState("");
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -7207,6 +7860,327 @@ var NotFound = () => {
   ] }) });
 };
 var NotFound_default = NotFound;
+var StatementHeader = ({ data, onEdit }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { direction: "row", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { size: "md", children: "Statement Summary" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", onClick: onEdit, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4 mr-2" }),
+        "Edit"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Account",
+          value: data.account,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Product ID",
+          value: data.productId,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Program ID",
+          value: data.programId,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Start Date",
+          value: data.startDate,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "End Date",
+          value: data.endDate,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Starting Balance",
+          value: data.startingBalance,
+          layout: "horizontal"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Ending Balance",
+          value: data.endingBalance,
+          layout: "horizontal"
+        }
+      )
+    ] }) })
+  ] });
+};
+
+// src/lib/mock-data/statement-data.ts
+var mockStatementHeader = {
+  account: "1234567890",
+  productId: "PROD-001",
+  programId: "PROG-001",
+  startDate: "01/01/2024 00:00:00",
+  endDate: "01/31/2024 23:59:59",
+  startingBalance: "$125,450.00",
+  endingBalance: "$158,320.50"
+};
+var mockStatementTransactions = [
+  { transactionType: "ACH Credit", direction: "CREDIT", amount: 45e3, count: 12 },
+  { transactionType: "ACH Debit", direction: "DEBIT", amount: 23500, count: 8 },
+  { transactionType: "Wire Transfer In", direction: "CREDIT", amount: 15e3, count: 3 },
+  { transactionType: "Wire Transfer Out", direction: "DEBIT", amount: 8200, count: 2 },
+  { transactionType: "Card Purchase", direction: "DEBIT", amount: 5430.5, count: 45 },
+  { transactionType: "Direct Deposit", direction: "CREDIT", amount: 12500, count: 5 },
+  { transactionType: "ATM Withdrawal", direction: "DEBIT", amount: 3200, count: 16 },
+  { transactionType: "Check Deposit", direction: "CREDIT", amount: 8900, count: 4 },
+  { transactionType: "Bill Payment", direction: "DEBIT", amount: 6780, count: 18 },
+  { transactionType: "Transfer In", direction: "CREDIT", amount: 5200, count: 7 },
+  { transactionType: "Transfer Out", direction: "DEBIT", amount: 4350, count: 6 },
+  { transactionType: "Fee", direction: "DEBIT", amount: 125, count: 3 },
+  { transactionType: "Interest", direction: "CREDIT", amount: 85.5, count: 1 },
+  { transactionType: "Refund", direction: "CREDIT", amount: 450, count: 2 }
+];
+var mockPrograms = [
+  { value: "PROG-001", label: "Consumer Banking Program" },
+  { value: "PROG-002", label: "Business Banking Program" },
+  { value: "PROG-003", label: "Premium Rewards Program" }
+];
+var mockProducts = [
+  { value: "PROD-001", label: "Checking Account" },
+  { value: "PROD-002", label: "Savings Account" },
+  { value: "PROD-003", label: "Money Market Account" },
+  { value: "PROD-004", label: "Business Checking" }
+];
+var statementTypes = [
+  { value: "root", label: "Root" },
+  { value: "program", label: "Program" },
+  { value: "product", label: "Product" },
+  { value: "account", label: "Account" }
+];
+function Statement() {
+  const [statementType, setStatementType] = React13.useState("");
+  const [selectedProgram, setSelectedProgram] = React13.useState("");
+  const [selectedProduct, setSelectedProduct] = React13.useState("");
+  const [accountNumber, setAccountNumber] = React13.useState("");
+  const [startDate, setStartDate] = React13.useState();
+  const [endDate, setEndDate] = React13.useState();
+  const [statementGenerated, setStatementGenerated] = React13.useState(false);
+  const handleStatementTypeChange = (value) => {
+    setStatementType(value);
+    setSelectedProgram("");
+    setSelectedProduct("");
+    setAccountNumber("");
+  };
+  const handleGenerateStatement = () => {
+    if (!statementType || !startDate || !endDate) return;
+    if (statementType === "program" && !selectedProgram) return;
+    if (statementType === "product" && !selectedProduct) return;
+    if (statementType === "account" && !accountNumber) return;
+    setStatementGenerated(true);
+  };
+  const isGenerateDisabled = () => {
+    if (!statementType || !startDate || !endDate) return true;
+    if (statementType === "program" && !selectedProgram) return true;
+    if (statementType === "product" && !selectedProduct) return true;
+    if (statementType === "account" && !accountNumber) return true;
+    return false;
+  };
+  const columns = [
+    {
+      key: "transactionType",
+      title: "Transaction Type",
+      sortable: true,
+      align: "left"
+    },
+    {
+      key: "direction",
+      title: "Direction",
+      sortable: true,
+      align: "left",
+      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: value === "CREDIT" ? "success" : "secondary", children: value })
+    },
+    {
+      key: "amount",
+      title: "Amount",
+      sortable: true,
+      align: "right",
+      render: (value) => `$${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+    },
+    {
+      key: "count",
+      title: "Count",
+      sortable: true,
+      align: "right"
+    }
+  ];
+  const handleDownloadCSV = () => {
+    console.log("Downloading CSV...");
+  };
+  const handlePrintPDF = () => {
+    console.log("Printing PDF...");
+  };
+  const handleEdit = () => {
+    setStatementGenerated(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto p-6 space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Statement" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1", children: "Generate and view statement reports" })
+    ] }),
+    !statementGenerated && /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { size: "md", children: "Statement Parameters" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedSelect,
+            {
+              label: "Statement Type",
+              placeholder: "Select type",
+              options: statementTypes,
+              value: statementType,
+              onValueChange: handleStatementTypeChange
+            }
+          ),
+          statementType === "program" && /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedSelect,
+            {
+              label: "Program Name",
+              placeholder: "Select program",
+              options: mockPrograms,
+              value: selectedProgram,
+              onValueChange: setSelectedProgram
+            }
+          ),
+          statementType === "product" && /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedSelect,
+            {
+              label: "Product Name",
+              placeholder: "Select product",
+              options: mockProducts,
+              value: selectedProduct,
+              onValueChange: setSelectedProduct
+            }
+          ),
+          statementType === "account" && /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedInput,
+            {
+              label: "Account Number",
+              placeholder: "Enter account number",
+              value: accountNumber,
+              onChange: (e) => setAccountNumber(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Start Date" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "justify-start text-left font-normal",
+                    !startDate && "text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 h-4 w-4" }),
+                    startDate ? dateFns.format(startDate, "MM/dd/yyyy") : "Select date"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  selected: startDate,
+                  onSelect: setStartDate,
+                  initialFocus: true
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "End Date" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "justify-start text-left font-normal",
+                    !endDate && "text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "mr-2 h-4 w-4" }),
+                    endDate ? dateFns.format(endDate, "MM/dd/yyyy") : "Select date"
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  selected: endDate,
+                  onSelect: setEndDate,
+                  initialFocus: true
+                }
+              ) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            onClick: handleGenerateStatement,
+            disabled: isGenerateDisabled(),
+            children: "Generate Statement"
+          }
+        ) })
+      ] })
+    ] }),
+    statementGenerated && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StatementHeader, { data: mockStatementHeader, onEdit: handleEdit }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { direction: "row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { size: "md", children: "Transaction Summary" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: handleDownloadCSV, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4 mr-2" }),
+              "Download CSV"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: handlePrintPDF, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-4 w-4 mr-2" }),
+              "Print PDF"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          DataTable,
+          {
+            columns,
+            data: mockStatementTransactions,
+            emptyMessage: "No transactions found"
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
 
 // src/lib/mock-data/transaction-data.ts
 var mockTransactions = [
@@ -8638,10 +9612,11 @@ exports.BeneficiaryAddress = BeneficiaryAddress;
 exports.BeneficiaryCard = BeneficiaryCard;
 exports.BeneficiaryDomesticWire = BeneficiaryDomesticWire;
 exports.Breadcrumb = Breadcrumb;
-exports.Business = Business_default;
+exports.BusinessDetail = BusinessDetail_default;
 exports.BusinessProfileCard = BusinessProfileCard;
 exports.BusinessStatusCard = BusinessStatusCard;
 exports.BusinessTypeBadge = BusinessTypeBadge;
+exports.Businesses = Businesses_default;
 exports.Button = Button;
 exports.Calendar = Calendar;
 exports.Card = Card;
@@ -8752,6 +9727,7 @@ exports.SidebarRail = SidebarRail;
 exports.SidebarSeparator = SidebarSeparator;
 exports.SidebarTrigger = SidebarTrigger;
 exports.Stack = Stack;
+exports.Statement = Statement;
 exports.StatusBadge = StatusBadge;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;