type: concept
created: Mon Apr 06 2026 02:00:00 GMT+0200 (Central European Summer Time)
updated: Mon Apr 06 2026 02:00:00 GMT+0200 (Central European Summer Time)
sources: raw/plans/invoice-design-research
tags: feature finance payments invoices
aliases: Payment Schedule, Payments Page

Payment Calendar

abstract

Interactive payment scheduling page at `/payments` with KPI cards, status-tabbed invoice list, mini calendar sidebar with click-to-filter, and cash flow bar chart. Built from real invoice data (2,143 invoices). Research-backed design: list+sidebar beats traditional month-grid for AP.

Design Decision

Researched 10+ AP/PM tools (Ramp, Mercury, Bill.com, Tipalti, AppFolio, Buildium, Yardi Breeze, Melio, Entrata, RentManager). Key finding: almost no AP/PM tool uses a traditional month-grid calendar for payments. The dominant pattern is a status-grouped list with KPI summary cards. Property managers have 10-50 payments/month — not enough to justify 30 empty cells.

Chose Option 2: List + Mini Calendar Sidebar from 3 proposals presented in an HTML comparison page.

Architecture

Frontend

Component: src/app/features/payments/payments.component.ts
Route: /payments (standalone, lazy-loaded)
Sidebar nav: Finance > Payments

Backend (server.js endpoints)

GET /api/payments/summary — KPI aggregates (outstanding, due this week, overdue, scheduled)
GET /api/payments/calendar — Paginated invoice list with status/date filtering
GET /api/payments/by-date — Date-grouped counts for mini calendar dots
GET /api/payments/weekly-cashflow — Next 4 weeks projected outflow for bar chart

DB Fields Added

invoices.scheduled_payment_date (DATE, nullable)
invoices.payment_method (VARCHAR(20), nullable)

Features

KPI Cards (clickable)

Total Outstanding — all non-completed/rejected invoices
Due This Week — due within 7 days, not yet scheduled
Overdue — past due date, not completed/scheduled (red accent)
Scheduled — status = 'scheduled' (blue accent)
Clicking a card switches the tab filter

Tabbed List

Tabs: All | Due Soon | Overdue | Scheduled | Paid
Columns: Vendor, Property, Amount, Due Date, Method, Status
Row click navigates to invoice detail
Pagination: 30 per page with Prev/Next

Mini Calendar Sidebar

Month grid with prev/next navigation
Gold dots on days with payments due
Red dots on days with overdue payments
Click a day to filter the list to that date
Click again to clear filter
"Today" button in page header

Cash Flow Bar Chart

Horizontal bars showing next 4 weeks of projected outflow
Total projected amount displayed below

Data Seeding

40 invoices updated to April 2026 due dates (spread 1-2 per day)
6 invoices set to 'scheduled' status with payment methods and dates

Sources

raw/plans/invoice-design-research — UI research across fintech products

wiki/concepts/invoice-processing — F3.2 invoice pipeline (parent feature)
wiki/concepts/smart-collections — F1.3 collections (related finance workflow)
wiki/concepts/tech-stack — Angular 19 + server.js architecture
wiki/entities/unitcycle — the platform