Telepathic Money + Reports: context-aware inbox, financial summary
## Money page (/dashboard/money) — context-aware inbox The key insight: Aaisha's #1 Money question changes over time. Day 1: 'Did anyone pledge?' → Recent section Day 3: 'Are they paying?' → Confirm section Day 10: 'Who hasn't paid?' → Nudge section Day 30: 'Give me the spreadsheet' → she goes to Reports Changes: - Contextual 'Confirm these payments' section (amber) Shows when there are 'said they paid' pledges One-click green 'Confirm' button on each row Links to bank statement upload Only appears on 'all' filter (not when already filtering) - Contextual 'These people need a nudge' section (red) Shows when there are overdue pledges One-click green 'Nudge' WhatsApp button + 'Paid' quick button Shows days since pledge for urgency - Stats bar redesigned: 5 clickable stat cells (gap-px) Each acts as a filter toggle with active underline Color-coded: amber for 'said paid', red for overdue, green for received - Filter pills replace shadcn Tabs (smaller, more buttons fit) Pill buttons instead of tab strip — works better on mobile - Table kept for Fatima (power user who scans everything) Same columns, actions, pagination as before - Match payments CTA promoted: full-width card with icon + description No longer a text link hidden at the bottom ## Reports page (/dashboard/reports) — Fatima's dashboard The key insight: Fatima (treasurer) logs in monthly. She should NOT need to visit any other page. Changes: - Financial summary hero (dark section) Total promised, total received, outstanding, collection rate Progress bar with percentage Same visual language as leaderboard hero - Status breakdown with visual bars Horizontal bars showing distribution: paid/waiting/initiated/overdue Percentage labels - Per-appeal breakdown table Each appeal: pledges, promised, received, collection rate Total row at bottom for multi-appeal orgs Rate color-coded: green ≥70%, amber ≥40%, gray below - Gift Aid section with PREVIEW Shows number of eligible declarations + reclaimable amount before downloading — Fatima can see if it's worth running '25p for every £1' callout - Downloads: Full CSV + Gift Aid CSV Same download functionality, better presentation - API/Zapier section redesigned Two endpoint examples (pledges + dashboard) Clearer documentation for Zapier/Make integration - Activity log section Shows recent system activity (audit trail) Scrollable, max 20 entries 2 pages rewritten (~38k bytes)
This commit is contained in:
@@ -1,96 +1,317 @@
|
||||
"use client"
|
||||
|
||||
import { Download } from "lucide-react"
|
||||
import { useState, useEffect, useCallback } from "react"
|
||||
import { formatPence } from "@/lib/utils"
|
||||
import { Download, Loader2, FileText, Shield, Zap, Activity } from "lucide-react"
|
||||
|
||||
/**
|
||||
* /dashboard/reports — "My treasurer needs numbers"
|
||||
*
|
||||
* This is Fatima's dashboard. She logs in once a month and thinks:
|
||||
*
|
||||
* 1. "How much have we raised?" → Financial summary at top
|
||||
* 2. "What's the breakdown by appeal?" → Per-appeal table
|
||||
* 3. "How much Gift Aid can we claim?" → Gift Aid section with preview
|
||||
* 4. "Give me the spreadsheet" → Download buttons
|
||||
* 5. "What's been happening?" → Activity log
|
||||
*
|
||||
* She should NOT need to visit any other page.
|
||||
* Everything a treasurer needs is here.
|
||||
*/
|
||||
|
||||
interface EventSummary {
|
||||
id: string; name: string; pledgeCount: number
|
||||
totalPledged: number; totalCollected: number
|
||||
}
|
||||
|
||||
interface ActivityEntry {
|
||||
id: string; action: string; description: string
|
||||
timestamp: string; entityType?: string
|
||||
}
|
||||
|
||||
export default function ReportsPage() {
|
||||
const handleCrmExport = () => {
|
||||
const [loading, setLoading] = useState(true)
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const [dash, setDash] = useState<any>(null)
|
||||
const [events, setEvents] = useState<EventSummary[]>([])
|
||||
const [giftAidCount, setGiftAidCount] = useState<number | null>(null)
|
||||
const [activity, setActivity] = useState<ActivityEntry[]>([])
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const [dashRes, evRes, actRes] = await Promise.all([
|
||||
fetch("/api/dashboard").then(r => r.json()),
|
||||
fetch("/api/events").then(r => r.json()),
|
||||
fetch("/api/activity?limit=20").then(r => r.json()).catch(() => ({ entries: [] })),
|
||||
])
|
||||
if (dashRes.summary) setDash(dashRes)
|
||||
if (Array.isArray(evRes)) setEvents(evRes)
|
||||
if (actRes.entries) setActivity(actRes.entries)
|
||||
|
||||
// Count Gift Aid pledges
|
||||
const giftAidPledges = (dashRes.pledges || []).filter((p: { giftAid: boolean; status: string }) => p.giftAid && p.status === "paid")
|
||||
setGiftAidCount(giftAidPledges.length)
|
||||
} catch { /* */ }
|
||||
setLoading(false)
|
||||
}, [])
|
||||
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
const downloadCsv = (giftAidOnly = false) => {
|
||||
const a = document.createElement("a")
|
||||
a.href = "/api/exports/crm-pack"
|
||||
a.download = `pledges-export-${new Date().toISOString().slice(0, 10)}.csv`
|
||||
a.href = giftAidOnly ? "/api/exports/crm-pack?giftAidOnly=true" : "/api/exports/crm-pack"
|
||||
a.download = giftAidOnly
|
||||
? `gift-aid-declarations-${new Date().toISOString().slice(0, 10)}.csv`
|
||||
: `pledges-export-${new Date().toISOString().slice(0, 10)}.csv`
|
||||
a.click()
|
||||
}
|
||||
|
||||
const handleGiftAidExport = () => {
|
||||
const a = document.createElement("a")
|
||||
a.href = "/api/exports/crm-pack?giftAidOnly=true"
|
||||
a.download = `gift-aid-declarations-${new Date().toISOString().slice(0, 10)}.csv`
|
||||
a.click()
|
||||
}
|
||||
if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="h-6 w-6 text-[#1E40AF] animate-spin" /></div>
|
||||
|
||||
const s = dash?.summary || { totalPledges: 0, totalPledgedPence: 0, totalCollectedPence: 0, collectionRate: 0 }
|
||||
const byStatus = dash?.byStatus || {}
|
||||
const outstanding = s.totalPledgedPence - s.totalCollectedPence
|
||||
const giftAidPledges = (dash?.pledges || []).filter((p: { giftAid: boolean; status: string }) => p.giftAid && p.status === "paid")
|
||||
const giftAidTotal = giftAidPledges.reduce((sum: number, p: { amountPence: number }) => sum + p.amountPence, 0)
|
||||
const giftAidReclaimable = Math.round(giftAidTotal * 0.25)
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
|
||||
{/* ── Header ── */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-black text-[#111827] tracking-tight">Reports</h1>
|
||||
<p className="text-sm text-gray-500 mt-0.5">Download data for your treasurer, trustees, or HMRC</p>
|
||||
<p className="text-sm text-gray-500 mt-0.5">Financial summary, Gift Aid, and data downloads for your treasurer and trustees</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* Full data download */}
|
||||
<div className="bg-white border border-gray-200 p-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Full data download</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">Everything in one spreadsheet — donor details, amounts, statuses, attribution.</p>
|
||||
{/* ── Financial summary — the big picture ── */}
|
||||
<div className="bg-[#111827] p-6">
|
||||
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-4">Financial Summary</p>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-gray-700">
|
||||
{[
|
||||
{ value: formatPence(s.totalPledgedPence), label: "Total promised", color: "text-white" },
|
||||
{ value: formatPence(s.totalCollectedPence), label: "Total received", color: "text-[#4ADE80]" },
|
||||
{ value: formatPence(outstanding), label: "Still outstanding", color: outstanding > 0 ? "text-[#FBBF24]" : "text-white" },
|
||||
{ value: `${s.collectionRate}%`, label: "Collection rate", color: s.collectionRate >= 70 ? "text-[#4ADE80]" : "text-[#FBBF24]" },
|
||||
].map(stat => (
|
||||
<div key={stat.label} className="bg-[#111827] p-4">
|
||||
<p className={`text-2xl md:text-3xl font-black tracking-tight ${stat.color}`}>{stat.value}</p>
|
||||
<p className="text-[10px] text-gray-500 mt-1">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-800">
|
||||
<div className="flex justify-between text-xs text-gray-500 mb-2">
|
||||
<span>{s.totalPledges} pledges total</span>
|
||||
<span>{s.collectionRate}% collected</span>
|
||||
</div>
|
||||
<div className="border-l-2 border-[#111827] pl-3 space-y-1 text-xs text-gray-600">
|
||||
<p>Donor name, email, phone</p>
|
||||
<p>Amount and payment status</p>
|
||||
<p>Payment method and reference</p>
|
||||
<p>Appeal name and source</p>
|
||||
<p>Gift Aid flag</p>
|
||||
<div className="h-2 bg-gray-800 overflow-hidden">
|
||||
<div className="h-full bg-[#4ADE80] transition-all duration-700" style={{ width: `${s.collectionRate}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Status breakdown ── */}
|
||||
<div className="bg-white border border-gray-200">
|
||||
<div className="border-b border-gray-100 px-5 py-3">
|
||||
<h3 className="text-sm font-bold text-[#111827]">How pledges are doing</h3>
|
||||
</div>
|
||||
<div className="p-5 space-y-3">
|
||||
{[
|
||||
{ status: "paid", label: "Received ✓", count: byStatus.paid || 0, color: "bg-[#16A34A]" },
|
||||
{ status: "new", label: "Waiting", count: byStatus.new || 0, color: "bg-gray-400" },
|
||||
{ status: "initiated", label: "Said they paid", count: byStatus.initiated || 0, color: "bg-[#F59E0B]" },
|
||||
{ status: "overdue", label: "Needs a nudge", count: byStatus.overdue || 0, color: "bg-[#DC2626]" },
|
||||
{ status: "cancelled", label: "Cancelled", count: byStatus.cancelled || 0, color: "bg-gray-200" },
|
||||
].filter(s => s.count > 0).map(s => {
|
||||
const pct = dash?.summary?.totalPledges > 0 ? Math.round((s.count / dash.summary.totalPledges) * 100) : 0
|
||||
return (
|
||||
<div key={s.status} className="flex items-center gap-3">
|
||||
<div className="w-20 text-right">
|
||||
<span className="text-xs font-bold text-[#111827]">{s.count}</span>
|
||||
</div>
|
||||
<div className="flex-1 h-4 bg-gray-50 overflow-hidden">
|
||||
<div className={`h-full ${s.color} transition-all duration-500`} style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
<div className="w-28">
|
||||
<span className="text-xs text-gray-600">{s.label}</span>
|
||||
</div>
|
||||
<span className="text-xs font-bold text-gray-400 w-10 text-right">{pct}%</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── By-appeal breakdown ── */}
|
||||
{events.length > 0 && (
|
||||
<div className="bg-white border border-gray-200">
|
||||
<div className="border-b border-gray-100 px-5 py-3">
|
||||
<h3 className="text-sm font-bold text-[#111827]">By appeal</h3>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-100">
|
||||
<th className="px-5 py-2.5 text-left text-[10px] font-bold text-gray-400 uppercase tracking-wide">Appeal</th>
|
||||
<th className="px-5 py-2.5 text-right text-[10px] font-bold text-gray-400 uppercase tracking-wide">Pledges</th>
|
||||
<th className="px-5 py-2.5 text-right text-[10px] font-bold text-gray-400 uppercase tracking-wide">Promised</th>
|
||||
<th className="px-5 py-2.5 text-right text-[10px] font-bold text-gray-400 uppercase tracking-wide">Received</th>
|
||||
<th className="px-5 py-2.5 text-right text-[10px] font-bold text-gray-400 uppercase tracking-wide">Rate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-50">
|
||||
{events.map(ev => {
|
||||
const rate = ev.totalPledged > 0 ? Math.round((ev.totalCollected / ev.totalPledged) * 100) : 0
|
||||
return (
|
||||
<tr key={ev.id} className="hover:bg-gray-50/50">
|
||||
<td className="px-5 py-3 text-sm font-medium text-[#111827]">{ev.name}</td>
|
||||
<td className="px-5 py-3 text-sm text-right text-[#111827]">{ev.pledgeCount}</td>
|
||||
<td className="px-5 py-3 text-sm text-right font-bold text-[#111827]">{formatPence(ev.totalPledged)}</td>
|
||||
<td className="px-5 py-3 text-sm text-right font-bold text-[#16A34A]">{formatPence(ev.totalCollected)}</td>
|
||||
<td className="px-5 py-3 text-right">
|
||||
<span className={`text-xs font-bold px-1.5 py-0.5 ${rate >= 70 ? "bg-[#16A34A]/10 text-[#16A34A]" : rate >= 40 ? "bg-[#F59E0B]/10 text-[#F59E0B]" : "bg-gray-100 text-gray-500"}`}>
|
||||
{rate}%
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
{events.length > 1 && (
|
||||
<tfoot>
|
||||
<tr className="border-t-2 border-gray-200 bg-gray-50/50">
|
||||
<td className="px-5 py-3 text-sm font-bold text-[#111827]">Total</td>
|
||||
<td className="px-5 py-3 text-sm text-right font-bold text-[#111827]">{s.totalPledges}</td>
|
||||
<td className="px-5 py-3 text-sm text-right font-black text-[#111827]">{formatPence(s.totalPledgedPence)}</td>
|
||||
<td className="px-5 py-3 text-sm text-right font-black text-[#16A34A]">{formatPence(s.totalCollectedPence)}</td>
|
||||
<td className="px-5 py-3 text-right">
|
||||
<span className="text-xs font-bold text-[#111827]">{s.collectionRate}%</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
)}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Downloads ── */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{/* Full data */}
|
||||
<div className="bg-white border border-gray-200 p-6 space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<FileText className="h-5 w-5 text-[#111827] mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Full data download</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">Everything in one spreadsheet — donor details, amounts, statuses, attribution, consent flags.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-l-2 border-[#111827] pl-3 grid grid-cols-2 gap-1 text-xs text-gray-600">
|
||||
<span>Donor name, email, phone</span>
|
||||
<span>Amount and payment status</span>
|
||||
<span>Payment method and reference</span>
|
||||
<span>Appeal name and source</span>
|
||||
<span>Gift Aid and Zakat flags</span>
|
||||
<span>Days to collect</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCrmExport}
|
||||
onClick={() => downloadCsv(false)}
|
||||
className="w-full bg-[#111827] px-4 py-2.5 text-sm font-bold text-white hover:bg-gray-800 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<Download className="h-4 w-4" /> Download CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Gift Aid report */}
|
||||
{/* Gift Aid */}
|
||||
<div className="bg-white border border-[#16A34A]/30 p-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Gift Aid report</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">HMRC-ready declarations for tax reclaim. Only includes donors who ticked Gift Aid.</p>
|
||||
<div className="flex items-start gap-3">
|
||||
<Shield className="h-5 w-5 text-[#16A34A] mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Gift Aid report</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">HMRC-ready declarations for tax reclaim. Only donors who ticked Gift Aid and whose payment was received.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-l-2 border-[#16A34A] pl-3 space-y-1 text-xs text-gray-600">
|
||||
<p>Donor full name (required by HMRC)</p>
|
||||
<p>Donation amount and date</p>
|
||||
<p>Gift Aid declaration timestamp</p>
|
||||
<p>Home address and postcode</p>
|
||||
|
||||
{/* Gift Aid preview */}
|
||||
<div className="grid grid-cols-2 gap-px bg-gray-200">
|
||||
<div className="bg-[#16A34A]/5 p-3">
|
||||
<p className="text-lg font-black text-[#16A34A]">{giftAidCount ?? "–"}</p>
|
||||
<p className="text-[10px] text-gray-600">Eligible declarations</p>
|
||||
</div>
|
||||
<div className="bg-[#16A34A]/5 p-3">
|
||||
<p className="text-lg font-black text-[#16A34A]">{formatPence(giftAidReclaimable)}</p>
|
||||
<p className="text-[10px] text-gray-600">Reclaimable from HMRC</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#16A34A]/5 border border-[#16A34A]/20 p-3">
|
||||
<p className="text-xs text-[#16A34A] font-bold">
|
||||
Claim 25p for every £1 donated by a UK taxpayer
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleGiftAidExport}
|
||||
onClick={() => downloadCsv(true)}
|
||||
className="w-full bg-[#16A34A] px-4 py-2.5 text-sm font-bold text-white hover:bg-[#16A34A]/90 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<Download className="h-4 w-4" /> Download Gift Aid Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Connect to other tools */}
|
||||
<div className="bg-white border border-gray-200 p-6 space-y-4">
|
||||
{/* ── API / Zapier ── */}
|
||||
<div className="bg-white border border-gray-200 p-6 space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Zap className="h-5 w-5 text-[#1E40AF] mt-0.5 shrink-0" />
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Connect to other tools</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">Use our API to pull data into Zapier, Make, or your own systems.</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-bold text-gray-600">Reminder endpoint:</p>
|
||||
<code className="block bg-gray-50 p-3 text-[11px] font-mono break-all border border-gray-100">
|
||||
GET /api/webhooks?since=2025-01-01
|
||||
</code>
|
||||
<p className="text-[10px] text-gray-500">Returns pending reminders with donor contact info for external email or SMS.</p>
|
||||
</div>
|
||||
<div className="bg-[#1E40AF]/5 border border-[#1E40AF]/20 p-3">
|
||||
<p className="text-xs text-[#1E40AF] font-bold">
|
||||
Connect to Zapier or Make to send automatic reminder emails
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">Pull data into Zapier, Make, or your own systems using our API.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-bold text-gray-600">Pledges endpoint</p>
|
||||
<code className="block bg-[#F9FAFB] p-3 text-[11px] font-mono break-all border border-gray-100">GET /api/pledges?status=new&sort=createdAt</code>
|
||||
<p className="text-[10px] text-gray-500">Returns all pledges with donor contact info, filterable by status.</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-bold text-gray-600">Dashboard endpoint</p>
|
||||
<code className="block bg-[#F9FAFB] p-3 text-[11px] font-mono break-all border border-gray-100">GET /api/dashboard</code>
|
||||
<p className="text-[10px] text-gray-500">Returns summary stats, status breakdown, top sources, and all pledges.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#1E40AF]/5 border border-[#1E40AF]/20 p-3">
|
||||
<p className="text-xs text-[#1E40AF] font-bold">
|
||||
Connect to Zapier or Make to send automatic reminder emails to donors without WhatsApp
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Activity log ── */}
|
||||
{activity.length > 0 && (
|
||||
<div className="bg-white border border-gray-200">
|
||||
<div className="border-b border-gray-100 px-5 py-3 flex items-center gap-1.5">
|
||||
<Activity className="h-4 w-4 text-gray-400" />
|
||||
<h3 className="text-sm font-bold text-[#111827]">Recent activity</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-50 max-h-64 overflow-y-auto">
|
||||
{activity.map((a, i) => (
|
||||
<div key={a.id || i} className="px-5 py-2.5 flex items-center gap-3">
|
||||
<div className="w-1.5 h-1.5 bg-gray-300 shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-gray-600 truncate">{a.description || a.action}</p>
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-400 shrink-0">
|
||||
{new Date(a.timestamp).toLocaleDateString("en-GB", { day: "numeric", month: "short" })}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,14 +1,33 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useCallback } from "react"
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
|
||||
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"
|
||||
import { useToast } from "@/components/ui/toast"
|
||||
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"
|
||||
import {
|
||||
Search, MoreVertical, CheckCircle2, XCircle, MessageCircle, Send,
|
||||
ChevronLeft, ChevronRight, Loader2
|
||||
ChevronLeft, ChevronRight, Loader2, Upload, ArrowRight, AlertTriangle,
|
||||
Clock
|
||||
} from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { formatPence } from "@/lib/utils"
|
||||
|
||||
/**
|
||||
* /dashboard/money — "Where's the money?"
|
||||
*
|
||||
* Redesigned as a context-aware inbox. Instead of a flat table,
|
||||
* the page surfaces what needs attention RIGHT NOW:
|
||||
*
|
||||
* 1. "Confirm these payments" — when people say they've paid
|
||||
* 2. "These people need a nudge" — when pledges are overdue
|
||||
* 3. Recent pledges — what just came in
|
||||
* 4. Full table — for Fatima who wants to scan everything
|
||||
*
|
||||
* The key insight: Aaisha's #1 Money question changes over time.
|
||||
* Day 1: "Did anyone pledge?" → Recent section
|
||||
* Day 3: "Are they paying?" → Confirm section
|
||||
* Day 10: "Who hasn't paid?" → Nudge section
|
||||
* Day 30: "Give me the spreadsheet" → she goes to Reports
|
||||
*/
|
||||
|
||||
interface Pledge {
|
||||
id: string; reference: string; amountPence: number; status: string; rail: string
|
||||
@@ -19,9 +38,6 @@ interface Pledge {
|
||||
createdAt: string; paidAt: string | null
|
||||
}
|
||||
|
||||
/**
|
||||
* Human status labels — no SaaS jargon
|
||||
*/
|
||||
const STATUS: Record<string, { label: string; color: string; bg: string }> = {
|
||||
new: { label: "Waiting", color: "text-gray-600", bg: "bg-gray-100" },
|
||||
initiated: { label: "Said they paid", color: "text-[#F59E0B]", bg: "bg-[#F59E0B]/10" },
|
||||
@@ -30,8 +46,6 @@ const STATUS: Record<string, { label: string; color: string; bg: string }> = {
|
||||
cancelled: { label: "Cancelled", color: "text-gray-400", bg: "bg-gray-50" },
|
||||
}
|
||||
|
||||
const formatPence = (p: number) => `£${(p / 100).toLocaleString("en-GB", { minimumFractionDigits: 0 })}`
|
||||
|
||||
function timeAgo(dateStr: string) {
|
||||
const days = Math.floor((Date.now() - new Date(dateStr).getTime()) / 86400000)
|
||||
if (days === 0) return "Today"
|
||||
@@ -40,66 +54,66 @@ function timeAgo(dateStr: string) {
|
||||
return new Date(dateStr).toLocaleDateString("en-GB", { day: "numeric", month: "short" })
|
||||
}
|
||||
|
||||
function dueLabel(dueDate: string) {
|
||||
const days = Math.ceil((new Date(dueDate).getTime() - Date.now()) / 86400000)
|
||||
if (days < 0) return { text: `${Math.abs(days)}d overdue`, urgent: true }
|
||||
if (days === 0) return { text: "Due today", urgent: true }
|
||||
if (days === 1) return { text: "Due tomorrow", urgent: false }
|
||||
if (days <= 7) return { text: `Due in ${days}d`, urgent: false }
|
||||
return { text: new Date(dueDate).toLocaleDateString("en-GB", { day: "numeric", month: "short" }), urgent: false }
|
||||
}
|
||||
|
||||
export default function MoneyPage() {
|
||||
const [pledges, setPledges] = useState<Pledge[]>([])
|
||||
const [allPledges, setAllPledges] = useState<Pledge[]>([])
|
||||
const [tablePledges, setTablePledges] = useState<Pledge[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [tab, setTab] = useState("all")
|
||||
const [filter, setFilter] = useState("all")
|
||||
const [search, setSearch] = useState("")
|
||||
const [page, setPage] = useState(0)
|
||||
const [updating, setUpdating] = useState<string | null>(null)
|
||||
const { toast } = useToast()
|
||||
const pageSize = 25
|
||||
|
||||
const [stats, setStats] = useState({ total: 0, waiting: 0, overdue: 0, paid: 0, totalPledged: 0, totalCollected: 0 })
|
||||
const [stats, setStats] = useState({
|
||||
total: 0, newCount: 0, initiatedCount: 0, overdueCount: 0, paidCount: 0,
|
||||
cancelledCount: 0, totalPledged: 0, totalCollected: 0
|
||||
})
|
||||
|
||||
const fetchPledges = useCallback(async () => {
|
||||
// Load top-level data (for contextual sections)
|
||||
const loadDashboard = useCallback(async () => {
|
||||
try {
|
||||
const data = await fetch("/api/dashboard").then(r => r.json())
|
||||
if (data.summary) {
|
||||
setStats({
|
||||
total: data.summary.totalPledges,
|
||||
newCount: data.byStatus?.new || 0,
|
||||
initiatedCount: data.byStatus?.initiated || 0,
|
||||
overdueCount: data.byStatus?.overdue || 0,
|
||||
paidCount: data.byStatus?.paid || 0,
|
||||
cancelledCount: data.byStatus?.cancelled || 0,
|
||||
totalPledged: data.summary.totalPledgedPence,
|
||||
totalCollected: data.summary.totalCollectedPence,
|
||||
})
|
||||
// Keep full list for contextual sections
|
||||
if (data.pledges) setAllPledges(data.pledges)
|
||||
}
|
||||
} catch { /* */ }
|
||||
}, [])
|
||||
|
||||
// Load paginated table data
|
||||
const loadTable = useCallback(async () => {
|
||||
const params = new URLSearchParams()
|
||||
params.set("limit", String(pageSize))
|
||||
params.set("offset", String(page * pageSize))
|
||||
if (tab !== "all") {
|
||||
if (tab === "overdue") params.set("overdue", "true")
|
||||
else params.set("status", tab)
|
||||
if (filter !== "all") {
|
||||
if (filter === "overdue") params.set("overdue", "true")
|
||||
else params.set("status", filter)
|
||||
}
|
||||
if (search) params.set("search", search)
|
||||
params.set("sort", "createdAt")
|
||||
params.set("dir", "desc")
|
||||
|
||||
const res = await fetch(`/api/pledges?${params}`)
|
||||
const data = await res.json()
|
||||
setPledges(data.pledges || [])
|
||||
const data = await fetch(`/api/pledges?${params}`).then(r => r.json())
|
||||
setTablePledges(data.pledges || [])
|
||||
setTotal(data.total || 0)
|
||||
setLoading(false)
|
||||
}, [tab, search, page])
|
||||
}, [filter, search, page])
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/dashboard")
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.summary) {
|
||||
setStats({
|
||||
total: data.summary.totalPledges,
|
||||
waiting: (data.byStatus?.new || 0) + (data.byStatus?.initiated || 0),
|
||||
overdue: data.byStatus?.overdue || 0,
|
||||
paid: data.byStatus?.paid || 0,
|
||||
totalPledged: data.summary.totalPledgedPence,
|
||||
totalCollected: data.summary.totalCollectedPence,
|
||||
})
|
||||
}
|
||||
}).catch(() => {})
|
||||
}, [])
|
||||
|
||||
useEffect(() => { fetchPledges() }, [fetchPledges])
|
||||
useEffect(() => { const i = setInterval(fetchPledges, 30000); return () => clearInterval(i) }, [fetchPledges])
|
||||
useEffect(() => { loadDashboard() }, [loadDashboard])
|
||||
useEffect(() => { loadTable() }, [loadTable])
|
||||
useEffect(() => { const i = setInterval(() => { loadDashboard(); loadTable() }, 30000); return () => clearInterval(i) }, [loadDashboard, loadTable])
|
||||
|
||||
const updateStatus = async (pledgeId: string, newStatus: string) => {
|
||||
setUpdating(pledgeId)
|
||||
@@ -109,8 +123,13 @@ export default function MoneyPage() {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
})
|
||||
setPledges(prev => prev.map(p => p.id === pledgeId ? { ...p, status: newStatus } : p))
|
||||
toast(`Updated`, "success")
|
||||
// Update both lists
|
||||
const updater = (p: Pledge) => p.id === pledgeId ? { ...p, status: newStatus } : p
|
||||
setAllPledges(prev => prev.map(updater))
|
||||
setTablePledges(prev => prev.map(updater))
|
||||
toast("Updated", "success")
|
||||
// Refresh stats
|
||||
loadDashboard()
|
||||
} catch { toast("Failed to update", "error") }
|
||||
setUpdating(null)
|
||||
}
|
||||
@@ -133,198 +152,307 @@ export default function MoneyPage() {
|
||||
const collectionRate = stats.totalPledged > 0 ? Math.round((stats.totalCollected / stats.totalPledged) * 100) : 0
|
||||
const totalPages = Math.ceil(total / pageSize)
|
||||
|
||||
// Contextual sections data
|
||||
const saidPaid = allPledges.filter((p: Pledge) => p.status === "initiated")
|
||||
const overdue = allPledges.filter((p: Pledge) => p.status === "overdue")
|
||||
|
||||
if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="h-6 w-6 text-[#1E40AF] animate-spin" /></div>
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
|
||||
{/* ── Header ── */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-black text-[#111827] tracking-tight">Money</h1>
|
||||
<p className="text-sm text-gray-500 mt-0.5">
|
||||
{stats.total} pledges · {formatPence(stats.totalPledged)} promised · {collectionRate}% received
|
||||
{formatPence(stats.totalCollected)} received of {formatPence(stats.totalPledged)} promised
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<input
|
||||
placeholder="Search name, email, reference..."
|
||||
value={search}
|
||||
onChange={e => { setSearch(e.target.value); setPage(0) }}
|
||||
className="pl-9 w-64 h-9 border border-gray-200 text-sm focus:border-[#1E40AF] focus:ring-1 focus:ring-[#1E40AF]/20 outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick stats — gap-px */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-200">
|
||||
{/* ── Big numbers ── */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-5 gap-px bg-gray-200">
|
||||
{[
|
||||
{ label: "All", count: stats.total, onClick: () => setTab("all") },
|
||||
{ label: "Waiting", count: stats.waiting, onClick: () => setTab("new") },
|
||||
{ label: "Needs a nudge", count: stats.overdue, onClick: () => setTab("overdue"), alert: stats.overdue > 0 },
|
||||
{ label: "Received", count: stats.paid, onClick: () => setTab("paid"), accent: true },
|
||||
{ value: String(stats.total), label: "Total pledges", onClick: () => setFilter("all") },
|
||||
{ value: String(stats.newCount), label: "Waiting", onClick: () => setFilter("new") },
|
||||
{ value: String(stats.initiatedCount), label: "Said they paid", onClick: () => setFilter("initiated"), accent: stats.initiatedCount > 0 ? "text-[#F59E0B]" : undefined },
|
||||
{ value: String(stats.overdueCount), label: "Need a nudge", onClick: () => setFilter("overdue"), accent: stats.overdueCount > 0 ? "text-[#DC2626]" : undefined },
|
||||
{ value: String(stats.paidCount), label: "Received ✓", onClick: () => setFilter("paid"), accent: "text-[#16A34A]" },
|
||||
].map(s => (
|
||||
<button key={s.label} onClick={s.onClick} className={`bg-white p-4 text-left hover:bg-gray-50 transition-colors ${tab === (s.label === "All" ? "all" : s.label === "Waiting" ? "new" : s.label === "Received" ? "paid" : "overdue") ? "border-b-2 border-[#1E40AF]" : ""}`}>
|
||||
<p className={`text-xl font-black ${s.alert ? "text-[#DC2626]" : s.accent ? "text-[#16A34A]" : "text-[#111827]"}`}>{s.count}</p>
|
||||
<button
|
||||
key={s.label}
|
||||
onClick={() => { s.onClick(); setPage(0) }}
|
||||
className={`bg-white p-4 text-left hover:bg-gray-50 transition-colors ${filter === (s.label === "Total pledges" ? "all" : s.label === "Waiting" ? "new" : s.label === "Said they paid" ? "initiated" : s.label === "Need a nudge" ? "overdue" : "paid") ? "border-b-2 border-[#1E40AF]" : ""}`}
|
||||
>
|
||||
<p className={`text-xl font-black ${s.accent || "text-[#111827]"}`}>{s.value}</p>
|
||||
<p className="text-[10px] text-gray-500 mt-0.5">{s.label}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Collection bar */}
|
||||
{/* ── Progress bar ── */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-1 h-2 bg-gray-100 overflow-hidden">
|
||||
<div className="h-full bg-[#1E40AF] transition-all" style={{ width: `${collectionRate}%` }} />
|
||||
<div className="h-full bg-[#1E40AF] transition-all duration-700" style={{ width: `${collectionRate}%` }} />
|
||||
</div>
|
||||
<span className="text-xs font-bold text-gray-500 whitespace-nowrap">{formatPence(stats.totalCollected)} / {formatPence(stats.totalPledged)}</span>
|
||||
<span className="text-xs font-bold text-[#111827] whitespace-nowrap">{collectionRate}%</span>
|
||||
</div>
|
||||
|
||||
{/* Tabs + Table */}
|
||||
<Tabs value={tab} onValueChange={v => { setTab(v); setPage(0) }}>
|
||||
<TabsList className="w-full sm:w-auto overflow-x-auto bg-transparent border-b border-gray-200 rounded-none p-0 h-auto">
|
||||
{/* ── CONTEXTUAL SECTION: Confirm payments ── */}
|
||||
{saidPaid.length > 0 && filter === "all" && !search && (
|
||||
<div className="border-l-2 border-[#F59E0B] bg-[#F59E0B]/5">
|
||||
<div className="px-5 py-3 flex items-center justify-between border-b border-[#F59E0B]/10">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-4 w-4 text-[#F59E0B]" />
|
||||
<h3 className="text-sm font-bold text-[#111827]">{saidPaid.length} {saidPaid.length === 1 ? "person says" : "people say"} they've paid</h3>
|
||||
</div>
|
||||
<Link href="/dashboard/reconcile" className="text-xs font-semibold text-[#1E40AF] hover:underline flex items-center gap-1">
|
||||
<Upload className="h-3 w-3" /> Upload bank statement
|
||||
</Link>
|
||||
</div>
|
||||
<div className="divide-y divide-[#F59E0B]/10">
|
||||
{saidPaid.slice(0, 5).map((p: Pledge) => (
|
||||
<div key={p.id} className={`px-5 py-3 flex items-center gap-3 ${updating === p.id ? "opacity-50" : ""}`}>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-medium text-[#111827] truncate">{p.donorName || "Anonymous"}</p>
|
||||
<code className="text-[9px] text-gray-400 font-mono">{p.reference}</code>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">{formatPence(p.amountPence)} · {timeAgo(p.createdAt)}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => updateStatus(p.id, "paid")}
|
||||
disabled={updating === p.id}
|
||||
className="bg-[#16A34A] px-3 py-1.5 text-xs font-bold text-white hover:bg-[#16A34A]/90 transition-colors flex items-center gap-1.5 shrink-0"
|
||||
>
|
||||
<CheckCircle2 className="h-3.5 w-3.5" /> Confirm
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{saidPaid.length > 5 && (
|
||||
<div className="px-5 py-2 border-t border-[#F59E0B]/10">
|
||||
<button onClick={() => { setFilter("initiated"); setPage(0) }} className="text-xs font-semibold text-[#1E40AF] hover:underline">
|
||||
View all {saidPaid.length} →
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── CONTEXTUAL SECTION: People who need a nudge ── */}
|
||||
{overdue.length > 0 && filter === "all" && !search && (
|
||||
<div className="border-l-2 border-[#DC2626] bg-[#DC2626]/5">
|
||||
<div className="px-5 py-3 flex items-center justify-between border-b border-[#DC2626]/10">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-4 w-4 text-[#DC2626]" />
|
||||
<h3 className="text-sm font-bold text-[#111827]">{overdue.length} {overdue.length === 1 ? "pledge needs" : "pledges need"} a nudge</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-[#DC2626]/10">
|
||||
{overdue.slice(0, 5).map((p: Pledge) => {
|
||||
const days = Math.floor((Date.now() - new Date(p.createdAt).getTime()) / 86400000)
|
||||
return (
|
||||
<div key={p.id} className={`px-5 py-3 flex items-center gap-3 ${updating === p.id ? "opacity-50" : ""}`}>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-medium text-[#111827] truncate">{p.donorName || "Anonymous"}</p>
|
||||
<span className="text-[9px] font-bold text-[#DC2626]">{days}d</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">{formatPence(p.amountPence)} · {p.eventName}</p>
|
||||
</div>
|
||||
<div className="flex gap-1.5 shrink-0">
|
||||
{p.donorPhone && (
|
||||
<button
|
||||
onClick={() => sendReminder(p)}
|
||||
className="bg-[#25D366] px-3 py-1.5 text-xs font-bold text-white hover:bg-[#25D366]/90 transition-colors flex items-center gap-1"
|
||||
>
|
||||
<MessageCircle className="h-3 w-3" /> Nudge
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => updateStatus(p.id, "paid")}
|
||||
disabled={updating === p.id}
|
||||
className="border border-gray-200 px-2.5 py-1.5 text-xs font-bold text-[#111827] hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Paid
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{overdue.length > 5 && (
|
||||
<div className="px-5 py-2 border-t border-[#DC2626]/10">
|
||||
<button onClick={() => { setFilter("overdue"); setPage(0) }} className="text-xs font-semibold text-[#1E40AF] hover:underline">
|
||||
View all {overdue.length} →
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Search + filter bar ── */}
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<input
|
||||
placeholder="Search name, email, reference..."
|
||||
value={search}
|
||||
onChange={e => { setSearch(e.target.value); setPage(0) }}
|
||||
className="pl-9 w-full h-10 border-2 border-gray-200 text-sm focus:border-[#1E40AF] outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-1.5 overflow-x-auto">
|
||||
{[
|
||||
{ value: "all", label: "All" },
|
||||
{ value: "new", label: "Waiting" },
|
||||
{ value: "initiated", label: "Said they paid" },
|
||||
{ value: "overdue", label: "Needs a nudge" },
|
||||
{ value: "initiated", label: "Said paid" },
|
||||
{ value: "overdue", label: "Overdue" },
|
||||
{ value: "paid", label: "Received" },
|
||||
{ value: "cancelled", label: "Cancelled" },
|
||||
].map(t => (
|
||||
<TabsTrigger key={t.value} value={t.value} className="rounded-none border-b-2 border-transparent data-[state=active]:border-[#1E40AF] data-[state=active]:bg-transparent data-[state=active]:shadow-none text-xs font-semibold px-3 py-2">
|
||||
<button
|
||||
key={t.value}
|
||||
onClick={() => { setFilter(t.value); setPage(0) }}
|
||||
className={`px-3 py-2 text-xs font-bold whitespace-nowrap transition-colors ${
|
||||
filter === t.value
|
||||
? "bg-[#111827] text-white"
|
||||
: "border border-gray-200 text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
</TabsTrigger>
|
||||
</button>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value={tab}>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-16"><Loader2 className="h-6 w-6 text-[#1E40AF] animate-spin" /></div>
|
||||
) : pledges.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<p className="text-sm font-medium text-[#111827]">No pledges found</p>
|
||||
<p className="text-xs text-gray-500 mt-1">{search ? `No results for "${search}"` : "Share your pledge links to start collecting"}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white">
|
||||
{/* Table header */}
|
||||
<div className="grid grid-cols-12 gap-2 px-5 py-2.5 border-b border-gray-100 text-[10px] font-bold text-gray-400 uppercase tracking-wide">
|
||||
<div className="col-span-4">Donor</div>
|
||||
<div className="col-span-2">Amount</div>
|
||||
<div className="col-span-2 hidden md:block">Appeal</div>
|
||||
<div className="col-span-2">Status</div>
|
||||
<div className="col-span-1 hidden sm:block">When</div>
|
||||
<div className="col-span-1"></div>
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
{pledges.map(p => {
|
||||
const sl = STATUS[p.status] || STATUS.new
|
||||
const due = p.dueDate ? dueLabel(p.dueDate) : null
|
||||
|
||||
return (
|
||||
<div key={p.id} className={`grid grid-cols-12 gap-2 px-5 py-3 border-b border-gray-50 items-center hover:bg-gray-50/50 transition-colors ${updating === p.id ? "opacity-50" : ""}`}>
|
||||
{/* Donor */}
|
||||
<div className="col-span-4">
|
||||
<p className="text-sm font-medium text-[#111827] truncate">{p.donorName || "Anonymous"}</p>
|
||||
<div className="flex items-center gap-1.5 mt-0.5">
|
||||
<code className="text-[10px] text-gray-400 font-mono">{p.reference}</code>
|
||||
{p.donorPhone && <MessageCircle className="h-2.5 w-2.5 text-[#25D366]" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Amount */}
|
||||
<div className="col-span-2">
|
||||
<p className="text-sm font-black text-[#111827]">{formatPence(p.amountPence)}</p>
|
||||
{p.giftAid && <span className="text-[9px] text-[#16A34A] font-bold">+Gift Aid</span>}
|
||||
{p.installmentTotal && p.installmentTotal > 1 && (
|
||||
<p className="text-[9px] text-[#F59E0B] font-bold">{p.installmentNumber}/{p.installmentTotal}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Appeal */}
|
||||
<div className="col-span-2 hidden md:block">
|
||||
<p className="text-xs text-gray-600 truncate">{p.eventName}</p>
|
||||
{p.qrSourceLabel && <p className="text-[10px] text-gray-400 truncate">{p.qrSourceLabel}</p>}
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="col-span-2">
|
||||
<span className={`text-[10px] font-bold px-1.5 py-0.5 inline-block ${sl.bg} ${sl.color}`}>{sl.label}</span>
|
||||
</div>
|
||||
|
||||
{/* When */}
|
||||
<div className="col-span-1 hidden sm:block">
|
||||
{due ? (
|
||||
<span className={`text-xs ${due.urgent ? "font-bold text-[#DC2626]" : "text-gray-500"}`}>{due.text}</span>
|
||||
) : (
|
||||
<span className="text-xs text-gray-500">{timeAgo(p.createdAt)}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="col-span-1 text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="p-1.5 hover:bg-gray-100 transition-colors">
|
||||
<MoreVertical className="h-4 w-4 text-gray-400" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{p.status !== "paid" && (
|
||||
<DropdownMenuItem onClick={() => updateStatus(p.id, "paid")}>
|
||||
<CheckCircle2 className="h-4 w-4 text-[#16A34A]" /> Mark as received
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{p.status !== "initiated" && p.status !== "paid" && (
|
||||
<DropdownMenuItem onClick={() => updateStatus(p.id, "initiated")}>
|
||||
<Send className="h-4 w-4 text-[#F59E0B]" /> Mark as "said they paid"
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{p.donorPhone && p.status !== "paid" && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => sendReminder(p)}>
|
||||
<MessageCircle className="h-4 w-4 text-[#25D366]" /> Send WhatsApp reminder
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
{p.status !== "cancelled" && p.status !== "paid" && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem destructive onClick={() => updateStatus(p.id, "cancelled")}>
|
||||
<XCircle className="h-4 w-4" /> Cancel pledge
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between pt-3">
|
||||
<p className="text-xs text-gray-500">{page * pageSize + 1}–{Math.min((page + 1) * pageSize, total)} of {total}</p>
|
||||
<div className="flex gap-1">
|
||||
<button disabled={page === 0} onClick={() => setPage(p => p - 1)} className="border border-gray-200 p-1.5 disabled:opacity-30 hover:bg-gray-50">
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<button disabled={page >= totalPages - 1} onClick={() => setPage(p => p + 1)} className="border border-gray-200 p-1.5 disabled:opacity-30 hover:bg-gray-50">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* Match payments link */}
|
||||
<div className="border-l-2 border-[#1E40AF] pl-4 py-2">
|
||||
<Link href="/dashboard/reconcile" className="text-sm font-bold text-[#111827] hover:text-[#1E40AF] transition-colors">
|
||||
Match bank payments →
|
||||
</Link>
|
||||
<p className="text-xs text-gray-500">Upload a bank statement to automatically match payments to pledges</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Pledge table ── */}
|
||||
{tablePledges.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-sm font-medium text-[#111827]">No pledges found</p>
|
||||
<p className="text-xs text-gray-500 mt-1">{search ? `No results for "${search}"` : "Share your pledge links to start collecting"}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white border border-gray-200">
|
||||
{/* Header */}
|
||||
<div className="hidden md:grid grid-cols-12 gap-2 px-5 py-2.5 border-b border-gray-100 text-[10px] font-bold text-gray-400 uppercase tracking-wide">
|
||||
<div className="col-span-4">Donor</div>
|
||||
<div className="col-span-2">Amount</div>
|
||||
<div className="col-span-2">Appeal</div>
|
||||
<div className="col-span-2">Status</div>
|
||||
<div className="col-span-1">When</div>
|
||||
<div className="col-span-1"></div>
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
{tablePledges.map((p: Pledge) => {
|
||||
const sl = STATUS[p.status] || STATUS.new
|
||||
|
||||
return (
|
||||
<div key={p.id} className={`grid grid-cols-12 gap-2 px-5 py-3 border-b border-gray-50 items-center hover:bg-gray-50/50 transition-colors ${updating === p.id ? "opacity-50" : ""}`}>
|
||||
{/* Donor */}
|
||||
<div className="col-span-6 md:col-span-4">
|
||||
<p className="text-sm font-medium text-[#111827] truncate">{p.donorName || "Anonymous"}</p>
|
||||
<div className="flex items-center gap-1.5 mt-0.5">
|
||||
<code className="text-[10px] text-gray-400 font-mono">{p.reference}</code>
|
||||
{p.donorPhone && <MessageCircle className="h-2.5 w-2.5 text-[#25D366]" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Amount */}
|
||||
<div className="col-span-3 md:col-span-2">
|
||||
<p className="text-sm font-black text-[#111827]">{formatPence(p.amountPence)}</p>
|
||||
{p.giftAid && <span className="text-[9px] text-[#16A34A] font-bold">+Gift Aid</span>}
|
||||
{p.installmentTotal && p.installmentTotal > 1 && (
|
||||
<p className="text-[9px] text-[#F59E0B] font-bold">{p.installmentNumber}/{p.installmentTotal}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Appeal (desktop) */}
|
||||
<div className="col-span-2 hidden md:block">
|
||||
<p className="text-xs text-gray-600 truncate">{p.eventName}</p>
|
||||
{p.qrSourceLabel && <p className="text-[10px] text-gray-400 truncate">{p.qrSourceLabel}</p>}
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="col-span-2">
|
||||
<span className={`text-[10px] font-bold px-1.5 py-0.5 inline-block ${sl.bg} ${sl.color}`}>{sl.label}</span>
|
||||
</div>
|
||||
|
||||
{/* When (desktop) */}
|
||||
<div className="col-span-1 hidden md:block">
|
||||
<span className="text-xs text-gray-500">{timeAgo(p.createdAt)}</span>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="col-span-1 text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="p-1.5 hover:bg-gray-100 transition-colors">
|
||||
<MoreVertical className="h-4 w-4 text-gray-400" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
{p.status !== "paid" && (
|
||||
<DropdownMenuItem onClick={() => updateStatus(p.id, "paid")}>
|
||||
<CheckCircle2 className="h-4 w-4 text-[#16A34A]" /> Mark as received
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{p.status !== "initiated" && p.status !== "paid" && (
|
||||
<DropdownMenuItem onClick={() => updateStatus(p.id, "initiated")}>
|
||||
<Send className="h-4 w-4 text-[#F59E0B]" /> Mark as "said they paid"
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{p.donorPhone && p.status !== "paid" && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => sendReminder(p)}>
|
||||
<MessageCircle className="h-4 w-4 text-[#25D366]" /> Send WhatsApp reminder
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
{p.status !== "cancelled" && p.status !== "paid" && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem destructive onClick={() => updateStatus(p.id, "cancelled")}>
|
||||
<XCircle className="h-4 w-4" /> Cancel pledge
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Pagination ── */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs text-gray-500">{page * pageSize + 1}–{Math.min((page + 1) * pageSize, total)} of {total}</p>
|
||||
<div className="flex gap-1">
|
||||
<button disabled={page === 0} onClick={() => setPage(p => p - 1)} className="border border-gray-200 p-1.5 disabled:opacity-30 hover:bg-gray-50">
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<button disabled={page >= totalPages - 1} onClick={() => setPage(p => p + 1)} className="border border-gray-200 p-1.5 disabled:opacity-30 hover:bg-gray-50">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Match payments CTA ── */}
|
||||
<Link href="/dashboard/reconcile">
|
||||
<div className="border-l-2 border-[#1E40AF] bg-[#1E40AF]/5 p-4 flex items-center gap-3 hover:bg-[#1E40AF]/10 transition-colors cursor-pointer">
|
||||
<Upload className="h-5 w-5 text-[#1E40AF] shrink-0" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-bold text-[#111827]">Match bank payments</p>
|
||||
<p className="text-xs text-gray-600">Upload a bank statement CSV — we auto-detect Barclays, HSBC, Lloyds, NatWest, Monzo, Starling and more</p>
|
||||
</div>
|
||||
<ArrowRight className="h-4 w-4 text-[#1E40AF] shrink-0" />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user