Client Project · Full-Stack
J.Kloting Dashboard
Operations & Finance Management System for a Custom Apparel Business
Problem
The same apparel business behind the J.Kloting marketing site was running its day-to-day operations — orders, production costs, cash flow, and inventory — out of spreadsheets and chat messages. There was no single source of truth for what had been ordered, what each job actually cost, how much cash was on hand across accounts, or whether BIR tax filing deadlines were coming up. The owner needed a private dashboard to run the business from one place.
Solution
A role-gated internal dashboard covering the full operations loop: orders (create, edit, complete, CSV export), costs tied to jobs, a cash-flow ledger with recurring entries, transfers between accounts, manual adjustments, and exportable statements, plus inventory and fund allocations. A scheduled job emails BIR tax-filing reminders automatically so deadlines aren't missed. Charts on the main dashboard summarize revenue, costs, and cash position at a glance.
Tech Stack
| Framework | Next.js 16 (App Router) · React 19 · TypeScript |
| Database & Auth | Supabase — PostgreSQL + Auth (@supabase/ssr) + Row Level Security (RLS) |
| Barong Catalog | Firebase Firestore (jklothing-inventory) via Admin SDK — same DB the public jkloting.store reads |
| Images | Cloudinary (dn3gaufjz) — client-side WebP compression before upload via browser canvas |
| Forms & Validation | react-hook-form + Zod schemas (@hookform/resolvers) |
| Charts | Recharts — revenue, cost, and cash-flow summaries |
| Styling | Tailwind CSS v4 — custom dark fintech design system with light/dark theme toggle |
| Nodemailer + Gmail SMTP — BIR tax deadline reminders + MailerLite API for new-arrival newsletter drafts | |
| Scheduling | GitHub Actions daily cron → secured /api/cron/tax-reminders (CRON_SECRET header) |
| Deploy | Vercel (Hobby tier — $0/month) |
Key Features
| Module | What it does |
|---|---|
| Orders | Create → edit → complete workflow, with CSV export of order history |
| Costs | Track production/material costs and attribute them to jobs |
| Cash Flow | Ledger with recurring entries, account transfers, manual adjustments, and exportable statements |
| Barong Catalog | CRUD for barong products at /inventory — writes to Firebase Firestore + Cloudinary; instantly reflected on the public jkloting.store |
| Allocations | Allocate funds across purposes/accounts |
| Dashboard | Recharts summaries of revenue, costs, and cash position |
| BIR Tax Reminders | Daily GitHub Actions cron checks upcoming filing deadlines and sends email via Gmail SMTP |
| Newsletter | MailerLite API generates new-arrival newsletter drafts when barong products are added |
Architecture
Next.js App Router with a route-group split — an (auth) group for login and an (app) group for the gated dashboard. Supabase handles Postgres + auth via @supabase/ssr for server-side session handling. The tax-reminder automation is a GitHub Actions workflow that runs daily at 09:00 Manila time and POSTs to /api/cron/tax-reminders, authenticated with a CRON_SECRET header. That route then sends email via Nodemailer + Gmail SMTP.
Selected Lessons
- ›External cron beats platform cron for control. Driving the tax reminders from GitHub Actions (rather than Vercel Cron) gave a free schedule, a manual "run now" trigger with a test-date override for QA, and run logs — without coupling the schedule to the hosting plan.
- ›Secure the cron endpoint, not just the UI. A public API route that sends email is an abuse vector. Gating /api/cron/tax-reminders behind a shared CRON_SECRET header was essential — auth on the dashboard pages alone wouldn't have protected it.
- ›Zod schemas as the single contract. Reusing the same Zod schema for client-side react-hook-form validation and server-side checks removed a whole class of "valid in the form, invalid at the DB" bugs.
- ›Financial data needs an audit-friendly model. Splitting cash flow into recurring entries, transfers, and adjustments — instead of one flat "transactions" table — made statements reconcile cleanly and kept corrections traceable.