braid-ui 1.0.22 → 1.0.24

package/dist/index.js

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, ChevronUp, Check, X, PanelLeft, Edit, Home, Globe, CreditCard, Building, MoreVertical, Minus, TrendingDown, TrendingUp, ChevronRight, Eye, Trash2, Plus, MessageSquare, Upload, FileText, Download, Copy, LayoutDashboard, Bell, Briefcase, FileCheck, Receipt, ArrowLeftRight, Users, Building2, Shield, AlertCircle, RefreshCw, Landmark, Search, Repeat, Zap, Box, Settings, BarChart3, Key, Heart, User, AlertTriangle, XCircle, CheckCircle, Clock, Ban, Loader2, Circle, ArrowDownRight, ArrowUpRight, Filter, ChevronLeft, Wallet, CheckCircle2, StickyNote, FileUp, RotateCcw, Send, PlayCircle, UserPlus, ChevronsUpDown, CalendarIcon, UserCheck, FileJson } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, X, PanelLeft, Edit, Home, Globe, CreditCard, Building, MoreVertical, Minus, TrendingDown, TrendingUp, ChevronRight, Eye, Trash2, Plus, MessageSquare, Upload, FileText, Download, Copy, LayoutDashboard, Bell, Briefcase, FileCheck, Receipt, ArrowLeftRight, Users, Building2, Shield, AlertCircle, RefreshCw, Landmark, Search, Repeat, Zap, Box, Settings, BarChart3, Key, Filter, User, Heart, AlertTriangle, XCircle, CheckCircle, Clock, Ban, Loader2, Circle, ArrowDownRight, ArrowUpRight, ChevronLeft, Wallet, CheckCircle2, StickyNote, FileUp, RotateCcw, Send, PlayCircle, UserPlus, ChevronsUpDown, CalendarIcon, UserCheck, FileJson } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Slot } from '@radix-ui/react-slot';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -17,10 +17,10 @@ import { z } from 'zod';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@radix-ui/react-collapsible';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import { format } from 'date-fns';
 import { DayPicker } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as LabelPrimitive from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { useTheme } from 'next-themes';
@@ -3065,88 +3065,712 @@ function AppSidebar() {
 var MainLayout = ({ children }) => {
   return /* @__PURE__ */ jsx("div", { className: "flex min-h-screen w-full", children: /* @__PURE__ */ jsx("main", { className: "flex-1", children }) });
 };
-var useEditState = ({ initialEditing = false, onToggleEdit, onSave, onCancel }) => {
-  const [localEditing, setLocalEditing] = useState(initialEditing);
-  const [isLoading, setIsLoading] = useState(false);
-  useEffect(() => {
-    setLocalEditing(initialEditing);
-  }, [initialEditing]);
-  const isEditing = onToggleEdit !== void 0 ? initialEditing : localEditing;
-  const handleToggleEdit = useCallback(() => {
-    if (onToggleEdit) {
-      onToggleEdit();
-    } else {
-      setLocalEditing((prev) => !prev);
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    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 = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      if (onSave) {
-        await onSave();
+  );
+}
+Calendar.displayName = "Calendar";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React15.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.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.Content.displayName;
+function DatePicker({
+  date,
+  onDateChange,
+  placeholder = "Pick a date",
+  disabled = false,
+  className,
+  buttonClassName,
+  calendarClassName,
+  align = "start",
+  disabledDates,
+  label,
+  wrapperClassName
+}) {
+  const [open, setOpen] = React15.useState(false);
+  const handleSelect = (selectedDate) => {
+    onDateChange?.(selectedDate);
+    setOpen(false);
+  };
+  const picker = /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        disabled,
+        className: cn(
+          "justify-start text-left font-normal",
+          !date && "text-muted-foreground",
+          buttonClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+          date ? format(date, "MM/dd/yyyy") : placeholder
+        ]
       }
-      if (onToggleEdit) {
-        onToggleEdit();
-      } else {
-        setLocalEditing(false);
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: cn("w-auto p-0", className), align, children: /* @__PURE__ */ 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 = useCallback(() => {
-    if (onCancel) {
-      onCancel();
-    }
-    if (onToggleEdit) {
-      onToggleEdit();
-    } else {
-      setLocalEditing(false);
-    }
-  }, [onCancel, onToggleEdit]);
-  return {
-    isEditing,
-    isLoading,
-    handleToggleEdit,
-    handleSave,
-    handleCancel
+    ) })
+  ] });
+  if (label) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", wrapperClassName), children: [
+      /* @__PURE__ */ 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__ */ jsxs(Sheet, { children: [
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "gap-2", children: [
+      /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+      "Filters"
+    ] }) }),
+    /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-xl overflow-y-auto", children: [
+      /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Business Filters" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-6 py-6", children: [
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Name",
+            value: filters.name,
+            onChange: (e) => onFilterChange("name", e.target.value),
+            placeholder: "Enter business name"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Product Name",
+            value: filters.productName,
+            onChange: (e) => onFilterChange("productName", e.target.value),
+            placeholder: "Enter product name"
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Created Date Start" }),
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                date: filters.createdDateStart,
+                onDateChange: (date) => onFilterChange("createdDateStart", date),
+                placeholder: "MM/DD/YYYY",
+                buttonClassName: "w-full",
+                className: "bg-background z-50"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Created Date End" }),
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                date: filters.createdDateEnd,
+                onDateChange: (date) => onFilterChange("createdDateEnd", date),
+                placeholder: "MM/DD/YYYY",
+                buttonClassName: "w-full",
+                className: "bg-background z-50"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(SheetFooter, { className: "gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onResetFilters, children: "Reset Filters" }),
+        /* @__PURE__ */ 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.forwardRef(
+var PageLayout = React15.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 {
-        handleCancel();
-      }
+    const [editingCards, setEditingCards] = React15.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__ */ jsxs("div", { ref, className: "flex flex-col h-screen bg-gradient-subtle", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsx("div", { className: cn(
+        "container mx-auto px-4 py-6",
+        maxWidthClasses[maxWidth]
+      ), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-[2.5rem]", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-foreground mb-2", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
+        ] }),
+        headerContent && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: headerContent }),
+        actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions.map((action, index) => {
+          const Icon2 = action.icon;
+          return /* @__PURE__ */ 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__ */ jsx(Icon2, { className: "h-4 w-4" }),
+                action.label
+              ]
+            },
+            index
+          );
+        }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: cn(
+        "container mx-auto px-4 py-6",
+        maxWidthClasses[maxWidth],
+        className
+      ), children: mode === "cards" && cards.length > 0 ? /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "transition-all duration-300",
+              shouldExpand && (gridCols > 1 ? "col-span-full" : "")
+            ),
+            children: /* @__PURE__ */ jsx(
+              card.component,
+              {
+                ...card.props,
+                isEditing,
+                onToggleEdit: () => toggleEdit(card.key)
+              }
+            )
+          },
+          card.key
+        );
+      }) }) : children }) })
+    ] });
+  }
+);
+PageLayout.displayName = "PageLayout";
+var typeConfig = {
+  corporation: {
+    variant: "corporation",
+    label: "Corporation",
+    icon: Building
+  },
+  llc: {
+    variant: "llc",
+    label: "LLC",
+    icon: Briefcase
+  },
+  partnership: {
+    variant: "partnership",
+    label: "Partnership",
+    icon: Users
+  },
+  sole_proprietorship: {
+    variant: "sole_proprietorship",
+    label: "Sole Proprietorship",
+    icon: User
+  }
+};
+var BusinessTypeBadge = ({ type, className }) => {
+  const config = typeConfig[type];
+  const Icon2 = config.icon;
+  return /* @__PURE__ */ jsxs(Badge, { variant: config.variant, className, children: [
+    /* @__PURE__ */ jsx(Icon2, { className: "w-3 h-3 mr-1" }),
+    config.label
+  ] });
+};
+var BusinessForm = ({
+  form,
+  businessType,
+  onBusinessTypeChange,
+  onSubmit
+}) => {
+  return /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Business Information" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Legal Name",
+            placeholder: "Enter legal business name",
+            required: true,
+            ...form.register("legalName")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "DBA Name",
+            placeholder: "Enter DBA name",
+            hint: "Doing Business As name",
+            ...form.register("dbaName")
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Preview:" }),
+            /* @__PURE__ */ jsx(BusinessTypeBadge, { type: businessType })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Tax ID (EIN)",
+            placeholder: "12-3456789",
+            hint: "Employer Identification Number",
+            required: true,
+            ...form.register("taxId")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Formation Date",
+            placeholder: "YYYY-MM-DD",
+            type: "date",
+            ...form.register("formationDate")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Incorporation State",
+            placeholder: "Enter state",
+            ...form.register("incorporationState")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Website",
+            placeholder: "https://www.business.com",
+            type: "url",
+            ...form.register("website")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Email Address",
+            placeholder: "contact@business.com",
+            type: "email",
+            ...form.register("email")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Mobile Phone",
+            placeholder: "+1 (555) 123-4567",
+            ...form.register("mobilePhone")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "MCC",
+            placeholder: "1234",
+            hint: "4-digit Merchant Category Code",
+            ...form.register("mcc")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "NAICS",
+            placeholder: "123456",
+            hint: "6-digit industry classification",
+            ...form.register("naics")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "ACH Company ID",
+            placeholder: "1234567890",
+            hint: "10-digit ACH identifier",
+            ...form.register("achCompanyId")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "ACH Company Name",
+            placeholder: "Enter ACH company name",
+            ...form.register("achCompanyName")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "External ID",
+            placeholder: "UUID format",
+            hint: "External system identifier",
+            ...form.register("externalId")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Business Address" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Street Address",
+            placeholder: "Enter street address",
+            required: true,
+            ...form.register("address.streetAddress")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Apartment/Suite",
+            placeholder: "Enter apartment or suite number",
+            ...form.register("address.apartment")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "City",
+            placeholder: "Enter city",
+            required: true,
+            ...form.register("address.city")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "State",
+            placeholder: "Enter state",
+            required: true,
+            ...form.register("address.state")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Postal Code",
+            placeholder: "12345",
+            required: true,
+            ...form.register("address.postalCode")
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs(Card, { className: "p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Contact Information" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Contact First Name",
+            placeholder: "Enter first name",
+            ...form.register("contactFirstName")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Contact Last Name",
+            placeholder: "Enter last name",
+            ...form.register("contactLastName")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Contact Email",
+            placeholder: "contact@business.com",
+            type: "email",
+            ...form.register("contactEmail")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          EnhancedInput,
+          {
+            label: "Contact Phone",
+            placeholder: "+1 (555) 123-4567",
+            ...form.register("contactPhone")
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var CreateBusinessView = ({
+  form,
+  businessType,
+  onBusinessTypeChange,
+  onSubmit,
+  onCancel
+}) => {
+  return /* @__PURE__ */ jsx(
+    PageLayout,
+    {
+      title: "Create Business",
+      actions: [
+        { label: "Cancel", variant: "outline", onClick: onCancel },
+        { label: "Create Business", variant: "default", onClick: form.handleSubmit(onSubmit) }
+      ],
+      children: /* @__PURE__ */ jsx(
+        BusinessForm,
+        {
+          form,
+          businessType,
+          onBusinessTypeChange,
+          onSubmit
+        }
+      )
+    }
+  );
+};
+var useEditState = ({ initialEditing = false, onToggleEdit, onSave, onCancel }) => {
+  const [localEditing, setLocalEditing] = useState(initialEditing);
+  const [isLoading, setIsLoading] = useState(false);
+  useEffect(() => {
+    setLocalEditing(initialEditing);
+  }, [initialEditing]);
+  const isEditing = onToggleEdit !== void 0 ? initialEditing : localEditing;
+  const handleToggleEdit = useCallback(() => {
+    if (onToggleEdit) {
+      onToggleEdit();
+    } else {
+      setLocalEditing((prev) => !prev);
+    }
+  }, [onToggleEdit]);
+  const handleSave = 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 = useCallback(() => {
+    if (onCancel) {
+      onCancel();
+    }
+    if (onToggleEdit) {
+      onToggleEdit();
+    } else {
+      setLocalEditing(false);
+    }
+  }, [onCancel, onToggleEdit]);
+  return {
+    isEditing,
+    isLoading,
+    handleToggleEdit,
+    handleSave,
+    handleCancel
+  };
+};
+var EditableFormCard = React15.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();
+      }
     };
     return /* @__PURE__ */ jsx(
       FormCard,
@@ -3723,7 +4347,7 @@ var BankingDetailsCard = ({ isEditing, onToggleEdit, className }) => {
     }
   );
 };
-var typeConfig = {
+var typeConfig2 = {
   BUSINESS: {
     variant: "business",
     label: "Business",
@@ -3746,7 +4370,7 @@ var typeConfig = {
   }
 };
 var CounterpartyTypeBadge = ({ type, className }) => {
-  const config = typeConfig[type];
+  const config = typeConfig2[type];
   if (!config) {
     return /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className, children: [
       /* @__PURE__ */ jsx(Building2, { className: "w-3 h-3 mr-1" }),
@@ -4077,7 +4701,7 @@ var columnClasses = {
   4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
 };
 var DataGrid = React15.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;
@@ -4087,7 +4711,7 @@ var DataGrid = React15.forwardRef(
           ref,
           className: cn(
             "grid",
-            columnClasses[columns2],
+            columnClasses[columns3],
             gapClasses2[gap],
             className
           ),
@@ -4108,7 +4732,7 @@ var DataGrid = React15.forwardRef(
       section.title && /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-foreground mb-2", children: section.title }),
       /* @__PURE__ */ jsx("div", { className: cn(
         "grid",
-        columnClasses[columns2],
+        columnClasses[columns3],
         gapClasses2[gap]
       ), children: section.items.map((item, itemIndex) => /* @__PURE__ */ jsx(
         InfoField,
@@ -4853,7 +5477,7 @@ var FormSection = React15.forwardRef(
     className,
     spacing: spacing2 = "md",
     layout = "vertical",
-    columns: columns2 = 2
+    columns: columns3 = 2
   }, ref) => {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-4", className), children: [
       (title || description) && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
@@ -4861,7 +5485,7 @@ var FormSection = React15.forwardRef(
         description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
       ] }),
       /* @__PURE__ */ jsx("div", { className: cn(
-        layout === "grid" ? `grid gap-4 ${gridClasses[columns2]}` : spacingClasses[spacing2]
+        layout === "grid" ? `grid gap-4 ${gridClasses[columns3]}` : spacingClasses[spacing2]
       ), children })
     ] });
   }
@@ -5631,216 +6255,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__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsxs(CardHeader, { direction: "row", children: [
-      /* @__PURE__ */ jsx(CardTitle, { size: "md", children: "Statement Summary" }),
-      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onEdit, children: [
-        /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4 mr-2" }),
-        "Edit"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
-      hasValue(data.account) && /* @__PURE__ */ jsx(
-        InfoField,
-        {
-          label: "Account",
-          value: data.account,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.productId) && /* @__PURE__ */ jsx(
-        InfoField,
-        {
-          label: "Product ID",
-          value: data.productId,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.programId) && /* @__PURE__ */ jsx(
-        InfoField,
-        {
-          label: "Program ID",
-          value: data.programId,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.startDate) && /* @__PURE__ */ jsx(
-        InfoField,
-        {
-          label: "Start Date",
-          value: data.startDate,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.endDate) && /* @__PURE__ */ jsx(
-        InfoField,
-        {
-          label: "End Date",
-          value: data.endDate,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.startingBalance) && /* @__PURE__ */ jsx(
-        InfoField,
-        {
-          label: "Starting Balance",
-          value: data.startingBalance,
-          layout: "horizontal"
-        }
-      ),
-      hasValue(data.endingBalance) && /* @__PURE__ */ jsx(
-        InfoField,
-        {
-          label: "Ending Balance",
-          value: data.endingBalance,
-          layout: "horizontal"
-        }
-      ),
-      balanceChange && /* @__PURE__ */ jsx(
-        InfoField,
-        {
-          label: "Balance Change",
-          value: /* @__PURE__ */ 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__ */ jsx(
-    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.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React15.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive.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.Content.displayName;
-function DatePicker({
-  date,
-  onDateChange,
-  placeholder = "Pick a date",
-  disabled = false,
-  className,
-  buttonClassName,
-  calendarClassName,
-  align = "start",
-  disabledDates,
-  label,
-  wrapperClassName
-}) {
-  const [open, setOpen] = React15.useState(false);
-  const handleSelect = (selectedDate) => {
-    onDateChange?.(selectedDate);
-    setOpen(false);
-  };
-  const picker = /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        variant: "outline",
-        disabled,
-        className: cn(
-          "justify-start text-left font-normal",
-          !date && "text-muted-foreground",
-          buttonClassName
-        ),
-        children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
-          date ? format(date, "MM/dd/yyyy") : placeholder
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: cn("w-auto p-0", className), align, children: /* @__PURE__ */ 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__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { direction: "row", children: [
+      /* @__PURE__ */ jsx(CardTitle, { size: "md", children: "Statement Summary" }),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onEdit, children: [
+        /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4 mr-2" }),
+        "Edit"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+      hasValue(data.account) && /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Account",
+          value: data.account,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.productId) && /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Product ID",
+          value: data.productId,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.programId) && /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Program ID",
+          value: data.programId,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.startDate) && /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Start Date",
+          value: data.startDate,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.endDate) && /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "End Date",
+          value: data.endDate,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.startingBalance) && /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Starting Balance",
+          value: data.startingBalance,
+          layout: "horizontal"
+        }
+      ),
+      hasValue(data.endingBalance) && /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Ending Balance",
+          value: data.endingBalance,
+          layout: "horizontal"
+        }
+      ),
+      balanceChange && /* @__PURE__ */ jsx(
+        InfoField,
+        {
+          label: "Balance Change",
+          value: /* @__PURE__ */ jsx("span", { className: balanceChange.isPositive ? "text-green-600 font-medium" : "text-red-600 font-medium", children: balanceChange.formatted }),
+          layout: "horizontal"
+        }
+      )
+    ] }) })
   ] });
-  if (label) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", wrapperClassName), children: [
-      /* @__PURE__ */ 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,
@@ -5879,7 +6392,7 @@ function DataTable({
     return /* @__PURE__ */ jsx("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsx("div", { className: "p-8 text-center", children: /* @__PURE__ */ jsx("div", { className: "animate-pulse text-muted-foreground", children: "Loading..." }) }) });
   }
   return /* @__PURE__ */ jsx("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b bg-muted/50", children: columns2.map((column) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b bg-muted/50", children: columns3.map((column) => /* @__PURE__ */ jsx(
       "th",
       {
         style: column.width ? { width: column.width } : void 0,
@@ -5904,7 +6417,7 @@ function DataTable({
       },
       column.key
     )) }) }),
-    /* @__PURE__ */ jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns2.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) }) : data.map((row, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns3.length, className: "h-24 text-center text-muted-foreground", children: emptyMessage }) }) : data.map((row, index) => /* @__PURE__ */ jsx(
       "tr",
       {
         className: cn(
@@ -5912,7 +6425,7 @@ function DataTable({
           onRowClick && "cursor-pointer"
         ),
         onClick: () => onRowClick?.(row),
-        children: columns2.map((column) => /* @__PURE__ */ jsx(
+        children: columns3.map((column) => /* @__PURE__ */ jsx(
           "td",
           {
             style: column.width ? { width: column.width } : void 0,
@@ -6315,36 +6828,6 @@ var AccountCard = React15.forwardRef(
   }
 );
 AccountCard.displayName = "AccountCard";
-var typeConfig2 = {
-  corporation: {
-    variant: "corporation",
-    label: "Corporation",
-    icon: Building
-  },
-  llc: {
-    variant: "llc",
-    label: "LLC",
-    icon: Briefcase
-  },
-  partnership: {
-    variant: "partnership",
-    label: "Partnership",
-    icon: Users
-  },
-  sole_proprietorship: {
-    variant: "sole_proprietorship",
-    label: "Sole Proprietorship",
-    icon: User
-  }
-};
-var BusinessTypeBadge = ({ type, className }) => {
-  const config = typeConfig2[type];
-  const Icon2 = config.icon;
-  return /* @__PURE__ */ jsxs(Badge, { variant: config.variant, className, children: [
-    /* @__PURE__ */ jsx(Icon2, { className: "w-3 h-3 mr-1" }),
-    config.label
-  ] });
-};
 var Checkbox = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
@@ -6362,130 +6845,8 @@ var Checkbox = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__
       }
     )
   }
-));
-Checkbox.displayName = CheckboxPrimitive.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.forwardRef(
-  ({
-    title,
-    description,
-    children,
-    actions = [],
-    cards = [],
-    mode = "simple",
-    maxWidth = "xl",
-    gridCols = 2,
-    responsive = true,
-    className,
-    headerContent
-  }, ref) => {
-    const [editingCards, setEditingCards] = React15.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__ */ jsxs("div", { ref, className: "flex flex-col h-screen bg-gradient-subtle", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsx("div", { className: cn(
-        "container mx-auto px-4 py-6",
-        maxWidthClasses[maxWidth]
-      ), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-[2.5rem]", children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-foreground mb-2", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
-        ] }),
-        headerContent && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: headerContent }),
-        actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions.map((action, index) => {
-          const Icon2 = action.icon;
-          return /* @__PURE__ */ 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__ */ jsx(Icon2, { className: "h-4 w-4" }),
-                action.label
-              ]
-            },
-            index
-          );
-        }) })
-      ] }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: cn(
-        "container mx-auto px-4 py-6",
-        maxWidthClasses[maxWidth],
-        className
-      ), children: mode === "cards" && cards.length > 0 ? /* @__PURE__ */ 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__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "transition-all duration-300",
-              shouldExpand && (gridCols > 1 ? "col-span-full" : "")
-            ),
-            children: /* @__PURE__ */ jsx(
-              card.component,
-              {
-                ...card.props,
-                isEditing,
-                onToggleEdit: () => toggleEdit(card.key)
-              }
-            )
-          },
-          card.key
-        );
-      }) }) : children }) })
-    ] });
-  }
-);
-PageLayout.displayName = "PageLayout";
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 var DetailPageLayout = ({
   title,
   description,
@@ -7773,6 +8134,90 @@ var useAlertDetail = (id) => {
     handleResolveAlert
   };
 };
+var useBusinessFilters = ({ initialData }) => {
+  const [filteredData, setFilteredData] = useState(initialData);
+  const [filters, setFilters] = useState({
+    name: "",
+    productName: "",
+    status: "",
+    createdDateStart: void 0,
+    createdDateEnd: void 0
+  });
+  const handleFilterChange = useCallback((field, value) => {
+    setFilters((prev) => ({ ...prev, [field]: value }));
+  }, []);
+  const applyFilters = 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 = 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] = useState("created");
+  const [sortDirection, setSortDirection] = useState("desc");
+  const handleSort = useCallback((key) => {
+    if (sortBy === key) {
+      setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortDirection("asc");
+    }
+  }, [sortBy]);
+  const sortedData = 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 } = useParams();
   const navigate = useNavigate();
@@ -8196,237 +8641,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 = useNavigate();
-  const [businesses, setBusinesses] = useState(mockBusinessesList);
-  const [filteredBusinesses, setFilteredBusinesses] = useState(mockBusinessesList);
-  const [sortBy, setSortBy] = useState("created");
-  const [sortDirection, setSortDirection] = useState("desc");
-  const [filters, setFilters] = 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__ */ jsx("span", { className: "text-primary hover:underline cursor-pointer", children: value })
-    },
-    {
-      key: "cipStatus",
-      title: "CIP status",
-      sortable: true,
-      render: (value) => /* @__PURE__ */ jsx(CIPStatusBadge, { status: value })
-    },
-    {
-      key: "status",
-      title: "Status",
-      sortable: true,
-      render: (value) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col h-screen bg-gradient-subtle", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-6 max-w-none", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-foreground mb-2", children: "Businesses" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(Sheet, { children: [
-          /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "gap-2", children: [
-            /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
-            "Filters"
-          ] }) }),
-          /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-full sm:max-w-xl overflow-y-auto", children: [
-            /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Business Filters" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-6 py-6", children: [
-              /* @__PURE__ */ jsx(
-                EnhancedInput,
-                {
-                  label: "Name",
-                  value: filters.name,
-                  onChange: (e) => handleFilterChange("name", e.target.value),
-                  placeholder: "Enter business name"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                EnhancedInput,
-                {
-                  label: "Product Name",
-                  value: filters.productName,
-                  onChange: (e) => handleFilterChange("productName", e.target.value),
-                  placeholder: "Enter product name"
-                }
-              ),
-              /* @__PURE__ */ 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__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Created Date Start" }),
-                  /* @__PURE__ */ jsx(
-                    DatePicker,
-                    {
-                      date: filters.createdDateStart,
-                      onDateChange: (date) => handleFilterChange("createdDateStart", date),
-                      placeholder: "MM/DD/YYYY",
-                      buttonClassName: "w-full",
-                      className: "bg-background z-50"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Created Date End" }),
-                  /* @__PURE__ */ jsx(
-                    DatePicker,
-                    {
-                      date: filters.createdDateEnd,
-                      onDateChange: (date) => handleFilterChange("createdDateEnd", date),
-                      placeholder: "MM/DD/YYYY",
-                      buttonClassName: "w-full",
-                      className: "bg-background z-50"
-                    }
-                  )
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(SheetFooter, { className: "gap-2", children: [
-              /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: resetFilters, children: "Reset Filters" }),
-              /* @__PURE__ */ jsx(Button, { onClick: applyFilters, children: "Apply Filters" })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ 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__ */ jsx("span", { className: "text-primary hover:underline cursor-pointer", children: value })
+  },
+  {
+    key: "cipStatus",
+    title: "CIP status",
+    sortable: true,
+    render: (value) => /* @__PURE__ */ jsx(CIPStatusBadge, { status: value })
+  },
+  {
+    key: "status",
+    title: "Status",
+    sortable: true,
+    render: (value) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col h-screen bg-gradient-subtle", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-none border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 py-6 max-w-none", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold text-foreground mb-2", children: "Businesses" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          BusinessFiltersSheet,
+          {
+            filters,
+            onFilterChange,
+            onResetFilters
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { onClick: onCreateBusiness, children: "Create Business" })
       ] })
     ] }) }) }),
     /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 mt-4 overflow-auto", children: /* @__PURE__ */ jsx(
       DataTable,
       {
         columns: columns2,
-        data: sortedBusinesses,
+        data: sortedData,
         sortBy,
         sortDirection,
-        onSort: handleSort,
-        onRowClick: handleRowClick
+        onSort,
+        onRowClick
       }
     ) }) }) })
   ] });
 };
+var Businesses = () => {
+  const navigate = useNavigate();
+  const [filters, setFilters] = useState({
+    name: "",
+    productName: "",
+    status: "",
+    createdDateStart: void 0,
+    createdDateEnd: void 0
+  });
+  const [sortBy, setSortBy] = useState("created");
+  const [sortDirection, setSortDirection] = useState("desc");
+  const filteredData = 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 = 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 = useCallback((field, value) => {
+    setFilters((prev) => ({ ...prev, [field]: value }));
+  }, []);
+  const resetFilters = useCallback(() => {
+    setFilters({
+      name: "",
+      productName: "",
+      status: "",
+      createdDateStart: void 0,
+      createdDateEnd: void 0
+    });
+  }, []);
+  const handleSort = useCallback((key) => {
+    if (sortBy === key) {
+      setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(key);
+      setSortDirection("asc");
+    }
+  }, [sortBy]);
+  const handleRowClick = useCallback((business) => {
+    navigate(`/business/${business.id}`);
+  }, [navigate]);
+  const handleCreateBusiness = useCallback(() => {
+    navigate("/business/create");
+  }, [navigate]);
+  return /* @__PURE__ */ jsx(
+    BusinessesView,
+    {
+      filters,
+      sortedData,
+      sortBy,
+      sortDirection,
+      onFilterChange: handleFilterChange,
+      onResetFilters: resetFilters,
+      onSort: handleSort,
+      onRowClick: handleRowClick,
+      onCreateBusiness: handleCreateBusiness
+    }
+  );
+};
 var Businesses_default = Businesses;
 var typeConfig3 = {
   Individual: {
@@ -8652,7 +9054,7 @@ var mockBusinessAccounts = {
   ]
 };
 var UBOCard = ({ ubos }) => {
-  const columns2 = [
+  const columns3 = [
     {
       key: "name",
       title: "Name",
@@ -8696,7 +9098,7 @@ var UBOCard = ({ ubos }) => {
     ] }) : /* @__PURE__ */ jsx(
       DataTable,
       {
-        columns: columns2,
+        columns: columns3,
         data: ubos
       }
     ) })
@@ -9103,302 +9505,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 = useNavigate();
   const [businessType, setBusinessType] = useState("");
   const form = useForm({
     resolver: 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 = useCallback((data) => {
     console.log("Business data:", data);
     navigate("/business");
-  };
+  }, [navigate]);
+  const handleCancel = useCallback(() => {
+    navigate("/business");
+  }, [navigate]);
+  const handleBusinessTypeChange = useCallback((value) => {
+    setBusinessType(value);
+    form.setValue("businessType", value);
+  }, [form]);
   return /* @__PURE__ */ 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__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6", children: [
-        /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Business Information" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Legal Name",
-                placeholder: "Enter legal business name",
-                required: true,
-                ...form.register("legalName")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "DBA Name",
-                placeholder: "Enter DBA name",
-                hint: "Doing Business As name",
-                ...form.register("dbaName")
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Preview:" }),
-                /* @__PURE__ */ jsx(BusinessTypeBadge, { type: businessType })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Tax ID (EIN)",
-                placeholder: "12-3456789",
-                hint: "Employer Identification Number",
-                required: true,
-                ...form.register("taxId")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Formation Date",
-                placeholder: "YYYY-MM-DD",
-                type: "date",
-                ...form.register("formationDate")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Incorporation State",
-                placeholder: "Enter state",
-                ...form.register("incorporationState")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Website",
-                placeholder: "https://www.business.com",
-                type: "url",
-                ...form.register("website")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Email Address",
-                placeholder: "contact@business.com",
-                type: "email",
-                ...form.register("email")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Mobile Phone",
-                placeholder: "+1 (555) 123-4567",
-                ...form.register("mobilePhone")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "MCC",
-                placeholder: "1234",
-                hint: "4-digit Merchant Category Code",
-                ...form.register("mcc")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "NAICS",
-                placeholder: "123456",
-                hint: "6-digit industry classification",
-                ...form.register("naics")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "ACH Company ID",
-                placeholder: "1234567890",
-                hint: "10-digit ACH identifier",
-                ...form.register("achCompanyId")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "ACH Company Name",
-                placeholder: "Enter ACH company name",
-                ...form.register("achCompanyName")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "External ID",
-                placeholder: "UUID format",
-                hint: "External system identifier",
-                ...form.register("externalId")
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(Card, { className: "p-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Business Address" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Street Address",
-                placeholder: "Enter street address",
-                required: true,
-                ...form.register("address.streetAddress")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Apartment/Suite",
-                placeholder: "Enter apartment or suite number",
-                ...form.register("address.apartment")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "City",
-                placeholder: "Enter city",
-                required: true,
-                ...form.register("address.city")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "State",
-                placeholder: "Enter state",
-                required: true,
-                ...form.register("address.state")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Postal Code",
-                placeholder: "12345",
-                required: true,
-                ...form.register("address.postalCode")
-              }
-            ),
-            /* @__PURE__ */ 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__ */ jsxs(Card, { className: "p-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "border-b border-border pb-4 mb-6", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Contact Information" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Contact First Name",
-                placeholder: "Enter first name",
-                ...form.register("contactFirstName")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Contact Last Name",
-                placeholder: "Enter last name",
-                ...form.register("contactLastName")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Contact Email",
-                placeholder: "contact@business.com",
-                type: "email",
-                ...form.register("contactEmail")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              EnhancedInput,
-              {
-                label: "Contact Phone",
-                placeholder: "+1 (555) 123-4567",
-                ...form.register("contactPhone")
-              }
-            )
-          ] })
-        ] })
-      ] })
+      form,
+      businessType,
+      onBusinessTypeChange: handleBusinessTypeChange,
+      onSubmit,
+      onCancel: handleCancel
     }
   );
 };
@@ -9570,7 +9732,7 @@ var Counterparties = () => {
   const handleRowClick = (counterparty) => {
     navigate(`/counterparty/${counterparty.id}`);
   };
-  const columns2 = [
+  const columns3 = [
     {
       key: "id",
       title: "Counterparty ID",
@@ -9709,7 +9871,7 @@ var Counterparties = () => {
     /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 mt-4 overflow-auto", children: /* @__PURE__ */ jsx(
       DataTable,
       {
-        columns: columns2,
+        columns: columns3,
         data: sortedCounterparties,
         sortBy,
         sortDirection,
@@ -10193,7 +10355,7 @@ var Individuals = () => {
   const handleRowClick = (row) => {
     navigate(`/individual/${row.id}`);
   };
-  const columns2 = [
+  const columns3 = [
     {
       key: "id",
       title: "Individual ID",
@@ -10327,7 +10489,7 @@ var Individuals = () => {
     /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 h-full max-w-none flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 mt-4 overflow-auto", children: /* @__PURE__ */ jsx(
       DataTable,
       {
-        columns: columns2,
+        columns: columns3,
         data: sortedIndividuals,
         sortBy,
         sortDirection,
@@ -12761,6 +12923,6 @@ function UIKit() {
   ] }) }) });
 }
 
-export { ACHBankCard, ACHBasicInfoCard, ACHDetailsSection, ACHTransferSection, AccountCard, AddressForm, AlertDetail_default as AlertDetail, AlertDetailRouter, AlertDocuments, AlertHeaderControls, AlertNotes, AlertTimeline, Alerts_default as Alerts, AppSidebar, Badge, BankAddressCard, BankingDetailsCard, BasicInfoCard, BasicInfoSection, BeneficiaryAddress, BeneficiaryCard, BeneficiaryDomesticWire, Breadcrumb, BusinessDetail_default as BusinessDetail, BusinessProfileCard, BusinessStatusCard, BusinessTypeBadge, Businesses_default as Businesses, Button, CIPStatusBadge, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Cases_default as Cases, Checkbox, ContactInfoCard, Container, ContextSection, Counterparties_default as Counterparties, CounterpartyBasicInfo, CounterpartyDetail_default as CounterpartyDetail, CounterpartyProfileCard, CounterpartyRecordsCard, CounterpartyTypeBadge, Create_default as CreateBusiness, Create_default2 as CreateCounterparty, Create_default3 as CreateIndividual, Dashboard_default as Dashboard, DashboardDemo, DataGrid, DataTable, DetailPageLayout, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EditableFormCard, EditableInfoField, EnhancedInput, EnhancedSelect, EnhancedTextarea, EntityCard, FormCard, FormField, FormInput, FormProvider, FormSection, FormSelect, IndividualDetail_default as IndividualDetail, Individuals_default as Individuals, InfoField, IntermediaryCard, IntermediaryFI, IntermediaryFIAddress, JsonViewer, Label, ListPage, MainLayout, MetricCard, NewTransaction, NotFound_default as NotFound, OFACAlertView, OriginatorCard, OriginatorFI, OriginatorFIAddress, PageLayout, PatternLibrary, PaymentInformationSection, Popover, PopoverContent, PopoverTrigger, ReceiverCard, ResolveAlertDialog, ResponsiveGrid, ScrollArea, ScrollBar, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Stack, Statement, StatementHeader, StatementView, StatusBadge, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransactionDetail_default as TransactionDetail, TransactionHistory_default as TransactionHistory, TransactionTypeBadge, UIKit, UIKitShowcase, WireDetailsSection, WireTransferSection, badgeVariants, buttonVariants, cardVariants, downloadCSV, generateStatementCSV, inputVariants, reducer, textareaVariants, toast, useAlertDetail, useEditState, useFormWithEditState, useIsMobile, useSidebar, useToast };
+export { ACHBankCard, ACHBasicInfoCard, ACHDetailsSection, ACHTransferSection, AccountCard, AddressForm, AlertDetail_default as AlertDetail, AlertDetailRouter, AlertDocuments, AlertHeaderControls, AlertNotes, AlertTimeline, Alerts_default as Alerts, AppSidebar, Badge, BankAddressCard, BankingDetailsCard, BasicInfoCard, BasicInfoSection, BeneficiaryAddress, BeneficiaryCard, BeneficiaryDomesticWire, Breadcrumb, BusinessDetail_default as BusinessDetail, BusinessFiltersSheet, BusinessProfileCard, BusinessStatusCard, BusinessTypeBadge, Businesses_default as Businesses, Button, CIPStatusBadge, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Cases_default as Cases, Checkbox, ContactInfoCard, Container, ContextSection, Counterparties_default as Counterparties, CounterpartyBasicInfo, CounterpartyDetail_default as CounterpartyDetail, CounterpartyProfileCard, CounterpartyRecordsCard, CounterpartyTypeBadge, Create_default as CreateBusiness, CreateBusinessView, Create_default2 as CreateCounterparty, Create_default3 as CreateIndividual, Dashboard_default as Dashboard, DashboardDemo, DataGrid, DataTable, DetailPageLayout, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EditableFormCard, EditableInfoField, EnhancedInput, EnhancedSelect, EnhancedTextarea, EntityCard, FormCard, FormField, FormInput, FormProvider, FormSection, FormSelect, IndividualDetail_default as IndividualDetail, Individuals_default as Individuals, InfoField, IntermediaryCard, IntermediaryFI, IntermediaryFIAddress, JsonViewer, Label, ListPage, MainLayout, MetricCard, NewTransaction, NotFound_default as NotFound, OFACAlertView, OriginatorCard, OriginatorFI, OriginatorFIAddress, PageLayout, PatternLibrary, PaymentInformationSection, Popover, PopoverContent, PopoverTrigger, ReceiverCard, ResolveAlertDialog, ResponsiveGrid, ScrollArea, ScrollBar, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Stack, Statement, StatementHeader, StatementView, StatusBadge, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransactionDetail_default as TransactionDetail, TransactionHistory_default as TransactionHistory, TransactionTypeBadge, UIKit, UIKitShowcase, WireDetailsSection, WireTransferSection, badgeVariants, buttonVariants, cardVariants, downloadCSV, generateStatementCSV, inputVariants, reducer, textareaVariants, toast, useAlertDetail, useBusinessFilters, useBusinessSort, useEditState, useFormWithEditState, useIsMobile, useSidebar, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map