feat(kanban): Project Pipeline board with drag-and-drop, lead drawer, and full project view

- 44 mock leads across 7 stage columns + 2 bucket columns (Stuck, Follow-up) with seeded activity logs
- dnd-kit drag-and-drop: cross-column card movement, bucket logic, DragOverlay preview
- Campaign toast on stage drop: 20s countdown, Edit button opens message editor, auto-sends if ignored
- KanbanColumn: droppable zones, stage progress bar (position/total), column color accents, Add/Rename/Delete (Admin+Owner)
- KanbanCard: initials avatar, job type pill, insurance badge, assigned agent, days-in-stage counter, left color accent bar
- ColumnManagerModal: add/rename/delete stages with name, color picker, campaign message; delete blocked if leads exist
- LeadInfoDrawer: right slide-in with progress bar + stage steps, Details and Activity tabs, More Details CTA
- ActivityTimeline: color-coded entries (created/forward/regression/bucket), stage arrows, notes, agent + date
- LeadProjectPage: full project view at /*/leads/:leadId — progress bar, stage mover dropdown, info panels, full activity log, stats
- Routes: /*/kanban + /*/leads/:leadId for Owner, Admin, Field Agent
- Pipeline nav item added for all three roles
This commit is contained in:
Satyam-Rastogi
2026-04-08 19:56:42 +05:30
parent c927f4c44d
commit b1ece35ac8
11 changed files with 2440 additions and 1 deletions
+4 -1
View File
@@ -5,7 +5,7 @@ import { useTheme } from '../context/ThemeContext';
import {
LayoutDashboard, Map, Calendar, LogOut, User, Home, MessageSquare,
ChevronLeft, ChevronRight, Sun, Moon, Trophy, Users, Briefcase,
FileText, Menu, X, Calculator, PlusCircle, ClipboardList, Zap
FileText, Menu, X, Calculator, PlusCircle, ClipboardList, Zap, LayoutGrid
} from 'lucide-react';
import PageTransition from './PageTransition';
@@ -138,6 +138,7 @@ const Layout = () => {
{ to: "/admin/dashboard", icon: LayoutDashboard, label: "Dashboard" },
{ to: "/owner/projects", icon: Briefcase, label: "Projects" },
{ to: "/emp/fa/leads", icon: ClipboardList, label: "Leads" },
{ to: "/owner/kanban", icon: LayoutGrid, label: "Pipeline" },
{ to: "/admin/dispatch", icon: Zap, label: "LynkDispatch" },
{ to: "/owner/maps", icon: Map, label: "Territory Map" },
{
@@ -156,6 +157,7 @@ const Layout = () => {
{ to: "/admin/schedule", icon: Calendar, label: "Schedule" },
{ to: "/admin/leaderboard", icon: Trophy, label: "Leaderboard" },
{ to: "/emp/fa/leads", icon: ClipboardList, label: "Leads" },
{ to: "/admin/kanban", icon: LayoutGrid, label: "Pipeline" },
{ to: "/admin/dispatch", icon: Zap, label: "LynkDispatch" },
{ to: "/admin/maps", icon: Map, label: "Territory Map" },
{
@@ -184,6 +186,7 @@ const Layout = () => {
{ to: "/emp/fa/dashboard", icon: LayoutDashboard, label: "Dashboard" },
{ to: "/emp/fa/maps", icon: Map, label: "My Map" },
{ to: "/emp/fa/leads", icon: ClipboardList, label: "Leads" },
{ to: "/emp/fa/kanban", icon: LayoutGrid, label: "Pipeline" },
{
to: "/emp/fa/pro-canvas",
icon: LayoutDashboard,