CRM App
Next.js CRM with customizable dashboard KPIs, pipeline (table + Kanban), contacts, tasks, reports, and role-based access.
A full-stack CRM with a resizable dashboard (KPI cards, funnel, revenue chart, leaderboard, recent deals), pipeline in table or Kanban view, contacts (list, search, 360° detail), tasks, and read-only reports. AppShell: collapsible sidebar on desktop, bottom nav on mobile; loading shows widget skeletons. KPI engine in /lib/calculations (win rate, weighted forecast, trend). RBAC: Admin and Manager see all deals and leaderboard; Sales Rep sees only own deals. NextAuth for auth; server actions and Prisma (SQLite); notes loaded on demand per deal. Built with react-hook-form + Zod, Zustand for dashboard preferences, react-grid-layout for widgets, @dnd-kit for Kanban.
Architecture
Features
- KPI engine in /lib/calculations — win rate (conversion), weighted forecast by stage probability, period-over-period trend; dashboard and reports call it once per request.
- RBAC (Admin, Manager, Sales Rep) — Admin and Manager see all deals and leaderboard; Sales Rep sees only own deals, no leaderboard.
- Pipeline — Recharts funnel; deal stages from Prospecting to Closed Won / Lost; table or Kanban view (@dnd-kit); filters by owner, date, status.
- Data loading — deals list with include owner; notes on demand via getNotesForDeal(dealId); leaderboard via groupBy + findMany; contacts and tasks via server actions.
Tech stack
- Next.js (App Router), server components, server actions, NextAuth (v5)
- Prisma, SQLite (default); Zod for forms and server actions
- Tailwind, Recharts; react-hook-form, Zustand, react-grid-layout, @dnd-kit
Formula guide
- Win rate: Win rate = (Closed Won count / total deal count) × 100.
- Weighted forecast: Weighted forecast = Σ (deal.value × P(stage)) for open stages; stage probabilities: Prospecting 0.1, Qualified 0.3, Negotiating 0.7, Closed Won 1.0, Lost 0.
- Trend: Trend = ((current − previous) / previous) × 100 (percentage change).