Commission Tracker
A free web app for illustrators who take commissions. It tracks each order from waiting list to delivery, shows income and unpaid balances, and gives every client a private link to follow their order.
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- Supabase
- Recharts
- dnd-kit
- Zod
- Vitest
- Vercel
OVERVIEW
Illustrators who take orders through Twitter/X and Discord usually track them in chats and spreadsheets. Commission Tracker gives them a drag-and-drop board, configurable order types with add-on prices, payment status per order, and a dashboard of income, unpaid balances and on-time rate. Each client gets a private tracking page with their queue position and an estimated finish date based on the artist's pace over the last 90 days, without seeing prices or other clients. Daily deadline reminders go out through Discord. The app is bilingual, installable as a PWA, and covered by 50 unit tests and 5 SQL test suites.
WHAT I DID
- Drag-and-drop Kanban board with mouse, touch and keyboard support, backed by a fractional queue_order column so reordering is a single row update that both the artist and the client tracking page read from.
- Private client tracking page per commission: current stage, queue position, and an estimated finish date computed from the artist's real completion pace over 90 days, shown as a ±25% range — no prices, no other clients' names.
- Database-first security: row-level security on every table keyed to auth.uid(), a single security-definer Postgres function (get_tracking) for the public page, and zero table grants for the anonymous role.
- Snapshot pricing: base price and add-on prices frozen at booking time as integer rupiah, so price list changes never alter what a client was quoted. All price math in one file with unit tests.
- Self-cleaning storage: WIP images compressed to WebP in the browser, capped at 10 per commission, and deleted by a daily Vercel Cron job 30 days after the commission is done.
- Daily deadline reminders at 08:00 WIB via Discord webhooks, with per-artist channel selection, reminder window, and once-per-day dedup. Email channel ready to enable.
- Full analytics dashboard: income vs unpaid over time, comparison with the previous period, needs-attention list, work pipeline, average turnaround, on-time rate, and income per order type — every chart has a table view and the dashboard filters by type or month.
- Bilingual (Indonesian and English) without URL prefixes: a request proxy rewrites paths from a lang cookie so existing tracking links never break. Both languages prerender. Typed dictionaries fail the build on missing keys.