production: reminder cron, dashboard overhaul, shadcn components, setup wizard

- /api/cron/reminders: processes pending reminders every 15min, sends WhatsApp with email fallback
- /api/cron/overdue: marks overdue pledges daily (7d deferred, 14d immediate)
- /api/pledges: GET handler with filtering, search, pagination, sort by dueDate
- Dashboard overview: stats, collection progress bar, needs attention, upcoming payments
- Dashboard pledges: proper table with status tabs, search, actions, pagination
- New shadcn components: Table, Tabs, DropdownMenu, Progress
- Setup wizard: 4-step onboarding (org → bank → event → QR code)
- Settings API: PUT handler for org create/update
- Org resolver: single-tenant fallback to first org
- Cron jobs installed: reminders every 15min, overdue check at 6am
- Auto-generates installment dates when not provided
- HOSTNAME=0.0.0.0 in compose for multi-network binding

pledge-now-pay-later/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(false)
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    if (open) document.addEventListener("mousedown", handleClick)
+    return () => document.removeEventListener("mousedown", handleClick)
+  }, [open])
+
+  return (
+    <div ref={ref} className="relative inline-block">
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement<{ onClick?: () => void }>(child) && (child.type as { displayName?: string }).displayName === "DropdownMenuTrigger") {
+          return React.cloneElement(child, { onClick: () => setOpen(!open) })
+        }
+        if (React.isValidElement<{ className?: string }>(child) && (child.type as { displayName?: string }).displayName === "DropdownMenuContent") {
+          return open ? React.cloneElement(child, { className: cn(child.props.className) }) : null
+        }
+        return child
+      })}
+    </div>
+  )
+}
+
+const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ children, ...props }, ref) => (
+    <button ref={ref} type="button" {...props}>{children}</button>
+  )
+)
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger"
+
+function DropdownMenuContent({ children, className, align = "end" }: { children: React.ReactNode; className?: string; align?: "start" | "end" }) {
+  return (
+    <div className={cn(
+      "absolute z-50 min-w-[180px] overflow-hidden rounded-xl border bg-white p-1.5 shadow-lg animate-scale-in",
+      align === "end" ? "right-0" : "left-0",
+      "top-full mt-1",
+      className
+    )}>
+      {children}
+    </div>
+  )
+}
+DropdownMenuContent.displayName = "DropdownMenuContent"
+
+function DropdownMenuItem({ children, className, onClick, destructive }: { children: React.ReactNode; className?: string; onClick?: () => void; destructive?: boolean }) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+        destructive ? "text-danger-red hover:bg-danger-red/10" : "text-foreground hover:bg-muted",
+        className
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+function DropdownMenuSeparator() {
+  return <div className="my-1 h-px bg-border" />
+}
+
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator }

pledge-now-pay-later/src/components/ui/progress.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number
+  max?: number
+  indicatorClassName?: string
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  ({ className, value = 0, max = 100, indicatorClassName, ...props }, ref) => {
+    const pct = Math.min(100, Math.max(0, (value / max) * 100))
+    return (
+      <div ref={ref} className={cn("relative h-3 w-full overflow-hidden rounded-full bg-muted", className)} {...props}>
+        <div
+          className={cn("h-full rounded-full bg-trust-blue transition-all duration-500 ease-out", indicatorClassName)}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+    )
+  }
+)
+Progress.displayName = "Progress"
+
+export { Progress }

pledge-now-pay-later/src/components/ui/table.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+)
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+)
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+)
+TableBody.displayName = "TableBody"
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr ref={ref} className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)} {...props} />
+  )
+)
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th ref={ref} className={cn("h-10 px-3 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...props} />
+  )
+)
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn("px-3 py-3 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
+  )
+)
+TableCell.displayName = "TableCell"
+
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell }

pledge-now-pay-later/src/components/ui/tabs.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface TabsContextValue { value: string; onValueChange: (v: string) => void }
+const TabsContext = React.createContext<TabsContextValue>({ value: "", onValueChange: () => {} })
+
+function Tabs({ value, onValueChange, children, className }: { value: string; onValueChange: (v: string) => void; children: React.ReactNode; className?: string }) {
+  return (
+    <TabsContext.Provider value={{ value, onValueChange }}>
+      <div className={cn("", className)}>{children}</div>
+    </TabsContext.Provider>
+  )
+}
+
+function TabsList({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn("inline-flex h-10 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground", className)}>
+      {children}
+    </div>
+  )
+}
+
+function TabsTrigger({ value, children, className }: { value: string; children: React.ReactNode; className?: string }) {
+  const ctx = React.useContext(TabsContext)
+  const isActive = ctx.value === value
+  return (
+    <button
+      onClick={() => ctx.onValueChange(value)}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        isActive ? "bg-background text-foreground shadow-sm" : "hover:bg-background/50",
+        className
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+function TabsContent({ value, children, className }: { value: string; children: React.ReactNode; className?: string }) {
+  const ctx = React.useContext(TabsContext)
+  if (ctx.value !== value) return null
+  return <div className={cn("mt-3 ring-offset-background focus-visible:outline-none", className)}>{children}</div>
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }