Consulting Capacity & Pipeline Planner
A drag-and-drop weekly resource-allocation board fused with a sales-pipeline view for a consulting team.
Built with
What
A drag-and-drop weekly resource-allocation board fused with a sales-pipeline view. Consultants are tracked with specialties, certifications, and a thirteen-week workload; engagements are tracked with status and closure probability, then slotted into per-consultant week cells. Dark, dense, mission-control aesthetic.
Why
Most ops teams run resource planning in a spreadsheet and pipeline in a CRM, and the two never talk. The question “do we have capacity to take this deal if it closes?” becomes a meeting instead of a screen. Collapsing both surfaces into one drag-and-drop board removes the meeting and turns capacity-vs-deal into a glance.
Stack at a glance
- Vite + React + TypeScript — single-page client
- Tailwind v4 + shadcn/ui — built on Radix UI primitives
- react-dnd — drag-and-drop slotting for the board
- lucide-react — icon set
- Supabase — Postgres with RLS; separate projects for staging and production so live planning data isn’t touched during iteration
- Figma — design source, exported as a structured HTML + React handoff folder
How it’s built
A tight, MCP-tool-heavy loop between one operator and Claude Code. The Figma MCP feeds live design context straight into the session; designs leave Figma as a structured handoff folder of HTML and React reference components plus a per-region spec, and Claude rebuilds them inside the live codebase using the existing shadcn primitives and Tailwind tokens. The Supabase MCP handles apply_migration, execute_sql, and deploy_edge_function against the cloud DB, so schema and edge-function changes land in one step. Claude-in-Chrome provides tab-context inspection during visual iteration. Parallel features run across separate git worktrees, and a two-environment promote workflow (staging → production, each with its own Supabase project) keeps live planning data clean while iteration happens upstream.
