From b6f899afd2d873ec812727cf605149a1aec45f93 Mon Sep 17 00:00:00 2001
From: Satyam <95536056+Satyam-Rastogi@users.noreply.github.com>
Date: Sun, 22 Feb 2026 03:00:38 +0530
Subject: [PATCH] feat(owner-dash): Expand project command center with mock
 data, modals, and recharts fixes

---
 src/components/owner/CreateItemModal.jsx |  103 +++
 src/data/mockStore.jsx                   |   87 +-
 src/pages/owner/OwnerProjectDetail.jsx   | 1005 +++++++++++++++-------
 3 files changed, 887 insertions(+), 308 deletions(-)
 create mode 100644 src/components/owner/CreateItemModal.jsx

diff --git a/src/components/owner/CreateItemModal.jsx b/src/components/owner/CreateItemModal.jsx
new file mode 100644
index 0000000..02f4a3a
--- /dev/null
+++ b/src/components/owner/CreateItemModal.jsx
@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+
+const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text-[#00f0ff]", iconBg = "bg-blue-500/10", fields, onSubmit, submitLabel = "Submit", submitColor = "bg-blue-500/20 text-[#00f0ff] border-blue-500/30" }) => {
+    const [formData, setFormData] = useState({});
+
+    useEffect(() => {
+        const handleEsc = (e) => { if (e.key === 'Escape') onClose(); };
+        if (isOpen) window.addEventListener('keydown', handleEsc);
+        return () => window.removeEventListener('keydown', handleEsc);
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(formData);
+        setFormData({});
+        onClose();
+    };
+
+    return createPortal(
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
+            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+            <div className="relative w-full max-w-md bg-[#121214] rounded-2xl shadow-[0_0_40px_rgba(0,0,0,0.8)] border border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
+                {/* Header */}
+                <div className="px-6 py-5 border-b border-white/10 flex justify-between items-center bg-white/5">
+                    <div className="flex items-center gap-3">
+                        {Icon && (
+                            <div className={`p-2 rounded-xl ${iconBg} ${iconColor}`}>
+                                <Icon size={20} />
+                            </div>
+                        )}
+                        <h2 className="text-lg font-bold text-white tracking-widest uppercase">{title}</h2>
+                    </div>
+                    <button onClick={onClose} className="p-2 rounded-lg hover:bg-white/10 text-zinc-500 hover:text-white transition-colors">
+                        <X size={18} />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <form onSubmit={handleSubmit} className="p-6 space-y-5">
+                    {fields.map((field, i) => (
+                        <div key={i} className="space-y-1.5">
+                            <label className="text-xs font-bold uppercase tracking-wider text-zinc-400">{field.label}</label>
+                            {field.type === 'textarea' ? (
+                                <textarea
+                                    className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all"
+                                    rows={4}
+                                    placeholder={field.placeholder || ''}
+                                    required={field.required}
+                                    value={formData[field.name] || ''}
+                                    onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
+                                />
+                            ) : field.type === 'select' ? (
+                                <select
+                                    className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all"
+                                    required={field.required}
+                                    value={formData[field.name] || ''}
+                                    onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
+                                >
+                                    <option value="" disabled>Select {field.label}</option>
+                                    {field.options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
+                                </select>
+                            ) : field.type === 'file' ? (
+                                <input
+                                    type="file"
+                                    accept={field.accept}
+                                    className="w-full text-sm text-zinc-400 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border file:border-white/10 file:text-sm file:font-bold file:bg-[#18181b] file:text-white hover:file:bg-white/5 transition-all"
+                                    required={field.required}
+                                    onChange={e => setFormData({ ...formData, [field.name]: e.target.files[0] })}
+                                />
+                            ) : (
+                                <input
+                                    type={field.type || 'text'}
+                                    className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all"
+                                    placeholder={field.placeholder || ''}
+                                    required={field.required}
+                                    value={formData[field.name] || ''}
+                                    onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
+                                />
+                            )}
+                        </div>
+                    ))}
+
+                    {/* Footer */}
+                    <div className="pt-4 flex justify-end gap-3">
+                        <button type="button" onClick={onClose} className="px-5 py-2.5 text-sm font-bold text-zinc-400 hover:text-white transition-colors">
+                            Cancel
+                        </button>
+                        <button type="submit" className={`px-6 py-2.5 text-sm font-bold rounded-xl border ${submitColor} hover:brightness-110 transition-all shadow-[0_0_15px_rgba(0,0,0,0.5)]`}>
+                            {submitLabel}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>,
+        document.body
+    );
+};
+
+export default CreateItemModal;
diff --git a/src/data/mockStore.jsx b/src/data/mockStore.jsx
index 73f684f..649f16a 100644
--- a/src/data/mockStore.jsx
+++ b/src/data/mockStore.jsx
@@ -2132,7 +2132,7 @@ const MOCK_PROJECTS = [
         completionPercentage: 42,
         healthScore: 58,
         openRFIs: 1,
-        changeOrderCount: 0,
+        changeOrderCount: 2,
         pendingInvoiceCount: 2,
         // TODO: cross-reference — Contractor: Texas Builders LLC, Vendors: North Texas HVAC Solutions, ABC Supply Co.
         milestones: [
@@ -2143,11 +2143,37 @@ const MOCK_PROJECTS = [
             { id: 'ms_003_5', name: 'Electrical Hookup', dueDate: '2026-02-14', status: 'pending', assignedTo: 'sub_001' },
             { id: 'ms_003_6', name: 'System Test and Commissioning', dueDate: '2026-02-25', status: 'pending', assignedTo: 'v6' }
         ],
+        budgetBreakdown: [
+            { category: 'Equipment & Materials', allocated: 15000, committed: 15000, actual: 12500 },
+            { category: 'Labor - HVAC', allocated: 8000, committed: 8000, actual: 4000 },
+            { category: 'Labor - Electrical', allocated: 3000, committed: 3000, actual: 0 },
+            { category: 'Permits & Fees', allocated: 1000, committed: 1000, actual: 950 },
+            { category: 'Contingency', allocated: 5000, committed: 1200, actual: 950 }
+        ],
         invoices: [
             { id: 'inv_003_1', amount: 8200, submittedBy: 'con_001', status: 'paid', dueDate: '2026-01-15', datePaid: '2026-01-16' },
             { id: 'inv_003_2', amount: 10500.25, submittedBy: 'v6', status: 'pending', dueDate: '2026-02-19' },
             { id: 'inv_003_3', amount: 3400, submittedBy: 'v2', status: 'pending', dueDate: '2026-02-22' }
         ],
+        changeOrders: [
+            { id: 'CO-003-01', title: 'Upsize Return Ducts', amount: 1200, status: 'approved', dateSubmitted: '2026-01-22', description: 'Increase return duct size for better airflow in master bedroom.' },
+            { id: 'CO-003-02', title: 'Smart Thermostat Upgrade', amount: 450, status: 'pending', dateSubmitted: '2026-02-18', description: 'Upgrade to Ecobee Premium thermostats per owner request.' }
+        ],
+        rfis: [
+            { id: 'RFI-003-01', subject: 'Condenser Pad Location', status: 'closed', submittedBy: 'North Texas HVAC', dateOpened: '2026-01-12', dateClosed: '2026-01-14' },
+            { id: 'RFI-003-02', subject: 'Duct Routing Conflict in Attic', status: 'open', submittedBy: 'Texas Builders LLC', dateOpened: '2026-02-15' }
+        ],
+        riskLog: [
+            { id: 'risk_003_1', description: 'Equipment backorder from manufacturer', severity: 'High', likelihood: 'Likely', mitigation: 'Source equivalent unit from secondary distributor', status: 'open' }
+        ],
+        issueLog: [
+            { id: 'issue_003_1', title: 'Failed framing inspection for duct clearance', priority: 'High', status: 'open', assignedTo: 'Texas Builders LLC', dateReported: '2026-02-14' }
+        ],
+        activityTimeline: [
+            { date: '2026-02-15', action: 'RFI Submitted', user: 'Site Supervisor', details: 'Duct routing conflict in attic' },
+            { date: '2026-02-14', action: 'Inspection Failed', user: 'City Inspector', details: 'Framing clearance insufficient for 12" ducts' },
+            { date: '2026-01-30', action: 'Milestone Completed', user: 'North Texas HVAC', details: 'Equipment Delivery phase finished' }
+        ],
         documents: [
             { name: 'HVAC Design Plans', url: '#', type: 'plans' },
             { name: 'Mechanical Permit #26-0187', url: '#', type: 'permit' },
@@ -2177,7 +2203,7 @@ const MOCK_PROJECTS = [
         endDate: '2026-02-28',
         completionPercentage: 78,
         healthScore: 35,
-        openRFIs: 0,
+        openRFIs: 1,
         changeOrderCount: 2,
         pendingInvoiceCount: 2,
         // TODO: cross-reference — Contractor: Texas Builders LLC, Vendors: ABC Supply Co., Texas Roofing Crew A, Sparky Electric
@@ -2190,6 +2216,37 @@ const MOCK_PROJECTS = [
             { id: 'ms_004_6', name: 'Flooring and Trim', dueDate: '2026-02-18', status: 'in_progress', assignedTo: 'con_001' },
             { id: 'ms_004_7', name: 'Final Punch List', dueDate: '2026-02-25', status: 'pending', assignedTo: 'con_001' }
         ],
+        budgetBreakdown: [
+            { category: 'Demolition', allocated: 5000, committed: 5500, actual: 5500 },
+            { category: 'Framing & Structural', allocated: 8000, committed: 8500, actual: 8500 },
+            { category: 'Electrical', allocated: 7000, committed: 7000, actual: 4800 },
+            { category: 'Plumbing', allocated: 6000, committed: 6500, actual: 6500 },
+            { category: 'Drywall & Paint', allocated: 9000, committed: 10000, actual: 10000 },
+            { category: 'Flooring & Trim', allocated: 12000, committed: 15500, actual: 15500 },
+            { category: 'Contingency', allocated: 8000, committed: 9300, actual: 11500 }
+        ],
+        changeOrders: [
+            { id: 'CO-004-01', title: 'Scope Expansion - Kitchen Island', amount: 4500, status: 'approved', dateSubmitted: '2026-01-10', description: 'Add a custom 6ft island with quartz countertop and built-in microwave.' },
+            { id: 'CO-004-02', title: 'Hardwood Flooring Upgrade', amount: 2800, status: 'approved', dateSubmitted: '2026-01-25', description: 'Upgrade from LVP to engineered hardwood in living areas.' }
+        ],
+        rfis: [
+            { id: 'RFI-004-01', subject: 'Load-bearing wall clarification', status: 'closed', submittedBy: 'Texas Builders LLC', dateOpened: '2025-12-15', dateClosed: '2025-12-16' },
+            { id: 'RFI-004-02', subject: 'Paint finish in bathrooms', status: 'open', submittedBy: 'Texas Builders LLC', dateOpened: '2026-02-02' }
+        ],
+        riskLog: [
+            { id: 'risk_004_1', description: 'Flooring shipment delayed at port', severity: 'High', likelihood: 'Likely', mitigation: 'Source alternative matching material from local distributor', status: 'open' },
+            { id: 'risk_004_2', description: 'Paint color mismatch between batches', severity: 'Medium', likelihood: 'Possible', mitigation: 'Verify batch numbers before final coat', status: 'mitigated' }
+        ],
+        issueLog: [
+            { id: 'issue_004_1', title: 'Drywall texturing inconsistent in hallway', priority: 'Medium', status: 'open', assignedTo: 'Texas Builders LLC', dateReported: '2026-02-16' },
+            { id: 'issue_004_2', title: 'Plumbing rough-in failed initial inspection', priority: 'High', status: 'resolved', assignedTo: 'Lone Star Plumbing', dateReported: '2026-01-16' }
+        ],
+        activityTimeline: [
+            { date: '2026-02-16', action: 'Issue Reported', user: 'Site Supervisor', details: 'Drywall texture inconsistent in main hallway' },
+            { date: '2026-02-05', action: 'Milestone Completed', user: 'Texas Builders LLC', details: 'Drywall and Paint phase finished' },
+            { date: '2026-01-22', action: 'Payment Released', user: 'Marcus Whitfield', details: 'Truss and framing payment - $12,800' },
+            { date: '2026-01-18', action: 'Inspection Passed', user: 'City Inspector', details: 'Plumbing rough-in re-inspection passed' }
+        ],
         invoices: [
             { id: 'inv_004_1', amount: 18000, submittedBy: 'con_001', status: 'paid', dueDate: '2025-12-15', datePaid: '2025-12-16' },
             { id: 'inv_004_2', amount: 15500, submittedBy: 'con_001', status: 'paid', dueDate: '2026-01-10', datePaid: '2026-01-12' },
@@ -2230,7 +2287,7 @@ const MOCK_PROJECTS = [
         completionPercentage: 38,
         healthScore: 42,
         openRFIs: 0,
-        changeOrderCount: 0,
+        changeOrderCount: 1,
         pendingInvoiceCount: 1,
         // TODO: cross-reference — Contractor: Texas Builders LLC, Vendors: ABC Supply Co.
         milestones: [
@@ -2240,11 +2297,35 @@ const MOCK_PROJECTS = [
             { id: 'ms_005_4', name: 'New Siding Install', dueDate: '2026-02-05', status: 'pending', assignedTo: 'con_001' },
             { id: 'ms_005_5', name: 'Trim and Caulking', dueDate: '2026-02-15', status: 'pending', assignedTo: 'con_001' }
         ],
+        budgetBreakdown: [
+            { category: 'Materials - Siding', allocated: 12000, committed: 12000, actual: 8000 },
+            { category: 'Labor - Prep & Install', allocated: 9000, committed: 9000, actual: 3500 },
+            { category: 'Equipment Rental', allocated: 2000, committed: 2000, actual: 1500 },
+            { category: 'Structural Repairs (CO)', allocated: 0, committed: 850, actual: 850 },
+            { category: 'Contingency', allocated: 5000, committed: 5000, actual: 350 }
+        ],
         invoices: [
             { id: 'inv_005_1', amount: 8400, submittedBy: 'con_001', status: 'paid', dueDate: '2026-01-12', datePaid: '2026-01-13' },
             { id: 'inv_005_2', amount: 5800, submittedBy: 'v3', status: 'paid', dueDate: '2026-01-20', datePaid: '2026-01-21' },
             { id: 'inv_005_3', amount: 6500, submittedBy: 'con_001', status: 'pending', dueDate: '2026-02-10' }
         ],
+        changeOrders: [
+            { id: 'CO-005-01', title: 'Rotten Fascia Board Replacement', amount: 850, status: 'approved', dateSubmitted: '2026-01-18', description: 'Replace 40 linear feet of rotted fascia discovered during tear-off.' }
+        ],
+        rfis: [
+            { id: 'RFI-005-01', subject: 'Vapor Barrier Specification', status: 'closed', submittedBy: 'Texas Builders LLC', dateOpened: '2026-01-20', dateClosed: '2026-01-21' }
+        ],
+        riskLog: [
+            { id: 'risk_005_1', description: 'Water damage hidden behind existing siding', severity: 'High', likelihood: 'Certain', mitigation: 'Halt work, assess rot, submit change order for structural repair.', status: 'realized' }
+        ],
+        issueLog: [
+            { id: 'issue_005_1', title: 'Defective siding panels delivered', priority: 'Critical', status: 'open', assignedTo: 'ABC Supply Co.', dateReported: '2026-02-04' }
+        ],
+        activityTimeline: [
+            { date: '2026-02-06', action: 'Project Paused', user: 'System', details: 'Status changed to On Hold due to material dispute' },
+            { date: '2026-02-04', action: 'Issue Reported', user: 'Site Supervisor', details: 'Batch of siding panels showed unacceptable warping' },
+            { date: '2026-01-22', action: 'Milestone Completed', user: 'Texas Builders LLC', details: 'Moisture Barrier Install finished' }
+        ],
         documents: [
             { name: 'Siding Replacement Contract', url: '#', type: 'contract' },
             { name: 'Dispute Notice - Material Defect', url: '#', type: 'dispute' },
diff --git a/src/pages/owner/OwnerProjectDetail.jsx b/src/pages/owner/OwnerProjectDetail.jsx
index 52cdd23..1bb289e 100644
--- a/src/pages/owner/OwnerProjectDetail.jsx
+++ b/src/pages/owner/OwnerProjectDetail.jsx
@@ -3,16 +3,53 @@ 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
+    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 },
@@ -41,10 +78,16 @@ const OwnerProjectDetail = () => {
     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]);
+        , [projects, projectId, user]);
 
     if (!project) {
         return (
@@ -165,11 +208,10 @@ const OwnerProjectDetail = () => {
                             <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'
-                                }`}
+                                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>
@@ -179,66 +221,274 @@ const OwnerProjectDetail = () => {
 
                 {/* Tab Content */}
                 <div>
-                    {/* OVERVIEW TAB */}
+                    {/* OVERVIEW TAB - COMMAND CENTER */}
                     {activeTab === 'overview' && (
-                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                            {/* Project Info */}
-                            <SpotlightCard className="p-6 space-y-4">
-                                <h3 className="text-lg font-bold">Project Details</h3>
-                                <div className="grid grid-cols-2 gap-4 text-sm">
-                                    {[
-                                        ['Project ID', project.id],
-                                        ['Type', project.projectType],
-                                        ['Start Date', project.startDate],
-                                        ['End Date', project.endDate],
-                                        ['Contractor', contractor?.vendorName || project.contractorId],
-                                        ['Margin', `${((project.margin || 0) * 100).toFixed(0)}%`],
-                                        ['Open RFIs', project.openRFIs ?? '—'],
-                                        ['Change Orders', project.changeOrderCount ?? '—'],
-                                    ].map(([label, value], i) => (
-                                        <div key={i}>
-                                            <div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">{label}</div>
-                                            <div className="font-semibold text-zinc-900 dark:text-white">{value}</div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </SpotlightCard>
+                        <div className="flex flex-col gap-6 w-full max-w-7xl mx-auto">
 
-                            {/* Progress */}
-                            <SpotlightCard className="p-6">
-                                <h3 className="text-lg font-bold mb-4">Milestone Progress</h3>
-                                <div className="space-y-3">
-                                    {(project.milestones || []).map((ms, i) => (
-                                        <div key={i} className="flex items-center gap-3">
-                                            <div className={`w-3 h-3 rounded-full shrink-0 ${getMilestoneColor(ms.status)}`} />
-                                            <div className="flex-1 min-w-0">
-                                                <div className="text-sm font-medium text-zinc-900 dark:text-white truncate">{ms.name}</div>
-                                                <div className="text-[10px] text-zinc-500">{ms.dueDate}</div>
-                                            </div>
-                                            <span className={`text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full ${
-                                                ms.status === 'completed' ? 'text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-500/10' :
-                                                ms.status === 'in_progress' ? 'text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-500/10' :
-                                                'text-zinc-500 bg-zinc-100 dark:text-zinc-400 dark:bg-white/5'
-                                            }`}>
-                                                {ms.status.replace('_', ' ')}
-                                            </span>
+                            {/* 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>
-                            </SpotlightCard>
+                                    </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">
+                        <div className="space-y-6 max-w-7xl mx-auto">
                             {budgetChartData.length > 0 ? (
                                 <>
-                                    <SpotlightCard className="p-6">
-                                        <h3 className="text-lg font-bold mb-1">Budget Breakdown</h3>
-                                        <p className="text-xs text-zinc-500 mb-4">Allocated vs Committed vs Actual ($k)</p>
-                                        <div className="h-64">
-                                            <ResponsiveContainer width="100%" height="100%">
+                                    <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} />
@@ -249,152 +499,201 @@ const OwnerProjectDetail = () => {
                                                 </BarChart>
                                             </ResponsiveContainer>
                                         </div>
-                                    </SpotlightCard>
-                                    <SpotlightCard className="overflow-hidden">
-                                        <table className="w-full text-left border-collapse">
-                                            <thead className="bg-zinc-50 dark:bg-[#18181b] border-b border-zinc-200 dark:border-white/10">
-                                                <tr>
-                                                    {['Category', 'Allocated', 'Committed', 'Actual', 'Variance'].map(h => (
-                                                        <th key={h} className={`px-5 py-3 text-xs font-bold uppercase tracking-wider text-zinc-500 ${h !== 'Category' ? 'text-right' : ''}`}>{h}</th>
-                                                    ))}
-                                                </tr>
-                                            </thead>
-                                            <tbody className="divide-y divide-zinc-100 dark:divide-white/5">
-                                                {(project.budgetBreakdown || []).map((b, i) => {
-                                                    const variance = b.actual - b.allocated;
-                                                    return (
-                                                        <tr key={i} className="hover:bg-zinc-50 dark:hover:bg-white/5">
-                                                            <td className="px-5 py-3 font-semibold text-sm">{b.category}</td>
-                                                            <td className="px-5 py-3 text-right font-mono text-sm">{formatCurrency(b.allocated)}</td>
-                                                            <td className="px-5 py-3 text-right font-mono text-sm">{formatCurrency(b.committed)}</td>
-                                                            <td className="px-5 py-3 text-right font-mono text-sm">{formatCurrency(b.actual)}</td>
-                                                            <td className={`px-5 py-3 text-right font-mono text-sm font-semibold ${variance > 0 ? 'text-red-500' : 'text-emerald-500'}`}>
-                                                                {variance > 0 ? '+' : ''}{formatCurrency(variance)}
-                                                            </td>
-                                                        </tr>
-                                                    );
-                                                })}
-                                            </tbody>
-                                        </table>
-                                    </SpotlightCard>
+                                    </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>
                                 </>
                             ) : (
-                                <SpotlightCard className="p-12 text-center text-zinc-500">
-                                    <DollarSign size={32} className="mx-auto mb-3 text-zinc-400" />
-                                    <p className="font-semibold">No detailed budget breakdown available.</p>
-                                    <p className="text-sm mt-1">Budget: {formatCurrency(project.approvedBudget || project.budget)} &middot; Spent: {formatCurrency(project.actualCost || project.spent)}</p>
-                                </SpotlightCard>
+                                <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)} &nbsp;&middot;&nbsp; Spent: {formatCurrency(project.actualCost || project.spent)}</p>
+                                </NeoCard>
                             )}
                         </div>
                     )}
 
                     {/* CHANGE ORDERS TAB */}
                     {activeTab === 'changeOrders' && (
-                        <SpotlightCard className="overflow-hidden">
-                            {(project.changeOrders || []).length > 0 ? (
-                                <table className="w-full text-left border-collapse">
-                                    <thead className="bg-zinc-50 dark:bg-[#18181b] border-b border-zinc-200 dark:border-white/10">
-                                        <tr>
-                                            {['ID', 'Title', 'Amount', 'Status', 'Date'].map(h => (
-                                                <th key={h} className="px-5 py-3 text-xs font-bold uppercase tracking-wider text-zinc-500">{h}</th>
-                                            ))}
-                                        </tr>
-                                    </thead>
-                                    <tbody className="divide-y divide-zinc-100 dark:divide-white/5">
-                                        {project.changeOrders.map((co, i) => (
-                                            <tr key={i} className="hover:bg-zinc-50 dark:hover:bg-white/5 cursor-pointer" onClick={() => setSelectedCO(co)}>
-                                                <td className="px-5 py-3 font-mono text-xs text-zinc-500">{co.id}</td>
-                                                <td className="px-5 py-3">
-                                                    <div className="font-semibold text-sm">{co.title}</div>
-                                                    {co.description && <div className="text-xs text-zinc-500 mt-0.5">{co.description}</div>}
-                                                </td>
-                                                <td className="px-5 py-3 font-mono text-sm">{formatCurrency(co.amount)}</td>
-                                                <td className="px-5 py-3">
-                                                    <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${
-                                                        co.status === 'approved' ? 'text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-500/10' :
-                                                        co.status === 'pending' ? 'text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-500/10' :
-                                                        'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-500/10'
-                                                    }`}>
-                                                        {co.status}
-                                                    </span>
-                                                </td>
-                                                <td className="px-5 py-3 text-sm text-zinc-500">{co.dateSubmitted}</td>
-                                            </tr>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            ) : (
-                                <div className="p-12 text-center text-zinc-500">
-                                    <GitPullRequest size={32} className="mx-auto mb-3 text-zinc-400" />
-                                    <p className="font-semibold">No change orders for this project.</p>
+                        <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>
-                            )}
-                        </SpotlightCard>
+                                <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" onClick={() => 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' && (
-                        <SpotlightCard className="overflow-hidden">
-                            {(project.rfis || []).length > 0 ? (
-                                <table className="w-full text-left border-collapse">
-                                    <thead className="bg-zinc-50 dark:bg-[#18181b] border-b border-zinc-200 dark:border-white/10">
-                                        <tr>
-                                            {['ID', 'Subject', 'Status', 'Submitted By', 'Opened', 'Closed'].map(h => (
-                                                <th key={h} className="px-5 py-3 text-xs font-bold uppercase tracking-wider text-zinc-500">{h}</th>
-                                            ))}
-                                        </tr>
-                                    </thead>
-                                    <tbody className="divide-y divide-zinc-100 dark:divide-white/5">
-                                        {project.rfis.map((rfi, i) => (
-                                            <tr key={i} className="hover:bg-zinc-50 dark:hover:bg-white/5">
-                                                <td className="px-5 py-3 font-mono text-xs text-zinc-500">{rfi.id}</td>
-                                                <td className="px-5 py-3 font-semibold text-sm">{rfi.subject}</td>
-                                                <td className="px-5 py-3">
-                                                    <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${
-                                                        rfi.status === 'closed' ? 'text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-500/10' :
-                                                        'text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-500/10'
-                                                    }`}>
-                                                        {rfi.status}
-                                                    </span>
-                                                </td>
-                                                <td className="px-5 py-3 text-sm text-zinc-500">{rfi.submittedBy}</td>
-                                                <td className="px-5 py-3 text-sm text-zinc-500">{rfi.dateOpened}</td>
-                                                <td className="px-5 py-3 text-sm text-zinc-500">{rfi.dateClosed || '—'}</td>
-                                            </tr>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            ) : (
-                                <div className="p-12 text-center text-zinc-500">
-                                    <FileText size={32} className="mx-auto mb-3 text-zinc-400" />
-                                    <p className="font-semibold">No RFIs for this project.</p>
+                        <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>
-                            )}
-                        </SpotlightCard>
+                                <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' && (
-                        <SpotlightCard className="p-6">
-                            <h3 className="text-lg font-bold mb-6">Milestone Timeline</h3>
+                        <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-4 top-0 bottom-0 w-0.5 bg-zinc-200 dark:bg-white/10" />
+                                <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-3 sm:gap-4 pl-6 sm:pl-10">
-                                            <div className={`absolute left-2.5 w-3.5 h-3.5 rounded-full border-2 border-white dark:border-[#09090b] ${getMilestoneColor(ms.status)}`} />
-                                            <div className="flex-1 p-4 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
+                                        <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-semibold text-zinc-900 dark:text-white">{ms.name}</div>
-                                                        <div className="text-xs text-zinc-500 mt-1">Due: {ms.dueDate} &middot; Assigned to: {ms.assignedTo}</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> &middot; Assigned to: <span className="text-[#00f0ff] uppercase tracking-wider">{ms.assignedTo}</span></div>
                                                     </div>
-                                                    <span className={`text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full ${
-                                                        ms.status === 'completed' ? 'text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-500/10' :
-                                                        ms.status === 'in_progress' ? 'text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-500/10' :
-                                                        'text-zinc-500 bg-zinc-100 dark:text-zinc-400 dark:bg-white/5'
-                                                    }`}>
+                                                    <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>
@@ -403,158 +702,247 @@ const OwnerProjectDetail = () => {
                                     ))}
                                 </div>
                             </div>
-                        </SpotlightCard>
+                        </NeoCard>
                     )}
 
                     {/* INVOICES TAB */}
                     {activeTab === 'invoices' && (
-                        <SpotlightCard className="overflow-hidden">
-                            {(project.invoices || []).length > 0 ? (
-                                <table className="w-full text-left border-collapse">
-                                    <thead className="bg-zinc-50 dark:bg-[#18181b] border-b border-zinc-200 dark:border-white/10">
-                                        <tr>
-                                            {['Invoice ID', 'Amount', 'Submitted By', 'Status', 'Due Date', 'Paid Date'].map(h => (
-                                                <th key={h} className={`px-5 py-3 text-xs font-bold uppercase tracking-wider text-zinc-500 ${h === 'Amount' ? 'text-right' : ''}`}>{h}</th>
-                                            ))}
-                                        </tr>
-                                    </thead>
-                                    <tbody className="divide-y divide-zinc-100 dark:divide-white/5">
-                                        {project.invoices.map((inv, i) => (
-                                            <tr key={i} className="hover:bg-zinc-50 dark:hover:bg-white/5 cursor-pointer" onClick={() => setSelectedInvoice(inv)}>
-                                                <td className="px-5 py-3 font-mono text-xs text-zinc-500">{inv.id}</td>
-                                                <td className="px-5 py-3 text-right font-mono text-sm font-medium text-zinc-900 dark:text-white">
-                                                    {formatCurrency(inv.amount)}
-                                                </td>
-                                                <td className="px-5 py-3 text-sm text-zinc-600 dark:text-zinc-400">{inv.submittedBy}</td>
-                                                <td className="px-5 py-3">
-                                                    <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${getInvoiceStatusColor(inv.status)}`}>
-                                                        {inv.status}
-                                                    </span>
-                                                </td>
-                                                <td className="px-5 py-3 text-sm text-zinc-500">{inv.dueDate}</td>
-                                                <td className="px-5 py-3 text-sm text-zinc-500">{inv.datePaid || '—'}</td>
-                                            </tr>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            ) : (
-                                <div className="p-12 text-center text-zinc-500">
-                                    <DollarSign size={32} className="mx-auto mb-3 text-zinc-400" />
-                                    <p className="font-semibold">No invoices for this project.</p>
+                        <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>
-                            )}
-                        </SpotlightCard>
+                                <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" onClick={() => 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 */}
-                            <SpotlightCard className="overflow-hidden">
-                                <div className="px-5 py-4 border-b border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5">
-                                    <h3 className="font-bold flex items-center gap-2">
-                                        <Shield size={16} className="text-amber-500" /> Risk Log
-                                    </h3>
+                            <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>
-                                {(project.riskLog || []).length > 0 ? (
-                                    <table className="w-full text-left border-collapse">
-                                        <thead className="bg-zinc-50/50 dark:bg-[#18181b] border-b border-zinc-200 dark:border-white/10">
-                                            <tr>
-                                                {['ID', 'Description', 'Severity', 'Likelihood', 'Status', 'Mitigation'].map(h => (
-                                                    <th key={h} className="px-5 py-3 text-xs font-bold uppercase tracking-wider text-zinc-500">{h}</th>
-                                                ))}
-                                            </tr>
-                                        </thead>
-                                        <tbody className="divide-y divide-zinc-100 dark:divide-white/5">
-                                            {project.riskLog.map((r, i) => (
-                                                <tr key={i} className="hover:bg-zinc-50 dark:hover:bg-white/5">
-                                                    <td className="px-5 py-3 font-mono text-xs text-zinc-500">{r.id}</td>
-                                                    <td className="px-5 py-3 text-sm font-medium max-w-xs">{r.description}</td>
-                                                    <td className="px-5 py-3">
-                                                        <span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded-full ${
-                                                            r.severity === 'high' ? 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-500/10' :
-                                                            r.severity === 'medium' ? 'text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-500/10' :
-                                                            'text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-500/10'
-                                                        }`}>
-                                                            {r.severity}
-                                                        </span>
-                                                    </td>
-                                                    <td className="px-5 py-3 text-sm text-zinc-500 capitalize">{r.likelihood}</td>
-                                                    <td className="px-5 py-3 text-sm text-zinc-500 capitalize">{r.status}</td>
-                                                    <td className="px-5 py-3 text-xs text-zinc-500 max-w-xs">{r.mitigation}</td>
+                                <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>
-                                            ))}
-                                        </tbody>
-                                    </table>
-                                ) : (
-                                    <div className="p-8 text-center text-zinc-500 text-sm">No risk entries for this project.</div>
-                                )}
-                            </SpotlightCard>
+                                            </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 */}
-                            <SpotlightCard className="overflow-hidden">
-                                <div className="px-5 py-4 border-b border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5">
-                                    <h3 className="font-bold flex items-center gap-2">
-                                        <AlertCircle size={16} className="text-red-500" /> Issue Log
-                                    </h3>
+                            <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>
-                                {(project.issueLog || []).length > 0 ? (
-                                    <table className="w-full text-left border-collapse">
-                                        <thead className="bg-zinc-50/50 dark:bg-[#18181b] border-b border-zinc-200 dark:border-white/10">
-                                            <tr>
-                                                {['ID', 'Title', 'Priority', 'Status', 'Assigned To', 'Reported'].map(h => (
-                                                    <th key={h} className="px-5 py-3 text-xs font-bold uppercase tracking-wider text-zinc-500">{h}</th>
-                                                ))}
-                                            </tr>
-                                        </thead>
-                                        <tbody className="divide-y divide-zinc-100 dark:divide-white/5">
-                                            {project.issueLog.map((issue, i) => (
-                                                <tr key={i} className="hover:bg-zinc-50 dark:hover:bg-white/5">
-                                                    <td className="px-5 py-3 font-mono text-xs text-zinc-500">{issue.id}</td>
-                                                    <td className="px-5 py-3 font-semibold text-sm">{issue.title}</td>
-                                                    <td className="px-5 py-3">
-                                                        <span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded-full ${
-                                                            issue.priority === 'critical' ? 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-500/10' :
-                                                            issue.priority === 'high' ? 'text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-500/10' :
-                                                            'text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-500/10'
-                                                        }`}>
-                                                            {issue.priority}
-                                                        </span>
-                                                    </td>
-                                                    <td className="px-5 py-3 text-sm text-zinc-500 capitalize">{issue.status}</td>
-                                                    <td className="px-5 py-3 text-sm text-zinc-500">{issue.assignedTo}</td>
-                                                    <td className="px-5 py-3 text-sm text-zinc-500">{issue.dateReported}</td>
+                                <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>
-                                            ))}
-                                        </tbody>
-                                    </table>
-                                ) : (
-                                    <div className="p-8 text-center text-zinc-500 text-sm">No issues logged for this project.</div>
-                                )}
-                            </SpotlightCard>
+                                            </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' && (
-                        <SpotlightCard className="p-6">
-                            <h3 className="text-lg font-bold mb-6">Activity Timeline</h3>
+                        <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-4 top-0 bottom-0 w-0.5 bg-zinc-200 dark:bg-white/10" />
-                                    <div className="space-y-4">
+                                    <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-3 sm:gap-4 pl-6 sm:pl-10">
-                                                <div className="absolute left-2.5 w-3.5 h-3.5 rounded-full bg-blue-500 border-2 border-white dark:border-[#09090b]" />
-                                                <div className="flex-1 p-4 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
+                                            <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-semibold text-zinc-900 dark:text-white text-sm">{a.action}</div>
-                                                            {a.details && <div className="text-xs text-zinc-500 mt-1">{a.details}</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 text-zinc-500">{a.date}</div>
-                                                            {a.user && <div className="text-[10px] text-zinc-400 mt-0.5">{a.user}</div>}
+                                                            <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>
@@ -563,12 +951,12 @@ const OwnerProjectDetail = () => {
                                     </div>
                                 </div>
                             ) : (
-                                <div className="text-center text-zinc-500 py-8">
-                                    <Clock size={32} className="mx-auto mb-3 text-zinc-400" />
-                                    <p className="font-semibold">No activity logged yet.</p>
+                                <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>
                             )}
-                        </SpotlightCard>
+                        </NeoCard>
                     )}
                 </div>
             </div>
@@ -584,6 +972,13 @@ const OwnerProjectDetail = () => {
                 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>
     );