braid-ui 1.0.6 → 1.0.8

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, Zap, Shield, AlertCircle, RefreshCw, Landmark, Search, Repeat, Box, Settings, BarChart3, Key, Heart, User, AlertTriangle, XCircle, CheckCircle, Clock, CalendarIcon, ArrowDownRight, ArrowUpRight, Filter, ChevronLeft, Calendar as Calendar$1, CheckCircle2, StickyNote, FileUp, Circle, UserPlus, ChevronsUpDown, 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, Zap, Shield, AlertCircle, RefreshCw, Landmark, Search, Repeat, Box, Settings, BarChart3, Key, Heart, User, AlertTriangle, XCircle, CheckCircle, Clock, Loader2, ArrowDownRight, ArrowUpRight, Filter, ChevronLeft, CheckCircle2, StickyNote, FileUp, RotateCcw, Send, PlayCircle, Circle, UserPlus, ChevronsUpDown, CalendarIcon, FileJson } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Slot } from '@radix-ui/react-slot';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -290,6 +290,12 @@ var AlertTimeline = ({ events }) => {
     if (action.includes("Alert Approved")) return /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" });
     if (action.includes("Alert Declined")) return /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4" });
     if (action.includes("RFI Status change")) return /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" });
+    if (action.includes("Manual Review")) return /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" });
+    if (action.includes("Returned")) return /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" });
+    if (action.includes("Cancelled")) return /* @__PURE__ */ jsx(XCircle, { className: "h-4 w-4" });
+    if (action.includes("Sent")) return /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" });
+    if (action.includes("Submitted")) return /* @__PURE__ */ jsx(FileUp, { className: "h-4 w-4" });
+    if (action.includes("Initiated")) return /* @__PURE__ */ jsx(PlayCircle, { className: "h-4 w-4" });
     if (action.includes("Created")) return /* @__PURE__ */ jsx(Circle, { className: "h-4 w-4" });
     if (action.includes("Assigned")) return /* @__PURE__ */ jsx(UserPlus, { className: "h-4 w-4" });
     if (action.includes("Updated") || action.includes("Modified")) return /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" });
@@ -303,6 +309,12 @@ var AlertTimeline = ({ events }) => {
     if (action?.includes("Alert Approved")) return "text-success";
     if (action?.includes("Alert Declined")) return "text-destructive";
     if (action?.includes("RFI Status change")) return "text-warning";
+    if (action?.includes("Manual Review")) return "text-warning";
+    if (action?.includes("Returned")) return "text-warning";
+    if (action?.includes("Cancelled")) return "text-destructive";
+    if (action?.includes("Sent")) return "text-success";
+    if (action?.includes("Submitted")) return "text-blue-500";
+    if (action?.includes("Initiated")) return "text-blue-500";
     switch (status) {
       case "Unassigned":
         return "text-destructive";
@@ -5312,7 +5324,100 @@ var ListPage = React15.forwardRef(
   }
 );
 ListPage.displayName = "ListPage";
+
+// src/lib/mock-data/statement-data.ts
+var calculateBalanceChange = (startingBalance, endingBalance) => {
+  const parseCurrency = (str) => {
+    return parseFloat(str.replace(/[$,]/g, ""));
+  };
+  const start = parseCurrency(startingBalance);
+  const end = parseCurrency(endingBalance);
+  const change = end - start;
+  const isPositive = change >= 0;
+  const prefix = isPositive ? "+" : "";
+  return {
+    amount: change,
+    formatted: `${prefix}$${Math.abs(change).toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    })}`,
+    isPositive
+  };
+};
+var mockStatementHeader = {
+  account: "1234567890",
+  productId: "PROD-001",
+  programId: "PROG-001",
+  startDate: "01/01/2024 00:00:00",
+  endDate: "01/31/2024 23:59:59",
+  startingBalance: "$125,450.00",
+  endingBalance: "$158,320.50"
+};
+var mockStatementTransactions = [
+  { transactionType: "ACH Credit", direction: "CREDIT", amount: 45e3, count: 12 },
+  { transactionType: "ACH Debit", direction: "DEBIT", amount: 23500, count: 8 },
+  { transactionType: "Wire Transfer In", direction: "CREDIT", amount: 15e3, count: 3 },
+  { transactionType: "Wire Transfer Out", direction: "DEBIT", amount: 8200, count: 2 },
+  { transactionType: "Card Purchase", direction: "DEBIT", amount: 5430.5, count: 45 },
+  { transactionType: "Direct Deposit", direction: "CREDIT", amount: 12500, count: 5 },
+  { transactionType: "ATM Withdrawal", direction: "DEBIT", amount: 3200, count: 16 },
+  { transactionType: "Check Deposit", direction: "CREDIT", amount: 8900, count: 4 },
+  { transactionType: "Bill Payment", direction: "DEBIT", amount: 6780, count: 18 },
+  { transactionType: "Transfer In", direction: "CREDIT", amount: 5200, count: 7 },
+  { transactionType: "Transfer Out", direction: "DEBIT", amount: 4350, count: 6 },
+  { transactionType: "Fee", direction: "DEBIT", amount: 125, count: 3 },
+  { transactionType: "Interest", direction: "CREDIT", amount: 85.5, count: 1 },
+  { transactionType: "Refund", direction: "CREDIT", amount: 450, count: 2 }
+];
+var mockPrograms = [
+  { value: "PROG-001", label: "Consumer Banking Program" },
+  { value: "PROG-002", label: "Business Banking Program" },
+  { value: "PROG-003", label: "Premium Rewards Program" },
+  { value: "PROG-004", label: "Premium Rewards Program 1" },
+  { value: "PROG-005", label: "Premium Rewards Program 2" },
+  { value: "PROG-006", label: "Premium Rewards Program 3" },
+  { value: "PROG-007", label: "Premium Rewards Program 4" },
+  { value: "PROG-008", label: "Premium Rewards Program 5" },
+  { value: "PROG-009", label: "Premium Rewards Program 6" },
+  { value: "PROG-0010", label: "Consumer Banking Program" },
+  { value: "PROG-0011", label: "Business Banking Program" },
+  { value: "PROG-0013", label: "Premium Rewards Program" },
+  { value: "PROG-0041", label: "Premium Rewards Program 1" },
+  { value: "PROG-0051", label: "Premium Rewards Program 2" },
+  { value: "PROG-0061", label: "Premium Rewards Program 3" },
+  { value: "PROG-0071", label: "Premium Rewards Program 4" },
+  { value: "PROG-0081", label: "Premium Rewards Program 5" },
+  { value: "PROG-0091", label: "Premium Rewards Program 6" },
+  { value: "PROG-0014", label: "Consumer Banking Program" },
+  { value: "PROG-0024", label: "Business Banking Program" },
+  { value: "PROG-0034", label: "Premium Rewards Program" },
+  { value: "PROG-0044", label: "Premium Rewards Program 1" },
+  { value: "PROG-0054", label: "Premium Rewards Program 2" },
+  { value: "PROG-0064", label: "Premium Rewards Program 3" },
+  { value: "PROG-0074", label: "Premium Rewards Program 4" },
+  { value: "PROG-0084", label: "Premium Rewards Program 5" },
+  { 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) => {
+    return value !== void 0 && value !== null && value.trim() !== "";
+  };
+  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" }),
@@ -5322,7 +5427,7 @@ var StatementHeader = ({ data, onEdit }) => {
       ] })
     ] }),
     /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
-      /* @__PURE__ */ jsx(
+      hasValue(data.account) && /* @__PURE__ */ jsx(
         InfoField,
         {
           label: "Account",
@@ -5330,7 +5435,7 @@ var StatementHeader = ({ data, onEdit }) => {
           layout: "horizontal"
         }
       ),
-      /* @__PURE__ */ jsx(
+      hasValue(data.productId) && /* @__PURE__ */ jsx(
         InfoField,
         {
           label: "Product ID",
@@ -5338,7 +5443,7 @@ var StatementHeader = ({ data, onEdit }) => {
           layout: "horizontal"
         }
       ),
-      /* @__PURE__ */ jsx(
+      hasValue(data.programId) && /* @__PURE__ */ jsx(
         InfoField,
         {
           label: "Program ID",
@@ -5346,7 +5451,7 @@ var StatementHeader = ({ data, onEdit }) => {
           layout: "horizontal"
         }
       ),
-      /* @__PURE__ */ jsx(
+      hasValue(data.startDate) && /* @__PURE__ */ jsx(
         InfoField,
         {
           label: "Start Date",
@@ -5354,7 +5459,7 @@ var StatementHeader = ({ data, onEdit }) => {
           layout: "horizontal"
         }
       ),
-      /* @__PURE__ */ jsx(
+      hasValue(data.endDate) && /* @__PURE__ */ jsx(
         InfoField,
         {
           label: "End Date",
@@ -5362,7 +5467,7 @@ var StatementHeader = ({ data, onEdit }) => {
           layout: "horizontal"
         }
       ),
-      /* @__PURE__ */ jsx(
+      hasValue(data.startingBalance) && /* @__PURE__ */ jsx(
         InfoField,
         {
           label: "Starting Balance",
@@ -5370,13 +5475,21 @@ var StatementHeader = ({ data, onEdit }) => {
           layout: "horizontal"
         }
       ),
-      /* @__PURE__ */ jsx(
+      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"
+        }
       )
     ] }) })
   ] });
@@ -5437,6 +5550,52 @@ var PopoverContent = React15.forwardRef(({ className, align = "center", sideOffs
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+function DatePicker({
+  date,
+  onDateChange,
+  placeholder = "Pick a date",
+  disabled = false,
+  className,
+  buttonClassName,
+  calendarClassName,
+  align = "start",
+  disabledDates
+}) {
+  const [open, setOpen] = React15.useState(false);
+  const handleSelect = (selectedDate) => {
+    onDateChange?.(selectedDate);
+    setOpen(false);
+  };
+  return /* @__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)
+      }
+    ) })
+  ] });
+}
 function DataTable({
   columns: columns2,
   data,
@@ -5573,6 +5732,10 @@ var StatementView = ({
   products,
   statementHeader,
   statementTransactions,
+  programsLoading,
+  productsLoading,
+  programsError,
+  productsError,
   onStatementTypeChange,
   onProgramChange,
   onProductChange,
@@ -5583,7 +5746,10 @@ var StatementView = ({
   onEdit,
   onDownloadCSV,
   onPrintPDF,
-  isGenerateDisabled
+  onRetryFetch,
+  shouldShowRetry,
+  isGenerateDisabled,
+  isLoading
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: "container mx-auto p-6 space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { children: [
@@ -5604,24 +5770,34 @@ var StatementView = ({
               onValueChange: onStatementTypeChange
             }
           ),
+          statementType === "program" && programsError && /* @__PURE__ */ jsx("div", { className: "col-span-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-md text-sm text-destructive", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { children: programsError })
+          ] }) }),
+          statementType === "product" && productsError && /* @__PURE__ */ jsx("div", { className: "col-span-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-md text-sm text-destructive", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { children: productsError })
+          ] }) }),
           statementType === "program" && /* @__PURE__ */ jsx(
             EnhancedSelect,
             {
               label: "Program Name",
-              placeholder: "Select program",
+              placeholder: programsLoading ? "Loading programs..." : "Select program",
               options: programs,
               value: selectedProgram,
-              onValueChange: onProgramChange
+              onValueChange: onProgramChange,
+              disabled: programsLoading || !!programsError
             }
           ),
           statementType === "product" && /* @__PURE__ */ jsx(
             EnhancedSelect,
             {
               label: "Product Name",
-              placeholder: "Select product",
+              placeholder: productsLoading ? "Loading products..." : "Select product",
               options: products,
               value: selectedProduct,
-              onValueChange: onProductChange
+              onValueChange: onProductChange,
+              disabled: productsLoading || !!productsError
             }
           ),
           statementType === "account" && /* @__PURE__ */ jsx(
@@ -5635,67 +5811,52 @@ var StatementView = ({
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
             /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Start Date" }),
-            /* @__PURE__ */ jsxs(Popover, { children: [
-              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  className: cn(
-                    "justify-start text-left font-normal",
-                    !startDate && "text-muted-foreground"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
-                    startDate ? format(startDate, "MM/dd/yyyy") : "Select date"
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
-                Calendar,
-                {
-                  mode: "single",
-                  selected: startDate,
-                  onSelect: onStartDateChange,
-                  initialFocus: true
-                }
-              ) })
-            ] })
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                date: startDate,
+                onDateChange: onStartDateChange,
+                placeholder: "Select start date",
+                buttonClassName: "w-full"
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
             /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "End Date" }),
-            /* @__PURE__ */ jsxs(Popover, { children: [
-              /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  className: cn(
-                    "justify-start text-left font-normal",
-                    !endDate && "text-muted-foreground"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
-                    endDate ? format(endDate, "MM/dd/yyyy") : "Select date"
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
-                Calendar,
-                {
-                  mode: "single",
-                  selected: endDate,
-                  onSelect: onEndDateChange,
-                  initialFocus: true
-                }
-              ) })
-            ] })
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                date: endDate,
+                onDateChange: onEndDateChange,
+                placeholder: "Select end date",
+                buttonClassName: "w-full"
+              }
+            )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: shouldShowRetry ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: onRetryFetch,
+            variant: "outline",
+            disabled: programsLoading || productsLoading,
+            children: [
+              (programsLoading || productsLoading) && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+              programsLoading || productsLoading ? "Retrying..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+                "Retry"
+              ] })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
           Button,
           {
             onClick: onGenerateStatement,
-            disabled: isGenerateDisabled,
-            children: "Generate Statement"
+            disabled: isGenerateDisabled || isLoading,
+            children: [
+              isLoading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+              isLoading ? "Generating..." : "Generate Statement"
+            ]
           }
         ) })
       ] })
@@ -7888,61 +8049,29 @@ var Businesses = () => {
               /* @__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__ */ jsxs(Popover, { children: [
-                    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-                      Button,
-                      {
-                        variant: "outline",
-                        className: cn(
-                          "w-full justify-start text-left font-normal",
-                          !filters.createdDateStart && "text-muted-foreground"
-                        ),
-                        children: [
-                          /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
-                          filters.createdDateStart ? format(filters.createdDateStart, "MM/dd/yyyy") : /* @__PURE__ */ jsx("span", { children: "MM/DD/YYYY" })
-                        ]
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsx(
-                      Calendar,
-                      {
-                        mode: "single",
-                        selected: filters.createdDateStart,
-                        onSelect: (date) => handleFilterChange("createdDateStart", date),
-                        initialFocus: true,
-                        className: "pointer-events-auto"
-                      }
-                    ) })
-                  ] })
+                  /* @__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__ */ jsxs(Popover, { children: [
-                    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-                      Button,
-                      {
-                        variant: "outline",
-                        className: cn(
-                          "w-full justify-start text-left font-normal",
-                          !filters.createdDateEnd && "text-muted-foreground"
-                        ),
-                        children: [
-                          /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
-                          filters.createdDateEnd ? format(filters.createdDateEnd, "MM/dd/yyyy") : /* @__PURE__ */ jsx("span", { children: "MM/DD/YYYY" })
-                        ]
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsx(
-                      Calendar,
-                      {
-                        mode: "single",
-                        selected: filters.createdDateEnd,
-                        onSelect: (date) => handleFilterChange("createdDateEnd", date),
-                        initialFocus: true,
-                        className: "pointer-events-auto"
-                      }
-                    ) })
-                  ] })
+                  /* @__PURE__ */ jsx(
+                    DatePicker,
+                    {
+                      date: filters.createdDateEnd,
+                      onDateChange: (date) => handleFilterChange("createdDateEnd", date),
+                      placeholder: "MM/DD/YYYY",
+                      buttonClassName: "w-full",
+                      className: "bg-background z-50"
+                    }
+                  )
                 ] })
               ] })
             ] }),
@@ -8537,86 +8666,118 @@ var NotFound = () => {
   ] }) });
 };
 var NotFound_default = NotFound;
-
-// src/lib/mock-data/statement-data.ts
-var mockStatementHeader = {
-  account: "1234567890",
-  productId: "PROD-001",
-  programId: "PROG-001",
-  startDate: "01/01/2024 00:00:00",
-  endDate: "01/31/2024 23:59:59",
-  startingBalance: "$125,450.00",
-  endingBalance: "$158,320.50"
-};
-var mockStatementTransactions = [
-  { transactionType: "ACH Credit", direction: "CREDIT", amount: 45e3, count: 12 },
-  { transactionType: "ACH Debit", direction: "DEBIT", amount: 23500, count: 8 },
-  { transactionType: "Wire Transfer In", direction: "CREDIT", amount: 15e3, count: 3 },
-  { transactionType: "Wire Transfer Out", direction: "DEBIT", amount: 8200, count: 2 },
-  { transactionType: "Card Purchase", direction: "DEBIT", amount: 5430.5, count: 45 },
-  { transactionType: "Direct Deposit", direction: "CREDIT", amount: 12500, count: 5 },
-  { transactionType: "ATM Withdrawal", direction: "DEBIT", amount: 3200, count: 16 },
-  { transactionType: "Check Deposit", direction: "CREDIT", amount: 8900, count: 4 },
-  { transactionType: "Bill Payment", direction: "DEBIT", amount: 6780, count: 18 },
-  { transactionType: "Transfer In", direction: "CREDIT", amount: 5200, count: 7 },
-  { transactionType: "Transfer Out", direction: "DEBIT", amount: 4350, count: 6 },
-  { transactionType: "Fee", direction: "DEBIT", amount: 125, count: 3 },
-  { transactionType: "Interest", direction: "CREDIT", amount: 85.5, count: 1 },
-  { transactionType: "Refund", direction: "CREDIT", amount: 450, count: 2 }
-];
-var mockPrograms = [
-  { value: "PROG-001", label: "Consumer Banking Program" },
-  { value: "PROG-002", label: "Business Banking Program" },
-  { value: "PROG-003", label: "Premium Rewards Program" }
-];
-var mockProducts = [
-  { value: "PROD-001", label: "Checking Account" },
-  { value: "PROD-002", label: "Savings Account" },
-  { value: "PROD-003", label: "Money Market Account" },
-  { value: "PROD-004", label: "Business Checking" }
-];
 function Statement() {
-  const [statementType, setStatementType] = useState("");
+  const [statementType, setStatementType] = useState("root");
   const [selectedProgram, setSelectedProgram] = useState("");
   const [selectedProduct, setSelectedProduct] = useState("");
   const [accountNumber, setAccountNumber] = useState("");
-  const [startDate, setStartDate] = useState();
-  const [endDate, setEndDate] = useState();
+  const [startDate, setStartDate] = useState(() => {
+    const now = /* @__PURE__ */ new Date();
+    return new Date(now.getFullYear(), now.getMonth(), 1);
+  });
+  const [endDate, setEndDate] = useState(/* @__PURE__ */ new Date());
   const [statementGenerated, setStatementGenerated] = useState(false);
-  const [programs] = useState(mockPrograms);
-  const [products] = useState(mockProducts);
+  const [isLoading, setIsLoading] = useState(false);
+  const [programs, setPrograms] = useState([]);
+  const [products, setProducts] = useState([]);
+  const [programsLoading, setProgramsLoading] = useState(false);
+  const [productsLoading, setProductsLoading] = useState(false);
+  const [programsError, setProgramsError] = useState(null);
+  const [productsError, setProductsError] = useState(null);
   const [statementHeader, setStatementHeader] = useState(null);
   const [statementTransactions, setStatementTransactions] = useState([]);
+  const fetchPrograms = async () => {
+    setProgramsLoading(true);
+    setProgramsError(null);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      setPrograms(mockPrograms);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to load programs";
+      setProgramsError(errorMessage);
+      setPrograms([]);
+      toast({
+        title: "Error loading programs",
+        description: errorMessage,
+        variant: "destructive"
+      });
+    } finally {
+      setProgramsLoading(false);
+    }
+  };
+  const fetchProducts = async () => {
+    setProductsLoading(true);
+    setProductsError(null);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      setProducts(mockProducts);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to load products";
+      setProductsError(errorMessage);
+      setProducts([]);
+      toast({
+        title: "Error loading products",
+        description: errorMessage,
+        variant: "destructive"
+      });
+    } finally {
+      setProductsLoading(false);
+    }
+  };
+  useEffect(() => {
+    fetchPrograms();
+    fetchProducts();
+  }, []);
   const handleStatementTypeChange = (value) => {
     setStatementType(value);
     setSelectedProgram("");
     setSelectedProduct("");
     setAccountNumber("");
   };
-  const handleGenerateStatement = () => {
+  const handleGenerateStatement = async () => {
     if (!statementType || !startDate || !endDate) return;
     if (statementType === "program" && !selectedProgram) return;
     if (statementType === "product" && !selectedProduct) return;
     if (statementType === "account" && !accountNumber) return;
-    console.log("Generating statement with:", {
-      statementType,
-      selectedProgram,
-      selectedProduct,
-      accountNumber,
-      startDate,
-      endDate
-    });
-    setStatementHeader(mockStatementHeader);
-    setStatementTransactions(mockStatementTransactions);
-    setStatementGenerated(true);
+    setIsLoading(true);
+    try {
+      console.log("Generating statement with:", {
+        statementType,
+        selectedProgram,
+        selectedProduct,
+        accountNumber,
+        startDate,
+        endDate
+      });
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      setStatementHeader(mockStatementHeader);
+      setStatementTransactions(mockStatementTransactions);
+      setStatementGenerated(true);
+    } finally {
+      setIsLoading(false);
+    }
   };
   const isGenerateDisabled = () => {
     if (!statementType || !startDate || !endDate) return true;
+    if (statementType === "program" && (programsError || programsLoading)) return true;
+    if (statementType === "product" && (productsError || productsLoading)) return true;
     if (statementType === "program" && !selectedProgram) return true;
     if (statementType === "product" && !selectedProduct) return true;
     if (statementType === "account" && !accountNumber) return true;
     return false;
   };
+  const handleRetryFetch = () => {
+    if (statementType === "program" && programsError) {
+      fetchPrograms();
+    } else if (statementType === "product" && productsError) {
+      fetchProducts();
+    }
+  };
+  const shouldShowRetry = () => {
+    if (statementType === "program" && programsError) return true;
+    if (statementType === "product" && productsError) return true;
+    return false;
+  };
   const handleDownloadCSV = () => {
     console.log("Downloading CSV...");
   };
@@ -8640,6 +8801,10 @@ function Statement() {
       products,
       statementHeader,
       statementTransactions,
+      programsLoading,
+      productsLoading,
+      programsError,
+      productsError,
       onStatementTypeChange: handleStatementTypeChange,
       onProgramChange: setSelectedProgram,
       onProductChange: setSelectedProduct,
@@ -8650,7 +8815,10 @@ function Statement() {
       onEdit: handleEdit,
       onDownloadCSV: handleDownloadCSV,
       onPrintPDF: handlePrintPDF,
-      isGenerateDisabled: isGenerateDisabled()
+      onRetryFetch: handleRetryFetch,
+      shouldShowRetry: shouldShowRetry(),
+      isGenerateDisabled: isGenerateDisabled(),
+      isLoading
     }
   );
 }
@@ -9208,121 +9376,57 @@ var TransactionHistory = () => {
             /* @__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: "Creation Date Start" }),
-                /* @__PURE__ */ jsxs(Popover, { children: [
-                  /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: "outline",
-                      className: cn(
-                        "w-full justify-start text-left font-normal",
-                        !filters.creationDateStart && "text-muted-foreground"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
-                        filters.creationDateStart ? format(filters.creationDateStart, "MM/dd/yyyy") : /* @__PURE__ */ jsx("span", { children: "MM/DD/YYYY" })
-                      ]
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsx(
-                    Calendar,
-                    {
-                      mode: "single",
-                      selected: filters.creationDateStart,
-                      onSelect: (date) => handleFilterChange("creationDateStart", date),
-                      initialFocus: true,
-                      className: "pointer-events-auto"
-                    }
-                  ) })
-                ] })
+                /* @__PURE__ */ jsx(
+                  DatePicker,
+                  {
+                    date: filters.creationDateStart,
+                    onDateChange: (date) => handleFilterChange("creationDateStart", 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: "Creation Date End" }),
-                /* @__PURE__ */ jsxs(Popover, { children: [
-                  /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: "outline",
-                      className: cn(
-                        "w-full justify-start text-left font-normal",
-                        !filters.creationDateEnd && "text-muted-foreground"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
-                        filters.creationDateEnd ? format(filters.creationDateEnd, "MM/dd/yyyy") : /* @__PURE__ */ jsx("span", { children: "MM/DD/YYYY" })
-                      ]
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsx(
-                    Calendar,
-                    {
-                      mode: "single",
-                      selected: filters.creationDateEnd,
-                      onSelect: (date) => handleFilterChange("creationDateEnd", date),
-                      initialFocus: true,
-                      className: "pointer-events-auto"
-                    }
-                  ) })
-                ] })
+                /* @__PURE__ */ jsx(
+                  DatePicker,
+                  {
+                    date: filters.creationDateEnd,
+                    onDateChange: (date) => handleFilterChange("creationDateEnd", date),
+                    placeholder: "MM/DD/YYYY",
+                    buttonClassName: "w-full",
+                    className: "bg-background z-50"
+                  }
+                )
               ] })
             ] }),
             /* @__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: "Post Date Start" }),
-                /* @__PURE__ */ jsxs(Popover, { children: [
-                  /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: "outline",
-                      className: cn(
-                        "w-full justify-start text-left font-normal",
-                        !filters.postDateStart && "text-muted-foreground"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
-                        filters.postDateStart ? format(filters.postDateStart, "MM/dd/yyyy") : /* @__PURE__ */ jsx("span", { children: "MM/DD/YYYY" })
-                      ]
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsx(
-                    Calendar,
-                    {
-                      mode: "single",
-                      selected: filters.postDateStart,
-                      onSelect: (date) => handleFilterChange("postDateStart", date),
-                      initialFocus: true,
-                      className: "pointer-events-auto"
-                    }
-                  ) })
-                ] })
+                /* @__PURE__ */ jsx(
+                  DatePicker,
+                  {
+                    date: filters.postDateStart,
+                    onDateChange: (date) => handleFilterChange("postDateStart", 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: "Post Date End" }),
-                /* @__PURE__ */ jsxs(Popover, { children: [
-                  /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      variant: "outline",
-                      className: cn(
-                        "w-full justify-start text-left font-normal",
-                        !filters.postDateEnd && "text-muted-foreground"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
-                        filters.postDateEnd ? format(filters.postDateEnd, "MM/dd/yyyy") : /* @__PURE__ */ jsx("span", { children: "MM/DD/YYYY" })
-                      ]
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 bg-background z-50", align: "start", children: /* @__PURE__ */ jsx(
-                    Calendar,
-                    {
-                      mode: "single",
-                      selected: filters.postDateEnd,
-                      onSelect: (date) => handleFilterChange("postDateEnd", date),
-                      initialFocus: true,
-                      className: "pointer-events-auto"
-                    }
-                  ) })
-                ] })
+                /* @__PURE__ */ jsx(
+                  DatePicker,
+                  {
+                    date: filters.postDateEnd,
+                    onDateChange: (date) => handleFilterChange("postDateEnd", date),
+                    placeholder: "MM/DD/YYYY",
+                    buttonClassName: "w-full",
+                    className: "bg-background z-50"
+                  }
+                )
               ] })
             ] })
           ] }),