Satyam
5fef584d7d
- Added visually hidden labels, IDs, and names to form inputs across all key components and pages (modals, directories, chatbots) - Added tabIndex and onKeyDown handlers to clickable table rows in OwnerProjectDetail for keyboard accessibility - Validated existing ARIA roles and Escape key bindings on modal components
988 lines
77 KiB
React
988 lines
77 KiB
React
import React, { useState, useMemo } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
import { useMockStore } from '../../data/mockStore';
|
|
import { SpotlightCard } from '../../components/SpotlightCard';
|
|
import { AnimatedCounter } from '../../components/AnimatedCounter';
|
|
import { motion } from 'framer-motion';
|
|
import {
|
|
BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer
|
|
} from 'recharts';
|
|
import {
|
|
ArrowLeft, CheckCircle, Clock, AlertTriangle, PauseCircle, ShieldAlert,
|
|
FileText, DollarSign, GitPullRequest, AlertCircle, Activity, Milestone,
|
|
Shield, ChevronRight, Phone, MessageSquare, Mail, AlertOctagon, TrendingUp, Key, Zap, Camera, Plus, Map, User, Crosshair, Image as ImageIcon, MapPin
|
|
} from 'lucide-react';
|
|
import ChangeOrderDrawer from '../../components/owner/ChangeOrderDrawer';
|
|
import InvoiceDetailModal from '../../components/owner/InvoiceDetailModal';
|
|
import CreateItemModal from '../../components/owner/CreateItemModal';
|
|
|
|
// --- NEOMORPHIC STYLING CONSTANTS ---
|
|
const NEO_PANEL_CLASS = "bg-zinc-900/60 backdrop-blur-3xl border border-white/5 shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(255,255,255,0.02)] rounded-3xl relative overflow-hidden transition-all duration-300";
|
|
const NEON_GREEN = "text-[#39ff14] drop-shadow-[0_0_8px_rgba(57,255,20,0.4)]";
|
|
const NEON_GOLD = "text-[#fda913] drop-shadow-[0_0_8px_rgba(253,169,19,0.4)]";
|
|
const NEON_ORANGE = "text-[#ff4500] drop-shadow-[0_0_8px_rgba(255,69,0,0.4)]";
|
|
const NEON_RED = "text-[#ff003c] drop-shadow-[0_0_8px_rgba(255,0,60,0.4)]";
|
|
const NEON_BLUE = "text-[#00f0ff] drop-shadow-[0_0_8px_rgba(0,240,255,0.4)]";
|
|
|
|
// -----------------------------------------------------------------
|
|
// SHARED UI COMPONENTS
|
|
// -----------------------------------------------------------------
|
|
|
|
const NeoCard = ({ children, className = "", innerClassName = "", spotlightColor = "rgba(255, 255, 255, 0.05)" }) => (
|
|
<SpotlightCard className={`${NEO_PANEL_CLASS} h-full w-full ${className}`} spotlightColor={spotlightColor}>
|
|
<div className={`relative z-10 w-full h-full p-5 lg:p-6 flex flex-col ${innerClassName}`}>
|
|
{children}
|
|
</div>
|
|
</SpotlightCard>
|
|
);
|
|
|
|
const ProgressBar = ({ progress, goal = 100, colorClass = "bg-[#39ff14]", shadowClass = "shadow-[0_0_10px_#39ff14]", height = "h-1.5" }) => {
|
|
const pct = Math.min((progress / goal) * 100, 100);
|
|
return (
|
|
<div className={`${height} w-full bg-black/80 rounded-full shadow-[inset_0_2px_4px_rgba(0,0,0,0.6)] border border-white/5 relative overflow-hidden flex-1`}>
|
|
<motion.div
|
|
initial={{ width: 0 }}
|
|
animate={{ width: `${pct}%` }}
|
|
transition={{ duration: 1.5, type: "spring", stiffness: 50, damping: 15 }}
|
|
className={`absolute top-0 left-0 h-full rounded-full ${colorClass} ${shadowClass}`}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const statusConfig = {
|
|
active: { label: 'Active', color: 'text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-500/10', icon: Clock },
|
|
completed: { label: 'Completed', color: 'text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-500/10', icon: CheckCircle },
|
|
delayed: { label: 'Delayed', color: 'text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-500/10', icon: AlertTriangle },
|
|
on_hold: { label: 'On Hold', color: 'text-purple-600 bg-purple-100 dark:text-purple-400 dark:bg-purple-500/10', icon: PauseCircle },
|
|
disputed: { label: 'Disputed', color: 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-500/10', icon: ShieldAlert },
|
|
};
|
|
|
|
const tabs = [
|
|
{ id: 'overview', label: 'Overview', icon: Activity },
|
|
{ id: 'budget', label: 'Budget & Costs', icon: DollarSign },
|
|
{ id: 'changeOrders', label: 'Change Orders', icon: GitPullRequest },
|
|
{ id: 'rfis', label: 'RFIs', icon: FileText },
|
|
{ id: 'milestones', label: 'Milestones', icon: Milestone },
|
|
{ id: 'invoices', label: 'Invoices', icon: DollarSign },
|
|
{ id: 'risks', label: 'Risk & Issues', icon: AlertCircle },
|
|
{ id: 'activity', label: 'Activity', icon: Clock },
|
|
];
|
|
|
|
const OwnerProjectDetail = () => {
|
|
const { projectId } = useParams();
|
|
const { user } = useAuth();
|
|
const { projects, vendors } = useMockStore();
|
|
const navigate = useNavigate();
|
|
const [activeTab, setActiveTab] = useState('overview');
|
|
const [selectedCO, setSelectedCO] = useState(null);
|
|
const [selectedInvoice, setSelectedInvoice] = useState(null);
|
|
const [createModalConfig, setCreateModalConfig] = useState(null);
|
|
|
|
const handleCreateSubmit = (data) => {
|
|
console.log("Mock submitted data:", data);
|
|
alert("Action successful! (Mock interface)");
|
|
};
|
|
|
|
const project = useMemo(() =>
|
|
projects.find(p => p.id === projectId && p.ownerId === user?.id)
|
|
, [projects, projectId, user]);
|
|
|
|
if (!project) {
|
|
return (
|
|
<div className="min-h-full bg-zinc-50 dark:bg-[#09090b] flex items-center justify-center text-zinc-500">
|
|
<div className="text-center">
|
|
<ShieldAlert size={48} className="mx-auto mb-4 text-zinc-400" />
|
|
<h2 className="text-xl font-bold text-zinc-900 dark:text-white">Project Not Found</h2>
|
|
<p className="mt-2">This project doesn't exist or you don't have access.</p>
|
|
<button onClick={() => navigate('/owner/projects')} className="mt-4 px-4 py-2 bg-amber-500 text-black font-bold rounded-xl text-sm">
|
|
Back to Projects
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const cfg = statusConfig[project.status] || statusConfig.active;
|
|
const StatusIcon = cfg.icon;
|
|
|
|
const contractor = vendors.find(v => v.id === project.contractorId) || null;
|
|
|
|
const formatCurrency = (amt) =>
|
|
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(amt);
|
|
|
|
const getHealthColor = (s) => s >= 70 ? 'text-emerald-500' : s >= 40 ? 'text-amber-500' : 'text-red-500';
|
|
|
|
const getMilestoneColor = (status) => {
|
|
if (status === 'completed') return 'bg-emerald-500';
|
|
if (status === 'in_progress') return 'bg-blue-500';
|
|
return 'bg-zinc-300 dark:bg-zinc-700';
|
|
};
|
|
|
|
const getInvoiceStatusColor = (status) => {
|
|
if (status === 'paid') return 'text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-500/10';
|
|
if (status === 'pending') return 'text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-500/10';
|
|
return 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-500/10';
|
|
};
|
|
|
|
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> {formatCurrency(p.value * 1000)}
|
|
</p>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Budget chart data
|
|
const budgetChartData = (project.budgetBreakdown || []).map(b => ({
|
|
name: b.category.length > 12 ? b.category.slice(0, 12) + '...' : b.category,
|
|
allocated: b.allocated / 1000,
|
|
committed: b.committed / 1000,
|
|
actual: b.actual / 1000,
|
|
}));
|
|
|
|
return (
|
|
<div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white transition-colors duration-300 relative">
|
|
{/* Ambient Background */}
|
|
<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-4 sm:p-8 max-w-7xl mx-auto space-y-6 pb-20">
|
|
|
|
{/* Back & Title */}
|
|
<header>
|
|
<button
|
|
onClick={() => navigate('/owner/projects')}
|
|
className="flex items-center gap-2 text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors mb-4"
|
|
>
|
|
<ArrowLeft size={16} /> Back to Projects
|
|
</button>
|
|
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-zinc-200 dark:border-white/5 pb-6">
|
|
<div>
|
|
<h1 className="text-2xl sm:text-3xl 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">
|
|
{project.projectType}
|
|
</h1>
|
|
<p className="text-zinc-500 dark:text-zinc-400 mt-1 text-sm">{project.address}</p>
|
|
</div>
|
|
<span className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wide ${cfg.color}`}>
|
|
<StatusIcon size={14} /> {cfg.label}
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Key Metrics Row */}
|
|
<section className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4">
|
|
{[
|
|
{ label: 'Budget', value: formatCurrency(project.approvedBudget || project.budget) },
|
|
{ label: 'Spent', value: formatCurrency(project.actualCost || project.spent) },
|
|
{ label: 'Variance', value: `${(project.variancePercent || 0) > 0 ? '+' : ''}${(project.variancePercent || 0).toFixed(1)}%` },
|
|
{ label: 'Completion', value: `${project.completionPercentage || 0}%` },
|
|
{ label: 'Health', value: project.healthScore != null ? project.healthScore : '—', color: getHealthColor(project.healthScore || 0) },
|
|
{ label: 'Phase', value: project.phase || '—' },
|
|
].map((m, i) => (
|
|
<SpotlightCard key={i} className="p-4">
|
|
<div className={`text-xl font-extrabold ${m.color || 'text-zinc-900 dark:text-white'}`}>{m.value}</div>
|
|
<div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mt-1">{m.label}</div>
|
|
</SpotlightCard>
|
|
))}
|
|
</section>
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="flex overflow-x-auto gap-0.5 sm:gap-1 border-b border-zinc-200 dark:border-white/5 pb-px scrollbar-hide">
|
|
{tabs.map(tab => {
|
|
const TabIcon = tab.icon;
|
|
const isActive = activeTab === tab.id;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-3 text-xs sm:text-sm font-semibold whitespace-nowrap border-b-2 transition-colors ${isActive
|
|
? 'border-amber-500 text-amber-600 dark:text-amber-400'
|
|
: 'border-transparent text-zinc-500 hover:text-zinc-900 dark:hover:text-white'
|
|
}`}
|
|
>
|
|
<TabIcon size={16} /> <span className="hidden sm:inline">{tab.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
<div>
|
|
{/* OVERVIEW TAB - COMMAND CENTER */}
|
|
{activeTab === 'overview' && (
|
|
<div className="flex flex-col gap-6 w-full max-w-7xl mx-auto">
|
|
|
|
{/* Row 1: The Macro View */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Project Progression */}
|
|
<NeoCard spotlightColor="rgba(0, 240, 255, 0.1)" className="lg:col-span-2">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Milestone className={NEON_BLUE} size={20} />
|
|
<h3 className="text-sm font-mono font-bold text-white tracking-widest uppercase">Project Progression</h3>
|
|
</div>
|
|
<div className="relative pt-8 pb-4">
|
|
{/* Stepper Line */}
|
|
<div className="absolute top-[38px] left-[10%] right-[10%] h-1 bg-zinc-800 rounded-full shadow-[inset_0_1px_3px_rgba(0,0,0,0.8)] z-0" />
|
|
<motion.div
|
|
initial={{ width: 0 }} animate={{ width: `${project.completionPercentage || 0}%` }} transition={{ duration: 1.5 }}
|
|
className="absolute top-[38px] left-[10%] h-1 bg-gradient-to-r from-blue-600 to-[#00f0ff] rounded-full shadow-[0_0_10px_#00f0ff] z-0"
|
|
/>
|
|
|
|
<div className="relative z-10 flex justify-between">
|
|
{/* Stepper Nodes */}
|
|
{["Lead", "Inspection Scheduled", "Damage Verified", "Scope Approved", "Project Completed"].map((step, i) => {
|
|
const isActive = (i * 25) <= (project.completionPercentage || 0);
|
|
return (
|
|
<div key={i} className="flex flex-col items-center gap-3 w-20 relative">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center border-2 shadow-lg transition-colors
|
|
${isActive ? 'bg-zinc-900 border-[#00f0ff] text-[#00f0ff] shadow-[0_0_15px_rgba(0,240,255,0.4)]' : 'bg-black border-zinc-700 text-zinc-600'}
|
|
`}>
|
|
{isActive ? <CheckCircle size={14} className="drop-shadow-[0_0_5px_rgba(0,240,255,0.8)]" /> : <span className="w-2 h-2 rounded-full bg-zinc-700" />}
|
|
</div>
|
|
<span className={`text-[10px] text-center font-bold tracking-wide uppercase leading-tight ${isActive ? 'text-white' : 'text-zinc-500'}`}>
|
|
{step}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="mt-8 flex items-center gap-4">
|
|
<ProgressBar progress={project.completionPercentage || 0} colorClass="bg-gradient-to-r from-blue-600 to-[#00f0ff]" shadowClass="shadow-[0_0_10px_#00f0ff]" height="h-2" />
|
|
<span className="text-xs font-mono font-bold text-[#00f0ff] uppercase">{project.completionPercentage || 0}% CMP</span>
|
|
</div>
|
|
</NeoCard>
|
|
|
|
{/* Relationship Intelligence */}
|
|
<NeoCard spotlightColor="rgba(253, 169, 19, 0.1)">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<User className={NEON_GOLD} size={20} />
|
|
<h3 className="text-sm font-mono font-bold text-white tracking-widest uppercase">Relationship Intel</h3>
|
|
</div>
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-16 h-16 rounded-full bg-zinc-800 border-2 border-amber-500/30 flex items-center justify-center shadow-[inset_0_2px_10px_rgba(0,0,0,0.5)] flex-shrink-0">
|
|
<span className="text-xl font-black text-amber-500">{project.customerName?.[0] || 'C'}</span>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-lg font-black text-white leading-tight">{project.customerName || 'Customer Records'}</h4>
|
|
<p className="text-xs text-zinc-400 mt-1 font-mono">{contractor?.vendorName || project.contractorId}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 w-full mb-6">
|
|
<button className="flex-1 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg flex justify-center items-center gap-2 transition border border-white/5 hover:border-white/10 shadow-sm text-xs font-bold">
|
|
<Phone size={14} /> Call
|
|
</button>
|
|
<button className="flex-1 py-2 bg-[#39ff14]/10 hover:bg-[#39ff14]/20 text-[#39ff14] border border-[#39ff14]/30 rounded-lg flex justify-center items-center gap-2 transition shadow-sm text-xs font-bold">
|
|
<MessageSquare size={14} /> Text
|
|
</button>
|
|
<button className="w-10 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg flex justify-center items-center transition border border-white/5 hover:border-white/10 shadow-sm flex-shrink-0">
|
|
<Mail size={14} />
|
|
</button>
|
|
</div>
|
|
<div className="bg-black/40 rounded-xl p-3 border border-white/5 shadow-[inset_0_2px_10px_rgba(0,0,0,0.5)]">
|
|
<p className="text-[10px] font-mono text-amber-500 mb-1.5 flex items-center gap-1"><AlertTriangle size={10} /> PREFERENTIAL ROUTING</p>
|
|
<p className="text-xs text-zinc-300 leading-tight border-b border-white/5 pb-2 mb-2">Responds fastest to SMS in the evenings. Critical approvals required via email.</p>
|
|
<p className="text-[10px] text-zinc-500">Last Contact: 2 hours ago</p>
|
|
</div>
|
|
</NeoCard>
|
|
</div>
|
|
|
|
{/* Row 2: The Assessment */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
{/* Performance Snapshot */}
|
|
<NeoCard spotlightColor="rgba(57, 255, 20, 0.1)" innerClassName="justify-between h-full">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Crosshair className={NEON_GREEN} size={20} />
|
|
<h3 className="text-sm font-mono font-bold text-white tracking-widest uppercase">Performance Snapshot</h3>
|
|
</div>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative w-16 h-16 flex items-center justify-center shrink-0">
|
|
<svg className="absolute inset-0 w-full h-full -rotate-90">
|
|
<circle cx="32" cy="32" r="28" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="6" />
|
|
<circle cx="32" cy="32" r="28" fill="none" stroke="#39ff14" strokeWidth="6" strokeDasharray="175" strokeDashoffset={175 - (175 * 0.96)} strokeLinecap="round" className="drop-shadow-[0_0_5px_#39ff14]" />
|
|
</svg>
|
|
<span className="text-lg font-black text-white">96%</span>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-bold text-white">Inspection Coverage</h4>
|
|
<p className="text-[10px] text-zinc-500 font-mono mt-0.5 uppercase tracking-wider">Damage Verification Complete</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Embedded Map/Evidence Thumbnails */}
|
|
<div className="grid grid-cols-3 gap-2 mt-auto">
|
|
{['Hail_Damaged_Shingles.jpg', 'Cracked_Storm_Shingles.jpg', 'Broken_Roof_Surface.jpg', 'Curled_Aging_Shingles.jpg', 'Storm_Worn_Roof.jpg', 'Red_Shingle_Cottage.jpg'].map((img, i) => (
|
|
<div key={i} className="aspect-square bg-zinc-800 rounded-md overflow-hidden border border-white/5 relative group">
|
|
<img src={`/assets/images/properties/${img}`} alt="Evidence" className="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition duration-300 grayscale group-hover:grayscale-0" />
|
|
<div className="absolute inset-0 shadow-[inset_0_0_15px_rgba(0,0,0,0.8)] pointer-events-none" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</NeoCard>
|
|
|
|
{/* Evidence Summary */}
|
|
<NeoCard spotlightColor="rgba(253, 169, 19, 0.1)">
|
|
<div className="flex items-center gap-3 mb-6 border-b border-white/5 pb-4">
|
|
<Shield className={NEON_GOLD} size={20} />
|
|
<h3 className="text-sm font-mono font-bold text-white tracking-widest uppercase">Evidence Summary</h3>
|
|
</div>
|
|
<div className="space-y-4 mb-6 flex-1">
|
|
<div className="flex justify-between items-center text-sm">
|
|
<span className="flex items-center gap-2 text-white font-medium"><div className="w-1.5 h-1.5 rounded-full bg-amber-500" /> Hail Impacts Detected</span>
|
|
<span className="font-bold text-xl text-white">178</span>
|
|
</div>
|
|
<div className="flex justify-between items-center text-sm">
|
|
<span className="flex items-center gap-2 text-zinc-300"><div className="w-1.5 h-1.5 rounded-full bg-orange-500" /> Gutters Denting</span>
|
|
<span className="font-medium text-amber-500 uppercase text-xs tracking-wider">Moderate</span>
|
|
</div>
|
|
<div className="flex justify-between items-center text-sm">
|
|
<span className="flex items-center gap-2 text-zinc-300"><div className="w-1.5 h-1.5 rounded-full bg-yellow-500" /> Window Screens</span>
|
|
<span className="font-medium text-white">4 / 12</span>
|
|
</div>
|
|
</div>
|
|
<div className="mt-auto pt-4 border-t border-white/5 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Zap size={14} className="text-[#39ff14]" />
|
|
<span className="text-[10px] font-mono text-zinc-400 uppercase tracking-widest">AI Confidence:</span>
|
|
<span className="text-sm font-bold text-[#39ff14]">92%</span>
|
|
</div>
|
|
<button className="text-[10px] uppercase font-bold tracking-widest bg-zinc-800 hover:bg-zinc-700 text-zinc-300 px-3 py-1.5 rounded-md border border-white/10 transition flex items-center gap-1.5">
|
|
Evidence Map <ChevronRight size={12} />
|
|
</button>
|
|
</div>
|
|
</NeoCard>
|
|
|
|
{/* Financial Overview */}
|
|
<NeoCard spotlightColor="rgba(0, 240, 255, 0.1)">
|
|
<div className="flex items-center gap-3 mb-6 border-b border-white/5 pb-4">
|
|
<DollarSign className={NEON_BLUE} size={20} />
|
|
<h3 className="text-sm font-mono font-bold text-white tracking-widest uppercase">Financial Overview</h3>
|
|
</div>
|
|
<div className="space-y-5">
|
|
<div className="flex justify-between items-end">
|
|
<span className="text-xs text-zinc-400 font-medium">Estimated Scope</span>
|
|
<span className="text-xl font-bold text-white">{formatCurrency(project.approvedBudget || 34190)}</span>
|
|
</div>
|
|
<div className="flex justify-between items-end">
|
|
<span className="text-xs text-zinc-400 font-medium">Supplements Potential</span>
|
|
<span className="text-sm font-bold text-blue-400">+ {formatCurrency(4800)}</span>
|
|
</div>
|
|
<div className="flex justify-between items-end pb-4 border-b border-white/5">
|
|
<span className="text-xs text-zinc-400 font-medium">Insurance Probability</span>
|
|
<span className="text-sm font-bold text-[#39ff14]">82%</span>
|
|
</div>
|
|
<div className="flex justify-between items-end pt-2">
|
|
<span className="text-sm font-bold text-zinc-300">Net Profit Projection</span>
|
|
<span className={`text-2xl font-black ${NEON_GREEN}`}>{formatCurrency(project.budget - project.spent || 14200)}</span>
|
|
</div>
|
|
</div>
|
|
</NeoCard>
|
|
</div>
|
|
|
|
{/* Row 3: Action & Log */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Action Needed & Timeline */}
|
|
<NeoCard spotlightColor="rgba(255, 69, 0, 0.1)" className="lg:col-span-2">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<AlertOctagon className={NEON_ORANGE} size={20} />
|
|
<h3 className="text-sm font-mono font-bold text-white tracking-widest uppercase">Action Needed</h3>
|
|
</div>
|
|
<div className="space-y-3 mb-8">
|
|
{/* Pulled from Project Risks / Mocks */}
|
|
<div className="flex items-center gap-3 text-sm bg-red-500/10 border border-red-500/20 px-4 py-3 rounded-lg">
|
|
<AlertTriangle size={14} className="text-red-500 shrink-0" />
|
|
<span className="text-red-200">Missing downspout photos for final supplement push.</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-sm bg-amber-500/10 border border-amber-500/20 px-4 py-3 rounded-lg">
|
|
<AlertCircle size={14} className="text-amber-500 shrink-0" />
|
|
<span className="text-amber-200">Adjuster meeting not scheduled within SLA.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-white/5 pt-6 mt-auto">
|
|
<h4 className="text-[10px] uppercase font-mono font-bold text-zinc-500 tracking-widest mb-4">Project Timeline Highlights</h4>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between text-xs">
|
|
<div className="flex items-center gap-3 text-zinc-300"><CheckCircle size={14} className="text-[#39ff14]" /> Inspection Completed</div>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-zinc-500">Feb 20</span>
|
|
<span className="bg-zinc-800 text-zinc-400 px-2 py-0.5 rounded border border-white/5">Pending QC</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-between text-xs">
|
|
<div className="flex items-center gap-3 text-zinc-300"><Clock size={14} className="text-orange-500" /> Claim Filed</div>
|
|
<div className="flex items-center gap-3 font-mono">
|
|
<span className="text-zinc-600">Not Scheduled</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NeoCard>
|
|
|
|
{/* Quick Actions Palette */}
|
|
<NeoCard spotlightColor="rgba(0, 240, 255, 0.1)" innerClassName="justify-between h-full relative">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Activity className={NEON_BLUE} size={20} />
|
|
<h3 className="text-sm font-mono font-bold text-white tracking-widest uppercase">Quick Actions</h3>
|
|
</div>
|
|
<div className="space-y-2.5 flex-1 z-10">
|
|
<button className="w-full flex items-center gap-3 px-4 py-3 bg-zinc-800 hover:bg-zinc-700 hover:border-blue-500/50 text-white rounded-xl border border-white/5 transition-all group text-sm font-medium">
|
|
<Camera size={16} className="text-zinc-500 group-hover:text-blue-400 transition-colors" /> Capture Missing Photos
|
|
</button>
|
|
<button className="w-full flex items-center gap-3 px-4 py-3 bg-zinc-800 hover:bg-zinc-700 hover:border-amber-500/50 text-white rounded-xl border border-white/5 transition-all group text-sm font-medium">
|
|
<Map size={16} className="text-zinc-500 group-hover:text-amber-400 transition-colors" /> Generate Estimate Link
|
|
</button>
|
|
<button className="w-full flex items-center gap-3 px-4 py-3 bg-zinc-800 hover:bg-zinc-700 hover:border-purple-500/50 text-white rounded-xl border border-white/5 transition-all group text-sm font-medium">
|
|
<FileText size={16} className="text-zinc-500 group-hover:text-purple-400 transition-colors" /> Send Homeowner Report
|
|
</button>
|
|
</div>
|
|
<button className="absolute bottom-6 right-6 w-12 h-12 bg-blue-600 hover:bg-blue-500 rounded-full flex items-center justify-center text-white shadow-[0_0_20px_rgba(37,99,235,0.6)] cursor-pointer hover:scale-105 transition-transform z-20 border border-blue-400/50">
|
|
<Plus size={24} />
|
|
</button>
|
|
</NeoCard>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* BUDGET TAB */}
|
|
{activeTab === 'budget' && (
|
|
<div className="space-y-6 max-w-7xl mx-auto">
|
|
{budgetChartData.length > 0 ? (
|
|
<>
|
|
<NeoCard spotlightColor="rgba(0, 240, 255, 0.1)">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<div className="flex items-center gap-3">
|
|
<DollarSign className={NEON_BLUE} size={20} />
|
|
<h3 className="text-lg font-bold text-white tracking-widest uppercase">Budget Breakdown</h3>
|
|
</div>
|
|
<button
|
|
onClick={() => setCreateModalConfig({
|
|
title: 'Add Budget Cost', icon: DollarSign, iconColor: 'text-[#39ff14]', iconBg: 'bg-[#39ff14]/10',
|
|
submitLabel: 'Save Cost', submitColor: 'bg-[#39ff14]/20 text-[#39ff14] border-[#39ff14]/30',
|
|
fields: [
|
|
{ name: 'category', label: 'Category', type: 'text', required: true },
|
|
{ name: 'allocated', label: 'Allocated Amount', type: 'number', required: true },
|
|
{ name: 'spent', label: 'Actual Spent', type: 'number' }
|
|
],
|
|
onSubmit: handleCreateSubmit
|
|
})}
|
|
className="bg-blue-500/10 hover:bg-blue-500/20 text-[#00f0ff] border border-blue-500/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
|
>
|
|
<Plus size={14} /> Add Cost
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-zinc-400 mb-6 font-mono">Allocated vs Committed vs Actual ($k)</p>
|
|
<div className="h-64 bg-black/20 rounded-xl p-4 border border-white/5 shadow-inner">
|
|
<ResponsiveContainer width="99%" height={256} minWidth={1} minHeight={1}>
|
|
<BarChart data={budgetChartData} barGap={2}>
|
|
<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="allocated" name="Allocated" fill="#3b82f6" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="committed" name="Committed" fill="#f59e0b" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="actual" name="Actual" fill="#22c55e" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</NeoCard>
|
|
<NeoCard spotlightColor="rgba(253, 169, 19, 0.1)" innerClassName="p-0 lg:p-0">
|
|
<div className="overflow-x-auto w-full rounded-2xl">
|
|
<table className="w-full text-left border-collapse min-w-[600px]">
|
|
<thead className="bg-[#18181b]/80 border-b border-white/10">
|
|
<tr>
|
|
{['Category', 'Allocated', 'Committed', 'Actual', 'Variance'].map(h => (
|
|
<th key={h} className={`px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-400 ${h !== 'Category' ? 'text-right' : ''}`}>{h}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-white/5">
|
|
{(project.budgetBreakdown || []).map((b, i) => {
|
|
const variance = b.actual - b.allocated;
|
|
return (
|
|
<tr key={i} className="hover:bg-white/5 transition-colors">
|
|
<td className="px-5 py-4 font-bold text-sm text-white">{b.category}</td>
|
|
<td className="px-5 py-4 text-right font-mono text-sm text-zinc-300">{formatCurrency(b.allocated)}</td>
|
|
<td className="px-5 py-4 text-right font-mono text-sm text-amber-500">{formatCurrency(b.committed)}</td>
|
|
<td className="px-5 py-4 text-right font-mono text-sm text-[#00f0ff]">{formatCurrency(b.actual)}</td>
|
|
<td className={`px-5 py-4 text-right font-mono text-sm font-bold ${variance > 0 ? 'text-[#ff4500]' : 'text-[#39ff14]'}`}>
|
|
{variance > 0 ? '+' : ''}{formatCurrency(variance)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</NeoCard>
|
|
</>
|
|
) : (
|
|
<NeoCard className="p-12 text-center text-zinc-500">
|
|
<DollarSign size={48} className="mx-auto mb-4 text-zinc-600" />
|
|
<p className="font-bold text-lg text-white">No detailed budget breakdown available.</p>
|
|
<p className="text-sm mt-2 text-zinc-400 font-mono">Budget: {formatCurrency(project.approvedBudget || project.budget)} · Spent: {formatCurrency(project.actualCost || project.spent)}</p>
|
|
</NeoCard>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* CHANGE ORDERS TAB */}
|
|
{activeTab === 'changeOrders' && (
|
|
<NeoCard spotlightColor="rgba(253, 169, 19, 0.1)" innerClassName="p-0 lg:p-0">
|
|
<div className="p-5 border-b border-white/5 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<GitPullRequest className={NEON_GOLD} size={20} />
|
|
<h3 className="text-lg font-bold text-white tracking-widest uppercase">Change Orders</h3>
|
|
</div>
|
|
<button
|
|
onClick={() => setCreateModalConfig({
|
|
title: 'New Change Order', icon: GitPullRequest, iconColor: 'text-[#fda913]', iconBg: 'bg-amber-500/10',
|
|
submitLabel: 'Submit Change Order', submitColor: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
|
|
fields: [
|
|
{ name: 'title', label: 'Title', type: 'text', required: true },
|
|
{ name: 'amount', label: 'Requested Amount ($)', type: 'number', required: true },
|
|
{ name: 'description', label: 'Description/Justification', type: 'textarea', required: true }
|
|
],
|
|
onSubmit: handleCreateSubmit
|
|
})}
|
|
className="bg-amber-500/10 hover:bg-amber-500/20 text-amber-400 border border-amber-500/30 px-4 py-2 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
|
>
|
|
<Plus size={14} /> New Change Order
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto w-full">
|
|
{(project.changeOrders || []).length > 0 ? (
|
|
<table className="w-full text-left border-collapse min-w-[700px]">
|
|
<thead className="bg-[#18181b]/80 border-b border-white/10">
|
|
<tr>
|
|
{['ID', 'Title', 'Amount', 'Status', 'Date'].map(h => (
|
|
<th key={h} className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-400">{h}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-white/5">
|
|
{project.changeOrders.map((co, i) => (
|
|
<tr key={i} className="hover:bg-white/5 transition-colors cursor-pointer" tabIndex="0" onClick={() => setSelectedCO(co)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedCO(co); } }}>
|
|
<td className="px-5 py-4 font-mono text-xs text-zinc-500">{co.id}</td>
|
|
<td className="px-5 py-4">
|
|
<div className="font-bold text-sm text-white">{co.title}</div>
|
|
{co.description && <div className="text-xs text-zinc-400 mt-1">{co.description}</div>}
|
|
</td>
|
|
<td className="px-5 py-4 font-mono text-sm text-[#00f0ff]">{formatCurrency(co.amount)}</td>
|
|
<td className="px-5 py-4">
|
|
<span className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest ${co.status === 'approved' ? 'text-[#39ff14] bg-[#39ff14]/10 border border-[#39ff14]/20' :
|
|
co.status === 'pending' ? 'text-amber-400 bg-amber-500/10 border border-amber-500/20' :
|
|
'text-[#ff4500] bg-[#ff4500]/10 border border-[#ff4500]/20'
|
|
}`}>
|
|
{co.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-400 font-mono">{co.dateSubmitted}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<div className="p-16 text-center text-zinc-500">
|
|
<GitPullRequest size={48} className="mx-auto mb-4 text-zinc-600" />
|
|
<p className="font-bold text-lg text-white">No change orders found.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</NeoCard>
|
|
)}
|
|
|
|
{/* RFIs TAB */}
|
|
{activeTab === 'rfis' && (
|
|
<NeoCard spotlightColor="rgba(0, 240, 255, 0.1)" innerClassName="p-0 lg:p-0">
|
|
<div className="p-5 border-b border-white/5 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<FileText className={NEON_BLUE} size={20} />
|
|
<h3 className="text-lg font-bold text-white tracking-widest uppercase">Requests for Information (RFI)</h3>
|
|
</div>
|
|
<button
|
|
onClick={() => setCreateModalConfig({
|
|
title: 'Create RFI', icon: FileText, iconColor: 'text-[#00f0ff]', iconBg: 'bg-blue-500/10',
|
|
submitLabel: 'Submit RFI', submitColor: 'bg-blue-500/20 text-[#00f0ff] border-blue-500/30',
|
|
fields: [
|
|
{ name: 'subject', label: 'Subject', type: 'text', required: true },
|
|
{ name: 'priority', label: 'Priority', type: 'select', options: [{ label: 'Normal', value: 'normal' }, { label: 'High', value: 'high' }], required: true },
|
|
{ name: 'question', label: 'Question', type: 'textarea', required: true },
|
|
{ name: 'attachment', label: 'Attachment', type: 'file' }
|
|
],
|
|
onSubmit: handleCreateSubmit
|
|
})}
|
|
className="bg-blue-500/10 hover:bg-blue-500/20 text-[#00f0ff] border border-blue-500/30 px-4 py-2 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
|
>
|
|
<Plus size={14} /> Create RFI
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto w-full">
|
|
{(project.rfis || []).length > 0 ? (
|
|
<table className="w-full text-left border-collapse min-w-[800px]">
|
|
<thead className="bg-[#18181b]/80 border-b border-white/10">
|
|
<tr>
|
|
{['ID', 'Subject', 'Status', 'Submitted By', 'Opened', 'Closed'].map(h => (
|
|
<th key={h} className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-400">{h}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-white/5">
|
|
{project.rfis.map((rfi, i) => (
|
|
<tr key={i} className="hover:bg-white/5 transition-colors">
|
|
<td className="px-5 py-4 font-mono text-xs text-zinc-500">{rfi.id}</td>
|
|
<td className="px-5 py-4 font-bold text-sm text-white">{rfi.subject}</td>
|
|
<td className="px-5 py-4">
|
|
<span className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest ${rfi.status === 'closed' ? 'text-[#39ff14] bg-[#39ff14]/10 border border-[#39ff14]/20' :
|
|
'text-amber-400 bg-amber-500/10 border border-amber-500/20'
|
|
}`}>
|
|
{rfi.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-400">{rfi.submittedBy}</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-500 font-mono">{rfi.dateOpened}</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-500 font-mono">{rfi.dateClosed || '—'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<div className="p-16 text-center text-zinc-500">
|
|
<FileText size={48} className="mx-auto mb-4 text-zinc-600" />
|
|
<p className="font-bold text-lg text-white">No RFIs for this project.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</NeoCard>
|
|
)}
|
|
|
|
{/* MILESTONES TAB */}
|
|
{activeTab === 'milestones' && (
|
|
<NeoCard spotlightColor="rgba(255, 255, 255, 0.1)">
|
|
<div className="flex items-center gap-3 mb-8">
|
|
<MapPin className="text-white" size={20} />
|
|
<h3 className="text-lg font-bold text-white tracking-widest uppercase">Milestone Timeline</h3>
|
|
</div>
|
|
<div className="relative">
|
|
{/* Timeline line */}
|
|
<div className="absolute left-6 top-0 bottom-0 w-px bg-white/10" />
|
|
<div className="space-y-6">
|
|
{(project.milestones || []).map((ms, i) => (
|
|
<div key={i} className="relative flex items-start gap-4 pl-12">
|
|
<div className={`absolute left-[21px] top-1.5 w-2.5 h-2.5 rounded-full bg-[#09090b] border-2 shadow-[0_0_8px_rgba(255,255,255,0.4)] ${ms.status === 'completed' ? 'border-[#39ff14]' : ms.status === 'in_progress' ? 'border-[#00f0ff]' : 'border-zinc-500'}`} />
|
|
<div className="flex-1 p-4 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<div className="font-bold text-white">{ms.name}</div>
|
|
<div className="text-xs text-zinc-400 mt-1">Due: <span className="text-zinc-300 font-mono">{ms.dueDate}</span> · Assigned to: <span className="text-[#00f0ff] uppercase tracking-wider">{ms.assignedTo}</span></div>
|
|
</div>
|
|
<span className={`text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-full ${ms.status === 'completed' ? 'text-[#39ff14] bg-[#39ff14]/10 border border-[#39ff14]/20' :
|
|
ms.status === 'in_progress' ? 'text-[#00f0ff] bg-blue-500/10 border border-blue-500/20' :
|
|
'text-zinc-500 bg-white/5 border border-white/10'
|
|
}`}>
|
|
{ms.status.replace('_', ' ')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</NeoCard>
|
|
)}
|
|
|
|
{/* INVOICES TAB */}
|
|
{activeTab === 'invoices' && (
|
|
<NeoCard spotlightColor="rgba(0, 240, 255, 0.1)" innerClassName="p-0 lg:p-0">
|
|
<div className="p-5 border-b border-white/5 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<DollarSign className={NEON_BLUE} size={20} />
|
|
<h3 className="text-lg font-bold text-white tracking-widest uppercase">Invoices</h3>
|
|
</div>
|
|
<button
|
|
onClick={() => setCreateModalConfig({
|
|
title: 'Add Invoice', icon: DollarSign, iconColor: 'text-[#00f0ff]', iconBg: 'bg-blue-500/10',
|
|
submitLabel: 'Submit Invoice', submitColor: 'bg-blue-500/20 text-[#00f0ff] border-blue-500/30',
|
|
fields: [
|
|
{ name: 'amount', label: 'Amount ($)', type: 'number', required: true },
|
|
{ name: 'dueDate', label: 'Due Date', type: 'date', required: true },
|
|
{ name: 'attachment', label: 'Invoice Document', type: 'file' }
|
|
],
|
|
onSubmit: handleCreateSubmit
|
|
})}
|
|
className="bg-blue-500/10 hover:bg-blue-500/20 text-[#00f0ff] border border-blue-500/30 px-4 py-2 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
|
>
|
|
<Plus size={14} /> Add Invoice
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto w-full">
|
|
{(project.invoices || []).length > 0 ? (
|
|
<table className="w-full text-left border-collapse min-w-[700px]">
|
|
<thead className="bg-[#18181b]/80 border-b border-white/10">
|
|
<tr>
|
|
{['Invoice ID', 'Amount', 'Submitted By', 'Status', 'Due Date', 'Paid Date'].map(h => (
|
|
<th key={h} className={`px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-400 ${h === 'Amount' ? 'text-right' : ''}`}>{h}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-white/5">
|
|
{project.invoices.map((inv, i) => (
|
|
<tr key={i} className="hover:bg-white/5 transition-colors cursor-pointer" tabIndex="0" onClick={() => setSelectedInvoice(inv)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedInvoice(inv); } }}>
|
|
<td className="px-5 py-4 font-mono text-xs text-zinc-500">{inv.id}</td>
|
|
<td className="px-5 py-4 text-right font-mono text-sm font-bold text-[#00f0ff]">
|
|
{formatCurrency(inv.amount)}
|
|
</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-400 uppercase tracking-wider">{inv.submittedBy}</td>
|
|
<td className="px-5 py-4">
|
|
<span className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest ${inv.status === 'paid' ? 'text-[#39ff14] bg-[#39ff14]/10 border border-[#39ff14]/20' :
|
|
inv.status === 'pending' ? 'text-amber-400 bg-amber-500/10 border border-amber-500/20' :
|
|
inv.status === 'overdue' ? 'text-[#ff4500] bg-[#ff4500]/10 border border-[#ff4500]/20' :
|
|
'text-zinc-400 bg-white/5 border border-white/10'
|
|
}`}>
|
|
{inv.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-500 font-mono">{inv.dueDate}</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-500 font-mono">{inv.datePaid || '—'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<div className="p-16 text-center text-zinc-500">
|
|
<DollarSign size={48} className="mx-auto mb-4 text-zinc-600" />
|
|
<p className="font-bold text-lg text-white">No invoices for this project.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</NeoCard>
|
|
)}
|
|
|
|
{/* RISK & ISSUES TAB */}
|
|
{activeTab === 'risks' && (
|
|
<div className="space-y-6">
|
|
{/* Risk Log */}
|
|
<NeoCard spotlightColor="rgba(253, 169, 19, 0.1)" innerClassName="p-0 lg:p-0">
|
|
<div className="p-5 border-b border-white/5 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Shield className={NEON_GOLD} size={20} />
|
|
<h3 className="text-lg font-bold text-white tracking-widest uppercase">Risk Log</h3>
|
|
</div>
|
|
<button
|
|
onClick={() => setCreateModalConfig({
|
|
title: 'Log New Risk', icon: Shield, iconColor: 'text-[#fda913]', iconBg: 'bg-amber-500/10',
|
|
submitLabel: 'Log Risk', submitColor: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
|
|
fields: [
|
|
{ name: 'description', label: 'Risk Description', type: 'textarea', required: true },
|
|
{ name: 'severity', label: 'Severity', type: 'select', options: [{ label: 'Low', value: 'Low' }, { label: 'Medium', value: 'Medium' }, { label: 'High', value: 'High' }], required: true },
|
|
{ name: 'likelihood', label: 'Likelihood', type: 'select', options: [{ label: 'Unlikely', value: 'Unlikely' }, { label: 'Possible', value: 'Possible' }, { label: 'Likely', value: 'Likely' }], required: true },
|
|
{ name: 'mitigation', label: 'Mitigation Plan', type: 'textarea' }
|
|
],
|
|
onSubmit: handleCreateSubmit
|
|
})}
|
|
className="bg-amber-500/10 hover:bg-amber-500/20 text-amber-400 border border-amber-500/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
|
>
|
|
<Plus size={14} /> Log Risk
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto w-full">
|
|
{(project.riskLog || []).length > 0 ? (
|
|
<table className="w-full text-left border-collapse min-w-[800px]">
|
|
<thead className="bg-[#18181b]/80 border-b border-white/10">
|
|
<tr>
|
|
{['ID', 'Description', 'Severity', 'Likelihood', 'Status', 'Mitigation'].map(h => (
|
|
<th key={h} className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-400">{h}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-white/5">
|
|
{project.riskLog.map((r, i) => (
|
|
<tr key={i} className="hover:bg-white/5 transition-colors">
|
|
<td className="px-5 py-4 font-mono text-xs text-zinc-500">{r.id}</td>
|
|
<td className="px-5 py-4 text-sm font-medium text-white max-w-xs">{r.description}</td>
|
|
<td className="px-5 py-4">
|
|
<span className={`text-[10px] font-bold uppercase px-3 py-1 rounded-full ${r.severity === 'High' ? 'text-[#ff4500] bg-[#ff4500]/10 border border-[#ff4500]/20' :
|
|
r.severity === 'Medium' ? 'text-amber-400 bg-amber-500/10 border border-amber-500/20' :
|
|
'text-[#00f0ff] bg-blue-500/10 border border-blue-500/20'
|
|
}`}>
|
|
{r.severity}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-400 capitalize">{r.likelihood}</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-400 capitalize">{r.status}</td>
|
|
<td className="px-5 py-4 text-xs text-zinc-500 max-w-xs">{r.mitigation}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<div className="p-16 text-center text-zinc-500">
|
|
<Shield size={48} className="mx-auto mb-4 text-zinc-600" />
|
|
<p className="font-bold text-lg text-white">No risk entries for this project.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</NeoCard>
|
|
|
|
{/* Issue Log */}
|
|
<NeoCard spotlightColor="rgba(255, 69, 0, 0.1)" innerClassName="p-0 lg:p-0">
|
|
<div className="p-5 border-b border-white/5 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<AlertCircle className={NEON_RED} size={20} />
|
|
<h3 className="text-lg font-bold text-white tracking-widest uppercase">Issue Log</h3>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setCreateModalConfig({
|
|
title: 'Add Photo to Issue', icon: Camera, iconColor: 'text-zinc-300', iconBg: 'bg-zinc-800',
|
|
submitLabel: 'Upload Photo', submitColor: 'bg-zinc-800 text-white border-white/20',
|
|
fields: [
|
|
{ name: 'issueId', label: 'Target Issue ID', type: 'text', placeholder: 'e.g. issue_001', required: true },
|
|
{ name: 'photo', label: 'Photo Upload', type: 'file', accept: 'image/*', required: true },
|
|
{ name: 'notes', label: 'Notes', type: 'textarea' }
|
|
],
|
|
onSubmit: handleCreateSubmit
|
|
})}
|
|
className="bg-zinc-800/50 hover:bg-zinc-800 text-zinc-300 border border-white/10 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
|
>
|
|
<Camera size={14} /> Add Photo
|
|
</button>
|
|
<button
|
|
onClick={() => setCreateModalConfig({
|
|
title: 'Report Issue', icon: AlertCircle, iconColor: 'text-[#ff4500]', iconBg: 'bg-[#ff4500]/10',
|
|
submitLabel: 'Submit Issue', submitColor: 'bg-[#ff4500]/20 text-[#ff4500] border-[#ff4500]/30',
|
|
fields: [
|
|
{ name: 'title', label: 'Issue Title', type: 'text', required: true },
|
|
{ name: 'priority', label: 'Priority', type: 'select', options: [{ label: 'Medium', value: 'Medium' }, { label: 'High', value: 'High' }, { label: 'Critical', value: 'Critical' }], required: true },
|
|
{ name: 'description', label: 'Detailed Description', type: 'textarea', required: true },
|
|
{ name: 'photo', label: 'Attach Photo', type: 'file', accept: 'image/*' }
|
|
],
|
|
onSubmit: handleCreateSubmit
|
|
})}
|
|
className="bg-[#ff4500]/10 hover:bg-[#ff4500]/20 text-[#ff4500] border border-[#ff4500]/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
|
|
>
|
|
<Plus size={14} /> Report Issue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto w-full">
|
|
{(project.issueLog || []).length > 0 ? (
|
|
<table className="w-full text-left border-collapse min-w-[800px]">
|
|
<thead className="bg-[#18181b]/80 border-b border-white/10">
|
|
<tr>
|
|
{['ID', 'Title', 'Priority', 'Status', 'Assigned To', 'Reported'].map(h => (
|
|
<th key={h} className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-400">{h}</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-white/5">
|
|
{project.issueLog.map((issue, i) => (
|
|
<tr key={i} className="hover:bg-white/5 transition-colors">
|
|
<td className="px-5 py-4 font-mono text-xs text-zinc-500">{issue.id}</td>
|
|
<td className="px-5 py-4 font-bold text-sm text-white">{issue.title}</td>
|
|
<td className="px-5 py-4">
|
|
<span className={`text-[10px] font-bold uppercase px-3 py-1 rounded-full ${issue.priority === 'High' || issue.priority === 'critical' ? 'text-[#ff4500] bg-[#ff4500]/10 border border-[#ff4500]/20' :
|
|
issue.priority === 'Medium' || issue.priority === 'high' ? 'text-amber-400 bg-amber-500/10 border border-amber-500/20' :
|
|
'text-[#00f0ff] bg-blue-500/10 border border-blue-500/20'
|
|
}`}>
|
|
{issue.priority}
|
|
</span>
|
|
</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-400 capitalize">{issue.status}</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-400">{issue.assignedTo}</td>
|
|
<td className="px-5 py-4 text-sm text-zinc-500 font-mono">{issue.dateReported}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
<div className="p-16 text-center text-zinc-500">
|
|
<AlertCircle size={48} className="mx-auto mb-4 text-zinc-600" />
|
|
<p className="font-bold text-lg text-white">No issues logged for this project.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</NeoCard>
|
|
</div>
|
|
)}
|
|
|
|
{/* ACTIVITY TAB */}
|
|
{activeTab === 'activity' && (
|
|
<NeoCard spotlightColor="rgba(57, 255, 20, 0.1)">
|
|
<div className="flex items-center gap-3 mb-8">
|
|
<Clock className={NEON_GREEN} size={20} />
|
|
<h3 className="text-lg font-bold text-white tracking-widest uppercase">Activity Timeline</h3>
|
|
</div>
|
|
{(project.activityTimeline || []).length > 0 ? (
|
|
<div className="relative">
|
|
<div className="absolute left-6 top-0 bottom-0 w-px bg-white/10" />
|
|
<div className="space-y-6">
|
|
{project.activityTimeline.map((a, i) => (
|
|
<div key={i} className="relative flex items-start gap-4 pl-12">
|
|
<div className={`absolute left-[21px] top-1.5 w-2.5 h-2.5 rounded-full bg-[#09090b] border-2 shadow-[0_0_8px_rgba(57,255,20,0.4)] ${a.action.includes('Payment') ? 'border-amber-400' : a.action.includes('Issue') ? 'border-[#ff4500]' : 'border-[#39ff14]'}`} />
|
|
<div className="flex-1 p-4 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<div className="font-bold text-white text-sm">{a.action}</div>
|
|
{a.details && <div className="text-xs text-zinc-400 mt-1">{a.details}</div>}
|
|
</div>
|
|
<div className="text-right shrink-0 ml-4">
|
|
<div className="text-xs font-mono text-zinc-500">{a.date}</div>
|
|
{a.user && <div className="text-[10px] uppercase tracking-wider text-[#00f0ff] mt-1">{a.user}</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-center text-zinc-500 py-16">
|
|
<Clock size={48} className="mx-auto mb-4 text-zinc-600" />
|
|
<p className="font-bold text-lg text-white">No activity logged yet.</p>
|
|
</div>
|
|
)}
|
|
</NeoCard>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modals & Drawers */}
|
|
<ChangeOrderDrawer
|
|
isOpen={!!selectedCO}
|
|
onClose={() => setSelectedCO(null)}
|
|
changeOrder={selectedCO}
|
|
/>
|
|
<InvoiceDetailModal
|
|
isOpen={!!selectedInvoice}
|
|
onClose={() => setSelectedInvoice(null)}
|
|
invoice={selectedInvoice}
|
|
/>
|
|
{createModalConfig && (
|
|
<CreateItemModal
|
|
isOpen={!!createModalConfig}
|
|
onClose={() => setCreateModalConfig(null)}
|
|
{...createModalConfig}
|
|
/>
|
|
)}
|
|
<span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OwnerProjectDetail;
|