From 6c5d9ea5e8608e7f3353c615b1a2db7fdaf4ee21 Mon Sep 17 00:00:00 2001
From: Satyam Rastogi <satyamrastogi302@gmail.com>
Date: Fri, 29 May 2026 17:48:23 +0530
Subject: [PATCH] feat(projects): Estimate Versions tab (history + full
 document view)

---
 src/pages/owner/OwnerProjectDetail.jsx | 97 ++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)

diff --git a/src/pages/owner/OwnerProjectDetail.jsx b/src/pages/owner/OwnerProjectDetail.jsx
index 1c20dcf..7351047 100644
--- a/src/pages/owner/OwnerProjectDetail.jsx
+++ b/src/pages/owner/OwnerProjectDetail.jsx
@@ -17,6 +17,7 @@ import {
 } from 'lucide-react';
 import ChangeOrderDrawer from '../../components/owner/ChangeOrderDrawer';
 import InvoiceDetailModal from '../../components/owner/InvoiceDetailModal';
+import EstimateDetailModal from '../../components/estimates/EstimateDetailModal';
 import CreateItemModal from '../../components/owner/CreateItemModal';
 import CommissionSettingsModal from '../../components/owner/CommissionSettingsModal';
 import TeamManagementPanel from '../../components/owner/TeamManagementPanel';
@@ -73,6 +74,7 @@ const tabs = [
     { id: 'rfis', label: 'RFIs', icon: FileText },
     { id: 'milestones', label: 'Milestones', icon: Milestone },
     { id: 'invoices', label: 'Invoices', icon: DollarSign },
+    { id: 'estimates', label: 'Estimates', icon: FileText },
     { id: 'risks', label: 'Risk & Issues', icon: AlertCircle },
     { id: 'inspections', label: 'Inspections', icon: ShieldCheck },
     { id: 'activity', label: 'Activity', icon: Clock },
@@ -200,6 +202,7 @@ const OwnerProjectDetail = () => {
     const [activeTab, setActiveTab] = useState('overview');
     const [selectedCO, setSelectedCO] = useState(null);
     const [selectedInvoice, setSelectedInvoice] = useState(null);
+    const [selectedVersion, setSelectedVersion] = useState(null);
     const [createModalConfig, setCreateModalConfig] = useState(null);
 
     // ── Payments state ─────────────────────────────────────────────────────────
@@ -1651,6 +1654,83 @@ const OwnerProjectDetail = () => {
                         </NeoCard>
                     )}
 
+                    {/* ESTIMATES TAB */}
+                    {activeTab === 'estimates' && (() => {
+                        const buildEstimate = (v) => ({
+                            id: `${project.id}-v${v.version}`,
+                            clientName: project.customerName,
+                            address: project.address,
+                            date: v.date,
+                            status: v.status,
+                            total: v.total,
+                            templateId: v.templateId,
+                            templateName: v.templateName,
+                            estimatedBy: (project.teamMembers || []).find(t => /Sales|Estimator/i.test(t.jobRole || ''))?.name || 'Sales Team',
+                            roofArea: v.roofArea,
+                            notes: v.note,
+                        });
+                        const versions = [...(project.estimateVersions || [])].sort((a, b) => a.version - b.version);
+                        return (
+                            <NeoCard spotlightColor="rgba(0, 240, 255, 0.1)" innerClassName="p-0 lg:p-0">
+                                <div className="p-5 border-b border-zinc-200 dark:border-white/5 flex items-center gap-3">
+                                    <FileText className={NEON_BLUE} size={20} />
+                                    <h3 className="text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase">Estimate Versions</h3>
+                                    <span className="text-xs font-bold bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/5 px-2 py-0.5 rounded-full text-zinc-500 dark:text-zinc-400">
+                                        {versions.length}
+                                    </span>
+                                </div>
+                                {versions.length > 0 ? (
+                                    <div className="divide-y divide-zinc-100 dark:divide-white/5">
+                                        {versions.map((v) => (
+                                            <div
+                                                key={v.version}
+                                                className="flex flex-col sm:flex-row sm:items-center gap-3 px-5 py-4 hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors cursor-pointer"
+                                                tabIndex="0"
+                                                role="button"
+                                                onClick={() => setSelectedVersion(v)}
+                                                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedVersion(v); } }}
+                                            >
+                                                <div className="flex items-center gap-3 flex-1 min-w-0">
+                                                    <span className="shrink-0 w-8 h-8 rounded-full bg-sky-500/10 border border-sky-500/20 flex items-center justify-center text-xs font-black text-sky-600 dark:text-[#00f0ff]">
+                                                        v{v.version}
+                                                    </span>
+                                                    <div className="min-w-0">
+                                                        <div className="flex flex-wrap items-center gap-2">
+                                                            <span className="font-bold text-sm text-zinc-900 dark:text-white">Version {v.version}</span>
+                                                            <span className="text-xs font-mono text-zinc-500 dark:text-zinc-400">{v.date}</span>
+                                                            <span className="text-xs font-mono font-bold text-[#00f0ff]">{formatCurrency(v.total)}</span>
+                                                        </div>
+                                                        {v.note && (
+                                                            <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5 truncate">{v.note}</p>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                                <div className="flex items-center gap-2 shrink-0">
+                                                    <span className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border ${
+                                                        v.status === 'signed'
+                                                            ? 'text-emerald-600 dark:text-[#39ff14] bg-emerald-50 dark:bg-[#39ff14]/10 border-emerald-200 dark:border-[#39ff14]/20'
+                                                            : v.status === 'revised'
+                                                            ? 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 border-amber-200 dark:border-amber-500/20'
+                                                            : 'text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-white/5 border-zinc-200 dark:border-white/10'
+                                                    }`}>
+                                                        {v.status === 'signed' ? 'Signed' : v.status === 'revised' ? 'Revised' : 'Sent'}
+                                                    </span>
+                                                    <ChevronRight size={14} className="text-zinc-400" />
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                ) : (
+                                    <div className="p-16 text-center text-zinc-500">
+                                        <FileText size={48} className="mx-auto mb-4 text-zinc-400 dark:text-zinc-600" />
+                                        <p className="font-bold text-lg text-zinc-900 dark:text-white">No estimate versions for this project.</p>
+                                        <p className="text-sm mt-2 text-zinc-400">Estimate history will appear here once versions are created.</p>
+                                    </div>
+                                )}
+                            </NeoCard>
+                        );
+                    })()}
+
                     {/* RISK & ISSUES TAB */}
                     {activeTab === 'risks' && (
                         <div className="space-y-6">
@@ -2220,6 +2300,23 @@ const OwnerProjectDetail = () => {
                 onClose={() => setSelectedInvoice(null)}
                 invoice={selectedInvoice}
             />
+            <EstimateDetailModal
+                isOpen={!!selectedVersion}
+                onClose={() => setSelectedVersion(null)}
+                estimate={selectedVersion ? {
+                    id: `${project.id}-v${selectedVersion.version}`,
+                    clientName: project.customerName,
+                    address: project.address,
+                    date: selectedVersion.date,
+                    status: selectedVersion.status,
+                    total: selectedVersion.total,
+                    templateId: selectedVersion.templateId,
+                    templateName: selectedVersion.templateName,
+                    estimatedBy: (project.teamMembers || []).find(t => /Sales|Estimator/i.test(t.jobRole || ''))?.name || 'Sales Team',
+                    roofArea: selectedVersion.roofArea,
+                    notes: selectedVersion.note,
+                } : null}
+            />
             {createModalConfig && (
                 <CreateItemModal
                     isOpen={!!createModalConfig}