feat: Multi-role platform expansion, mobile nav redesign, and UI polish
- Add Owner, Contractor, Vendor, Subcontractor dashboards and role-based routing - Owner now has superuser access to all Admin pages (dashboard, schedule, leaderboard) - Redesign landing page mobile menu as slide-in sidebar (replaces broken Framer Motion overlay) - Add body scroll lock to app sidebar for mobile consistency - Fix Team Schedule to match Admin Dashboard design language (ambient glows, gradient header, SpotlightCard, zinc palette) - Fix login page tab overflow — use abbreviated labels and grid layout for 6 role tabs - Fix Recharts ResponsiveContainer warnings — replace height="100%" with fixed pixel heights - Fix lightbox image viewer — unified nav bar, touch swipe support, no more overlapping text - Add AI Assistant page, People/Vendor/Document management for Owner role - Expand mock data store with contractor, vendor, and subcontractor data
This commit is contained in:
Satyam
@@ -0,0 +1,240 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
import { StatCard } from '../../components/StatCard';
|
||||
import { SpotlightCard } from '../../components/SpotlightCard';
|
||||
import { Hammer, CheckSquare, Clock, AlertTriangle, Calendar, DollarSign } from 'lucide-react';
|
||||
import ProjectDetailsModal from '../../components/contractor/ProjectDetailsModal';
|
||||
import FinancialSummaryModal from '../../components/contractor/FinancialSummaryModal';
|
||||
|
||||
const ContractorDashboard = () => {
|
||||
const { user } = useAuth();
|
||||
const { projects } = useMockStore();
|
||||
|
||||
// 1. Identify current contractor
|
||||
// Filter projects where this contractor is the Lead
|
||||
const myProjects = projects.filter(p => p.contractorId === user?.id || p.contractorId === 'con_001'); // Default to con_001 for mock
|
||||
|
||||
// 2. Aggregate Data
|
||||
const activeProjects = myProjects.filter(p => p.status === 'active').length;
|
||||
const upcomingProjects = myProjects.filter(p => p.status === 'scheduled').length;
|
||||
|
||||
// Calculate total budget managed
|
||||
const totalBudget = myProjects.reduce((sum, p) => sum + (p.budget || 0), 0);
|
||||
const totalSpent = myProjects.reduce((sum, p) => sum + (p.spent || 0), 0);
|
||||
const budgetUtilization = totalBudget > 0 ? Math.round((totalSpent / totalBudget) * 100) : 0;
|
||||
|
||||
// Upcoming Milestones (next 7 days)
|
||||
const upcomingMilestones = myProjects.flatMap(p =>
|
||||
p.milestones.filter(m => {
|
||||
const dueDate = new Date(m.dueDate);
|
||||
const today = new Date('2026-02-05'); // Fixed context date
|
||||
const diffTime = Math.abs(dueDate - today);
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
return diffDays <= 7 && m.status !== 'completed';
|
||||
}).map(m => ({ ...m, projectAddress: p.address }))
|
||||
);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Modal state
|
||||
const [selectedProject, setSelectedProject] = useState(null);
|
||||
const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
|
||||
const [isFinancialModalOpen, setIsFinancialModalOpen] = useState(false);
|
||||
|
||||
// Financial data for modal
|
||||
const financialData = {
|
||||
total: totalBudget,
|
||||
spent: totalSpent,
|
||||
remaining: totalBudget - totalSpent,
|
||||
paid: totalSpent,
|
||||
pending: 0,
|
||||
items: myProjects.map(p => ({
|
||||
date: p.startDate,
|
||||
description: p.address,
|
||||
project: p.projectType,
|
||||
status: p.status === 'completed' ? 'paid' : 'pending',
|
||||
amount: p.budget
|
||||
}))
|
||||
};
|
||||
|
||||
const handleProjectClick = (project) => {
|
||||
setSelectedProject(project);
|
||||
setIsProjectModalOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 md:p-10 max-w-7xl mx-auto space-y-8 animate-in fade-in duration-500">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-zinc-900 dark:text-white">Contractor Command Center</h1>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 mt-1">
|
||||
Managing {activeProjects} active builds with <span className="text-blue-500 font-semibold">${totalBudget.toLocaleString()}</span> in volume.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => navigate('/contractor/projects')}
|
||||
className="bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 text-zinc-900 dark:text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors border border-zinc-200 dark:border-white/10"
|
||||
>
|
||||
View Schedule
|
||||
</button>
|
||||
<button className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors shadow-lg shadow-blue-500/20">
|
||||
+ Log Daily Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<StatCard
|
||||
label="Active Projects"
|
||||
value={activeProjects}
|
||||
icon={Hammer}
|
||||
color="blue"
|
||||
/>
|
||||
<StatCard
|
||||
label="Upcoming Starts"
|
||||
value={upcomingProjects}
|
||||
icon={Calendar}
|
||||
color="purple"
|
||||
/>
|
||||
<div onClick={() => setIsFinancialModalOpen(true)} className="cursor-pointer">
|
||||
<StatCard
|
||||
label="Budget Utilization"
|
||||
value={budgetUtilization}
|
||||
icon={DollarSign}
|
||||
color={budgetUtilization > 90 ? 'red' : 'emerald'}
|
||||
suffix="%"
|
||||
/>
|
||||
</div>
|
||||
<StatCard
|
||||
label="Pending Actions"
|
||||
value={upcomingMilestones.length}
|
||||
icon={AlertTriangle}
|
||||
color="amber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
{/* Active Projects List */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<SpotlightCard className="p-6 h-full">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-lg font-bold text-zinc-900 dark:text-white">Active Build Status</h2>
|
||||
<button onClick={() => navigate('/contractor/projects')} className="text-sm text-blue-500 hover:text-blue-400">View All</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{myProjects.filter(p => p.status === 'active').map(proj => (
|
||||
<div
|
||||
key={proj.id}
|
||||
onClick={() => handleProjectClick(proj)}
|
||||
className="p-4 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-100 dark:border-white/5 hover:border-blue-500/30 transition-all cursor-pointer group"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div>
|
||||
<h4 className="font-bold text-zinc-900 dark:text-white">{proj.address}</h4>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400">{proj.projectType} • Started {new Date(proj.startDate).toLocaleDateString()}</p>
|
||||
</div>
|
||||
<span className="px-2 py-1 bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 text-xs font-bold rounded uppercase">
|
||||
On Track
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between text-xs font-medium text-zinc-500">
|
||||
<span>Completion</span>
|
||||
<span>{proj.completionPercentage}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full"
|
||||
style={{ width: `${proj.completionPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Milestones Preview */}
|
||||
<div className="mt-4 flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
|
||||
{proj.milestones.map(ms => (
|
||||
<span
|
||||
key={ms.id}
|
||||
className={`whitespace-nowrap px-2 py-1 text-[10px] font-bold uppercase border rounded ${ms.status === 'completed'
|
||||
? 'border-emerald-200 text-emerald-600 dark:border-emerald-500/30 dark:text-emerald-400'
|
||||
: ms.status === 'in_progress'
|
||||
? 'border-blue-200 text-blue-600 dark:border-blue-500/30 dark:text-blue-400'
|
||||
: 'border-zinc-200 text-zinc-400 dark:border-zinc-700 dark:text-zinc-500'
|
||||
}`}
|
||||
>
|
||||
{ms.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
|
||||
{/* Right Panel: Tasks & Alerts */}
|
||||
<div className="space-y-6">
|
||||
<SpotlightCard className="p-6">
|
||||
<h2 className="text-lg font-bold text-zinc-900 dark:text-white mb-4">Critical Tasks (Next 7 Days)</h2>
|
||||
<div className="space-y-3">
|
||||
{upcomingMilestones.length > 0 ? upcomingMilestones.map((ms, idx) => (
|
||||
<div key={idx} className="flex items-start gap-3 p-3 rounded-lg bg-red-50 dark:bg-red-500/5 hover:bg-red-100 dark:hover:bg-red-500/10 transition-colors cursor-pointer group">
|
||||
<div className="mt-1 w-2 h-2 rounded-full bg-red-500 shrink-0 group-hover:scale-125 transition-transform" />
|
||||
<div>
|
||||
<h5 className="text-sm font-bold text-zinc-900 dark:text-white">{ms.name}</h5>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">{ms.projectAddress}</p>
|
||||
<p className="text-xs font-mono font-medium text-red-500 mt-1">Due: {ms.dueDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
)) : (
|
||||
<p className="text-sm text-zinc-500 italic">No critical tasks due.</p>
|
||||
)}
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="p-6">
|
||||
<h2 className="text-lg font-bold text-zinc-900 dark:text-white mb-4">Crew Availability</h2>
|
||||
<div className="space-y-3">
|
||||
{/* Mock Crew Data */}
|
||||
{['Crew Alpha (Roofing)', 'Crew Beta (Gutters)'].map((crew, i) => (
|
||||
<div key={i} className="flex justify-between items-center text-sm py-2 border-b border-zinc-100 dark:border-white/5 last:border-0">
|
||||
<span className="text-zinc-900 dark:text-white">{crew}</span>
|
||||
<span className="flex items-center text-emerald-500 text-xs font-bold uppercase">
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-500 mr-2" />
|
||||
Available
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
<ProjectDetailsModal
|
||||
isOpen={isProjectModalOpen}
|
||||
onClose={() => setIsProjectModalOpen(false)}
|
||||
project={selectedProject}
|
||||
/>
|
||||
<FinancialSummaryModal
|
||||
isOpen={isFinancialModalOpen}
|
||||
onClose={() => setIsFinancialModalOpen(false)}
|
||||
role="CONTRACTOR"
|
||||
data={financialData}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContractorDashboard;
|
||||
@@ -0,0 +1,143 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
import { Briefcase, Calendar, CheckCircle, Clock, AlertTriangle, ChevronRight } from 'lucide-react';
|
||||
import { SpotlightCard } from '../../components/SpotlightCard';
|
||||
import ProjectDetailsModal from '../../components/contractor/ProjectDetailsModal';
|
||||
|
||||
const ProjectList = () => {
|
||||
const { user } = useAuth();
|
||||
const { projects, vendors } = useMockStore();
|
||||
|
||||
// Filter projects for this contractor/subcontractor
|
||||
const myProjects = projects.filter(p =>
|
||||
p.contractorId === user.id || p.subcontractorIds?.includes(user.id)
|
||||
);
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case 'active': return 'text-emerald-700 bg-emerald-100 border-emerald-200 dark:text-emerald-300 dark:bg-emerald-500/10 dark:border-emerald-500/20';
|
||||
case 'completed': return 'text-blue-700 bg-blue-100 border-blue-200 dark:text-blue-300 dark:bg-blue-500/10 dark:border-blue-500/20';
|
||||
case 'pending': return 'text-amber-700 bg-amber-100 border-amber-200 dark:text-amber-300 dark:bg-amber-500/10 dark:border-amber-500/20';
|
||||
default: return 'text-zinc-600 bg-zinc-100 border-zinc-200 dark:text-zinc-400 dark:bg-zinc-500/10 dark:border-zinc-500/20';
|
||||
}
|
||||
};
|
||||
|
||||
// Modal state
|
||||
const [selectedProject, setSelectedProject] = useState(null);
|
||||
const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
|
||||
|
||||
const handleProjectClick = (project) => {
|
||||
setSelectedProject(project);
|
||||
setIsProjectModalOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white relative pb-20 transition-colors duration-300">
|
||||
{/* Ambient Background Glows */}
|
||||
<div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
|
||||
<div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-purple-500/5 dark:bg-purple-900/10 rounded-full blur-[120px]" />
|
||||
<div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-blue-500/5 dark:bg-blue-900/10 rounded-full blur-[120px]" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 p-8 max-w-7xl mx-auto">
|
||||
<header className="mb-8 border-b border-zinc-200 dark:border-white/5 pb-6">
|
||||
<h1 className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-zinc-900 to-zinc-600 dark:from-white dark:to-white/60 mb-2 tracking-tight">My Projects</h1>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 font-light">Manage your active assignments and track progress.</p>
|
||||
</header>
|
||||
|
||||
{myProjects.length === 0 ? (
|
||||
<SpotlightCard className="text-center py-20 border-dashed border-zinc-300 dark:border-white/10 bg-zinc-50/50 dark:bg-white/5">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="p-4 bg-zinc-100 dark:bg-white/5 rounded-full text-zinc-400 mb-4">
|
||||
<Briefcase size={48} className="opacity-50" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-zinc-900 dark:text-white mb-2">No Active Projects</h3>
|
||||
<p className="text-zinc-500 dark:text-zinc-400">You currently have no projects assigned.</p>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{myProjects.map(project => (
|
||||
<SpotlightCard key={project.id} className="p-0 group overflow-hidden cursor-pointer" onClick={() => handleProjectClick(project)}>
|
||||
<div className="p-6">
|
||||
<div className="flex flex-col md:flex-row justify-between md:items-center gap-4 mb-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<h2 className="text-xl font-bold text-zinc-900 dark:text-white">Project #{project.id}</h2>
|
||||
<span className={`px-2.5 py-0.5 rounded-md text-[10px] font-bold border uppercase tracking-wider ${getStatusColor(project.status)}`}>
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 text-sm flex items-center font-medium">
|
||||
<Briefcase size={14} className="mr-2" />
|
||||
{project.projectType.charAt(0).toUpperCase() + project.projectType.slice(1)} Project
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="text-right">
|
||||
<div className="text-[10px] text-zinc-400 uppercase font-bold tracking-wider">Budget</div>
|
||||
<div className="text-lg font-bold text-zinc-900 dark:text-white">${project.budget.toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="text-right pl-6 border-l border-zinc-200 dark:border-white/10">
|
||||
<div className="text-[10px] text-zinc-400 uppercase font-bold tracking-wider">Deadline</div>
|
||||
<div className="text-lg font-bold text-zinc-900 dark:text-white flex items-center justify-end gap-2">
|
||||
{project.endDate}
|
||||
<Calendar size={16} className="text-zinc-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-6 p-4 bg-zinc-50 dark:bg-white/5 rounded-xl border border-zinc-100 dark:border-white/5">
|
||||
<div className="flex justify-between text-xs mb-2 font-bold uppercase tracking-wider">
|
||||
<span className="text-zinc-500">Completion Status</span>
|
||||
<span className="text-emerald-600 dark:text-emerald-400">
|
||||
{project.status === 'completed' ? '100%' : 'In Progress'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-zinc-200 dark:bg-zinc-700/50 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-emerald-500 to-emerald-400 rounded-full transition-all duration-1000 ease-out"
|
||||
style={{ width: project.status === 'completed' ? '100%' : '45%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="flex -space-x-2">
|
||||
{/* Avatar Placeholders */}
|
||||
<div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-[10px] font-bold text-blue-600 dark:text-blue-300 border-2 border-white dark:border-zinc-900 shadow-sm">PM</div>
|
||||
<div className="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-[10px] font-bold text-purple-600 dark:text-purple-300 border-2 border-white dark:border-zinc-900 shadow-sm">GC</div>
|
||||
</div>
|
||||
<button
|
||||
className="flex items-center text-sm font-bold text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors bg-blue-50 dark:bg-blue-500/10 px-4 py-2 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-500/20"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleProjectClick(project);
|
||||
}}
|
||||
>
|
||||
View Details <ChevronRight size={16} className="ml-1 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Decorative Bottom Glow */}
|
||||
<div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-zinc-200 dark:via-white/10 to-transparent opacity-50" />
|
||||
</SpotlightCard>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
<ProjectDetailsModal
|
||||
isOpen={isProjectModalOpen}
|
||||
onClose={() => setIsProjectModalOpen(false)}
|
||||
project={selectedProject}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectList;
|
||||
Reference in New Issue
Block a user