Files
calvana/pledge-now-pay-later
Omair Saleh c43404694e 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)
2026-03-04 21:22:03 +08:00
..

Pledge Now, Pay Later

Convert "I'll donate later" into tracked pledges with automatic payment follow-up. Free forever for UK charities.

Features

  • 15-Second Pledge Flow: Mobile-first, 3-screen donor experience
  • QR Code Attribution: Every pledge tied to event + volunteer/table
  • Pay by Bank Transfer: Zero fees — unique reference for matching
  • Direct Debit: GoCardless integration for automatic collection
  • Automated Reminders: 4-step follow-up sequence (export/webhook)
  • Bank Statement Reconciliation: Upload CSV, auto-match payments
  • CRM Export: Full attribution data ready for import
  • Pipeline Dashboard: Track pledges from new → paid

Quick Start

Prerequisites

  • Node.js 18+
  • Docker & Docker Compose
  • npm or pnpm

Setup

# 1. Clone and install
cd pledge-now-pay-later
npm install

# 2. Start database
docker compose up -d

# 3. Run migrations
npx prisma migrate dev --name init

# 4. Seed demo data
npx prisma db seed

# 5. Start dev server
npm run dev

Visit http://localhost:3000

Demo URLs

Tech Stack

Layer Technology
Frontend Next.js 14 (App Router)
Language TypeScript
Styling Tailwind CSS + shadcn/ui
Database PostgreSQL 16
ORM Prisma
QR Codes qrcode (node)
CSV Parsing PapaParse
Icons Lucide React
Auth NextAuth.js (ready)

Architecture

src/
├── app/
│   ├── api/              # API routes
│   │   ├── analytics/    # Event tracking
│   │   ├── dashboard/    # Stats & pipeline
│   │   ├── events/       # CRUD + QR management
│   │   ├── exports/      # CRM pack CSV
│   │   ├── imports/      # Bank statement matching
│   │   ├── pledges/      # Create, update, mark paid
│   │   ├── qr/           # Resolve QR tokens
│   │   └── webhooks/     # Reminder event polling
│   ├── dashboard/        # Staff UI
│   │   ├── events/       # Event management + QR codes
│   │   ├── pledges/      # Pledge pipeline
│   │   ├── reconcile/    # Bank CSV import
│   │   ├── exports/      # Download CRM data
│   │   ├── settings/     # Org config
│   │   └── apply/        # Fractional CTO upsell
│   └── p/[token]/        # Donor pledge flow
│       └── steps/        # Amount → Payment → Identity → Instructions
├── components/ui/        # Reusable UI components
└── lib/                  # Core utilities
    ├── prisma.ts         # DB client
    ├── reference.ts      # Bank-safe ref generator
    ├── qr.ts             # QR code generation
    ├── matching.ts       # Bank statement matching
    ├── reminders.ts      # Reminder sequences
    ├── analytics.ts      # Event tracking
    ├── exports.ts        # CRM export formatting
    └── validators.ts     # Zod schemas

API Reference

Endpoint Method Purpose
/api/qr/{token} GET Resolve QR code → event info
/api/pledges POST Create pledge
/api/pledges/{id} PATCH Update pledge status
/api/pledges/{id}/mark-initiated POST Donor "I've paid"
/api/events GET/POST List & create events
/api/events/{id}/qr GET/POST Manage QR sources
/api/events/{id}/qr/{qrId}/download GET Download QR PNG
/api/dashboard GET Dashboard stats
/api/imports/bank-statement POST Upload & match CSV
/api/exports/crm-pack GET Download CRM CSV
/api/webhooks GET Poll pending reminders
/api/analytics POST Track events

Payment Reference Format

References follow format: PREFIX-XXXX-NN

  • PREFIX: Configurable per org (default: PNPL), max 4 chars
  • XXXX: 4-char alphanumeric (human-safe: no 0/O, 1/I/l)
  • NN: Amount in pounds (helps manual matching)
  • Total max 18 chars (UK BACS limit)

Example: PNPL-7K4P-50 (£50 pledge)

Reminder Sequence

Step Delay Message
0 T+0 Payment instructions with bank details
1 T+2 days Gentle nudge
2 T+7 days Impact story + urgency
3 T+14 days Final reminder + easy cancel

Reminders auto-stop when pledge is marked paid.

License

Proprietary — © Omair. All rights reserved.