feat: comprehensive mobile optimization, role-based AI chatbot, and multi-role dashboard enhancements
- Rewrote AI chatbot context system with deep role-aware data injection for all 7 roles (Owner, Admin, Field Agent, Contractor, Subcontractor, Vendor, Customer) plus guest fallback - Added mobile-responsive bottom-sheet modals across all roles (ChangeOrderDrawer, InvoiceDetailModal, FinancialSummaryModal, VendorFinancialSummaryModal, FinancialDetailsModal) - Converted Owner Project List and Vendor Orders tables to mobile card views with touch-friendly layouts - Optimized Vendor Management and People Directory with mobile list/detail toggle and back navigation - Fixed Document Control mobile view: horizontally scrollable filter tabs, proper overflow chain for document visibility - Added responsive padding, text scaling, and flex-wrap across StatCard, TaskDetailsModal, OwnerSnapshot, OwnerProjectDetail, VendorDashboard, and DocumentManagement - Expanded mock data store with richer vendor invoices, orders, documents, and compliance records - Enhanced Owner Snapshot with financial KPI cards, urgent items panel, and Action Center modal - Built Contractor Dashboard with task management, financial summary, and performance metrics - Built Subcontractor Dashboard with clock-in tracking, task assignments, and invoice management - Enhanced Vendor Dashboard with earnings summary, active orders, compliance status, and performance rating - Added icon-only tab navigation on mobile for OwnerProjectDetail - Extended attribution signatures across all platform pages
This commit is contained in:
Satyam
@@ -1,40 +1,131 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import { useMockStore } from '../../data/mockStore';
|
||||
import FinancialKPICards from '../../components/owner/FinancialKPICards';
|
||||
import UrgentItemsPanel from '../../components/owner/UrgentItemsPanel';
|
||||
import FinancialDetailsModal from '../../components/owner/FinancialDetailsModal';
|
||||
import ActionCenterModal from '../../components/owner/ActionCenterModal';
|
||||
import { SpotlightCard } from '../../components/SpotlightCard';
|
||||
import {
|
||||
BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend
|
||||
} from 'recharts';
|
||||
import {
|
||||
Briefcase, TrendingUp, AlertTriangle, Shield, ChevronRight, ArrowUpRight
|
||||
} from 'lucide-react';
|
||||
|
||||
const OwnerSnapshot = () => {
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const { owners, projects } = useMockStore();
|
||||
|
||||
// Find the current owner profile
|
||||
const owner = useMemo(() =>
|
||||
owners?.find(o => o.id === user?.id) || null
|
||||
, [owners, user]);
|
||||
|
||||
// Filter projects for this owner
|
||||
const ownerProjects = useMemo(() =>
|
||||
projects.filter(p => p.ownerId === user?.id)
|
||||
, [projects, user]);
|
||||
|
||||
// Modal States
|
||||
const [financialModal, setFinancialModal] = useState({ isOpen: false, type: 'revenue' });
|
||||
const [actionModal, setActionModal] = useState({ isOpen: false, filter: 'all' });
|
||||
|
||||
// Handlers
|
||||
const handleFinancialClick = (type) => {
|
||||
setFinancialModal({ isOpen: true, type });
|
||||
};
|
||||
|
||||
const handleActionClick = (id) => {
|
||||
// Map IDs to filter types
|
||||
const filterMap = {
|
||||
'docs': 'docs',
|
||||
'vendors': 'vendors',
|
||||
'invoices': 'invoices',
|
||||
'all': 'all'
|
||||
};
|
||||
const filterMap = { docs: 'docs', vendors: 'vendors', invoices: 'invoices', all: 'all' };
|
||||
setActionModal({ isOpen: true, filter: filterMap[id] || 'all' });
|
||||
};
|
||||
|
||||
// Get time of day for greeting
|
||||
// Greeting
|
||||
const hour = new Date().getHours();
|
||||
const greeting = hour < 12 ? 'Good Morning' : hour < 18 ? 'Good Afternoon' : 'Good Evening';
|
||||
|
||||
// --- Derived Stats ---
|
||||
const projectStats = useMemo(() => {
|
||||
const active = ownerProjects.filter(p => p.status === 'active').length;
|
||||
const completed = ownerProjects.filter(p => p.status === 'completed').length;
|
||||
const delayed = ownerProjects.filter(p => p.status === 'delayed').length;
|
||||
const onHold = ownerProjects.filter(p => p.status === 'on_hold').length;
|
||||
const disputed = ownerProjects.filter(p => p.status === 'disputed').length;
|
||||
const totalBudget = ownerProjects.reduce((sum, p) => sum + (p.approvedBudget || p.budget || 0), 0);
|
||||
const totalSpent = ownerProjects.reduce((sum, p) => sum + (p.actualCost || p.spent || 0), 0);
|
||||
const avgHealth = ownerProjects.length > 0
|
||||
? Math.round(ownerProjects.reduce((sum, p) => sum + (p.healthScore || 0), 0) / ownerProjects.length)
|
||||
: 0;
|
||||
return { active, completed, delayed, onHold, disputed, totalBudget, totalSpent, avgHealth, total: ownerProjects.length };
|
||||
}, [ownerProjects]);
|
||||
|
||||
// --- Chart Data ---
|
||||
const statusChartData = useMemo(() => [
|
||||
{ name: 'Active', value: projectStats.active, color: '#22c55e' },
|
||||
{ name: 'Completed', value: projectStats.completed, color: '#3b82f6' },
|
||||
{ name: 'Delayed', value: projectStats.delayed, color: '#f59e0b' },
|
||||
{ name: 'On Hold', value: projectStats.onHold, color: '#a855f7' },
|
||||
{ name: 'Disputed', value: projectStats.disputed, color: '#ef4444' },
|
||||
].filter(d => d.value > 0), [projectStats]);
|
||||
|
||||
const budgetChartData = useMemo(() =>
|
||||
ownerProjects.slice(0, 6).map(p => ({
|
||||
name: p.projectType.length > 14 ? p.projectType.slice(0, 14) + '...' : p.projectType,
|
||||
budget: (p.approvedBudget || p.budget || 0) / 1000,
|
||||
spent: (p.actualCost || p.spent || 0) / 1000,
|
||||
}))
|
||||
, [ownerProjects]);
|
||||
|
||||
const monthlySpendData = owner?.dashboardSummary?.monthlySpend || [];
|
||||
|
||||
// Activity feed from owner's projects
|
||||
const activityFeed = useMemo(() => {
|
||||
const items = [];
|
||||
ownerProjects.forEach(p => {
|
||||
if (p.activityTimeline) {
|
||||
p.activityTimeline.forEach(a => items.push({ ...a, projectType: p.projectType, projectId: p.id }));
|
||||
}
|
||||
});
|
||||
// Sort by date desc, take top 5
|
||||
items.sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||
return items.slice(0, 5);
|
||||
}, [ownerProjects]);
|
||||
|
||||
const formatCurrency = (val) => {
|
||||
if (val >= 1000000) return `$${(val / 1000000).toFixed(1)}M`;
|
||||
if (val >= 1000) return `$${(val / 1000).toFixed(0)}k`;
|
||||
return `$${val}`;
|
||||
};
|
||||
|
||||
const getRiskColor = (score) => {
|
||||
if (score <= 30) return 'text-emerald-500 bg-emerald-100 dark:bg-emerald-500/10';
|
||||
if (score <= 60) return 'text-amber-500 bg-amber-100 dark:bg-amber-500/10';
|
||||
return 'text-red-500 bg-red-100 dark:bg-red-500/10';
|
||||
};
|
||||
|
||||
const getHealthColor = (score) => {
|
||||
if (score >= 70) return 'text-emerald-500';
|
||||
if (score >= 40) return 'text-amber-500';
|
||||
return 'text-red-500';
|
||||
};
|
||||
|
||||
const CustomTooltip = ({ active, payload, label }) => {
|
||||
if (active && payload?.length) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-3 shadow-xl text-sm">
|
||||
<p className="font-bold text-zinc-900 dark:text-white mb-1">{label}</p>
|
||||
{payload.map((p, i) => (
|
||||
<p key={i} className="text-zinc-600 dark:text-zinc-400">
|
||||
<span className="font-semibold" style={{ color: p.color }}>{p.name}:</span> ${p.value}k
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
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">
|
||||
@@ -44,44 +135,136 @@ const OwnerSnapshot = () => {
|
||||
<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 space-y-8">
|
||||
<div className="relative z-10 p-4 sm:p-8 max-w-7xl mx-auto space-y-8">
|
||||
|
||||
{/* Header Section */}
|
||||
<header className="flex flex-col md:flex-row justify-between items-start md:items-center border-b border-zinc-200 dark:border-white/5 pb-6">
|
||||
<div>
|
||||
<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 tracking-tight">
|
||||
<h1 className="text-3xl sm: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 tracking-tight">
|
||||
{greeting}, {user?.name?.split(' ')[0] || 'Owner'}
|
||||
</h1>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 mt-2 font-light">Here's your business snapshot for today.</p>
|
||||
<p className="text-zinc-500 dark:text-zinc-400 mt-2 font-light">
|
||||
{owner ? `${owner.companyName} — ${owner.portfolioSize} projects in portfolio` : "Here's your business snapshot for today."}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 md:mt-0 flex space-x-3">
|
||||
<div className="mt-4 md:mt-0 flex flex-wrap gap-3">
|
||||
<button className="px-4 py-2 bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded-xl text-sm font-bold text-zinc-700 dark:text-zinc-300 transition-colors border border-zinc-200 dark:border-white/5 shadow-sm">
|
||||
Download Report
|
||||
</button>
|
||||
<button className="px-4 py-2 bg-amber-500 hover:bg-amber-600 text-black font-bold rounded-xl text-sm transition-colors shadow-lg shadow-amber-500/20">
|
||||
Quick Action
|
||||
<button
|
||||
onClick={() => navigate('/owner/projects')}
|
||||
className="px-4 py-2 bg-amber-500 hover:bg-amber-600 text-black font-bold rounded-xl text-sm transition-colors shadow-lg shadow-amber-500/20 flex items-center gap-2"
|
||||
>
|
||||
View Projects <ArrowUpRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Quick Stats Row */}
|
||||
<section className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ label: 'Total Projects', value: projectStats.total, icon: Briefcase, color: 'text-blue-500', onClick: () => navigate('/owner/projects') },
|
||||
{ label: 'Active', value: projectStats.active, icon: TrendingUp, color: 'text-emerald-500', onClick: () => navigate('/owner/projects') },
|
||||
{ label: 'Avg Health', value: `${projectStats.avgHealth}%`, icon: Shield, color: getHealthColor(projectStats.avgHealth), onClick: () => navigate('/owner/projects') },
|
||||
{ label: 'Risk Score', value: owner?.riskScore ?? '—', icon: AlertTriangle, color: owner ? getRiskColor(owner.riskScore).split(' ')[0] : 'text-zinc-500', onClick: () => handleActionClick('all') },
|
||||
].map((stat, i) => (
|
||||
<SpotlightCard key={i} className="p-4 cursor-pointer" onClick={stat.onClick}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-xl bg-zinc-100 dark:bg-zinc-800 ${stat.color}`}>
|
||||
<stat.icon size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-extrabold text-zinc-900 dark:text-white">{stat.value}</div>
|
||||
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500">{stat.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
))}
|
||||
</section>
|
||||
|
||||
{/* Financial KPIs */}
|
||||
<section>
|
||||
<h2 className="text-xl font-bold text-zinc-900 dark:text-white/90 mb-4 flex items-center">
|
||||
<span className="w-2 h-8 bg-emerald-500 rounded-full mr-3"></span>
|
||||
Financial Overview
|
||||
</h2>
|
||||
<FinancialKPICards onCardClick={handleFinancialClick} />
|
||||
<FinancialKPICards onCardClick={handleFinancialClick} ownerId={user?.id} />
|
||||
</section>
|
||||
|
||||
{/* Charts Row */}
|
||||
<section className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Budget vs Actual */}
|
||||
<SpotlightCard className="lg:col-span-2 p-6">
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white mb-1">Budget vs Actual Spend</h3>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 mb-4">Per project (in $k)</p>
|
||||
<div className="h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={budgetChartData} barGap={4}>
|
||||
<XAxis dataKey="name" tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
|
||||
<YAxis tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Bar dataKey="budget" name="Budget" fill="#3b82f6" radius={[6, 6, 0, 0]} />
|
||||
<Bar dataKey="spent" name="Spent" fill="#f59e0b" radius={[6, 6, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
{/* Project Status Distribution */}
|
||||
<SpotlightCard className="p-6">
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white mb-1">Project Status</h3>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 mb-4">Distribution</p>
|
||||
<div className="h-64 flex items-center justify-center">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={statusChartData}
|
||||
cx="50%" cy="50%"
|
||||
innerRadius={50} outerRadius={80}
|
||||
paddingAngle={4}
|
||||
dataKey="value"
|
||||
>
|
||||
{statusChartData.map((entry, i) => (
|
||||
<Cell key={i} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
<Legend
|
||||
formatter={(value) => <span className="text-xs text-zinc-600 dark:text-zinc-400">{value}</span>}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
</section>
|
||||
|
||||
{/* Monthly Spend Trend */}
|
||||
{monthlySpendData.length > 0 && (
|
||||
<SpotlightCard className="p-6">
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white mb-1">Monthly Spend Trend</h3>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400 mb-4">Last 12 months (in $k)</p>
|
||||
<div className="h-56">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={monthlySpendData}>
|
||||
<XAxis dataKey="month" tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
|
||||
<YAxis tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Bar dataKey="amount" name="Spend" fill="#8b5cf6" radius={[6, 6, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
)}
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
|
||||
{/* Urgent Items Panel (Takes up 2 columns on large screens) */}
|
||||
{/* Urgent Items Panel */}
|
||||
<section className="lg:col-span-2">
|
||||
<UrgentItemsPanel onActionClick={handleActionClick} />
|
||||
<UrgentItemsPanel onActionClick={handleActionClick} ownerId={user?.id} />
|
||||
</section>
|
||||
|
||||
{/* Activity Feed / Notifications Placeholder (Right Column) */}
|
||||
{/* Activity Feed */}
|
||||
<SpotlightCard className="h-full">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center mb-6">
|
||||
@@ -89,28 +272,47 @@ const OwnerSnapshot = () => {
|
||||
<h3 className="text-lg font-bold text-zinc-900 dark:text-white">Recent Activity</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map((i) => (
|
||||
{activityFeed.length > 0 ? activityFeed.map((item, i) => (
|
||||
<div key={i} className="flex items-start space-x-3 p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5 hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors">
|
||||
<div className="w-2 h-2 mt-2 rounded-full bg-blue-400 shrink-0"></div>
|
||||
<div className={`w-2 h-2 mt-2 rounded-full shrink-0 ${
|
||||
item.action?.toLowerCase().includes('payment') ? 'bg-emerald-400' :
|
||||
item.action?.toLowerCase().includes('issue') || item.action?.toLowerCase().includes('dispute') ? 'bg-red-400' :
|
||||
'bg-blue-400'
|
||||
}`}></div>
|
||||
<div>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-300">New invoice submitted by <span className="text-zinc-900 dark:text-white font-bold">Texas Builders LLC</span></p>
|
||||
<span className="text-[10px] text-zinc-400 uppercase font-bold tracking-wider">2 hours ago</span>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-300">
|
||||
<span className="text-zinc-900 dark:text-white font-bold">{item.action}</span>
|
||||
{item.details && <span className="text-zinc-500"> — {item.details}</span>}
|
||||
</p>
|
||||
<span className="text-[10px] text-zinc-400 uppercase font-bold tracking-wider">
|
||||
{item.date} · {item.projectType}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-start space-x-3 p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5 hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors">
|
||||
<div className="w-2 h-2 mt-2 rounded-full bg-emerald-400 shrink-0"></div>
|
||||
<div>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-300">Payment received for <span className="text-zinc-900 dark:text-white font-bold">Project P-2602</span></p>
|
||||
<span className="text-[10px] text-zinc-400 uppercase font-bold tracking-wider">5 hours ago</span>
|
||||
</div>
|
||||
</div>
|
||||
)) : (
|
||||
// Fallback when no activityTimeline data
|
||||
<>
|
||||
{[
|
||||
{ msg: `${projectStats.active} active projects in progress`, time: 'Current', color: 'bg-blue-400' },
|
||||
{ msg: `${formatCurrency(projectStats.totalSpent)} spent of ${formatCurrency(projectStats.totalBudget)} total budget`, time: 'Overview', color: 'bg-emerald-400' },
|
||||
{ msg: `${projectStats.completed} projects completed successfully`, time: 'All time', color: 'bg-purple-400' },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-start space-x-3 p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
|
||||
<div className={`w-2 h-2 mt-2 rounded-full ${item.color} shrink-0`}></div>
|
||||
<div>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-300">{item.msg}</p>
|
||||
<span className="text-[10px] text-zinc-400 uppercase font-bold tracking-wider">{item.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => navigate('/owner/vendors')}
|
||||
className="w-full mt-6 py-2 text-xs font-bold uppercase tracking-wider text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white border border-zinc-200 dark:border-white/10 hover:bg-zinc-100 dark:hover:bg-white/5 rounded-xl transition-all"
|
||||
onClick={() => navigate('/owner/projects')}
|
||||
className="w-full mt-6 py-2 text-xs font-bold uppercase tracking-wider text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white border border-zinc-200 dark:border-white/10 hover:bg-zinc-100 dark:hover:bg-white/5 rounded-xl transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
View All Activity
|
||||
View All Projects <ChevronRight size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
@@ -123,15 +325,16 @@ const OwnerSnapshot = () => {
|
||||
isOpen={financialModal.isOpen}
|
||||
onClose={() => setFinancialModal({ ...financialModal, isOpen: false })}
|
||||
type={financialModal.type}
|
||||
ownerId={user?.id}
|
||||
/>
|
||||
<ActionCenterModal
|
||||
isOpen={actionModal.isOpen}
|
||||
onClose={() => setActionModal({ ...actionModal, isOpen: false })}
|
||||
defaultFilter={actionModal.filter}
|
||||
// Force re-render on filter change if needed, generally okay as props update
|
||||
key={actionModal.filter}
|
||||
/>
|
||||
</div >
|
||||
<span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user