braid-ui 1.0.22 → 1.0.24

package/dist/index.cjs

@@ -18,10 +18,10 @@ var zod = require('zod');
 var reactCollapsible = require('@radix-ui/react-collapsible');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var LabelPrimitive = require('@radix-ui/react-label');
 var dateFns = require('date-fns');
 var reactDayPicker = require('react-day-picker');
 var PopoverPrimitive = require('@radix-ui/react-popover');
+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');
@@ -53,8 +53,8 @@ var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPr
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
@@ -3097,86 +3097,710 @@ function AppSidebar() {
 var MainLayout = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-screen w-full", children: /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1", children }) });
 };
-var useEditState = ({ initialEditing = false, onToggleEdit, onSave, onCancel }) => {
-  const [localEditing, setLocalEditing] = React15.useState(initialEditing);
-  const [isLoading, setIsLoading] = React15.useState(false);
-  React15.useEffect(() => {
-    setLocalEditing(initialEditing);
-  }, [initialEditing]);
-  const isEditing = onToggleEdit !== void 0 ? initialEditing : localEditing;
-  const handleToggleEdit = React15.useCallback(() => {
-    if (onToggleEdit) {
-      onToggleEdit();
-    } else {
-      setLocalEditing((prev) => !prev);
+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
     }
-  }, [onToggleEdit]);
-  const handleSave = React15.useCallback(async () => {
-    setIsLoading(true);
-    try {
-      if (onSave) {
-        await onSave();
+  );
+}
+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
+        ]
       }
-      if (onToggleEdit) {
-        onToggleEdit();
-      } else {
-        setLocalEditing(false);
+    ) }),
+    /* @__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)
       }
-    } catch (error) {
-      console.error("Save error:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [onSave, onToggleEdit]);
-  const handleCancel = React15.useCallback(() => {
-    if (onCancel) {
-      onCancel();
-    }
-    if (onToggleEdit) {
-      onToggleEdit();
-    } else {
-      setLocalEditing(false);
-    }
-  }, [onCancel, onToggleEdit]);
-  return {
-    isEditing,
-    isLoading,
-    handleToggleEdit,
-    handleSave,
-    handleCancel
+    ) })
+  ] });
+  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,
+  onResetFilters
+}) => {
+  return /* @__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) => onFilterChange("name", e.target.value),
+            placeholder: "Enter business name"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Product Name",
+            value: filters.productName,
+            onChange: (e) => onFilterChange("productName", e.target.value),
+            placeholder: "Enter product name"
+          }
+        ),
+        /* @__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: "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: () => {
+        }, children: "Apply Filters" })
+      ] })
+    ] })
+  ] });
+};
+var maxWidthClasses = {
+  sm: "max-w-2xl",
+  md: "max-w-4xl",
+  lg: "max-w-6xl",
+  xl: "max-w-7xl",
+  "2xl": "max-w-screen-2xl",
+  full: "max-w-none"
+};
+var getGridClasses = (gridCols, responsive) => {
+  const colsMap = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4"
   };
+  if (!responsive) {
+    return colsMap[gridCols] || "grid-cols-1";
+  }
+  switch (gridCols) {
+    case 1:
+      return "grid-cols-1";
+    case 2:
+      return "grid-cols-1 lg:grid-cols-2";
+    case 3:
+      return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+    case 4:
+      return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
+    default:
+      return "grid-cols-1 lg:grid-cols-2";
+  }
 };
-var EditableFormCard = React15__namespace.forwardRef(
+var PageLayout = React15__namespace.forwardRef(
   ({
     title,
     description,
-    editContent,
-    viewContent,
-    isEditing,
-    onToggleEdit,
-    hideActions = false,
-    onSave,
-    onCancel,
+    children,
+    actions = [],
+    cards = [],
+    mode = "simple",
+    maxWidth = "xl",
+    gridCols = 2,
+    responsive = true,
     className,
-    variant = "subtle",
-    isFormValid = true,
-    isDirty = false,
-    isSubmitting = false,
-    ...props
+    headerContent
   }, ref) => {
-    const { isEditing: currentlyEditing, handleToggleEdit, handleCancel } = useEditState({
-      initialEditing: isEditing ?? false,
-      onToggleEdit
-    });
-    const handleSaveAction = async () => {
-      if (onSave) {
-        await onSave();
-      }
-    };
-    const handleCancelAction = () => {
-      if (onCancel) {
-        onCancel();
-      } else {
+    const [editingCards, setEditingCards] = React15__namespace.useState(/* @__PURE__ */ new Set());
+    const toggleEdit = (cardKey) => {
+      setEditingCards((prev) => {
+        const next = new Set(prev);
+        if (next.has(cardKey)) {
+          next.delete(cardKey);
+        } else {
+          next.add(cardKey);
+        }
+        return next;
+      });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, 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: cn(
+        "container mx-auto px-4 py-6",
+        maxWidthClasses[maxWidth]
+      ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-h-[2.5rem]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground mb-2", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: description })
+        ] }),
+        headerContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: headerContent }),
+        actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: actions.map((action, index) => {
+          const Icon2 = action.icon;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: action.onClick,
+              className: cn(
+                "inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors",
+                {
+                  "bg-primary text-primary-foreground hover:bg-primary/90": action.variant === "default" || !action.variant,
+                  "bg-secondary text-secondary-foreground hover:bg-secondary/80": action.variant === "secondary",
+                  "bg-destructive text-destructive-foreground hover:bg-destructive/90": action.variant === "destructive",
+                  "border border-input bg-background hover:bg-accent hover:text-accent-foreground": action.variant === "outline",
+                  "hover:bg-accent hover:text-accent-foreground": action.variant === "ghost"
+                }
+              ),
+              children: [
+                Icon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4" }),
+                action.label
+              ]
+            },
+            index
+          );
+        }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+        "container mx-auto px-4 py-6",
+        maxWidthClasses[maxWidth],
+        className
+      ), children: mode === "cards" && cards.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6", getGridClasses(gridCols, responsive)), children: cards.map((card) => {
+        const isEditing = editingCards.has(card.key);
+        const shouldExpand = card.expandOnEdit && isEditing;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "transition-all duration-300",
+              shouldExpand && (gridCols > 1 ? "col-span-full" : "")
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              card.component,
+              {
+                ...card.props,
+                isEditing,
+                onToggleEdit: () => toggleEdit(card.key)
+              }
+            )
+          },
+          card.key
+        );
+      }) }) : children }) })
+    ] });
+  }
+);
+PageLayout.displayName = "PageLayout";
+var typeConfig = {
+  corporation: {
+    variant: "corporation",
+    label: "Corporation",
+    icon: lucideReact.Building
+  },
+  llc: {
+    variant: "llc",
+    label: "LLC",
+    icon: lucideReact.Briefcase
+  },
+  partnership: {
+    variant: "partnership",
+    label: "Partnership",
+    icon: lucideReact.Users
+  },
+  sole_proprietorship: {
+    variant: "sole_proprietorship",
+    label: "Sole Proprietorship",
+    icon: lucideReact.User
+  }
+};
+var BusinessTypeBadge = ({ type, className }) => {
+  const config = typeConfig[type];
+  const Icon2 = config.icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: config.variant, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "w-3 h-3 mr-1" }),
+    config.label
+  ] });
+};
+var BusinessForm = ({
+  form,
+  businessType,
+  onBusinessTypeChange,
+  onSubmit
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Business Information" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Legal Name",
+            placeholder: "Enter legal business name",
+            required: true,
+            ...form.register("legalName")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "DBA Name",
+            placeholder: "Enter DBA name",
+            hint: "Doing Business As name",
+            ...form.register("dbaName")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EnhancedSelect,
+            {
+              label: "Business Type",
+              placeholder: "Select business type",
+              value: businessType,
+              onValueChange: onBusinessTypeChange,
+              options: [
+                { value: "corporation", label: "Corporation" },
+                { value: "llc", label: "LLC" },
+                { value: "partnership", label: "Partnership" },
+                { value: "sole_proprietorship", label: "Sole Proprietorship" }
+              ]
+            }
+          ),
+          businessType && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Preview:" }),
+            /* @__PURE__ */ jsxRuntime.jsx(BusinessTypeBadge, { type: businessType })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Tax ID (EIN)",
+            placeholder: "12-3456789",
+            hint: "Employer Identification Number",
+            required: true,
+            ...form.register("taxId")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Formation Date",
+            placeholder: "YYYY-MM-DD",
+            type: "date",
+            ...form.register("formationDate")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Incorporation State",
+            placeholder: "Enter state",
+            ...form.register("incorporationState")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Website",
+            placeholder: "https://www.business.com",
+            type: "url",
+            ...form.register("website")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Email Address",
+            placeholder: "contact@business.com",
+            type: "email",
+            ...form.register("email")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Mobile Phone",
+            placeholder: "+1 (555) 123-4567",
+            ...form.register("mobilePhone")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "MCC",
+            placeholder: "1234",
+            hint: "4-digit Merchant Category Code",
+            ...form.register("mcc")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "NAICS",
+            placeholder: "123456",
+            hint: "6-digit industry classification",
+            ...form.register("naics")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "ACH Company ID",
+            placeholder: "1234567890",
+            hint: "10-digit ACH identifier",
+            ...form.register("achCompanyId")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "ACH Company Name",
+            placeholder: "Enter ACH company name",
+            ...form.register("achCompanyName")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "External ID",
+            placeholder: "UUID format",
+            hint: "External system identifier",
+            ...form.register("externalId")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Business Address" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Street Address",
+            placeholder: "Enter street address",
+            required: true,
+            ...form.register("address.streetAddress")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Apartment/Suite",
+            placeholder: "Enter apartment or suite number",
+            ...form.register("address.apartment")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "City",
+            placeholder: "Enter city",
+            required: true,
+            ...form.register("address.city")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "State",
+            placeholder: "Enter state",
+            required: true,
+            ...form.register("address.state")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Postal Code",
+            placeholder: "12345",
+            required: true,
+            ...form.register("address.postalCode")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedSelect,
+          {
+            label: "Country",
+            placeholder: "Select country",
+            value: form.watch("address.country"),
+            onValueChange: (value) => form.setValue("address.country", value),
+            options: [
+              { value: "US", label: "United States" },
+              { value: "CA", label: "Canada" },
+              { value: "GB", label: "United Kingdom" },
+              { value: "DE", label: "Germany" }
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Contact Information" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Contact First Name",
+            placeholder: "Enter first name",
+            ...form.register("contactFirstName")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Contact Last Name",
+            placeholder: "Enter last name",
+            ...form.register("contactLastName")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Contact Email",
+            placeholder: "contact@business.com",
+            type: "email",
+            ...form.register("contactEmail")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EnhancedInput,
+          {
+            label: "Contact Phone",
+            placeholder: "+1 (555) 123-4567",
+            ...form.register("contactPhone")
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var CreateBusinessView = ({
+  form,
+  businessType,
+  onBusinessTypeChange,
+  onSubmit,
+  onCancel
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PageLayout,
+    {
+      title: "Create Business",
+      actions: [
+        { label: "Cancel", variant: "outline", onClick: onCancel },
+        { label: "Create Business", variant: "default", onClick: form.handleSubmit(onSubmit) }
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        BusinessForm,
+        {
+          form,
+          businessType,
+          onBusinessTypeChange,
+          onSubmit
+        }
+      )
+    }
+  );
+};
+var useEditState = ({ initialEditing = false, onToggleEdit, onSave, onCancel }) => {
+  const [localEditing, setLocalEditing] = React15.useState(initialEditing);
+  const [isLoading, setIsLoading] = React15.useState(false);
+  React15.useEffect(() => {
+    setLocalEditing(initialEditing);
+  }, [initialEditing]);
+  const isEditing = onToggleEdit !== void 0 ? initialEditing : localEditing;
+  const handleToggleEdit = React15.useCallback(() => {
+    if (onToggleEdit) {
+      onToggleEdit();
+    } else {
+      setLocalEditing((prev) => !prev);
+    }
+  }, [onToggleEdit]);
+  const handleSave = React15.useCallback(async () => {
+    setIsLoading(true);
+    try {
+      if (onSave) {
+        await onSave();
+      }
+      if (onToggleEdit) {
+        onToggleEdit();
+      } else {
+        setLocalEditing(false);
+      }
+    } catch (error) {
+      console.error("Save error:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onSave, onToggleEdit]);
+  const handleCancel = React15.useCallback(() => {
+    if (onCancel) {
+      onCancel();
+    }
+    if (onToggleEdit) {
+      onToggleEdit();
+    } else {
+      setLocalEditing(false);
+    }
+  }, [onCancel, onToggleEdit]);
+  return {
+    isEditing,
+    isLoading,
+    handleToggleEdit,
+    handleSave,
+    handleCancel
+  };
+};
+var EditableFormCard = React15__namespace.forwardRef(
+  ({
+    title,
+    description,
+    editContent,
+    viewContent,
+    isEditing,
+    onToggleEdit,
+    hideActions = false,
+    onSave,
+    onCancel,
+    className,
+    variant = "subtle",
+    isFormValid = true,
+    isDirty = false,
+    isSubmitting = false,
+    ...props
+  }, ref) => {
+    const { isEditing: currentlyEditing, handleToggleEdit, handleCancel } = useEditState({
+      initialEditing: isEditing ?? false,
+      onToggleEdit
+    });
+    const handleSaveAction = async () => {
+      if (onSave) {
+        await onSave();
+      }
+    };
+    const handleCancelAction = () => {
+      if (onCancel) {
+        onCancel();
+      } else {
         handleCancel();
       }
     };
@@ -3755,7 +4379,7 @@ var BankingDetailsCard = ({ isEditing, onToggleEdit, className }) => {
     }
   );
 };
-var typeConfig = {
+var typeConfig2 = {
   BUSINESS: {
     variant: "business",
     label: "Business",
@@ -3778,7 +4402,7 @@ var typeConfig = {
   }
 };
 var CounterpartyTypeBadge = ({ type, className }) => {
-  const config = typeConfig[type];
+  const config = typeConfig2[type];
   if (!config) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className, children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "w-3 h-3 mr-1" }),
@@ -4109,7 +4733,7 @@ var columnClasses = {
   4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
 };
 var DataGrid = React15__namespace.forwardRef(
-  ({ data, columns: columns2 = 2, gap = "md", className }, ref) => {
+  ({ data, columns: columns3 = 2, gap = "md", className }, ref) => {
     const isItemArray = data.length > 0 && "label" in data[0];
     if (isItemArray) {
       const items = data;
@@ -4119,7 +4743,7 @@ var DataGrid = React15__namespace.forwardRef(
           ref,
           className: cn(
             "grid",
-            columnClasses[columns2],
+            columnClasses[columns3],
             gapClasses2[gap],
             className
           ),
@@ -4140,7 +4764,7 @@ var DataGrid = React15__namespace.forwardRef(
       section.title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium text-foreground mb-2", children: section.title }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
         "grid",
-        columnClasses[columns2],
+        columnClasses[columns3],
         gapClasses2[gap]
       ), children: section.items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx(
         InfoField,
@@ -4885,7 +5509,7 @@ var FormSection = React15__namespace.forwardRef(
     className,
     spacing: spacing2 = "md",
     layout = "vertical",
-    columns: columns2 = 2
+    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: [
@@ -4893,7 +5517,7 @@ var FormSection = React15__namespace.forwardRef(
         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[columns2]}` : spacingClasses[spacing2]
+        layout === "grid" ? `grid gap-4 ${gridClasses[columns3]}` : spacingClasses[spacing2]
       ), children })
     ] });
   }
@@ -5663,216 +6287,105 @@ var mockPrograms = [
   { value: "PROG-0094", label: "Premium Rewards Program 6" },
   { value: "PROG-00104", label: "Consumer Banking Program" },
   { value: "PROG-00114", label: "Business Banking Program" },
-  { value: "PROG-00134", label: "Premium Rewards Program" },
-  { value: "PROG-00414", label: "Premium Rewards Program 1" },
-  { value: "PROG-00514", label: "Premium Rewards Program 2" },
-  { value: "PROG-00614", label: "Premium Rewards Program 3" },
-  { value: "PROG-00714", label: "Premium Rewards Program 4" },
-  { value: "PROG-00814", label: "Premium Rewards Program 5" },
-  { value: "PROG-00914", label: "Premium Rewards Program 6" }
-];
-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 StatementHeader = ({ data, onEdit }) => {
-  const hasValue = (value) => {
-    if (value === void 0 || value === null) return false;
-    if (typeof value === "string" && value.trim() === "") return false;
-    return true;
-  };
-  const balanceChange = data.startingBalance && data.endingBalance ? calculateBalanceChange(data.startingBalance, data.endingBalance) : null;
-  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: [
-      hasValue(data.account) && /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Account",
-          value: data.account,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.productId) && /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Product ID",
-          value: data.productId,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.programId) && /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Program ID",
-          value: data.programId,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.startDate) && /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Start Date",
-          value: data.startDate,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.endDate) && /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "End Date",
-          value: data.endDate,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.startingBalance) && /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Starting Balance",
-          value: data.startingBalance,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.endingBalance) && /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Ending Balance",
-          value: data.endingBalance,
-          layout: "horizontal"
-        }
-      ),
-      balanceChange && /* @__PURE__ */ jsxRuntime.jsx(
-        InfoField,
-        {
-          label: "Balance Change",
-          value: /* @__PURE__ */ jsxRuntime.jsx("span", { className: balanceChange.isPositive ? "text-green-600 font-medium" : "text-red-600 font-medium", children: balanceChange.formatted }),
-          layout: "horizontal"
-        }
-      )
-    ] }) })
-  ] });
-};
-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)
-      }
-    ) })
+  { value: "PROG-00134", label: "Premium Rewards Program" },
+  { value: "PROG-00414", label: "Premium Rewards Program 1" },
+  { value: "PROG-00514", label: "Premium Rewards Program 2" },
+  { value: "PROG-00614", label: "Premium Rewards Program 3" },
+  { value: "PROG-00714", label: "Premium Rewards Program 4" },
+  { value: "PROG-00814", label: "Premium Rewards Program 5" },
+  { value: "PROG-00914", label: "Premium Rewards Program 6" }
+];
+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 StatementHeader = ({ data, onEdit }) => {
+  const hasValue = (value) => {
+    if (value === void 0 || value === null) return false;
+    if (typeof value === "string" && value.trim() === "") return false;
+    return true;
+  };
+  const balanceChange = data.startingBalance && data.endingBalance ? calculateBalanceChange(data.startingBalance, data.endingBalance) : null;
+  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: [
+      hasValue(data.account) && /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Account",
+          value: data.account,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.productId) && /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Product ID",
+          value: data.productId,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.programId) && /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Program ID",
+          value: data.programId,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.startDate) && /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Start Date",
+          value: data.startDate,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.endDate) && /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "End Date",
+          value: data.endDate,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.startingBalance) && /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Starting Balance",
+          value: data.startingBalance,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.endingBalance) && /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Ending Balance",
+          value: data.endingBalance,
+          layout: "horizontal"
+        }
+      ),
+      balanceChange && /* @__PURE__ */ jsxRuntime.jsx(
+        InfoField,
+        {
+          label: "Balance Change",
+          value: /* @__PURE__ */ jsxRuntime.jsx("span", { className: balanceChange.isPositive ? "text-green-600 font-medium" : "text-red-600 font-medium", children: balanceChange.formatted }),
+          layout: "horizontal"
+        }
+      )
+    ] }) })
   ] });
-  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;
-}
+};
 function DataTable({
-  columns: columns2,
+  columns: columns3,
   data,
   sortBy,
   sortDirection,
@@ -5911,7 +6424,7 @@ function DataTable({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse text-muted-foreground", children: "Loading..." }) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b bg-muted/50", children: columns2.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b bg-muted/50", children: columns3.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
       "th",
       {
         style: column.width ? { width: column.width } : void 0,
@@ -5936,7 +6449,7 @@ function DataTable({
       },
       column.key
     )) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns2.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) }) : data.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns3.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) }) : data.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "tr",
       {
         className: cn(
@@ -5944,7 +6457,7 @@ function DataTable({
           onRowClick && "cursor-pointer"
         ),
         onClick: () => onRowClick?.(row),
-        children: columns2.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+        children: columns3.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
           "td",
           {
             style: column.width ? { width: column.width } : void 0,
@@ -6347,36 +6860,6 @@ var AccountCard = React15__namespace.forwardRef(
   }
 );
 AccountCard.displayName = "AccountCard";
-var typeConfig2 = {
-  corporation: {
-    variant: "corporation",
-    label: "Corporation",
-    icon: lucideReact.Building
-  },
-  llc: {
-    variant: "llc",
-    label: "LLC",
-    icon: lucideReact.Briefcase
-  },
-  partnership: {
-    variant: "partnership",
-    label: "Partnership",
-    icon: lucideReact.Users
-  },
-  sole_proprietorship: {
-    variant: "sole_proprietorship",
-    label: "Sole Proprietorship",
-    icon: lucideReact.User
-  }
-};
-var BusinessTypeBadge = ({ type, className }) => {
-  const config = typeConfig2[type];
-  const Icon2 = config.icon;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: config.variant, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "w-3 h-3 mr-1" }),
-    config.label
-  ] });
-};
 var Checkbox = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   CheckboxPrimitive__namespace.Root,
   {
@@ -6394,130 +6877,8 @@ var Checkbox = React15__namespace.forwardRef(({ className, ...props }, ref) => /
       }
     )
   }
-));
-Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
-var maxWidthClasses = {
-  sm: "max-w-2xl",
-  md: "max-w-4xl",
-  lg: "max-w-6xl",
-  xl: "max-w-7xl",
-  "2xl": "max-w-screen-2xl",
-  full: "max-w-none"
-};
-var getGridClasses = (gridCols, responsive) => {
-  const colsMap = {
-    1: "grid-cols-1",
-    2: "grid-cols-2",
-    3: "grid-cols-3",
-    4: "grid-cols-4"
-  };
-  if (!responsive) {
-    return colsMap[gridCols] || "grid-cols-1";
-  }
-  switch (gridCols) {
-    case 1:
-      return "grid-cols-1";
-    case 2:
-      return "grid-cols-1 lg:grid-cols-2";
-    case 3:
-      return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
-    case 4:
-      return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
-    default:
-      return "grid-cols-1 lg:grid-cols-2";
-  }
-};
-var PageLayout = React15__namespace.forwardRef(
-  ({
-    title,
-    description,
-    children,
-    actions = [],
-    cards = [],
-    mode = "simple",
-    maxWidth = "xl",
-    gridCols = 2,
-    responsive = true,
-    className,
-    headerContent
-  }, ref) => {
-    const [editingCards, setEditingCards] = React15__namespace.useState(/* @__PURE__ */ new Set());
-    const toggleEdit = (cardKey) => {
-      setEditingCards((prev) => {
-        const next = new Set(prev);
-        if (next.has(cardKey)) {
-          next.delete(cardKey);
-        } else {
-          next.add(cardKey);
-        }
-        return next;
-      });
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, 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: cn(
-        "container mx-auto px-4 py-6",
-        maxWidthClasses[maxWidth]
-      ), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-h-[2.5rem]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-foreground mb-2", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: description })
-        ] }),
-        headerContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: headerContent }),
-        actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: actions.map((action, index) => {
-          const Icon2 = action.icon;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              onClick: action.onClick,
-              className: cn(
-                "inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors",
-                {
-                  "bg-primary text-primary-foreground hover:bg-primary/90": action.variant === "default" || !action.variant,
-                  "bg-secondary text-secondary-foreground hover:bg-secondary/80": action.variant === "secondary",
-                  "bg-destructive text-destructive-foreground hover:bg-destructive/90": action.variant === "destructive",
-                  "border border-input bg-background hover:bg-accent hover:text-accent-foreground": action.variant === "outline",
-                  "hover:bg-accent hover:text-accent-foreground": action.variant === "ghost"
-                }
-              ),
-              children: [
-                Icon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4" }),
-                action.label
-              ]
-            },
-            index
-          );
-        }) })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-        "container mx-auto px-4 py-6",
-        maxWidthClasses[maxWidth],
-        className
-      ), children: mode === "cards" && cards.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6", getGridClasses(gridCols, responsive)), children: cards.map((card) => {
-        const isEditing = editingCards.has(card.key);
-        const shouldExpand = card.expandOnEdit && isEditing;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "transition-all duration-300",
-              shouldExpand && (gridCols > 1 ? "col-span-full" : "")
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              card.component,
-              {
-                ...card.props,
-                isEditing,
-                onToggleEdit: () => toggleEdit(card.key)
-              }
-            )
-          },
-          card.key
-        );
-      }) }) : children }) })
-    ] });
-  }
-);
-PageLayout.displayName = "PageLayout";
+));
+Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
 var DetailPageLayout = ({
   title,
   description,
@@ -7805,6 +8166,90 @@ var useAlertDetail = (id) => {
     handleResolveAlert
   };
 };
+var useBusinessFilters = ({ initialData }) => {
+  const [filteredData, setFilteredData] = React15.useState(initialData);
+  const [filters, setFilters] = React15.useState({
+    name: "",
+    productName: "",
+    status: "",
+    createdDateStart: void 0,
+    createdDateEnd: void 0
+  });
+  const handleFilterChange = React15.useCallback((field, value) => {
+    setFilters((prev) => ({ ...prev, [field]: value }));
+  }, []);
+  const applyFilters = React15.useCallback(() => {
+    let filtered = initialData;
+    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
+      );
+    }
+    setFilteredData(filtered);
+  }, [filters, initialData]);
+  const resetFilters = React15.useCallback(() => {
+    setFilters({
+      name: "",
+      productName: "",
+      status: "",
+      createdDateStart: void 0,
+      createdDateEnd: void 0
+    });
+    setFilteredData(initialData);
+  }, [initialData]);
+  return {
+    filters,
+    filteredData,
+    handleFilterChange,
+    applyFilters,
+    resetFilters
+  };
+};
+var useBusinessSort = ({ data }) => {
+  const [sortBy, setSortBy] = React15.useState("created");
+  const [sortDirection, setSortDirection] = React15.useState("desc");
+  const handleSort = React15.useCallback((key) => {
+    if (sortBy === key) {
+      setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortDirection("asc");
+    }
+  }, [sortBy]);
+  const sortedData = React15.useMemo(() => {
+    return [...data].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;
+    });
+  }, [data, sortBy, sortDirection]);
+  return {
+    sortBy,
+    sortDirection,
+    sortedData,
+    handleSort
+  };
+};
 var AlertDetail = () => {
   const { id } = reactRouterDom.useParams();
   const navigate = reactRouterDom.useNavigate();
@@ -8228,237 +8673,194 @@ var mockBusinessesList = [
     id: "8110892",
     businessName: "Tech Solutions Corp",
     productName: "Digital Finance Inc FBO Tech Solutions",
-    cipStatus: "IN_REVIEW",
-    status: "PENDING_APPROVAL",
-    type: "Business",
-    subType: "Customer",
-    isDeveloperInitiated: false,
-    provider: "Alloy",
-    result: 'vendor:KYC_VENDOR status:in_progress data:"kyc_id:\\"kyc-345\\" business_id:\\"biz-678\\" initiated:{seconds:1761333700 nanos:111222000}"',
-    created: "2025-10-02",
-    modified: "2025-10-02"
-  },
-  {
-    id: "8110654",
-    businessName: "Global Trade Partners LLC",
-    productName: "Swift Transfer FBO Global Trade",
-    cipStatus: "PASS",
-    status: "ACTIVE",
-    type: "Individual",
-    subType: "UBO",
-    isDeveloperInitiated: true,
-    provider: "Plaid",
-    result: 'vendor:VERIFICATION_VENDOR status:completed data:"account_verified:true holder_verified:true timestamp:{seconds:1761333600 nanos:333444000}"',
-    created: "2025-10-01",
-    modified: "2025-10-01"
-  }
-];
-var Businesses = () => {
-  const navigate = reactRouterDom.useNavigate();
-  const [businesses, setBusinesses] = React15.useState(mockBusinessesList);
-  const [filteredBusinesses, setFilteredBusinesses] = React15.useState(mockBusinessesList);
-  const [sortBy, setSortBy] = React15.useState("created");
-  const [sortDirection, setSortDirection] = React15.useState("desc");
-  const [filters, setFilters] = React15.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 columns2 = [
-    {
-      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) => /* @__PURE__ */ jsxRuntime.jsx(CIPStatusBadge, { status: value })
-    },
-    {
-      key: "status",
-      title: "Status",
-      sortable: true,
-      render: (value) => /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: value?.toUpperCase() })
-    },
-    {
-      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-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: "Businesses" }) }),
-      /* @__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.jsx(
-                    DatePicker,
-                    {
-                      date: filters.createdDateStart,
-                      onDateChange: (date) => handleFilterChange("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) => handleFilterChange("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: resetFilters, children: "Reset Filters" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => navigate("/business/create"), children: "Create Business" })
+    cipStatus: "IN_REVIEW",
+    status: "PENDING_APPROVAL",
+    type: "Business",
+    subType: "Customer",
+    isDeveloperInitiated: false,
+    provider: "Alloy",
+    result: 'vendor:KYC_VENDOR status:in_progress data:"kyc_id:\\"kyc-345\\" business_id:\\"biz-678\\" initiated:{seconds:1761333700 nanos:111222000}"',
+    created: "2025-10-02",
+    modified: "2025-10-02"
+  },
+  {
+    id: "8110654",
+    businessName: "Global Trade Partners LLC",
+    productName: "Swift Transfer FBO Global Trade",
+    cipStatus: "PASS",
+    status: "ACTIVE",
+    type: "Individual",
+    subType: "UBO",
+    isDeveloperInitiated: true,
+    provider: "Plaid",
+    result: 'vendor:VERIFICATION_VENDOR status:completed data:"account_verified:true holder_verified:true timestamp:{seconds:1761333600 nanos:333444000}"',
+    created: "2025-10-01",
+    modified: "2025-10-01"
+  }
+];
+var columns2 = [
+  {
+    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) => /* @__PURE__ */ jsxRuntime.jsx(CIPStatusBadge, { status: value })
+  },
+  {
+    key: "status",
+    title: "Status",
+    sortable: true,
+    render: (value) => /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: value?.toUpperCase() })
+  },
+  {
+    key: "created",
+    title: "Created",
+    sortable: true
+  },
+  {
+    key: "modified",
+    title: "Modified",
+    sortable: true
+  }
+];
+var BusinessesView = ({
+  filters,
+  sortedData,
+  sortBy,
+  sortDirection,
+  onFilterChange,
+  onResetFilters,
+  onSort,
+  onRowClick,
+  onCreateBusiness
+}) => {
+  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: "Businesses" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BusinessFiltersSheet,
+          {
+            filters,
+            onFilterChange,
+            onResetFilters
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onCreateBusiness, 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: columns2,
-        data: sortedBusinesses,
+        data: sortedData,
         sortBy,
         sortDirection,
-        onSort: handleSort,
-        onRowClick: handleRowClick
+        onSort,
+        onRowClick
       }
     ) }) }) })
   ] });
 };
+var Businesses = () => {
+  const navigate = reactRouterDom.useNavigate();
+  const [filters, setFilters] = React15.useState({
+    name: "",
+    productName: "",
+    status: "",
+    createdDateStart: void 0,
+    createdDateEnd: void 0
+  });
+  const [sortBy, setSortBy] = React15.useState("created");
+  const [sortDirection, setSortDirection] = React15.useState("desc");
+  const filteredData = React15.useMemo(() => {
+    return mockBusinessesList.filter((business) => {
+      if (filters.name && !business.businessName.toLowerCase().includes(filters.name.toLowerCase())) {
+        return false;
+      }
+      if (filters.productName && !business.productName.toLowerCase().includes(filters.productName.toLowerCase())) {
+        return false;
+      }
+      if (filters.status && business.status.toLowerCase() !== filters.status.toLowerCase()) {
+        return false;
+      }
+      if (filters.createdDateStart || filters.createdDateEnd) {
+        const created = new Date(business.created);
+        if (filters.createdDateStart && created < filters.createdDateStart) {
+          return false;
+        }
+        if (filters.createdDateEnd && created > filters.createdDateEnd) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }, [filters]);
+  const sortedData = React15.useMemo(() => {
+    return [...filteredData].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;
+    });
+  }, [filteredData, sortBy, sortDirection]);
+  const handleFilterChange = React15.useCallback((field, value) => {
+    setFilters((prev) => ({ ...prev, [field]: value }));
+  }, []);
+  const resetFilters = React15.useCallback(() => {
+    setFilters({
+      name: "",
+      productName: "",
+      status: "",
+      createdDateStart: void 0,
+      createdDateEnd: void 0
+    });
+  }, []);
+  const handleSort = React15.useCallback((key) => {
+    if (sortBy === key) {
+      setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortDirection("asc");
+    }
+  }, [sortBy]);
+  const handleRowClick = React15.useCallback((business) => {
+    navigate(`/business/${business.id}`);
+  }, [navigate]);
+  const handleCreateBusiness = React15.useCallback(() => {
+    navigate("/business/create");
+  }, [navigate]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BusinessesView,
+    {
+      filters,
+      sortedData,
+      sortBy,
+      sortDirection,
+      onFilterChange: handleFilterChange,
+      onResetFilters: resetFilters,
+      onSort: handleSort,
+      onRowClick: handleRowClick,
+      onCreateBusiness: handleCreateBusiness
+    }
+  );
+};
 var Businesses_default = Businesses;
 var typeConfig3 = {
   Individual: {
@@ -8684,7 +9086,7 @@ var mockBusinessAccounts = {
   ]
 };
 var UBOCard = ({ ubos }) => {
-  const columns2 = [
+  const columns3 = [
     {
       key: "name",
       title: "Name",
@@ -8728,7 +9130,7 @@ var UBOCard = ({ ubos }) => {
     ] }) : /* @__PURE__ */ jsxRuntime.jsx(
       DataTable,
       {
-        columns: columns2,
+        columns: columns3,
         data: ubos
       }
     ) })
@@ -9135,302 +9537,62 @@ var Business = () => {
   );
 };
 var BusinessDetail_default = Business;
+var defaultBusinessFormValues = {
+  legalName: "",
+  dbaName: "",
+  businessType: "",
+  taxId: "",
+  formationDate: "",
+  idType: "EIN",
+  incorporationState: "",
+  website: "",
+  email: "",
+  mobilePhone: "",
+  mcc: "",
+  naics: "",
+  achCompanyId: "",
+  achCompanyName: "",
+  externalId: "",
+  contactFirstName: "",
+  contactLastName: "",
+  contactEmail: "",
+  contactPhone: "",
+  address: {
+    streetAddress: "",
+    apartment: "",
+    city: "",
+    state: "",
+    postalCode: "",
+    country: "US",
+    addressType: "business"
+  }
+};
 var CreateBusiness = () => {
   const navigate = reactRouterDom.useNavigate();
   const [businessType, setBusinessType] = React15.useState("");
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(businessProfileSchema),
-    defaultValues: {
-      legalName: "",
-      dbaName: "",
-      businessType: "",
-      taxId: "",
-      formationDate: "",
-      idType: "EIN",
-      incorporationState: "",
-      website: "",
-      email: "",
-      mobilePhone: "",
-      mcc: "",
-      naics: "",
-      achCompanyId: "",
-      achCompanyName: "",
-      externalId: "",
-      contactFirstName: "",
-      contactLastName: "",
-      contactEmail: "",
-      contactPhone: "",
-      address: {
-        streetAddress: "",
-        apartment: "",
-        city: "",
-        state: "",
-        postalCode: "",
-        country: "US",
-        addressType: "business"
-      }
-    }
+    defaultValues: defaultBusinessFormValues
   });
-  const onSubmit = (data) => {
+  const onSubmit = React15.useCallback((data) => {
     console.log("Business data:", data);
     navigate("/business");
-  };
+  }, [navigate]);
+  const handleCancel = React15.useCallback(() => {
+    navigate("/business");
+  }, [navigate]);
+  const handleBusinessTypeChange = React15.useCallback((value) => {
+    setBusinessType(value);
+    form.setValue("businessType", value);
+  }, [form]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    PageLayout,
+    CreateBusinessView,
     {
-      title: "Create Business",
-      actions: [
-        { label: "Cancel", variant: "outline", onClick: () => navigate("/business") },
-        { label: "Create Business", variant: "default", onClick: form.handleSubmit(onSubmit) }
-      ],
-      children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Business Information" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Legal Name",
-                placeholder: "Enter legal business name",
-                required: true,
-                ...form.register("legalName")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "DBA Name",
-                placeholder: "Enter DBA name",
-                hint: "Doing Business As name",
-                ...form.register("dbaName")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                EnhancedSelect,
-                {
-                  label: "Business Type",
-                  placeholder: "Select business type",
-                  value: businessType,
-                  onValueChange: (value) => {
-                    setBusinessType(value);
-                    form.setValue("businessType", value);
-                  },
-                  options: [
-                    { value: "corporation", label: "Corporation" },
-                    { value: "llc", label: "LLC" },
-                    { value: "partnership", label: "Partnership" },
-                    { value: "sole_proprietorship", label: "Sole Proprietorship" }
-                  ]
-                }
-              ),
-              businessType && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Preview:" }),
-                /* @__PURE__ */ jsxRuntime.jsx(BusinessTypeBadge, { type: businessType })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Tax ID (EIN)",
-                placeholder: "12-3456789",
-                hint: "Employer Identification Number",
-                required: true,
-                ...form.register("taxId")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Formation Date",
-                placeholder: "YYYY-MM-DD",
-                type: "date",
-                ...form.register("formationDate")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Incorporation State",
-                placeholder: "Enter state",
-                ...form.register("incorporationState")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Website",
-                placeholder: "https://www.business.com",
-                type: "url",
-                ...form.register("website")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Email Address",
-                placeholder: "contact@business.com",
-                type: "email",
-                ...form.register("email")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Mobile Phone",
-                placeholder: "+1 (555) 123-4567",
-                ...form.register("mobilePhone")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "MCC",
-                placeholder: "1234",
-                hint: "4-digit Merchant Category Code",
-                ...form.register("mcc")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "NAICS",
-                placeholder: "123456",
-                hint: "6-digit industry classification",
-                ...form.register("naics")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "ACH Company ID",
-                placeholder: "1234567890",
-                hint: "10-digit ACH identifier",
-                ...form.register("achCompanyId")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "ACH Company Name",
-                placeholder: "Enter ACH company name",
-                ...form.register("achCompanyName")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "External ID",
-                placeholder: "UUID format",
-                hint: "External system identifier",
-                ...form.register("externalId")
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Business Address" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Street Address",
-                placeholder: "Enter street address",
-                required: true,
-                ...form.register("address.streetAddress")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Apartment/Suite",
-                placeholder: "Enter apartment or suite number",
-                ...form.register("address.apartment")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "City",
-                placeholder: "Enter city",
-                required: true,
-                ...form.register("address.city")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "State",
-                placeholder: "Enter state",
-                required: true,
-                ...form.register("address.state")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Postal Code",
-                placeholder: "12345",
-                required: true,
-                ...form.register("address.postalCode")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedSelect,
-              {
-                label: "Country",
-                placeholder: "Select country",
-                value: form.watch("address.country"),
-                onValueChange: (value) => form.setValue("address.country", value),
-                options: [
-                  { value: "US", label: "United States" },
-                  { value: "CA", label: "Canada" },
-                  { value: "GB", label: "United Kingdom" },
-                  { value: "DE", label: "Germany" }
-                ]
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Contact Information" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Contact First Name",
-                placeholder: "Enter first name",
-                ...form.register("contactFirstName")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Contact Last Name",
-                placeholder: "Enter last name",
-                ...form.register("contactLastName")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Contact Email",
-                placeholder: "contact@business.com",
-                type: "email",
-                ...form.register("contactEmail")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              EnhancedInput,
-              {
-                label: "Contact Phone",
-                placeholder: "+1 (555) 123-4567",
-                ...form.register("contactPhone")
-              }
-            )
-          ] })
-        ] })
-      ] })
+      form,
+      businessType,
+      onBusinessTypeChange: handleBusinessTypeChange,
+      onSubmit,
+      onCancel: handleCancel
     }
   );
 };
@@ -9602,7 +9764,7 @@ var Counterparties = () => {
   const handleRowClick = (counterparty) => {
     navigate(`/counterparty/${counterparty.id}`);
   };
-  const columns2 = [
+  const columns3 = [
     {
       key: "id",
       title: "Counterparty ID",
@@ -9741,7 +9903,7 @@ var Counterparties = () => {
     /* @__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: columns2,
+        columns: columns3,
         data: sortedCounterparties,
         sortBy,
         sortDirection,
@@ -10225,7 +10387,7 @@ var Individuals = () => {
   const handleRowClick = (row) => {
     navigate(`/individual/${row.id}`);
   };
-  const columns2 = [
+  const columns3 = [
     {
       key: "id",
       title: "Individual ID",
@@ -10359,7 +10521,7 @@ var Individuals = () => {
     /* @__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: columns2,
+        columns: columns3,
         data: sortedIndividuals,
         sortBy,
         sortDirection,
@@ -12817,6 +12979,7 @@ exports.BeneficiaryCard = BeneficiaryCard;
 exports.BeneficiaryDomesticWire = BeneficiaryDomesticWire;
 exports.Breadcrumb = Breadcrumb;
 exports.BusinessDetail = BusinessDetail_default;
+exports.BusinessFiltersSheet = BusinessFiltersSheet;
 exports.BusinessProfileCard = BusinessProfileCard;
 exports.BusinessStatusCard = BusinessStatusCard;
 exports.BusinessTypeBadge = BusinessTypeBadge;
@@ -12842,6 +13005,7 @@ exports.CounterpartyProfileCard = CounterpartyProfileCard;
 exports.CounterpartyRecordsCard = CounterpartyRecordsCard;
 exports.CounterpartyTypeBadge = CounterpartyTypeBadge;
 exports.CreateBusiness = Create_default;
+exports.CreateBusinessView = CreateBusinessView;
 exports.CreateCounterparty = Create_default2;
 exports.CreateIndividual = Create_default3;
 exports.Dashboard = Dashboard_default;
@@ -12985,6 +13149,8 @@ exports.reducer = reducer;
 exports.textareaVariants = textareaVariants;
 exports.toast = toast;
 exports.useAlertDetail = useAlertDetail;
+exports.useBusinessFilters = useBusinessFilters;
+exports.useBusinessSort = useBusinessSort;
 exports.useEditState = useEditState;
 exports.useFormWithEditState = useFormWithEditState;
 exports.useIsMobile = useIsMobile;