Prepare local Hugging Face deployment

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.git
+.env
+.env.local
+*.log
+output
+migrated_prompt_history

.env.example

@@ -0,0 +1,8 @@
+# Optional. Leave empty to use the in-memory local database.
+# MONGODB_URI=mongodb://localhost:27017/buildtrack_db
+
+# Optional. Set a strong value for production login tokens.
+# JWT_SECRET=replace-with-a-long-random-secret
+
+# Hugging Face Spaces sets PORT automatically. Local default is 7860.
+# PORT=7860

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,725 @@
+
+import React, { useState, useEffect } from 'react';
+import { NotificationProvider } from './contexts/NotificationContext';
+import Layout from './components/Layout';
+import Dashboard from './components/Dashboard';
+import MasterControl from './components/MasterControl';
+import SiteExecution from './components/SiteExecution';
+import FinancialControl from './components/FinancialControl';
+import LiabilityTracker from './components/LiabilityTracker';
+import DocumentManager from './components/DocumentManager';
+import ProjectList from './components/ProjectList';
+import Auth from './components/Auth';
+import TaskManager from './components/TaskManager';
+import MemberManager from './components/MemberManager';
+import GanttChart from './components/GanttChart';
+import FinancialAnalytics from './components/FinancialAnalytics';
+import Procurement from './components/Procurement';
+import SubcontractorPortal from './components/SubcontractorPortal';
+import QCSafety from './components/QCSafety';
+import Reporting from './components/Reporting';
+import PhotoLogs from './components/PhotoLogs';
+import EquipmentManager from './components/EquipmentManager';
+import AttendanceManager from './components/AttendanceManager';
+import ChangeOrderManager from './components/ChangeOrderManager';
+import SustainabilityTracker from './components/SustainabilityTracker';
+import BimViewer from './components/BimViewer';
+import ClientPortal from './components/ClientPortal';
+import VendorAnalytics from './components/VendorAnalytics';
+import LocalAssistant from './components/LocalAssistant';
+import { CommentSection } from './components/Collaboration';
+import { MOCK_PROJECTS } from './constants';
+import { ProjectState, ProjectDocument, DPR, UserRole, BOQItem, AiSuggestion, Material, Bill, ExtractedDPR, User, Task } from './types';
+import { parseBOQDocument, analyzeDocumentContent, processWhatsAppMessage } from './services/localAnalysisService';
+import { MessageSquare, Send, Loader2, Smartphone, AlertCircle, LayoutDashboard, PlusCircle } from 'lucide-react';
+import { useLocalCollection } from './hooks/useLocalCollection';
+
+const stripUndefined = (obj: any): any => {
+  if (Array.isArray(obj)) return obj.map(stripUndefined);
+  if (typeof obj === 'object' && obj !== null) {
+    const res: any = {};
+    for (const key in obj) {
+      if (obj[key] !== undefined) res[key] = stripUndefined(obj[key]);
+    }
+    return res;
+  }
+  return obj;
+};
+
+const App: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [isAuthReady, setIsAuthReady] = useState(false);
+  const [activeTab, setActiveTab] = useState('dashboard');
+  
+  const authRefreshKey = user?.uid || localStorage.getItem('auth_token') || 'guest';
+  const { data: projectsData, add: addProject, update: updateProjectStorage } = useLocalCollection<ProjectState>('projects', authRefreshKey);
+  
+  const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
+  const [activeProjectRole, setActiveProjectRole] = useState<UserRole | null>(null);
+  const [activeProjectTasks, setActiveProjectTasks] = useState<Task[]>([]);
+  const [activeProjectMembers, setActiveProjectMembers] = useState<User[]>([]);
+  const [isSimulatingWhatsApp, setIsSimulatingWhatsApp] = useState(false);
+  const [whatsappMessage, setWhatsappMessage] = useState('');
+  const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
+
+  // Connection Test omitted since Firebase is removed
+  // Auth Listener replaced with short initialization
+  useEffect(() => {
+     setIsAuthReady(true);
+  }, []);
+
+  // Sync Projects
+  const projects = projectsData;
+  useEffect(() => {
+    if (projects.length === 0 && user) {
+       MOCK_PROJECTS.forEach(p => {
+          addProject({ ...p, ownerUid: user.uid } as any);
+       });
+    }
+  }, [user, projects.length, addProject]);
+
+  // Project Role Listener
+  useEffect(() => {
+    if (user && activeProjectId) {
+       // Local mode: give them the role they logged in with for everything
+       setActiveProjectRole(user.role);
+    }
+  }, [user, activeProjectId]);
+
+  useEffect(() => {
+    if (user) {
+      setActiveProjectMembers([user]);
+    }
+  }, [user]);
+
+  useEffect(() => {
+    if (!activeProjectId && projects.length > 0) {
+      setActiveProjectId(projects[0].id);
+    }
+  }, [activeProjectId, projects]);
+
+  // Tasks local fetch
+  useEffect(() => {
+     const fetchTasks = async () => {
+        try {
+           const token = localStorage.getItem('auth_token');
+           const res = await fetch(`/api/collections/tasks_${activeProjectId}`, {
+               headers: token ? { 'Authorization': `Bearer ${token}` } : {}
+           });
+           if (!res.ok) throw new Error("Tasks fetch failed");
+           const data = await res.json();
+           setActiveProjectTasks(data || []);
+        } catch (e) {
+           console.error("Failed to fetch tasks", e);
+        }
+     };
+     if (activeProjectId) {
+         fetchTasks();
+     }
+  }, [activeProjectId]);
+
+  const activeProject = projects.find(p => p.id === activeProjectId);
+
+  const handleLogout = async () => {
+    localStorage.removeItem('local_user_uid');
+    localStorage.removeItem('auth_token');
+    setUser(null);
+    setActiveProjectId(null);
+  };
+
+  const handleCreateProject = async (newProject: Partial<ProjectState>) => {
+    if (!user) return;
+    const id = `P${Date.now()}`;
+    const project: ProjectState = {
+      ...newProject as ProjectState,
+      id,
+      ownerUid: user.uid,
+      memberUids: [user.uid],
+      aiSuggestions: [],
+      materials: [],
+      subContractors: [],
+      documents: [],
+      dprs: [],
+      boq: [],
+      bills: [],
+      liabilities: [],
+      milestones: [],
+      purchaseOrders: [],
+      qualityChecks: [],
+      safetyChecks: [],
+      photoLogs: [],
+      equipment: [],
+      attendance: [],
+      changeOrders: [],
+      vendors: [],
+      weatherForecast: [],
+      bimModels: []
+    };
+    
+    addProject(stripUndefined(project));
+    setActiveProjectId(id);
+  };
+
+  const handleUpdateProject = async (projectId: string, updater: (proj: ProjectState) => ProjectState) => {
+    const project = projects.find(p => p.id === projectId);
+    if (!project) return;
+    
+    const updated = updater(project);
+    updateProjectStorage(projectId, stripUndefined(updated));
+  };
+
+  const handleAddDocument = async (newDoc: ProjectDocument) => {
+    if (!activeProjectId || !activeProject) return;
+    
+    // 1. Add Document immediately
+    handleUpdateProject(activeProjectId, (project) => ({
+      ...project,
+      documents: [newDoc, ...project.documents]
+    }));
+
+    // 2. Trigger Auto-Analysis based on Doc Type
+    try {
+      let mimeType = 'application/pdf';
+      if (newDoc.type === 'JPG' || newDoc.type === 'PNG') mimeType = 'image/jpeg';
+
+      const suggestions = await analyzeDocumentContent(newDoc.name, newDoc.category, activeProject.boq, newDoc.content, mimeType);
+      
+      if (suggestions && suggestions.length > 0) {
+        handleUpdateProject(activeProjectId, (project) => ({
+          ...project,
+          documents: project.documents.map(d => d.id === newDoc.id ? { ...d, isAnalyzed: true } : d),
+          aiSuggestions: [...suggestions.map(s => ({ ...s, docId: newDoc.id })), ...project.aiSuggestions]
+        }));
+      }
+    } catch (e) {
+      console.error("Auto-analysis failed", e);
+    }
+  };
+
+  const handleAnalyzeDocument = (docId: string, suggestions: AiSuggestion[]) => {
+    if (!activeProjectId) return;
+    handleUpdateProject(activeProjectId, (project) => ({
+      ...project,
+      documents: project.documents.map(d => d.id === docId ? { ...d, isAnalyzed: true } : d),
+      aiSuggestions: [...suggestions, ...project.aiSuggestions]
+    }));
+    setActiveTab('dashboard'); // Switch to dashboard to see results
+  };
+
+  const handleImportBOQItems = (items: BOQItem[]) => {
+     if (!activeProjectId) return;
+     handleUpdateProject(activeProjectId, (project) => ({
+       ...project,
+       boq: [...project.boq, ...items] // Append new items. In real app, this might merge or replace.
+     }));
+  };
+
+  const handleApplySuggestion = async (suggestionId: string) => {
+    if (!activeProjectId || !activeProject) return;
+    const suggestion = activeProject.aiSuggestions.find(s => s.id === suggestionId);
+    if (!suggestion) return;
+
+    if (suggestion.type === 'BOQ_IMPORT') {
+      const relatedDoc = activeProject.documents.find(d => d.id === suggestion.docId);
+      if (relatedDoc) {
+         let mimeType = 'application/pdf';
+         if (relatedDoc.type === 'JPG' || relatedDoc.type === 'PNG') mimeType = 'image/jpeg';
+         const items = await parseBOQDocument(relatedDoc.name, relatedDoc.content, mimeType);
+         handleImportBOQItems(items);
+      }
+      handleUpdateProject(activeProjectId, (project) => ({
+        ...project,
+        aiSuggestions: project.aiSuggestions.map(s => s.id === suggestionId ? { ...s, status: 'APPLIED' as const } : s)
+      }));
+      return;
+    }
+
+    if (suggestion.type === 'DPR_ENTRY' && suggestion.value) {
+       const dprData = suggestion.value as ExtractedDPR;
+       // Resolve IDs
+       let subId = undefined;
+       if (dprData.subContractorName) {
+         subId = activeProject.subContractors?.find(s => 
+           s.name.toLowerCase().includes(dprData.subContractorName!.toLowerCase())
+         )?.id;
+       }
+
+       let materialsUsed = [];
+       if (dprData.materials) {
+         materialsUsed = dprData.materials.map(m => {
+           const mat = activeProject.materials.find(ex => ex.name.toLowerCase().includes(m.name.toLowerCase()));
+           return mat ? { materialId: mat.id, qty: m.qty } : null;
+         }).filter(Boolean) as any;
+       }
+
+       const newDPR: DPR = {
+         id: `DPR-AI-${Date.now()}`,
+         date: dprData.date || new Date().toISOString().split('T')[0],
+         activity: dprData.activity || 'Reported Activity',
+         location: dprData.location || 'Site',
+         laborCount: dprData.laborCount || 0,
+         remarks: dprData.remarks || '',
+         linkedBoqId: dprData.linkedBoqId,
+         workDoneQty: dprData.workDoneQty,
+         subContractorId: subId,
+         materialsUsed: materialsUsed
+       };
+       handleAddDPR(newDPR);
+       
+       handleUpdateProject(activeProjectId, (project) => ({
+        ...project,
+        aiSuggestions: project.aiSuggestions.map(s => s.id === suggestionId ? { ...s, status: 'APPLIED' as const } : s)
+      }));
+      return;
+    }
+
+    handleUpdateProject(activeProjectId, (project) => {
+      let updatedProject = { ...project };
+      
+      // Update data based on suggestion type
+      if (suggestion.type === 'QUANTITY_UPDATE' && suggestion.linkedId && suggestion.value) {
+        updatedProject.boq = project.boq.map(b => b.id === suggestion.linkedId ? { ...b, executedQty: b.executedQty + suggestion.value } : b);
+      } else if (suggestion.type === 'BILL_DETECTION' && suggestion.value) {
+        const billVal = suggestion.value as any; // could be object or number
+        const amount = typeof billVal === 'object' ? billVal.amount : billVal;
+        
+        const newBill = {
+          id: `BILL-AI-${Date.now()}`,
+          type: 'VENDOR_INVOICE' as const,
+          entityName: suggestion.title.split('from ')[1] || 'Unknown Vendor',
+          amount: Number(amount),
+          date: new Date().toISOString().split('T')[0],
+          status: 'PENDING' as const
+        };
+        updatedProject.bills = [newBill, ...project.bills];
+      }
+
+      updatedProject.aiSuggestions = project.aiSuggestions.map(s => s.id === suggestionId ? { ...s, status: 'APPLIED' as const } : s);
+      return updatedProject;
+    });
+  };
+
+  const handleDismissSuggestion = (suggestionId: string) => {
+    if (!activeProjectId) return;
+    handleUpdateProject(activeProjectId, (project) => ({
+      ...project,
+      aiSuggestions: project.aiSuggestions.map(s => s.id === suggestionId ? { ...s, status: 'DISMISSED' as const } : s)
+    }));
+  };
+
+  const handleAddDPR = (newDPR: DPR) => {
+    if (!activeProjectId) return;
+    handleUpdateProject(activeProjectId, (project) => {
+      const updatedDPRs = [newDPR, ...project.dprs];
+      let updatedBOQ = project.boq;
+      let updatedSubContractors = project.subContractors;
+      let updatedLiabilities = project.liabilities;
+      
+      // 1. Update BOQ Executed Qty
+      if (newDPR.linkedBoqId && newDPR.workDoneQty) {
+        updatedBOQ = project.boq.map(item => {
+          if (item.id === newDPR.linkedBoqId) {
+            return { ...item, executedQty: item.executedQty + (newDPR.workDoneQty || 0) };
+          }
+          return item;
+        });
+
+        // 2. Automated Sub-contractor Progress Tracking
+        if (newDPR.subContractorId && newDPR.workDoneQty) {
+          const sub = project.subContractors.find(s => s.id === newDPR.subContractorId);
+          if (sub) {
+            // Find agreed rate for this BOQ item
+            const rateInfo = sub.agreedRates.find(r => r.boqId === newDPR.linkedBoqId);
+            const rate = rateInfo ? rateInfo.rate : 0;
+            const workValue = newDPR.workDoneQty * rate;
+
+            if (workValue > 0) {
+              // Update SC stats
+              updatedSubContractors = project.subContractors.map(s => {
+                 if (s.id === sub.id) {
+                   return {
+                     ...s,
+                     totalWorkValue: s.totalWorkValue + workValue,
+                     currentLiability: s.currentLiability + workValue
+                   };
+                 }
+                 return s;
+              });
+
+              // Create Liability Entry automatically
+              const newLiability = {
+                id: `L-AUTO-${Date.now()}`,
+                description: `Unbilled Work: ${sub.name} (${newDPR.date})`,
+                type: 'UNBILLED_WORK' as const,
+                amount: workValue,
+                dueDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] // Net 30 default
+              };
+              updatedLiabilities = [newLiability, ...project.liabilities];
+            }
+          }
+        }
+      }
+
+      // 3. Update Material Stock
+      let updatedMaterials = project.materials;
+      if (newDPR.materialsUsed && newDPR.materialsUsed.length > 0) {
+        updatedMaterials = project.materials.map(mat => {
+          const used = newDPR.materialsUsed?.find(u => u.materialId === mat.id);
+          if (used) {
+            return { 
+              ...mat, 
+              totalConsumed: mat.totalConsumed + used.qty,
+              currentStock: mat.currentStock - used.qty
+            };
+          }
+          return mat;
+        });
+      }
+
+      return { 
+        ...project, 
+        dprs: updatedDPRs, 
+        boq: updatedBOQ, 
+        materials: updatedMaterials, 
+        subContractors: updatedSubContractors,
+        liabilities: updatedLiabilities
+      };
+    });
+  };
+
+  const handleReceiveMaterial = (materialId: string, receivedQty: number, newRate?: number) => {
+    if (!activeProjectId) return;
+    handleUpdateProject(activeProjectId, (project) => ({
+      ...project,
+      materials: project.materials.map(mat => {
+        if (mat.id === materialId) {
+          const newTotalReceived = mat.totalReceived + receivedQty;
+          const newStock = mat.currentStock + receivedQty;
+          // Weighted Average Rate Calculation
+          const oldVal = mat.currentStock * mat.averageRate;
+          const newVal = receivedQty * (newRate || mat.averageRate);
+          const newAvgRate = (oldVal + newVal) / newStock;
+
+          return {
+            ...mat,
+            totalReceived: newTotalReceived,
+            currentStock: newStock,
+            averageRate: newRate ? newAvgRate : mat.averageRate
+          };
+        }
+        return mat;
+      })
+    }));
+  };
+
+  const handleAddBill = (newBill: Bill) => {
+    if (!activeProjectId) return;
+    handleUpdateProject(activeProjectId, (project) => ({
+      ...project,
+      bills: [newBill, ...project.bills]
+    }));
+  };
+
+  const handleBillItemizedUpdate = (items: { boqId: string; amount: number }[]) => {
+    if (!activeProjectId) return;
+    handleUpdateProject(activeProjectId, (project) => ({
+      ...project,
+      boq: project.boq.map(b => {
+        const update = items.find(i => i.boqId === b.id);
+        if (update) {
+          return { ...b, billedAmount: (b.billedAmount || 0) + update.amount };
+        }
+        return b;
+      })
+    }));
+  };
+
+  const handleUpdatePDRemarks = (entityType: 'MATERIAL' | 'BILL' | 'DPR' | 'SUBCONTRACTOR', entityId: string, remarks: string) => {
+    if (!activeProjectId) return;
+    handleUpdateProject(activeProjectId, (project) => {
+      if (entityType === 'MATERIAL') {
+        return { ...project, materials: project.materials.map(m => m.id === entityId ? { ...m, pdRemarks: remarks } : m) };
+      }
+      if (entityType === 'BILL') {
+        return { ...project, bills: project.bills.map(b => b.id === entityId ? { ...b, pdRemarks: remarks } : b) };
+      }
+      if (entityType === 'SUBCONTRACTOR') {
+        return { ...project, subContractors: project.subContractors.map(s => s.id === entityId ? { ...s, pdRemarks: remarks } : s) };
+      }
+      return project;
+    });
+  };
+
+  const handleAddBOQItem = (newItem: BOQItem) => {
+    if (!activeProjectId) return;
+    handleUpdateProject(activeProjectId, (project) => ({
+      ...project,
+      boq: [...project.boq, newItem]
+    }));
+  };
+
+  const handleUpdateBOQItem = (itemId: string, updatedItem: Partial<BOQItem>) => {
+    if (!activeProjectId) return;
+    handleUpdateProject(activeProjectId, (project) => ({
+      ...project,
+      boq: project.boq.map(item => item.id === itemId ? { ...item, ...updatedItem } : item)
+    }));
+  };
+
+  const handleSimulateWhatsApp = async () => {
+    if (!activeProjectId || !activeProject || !whatsappMessage.trim()) return;
+    
+    setIsSimulatingWhatsApp(true);
+    try {
+      const extracted = await processWhatsAppMessage(whatsappMessage, activeProject.boq);
+      if (extracted) {
+        // Create an AI Suggestion based on WhatsApp message
+        const newSuggestion: AiSuggestion = {
+          id: `WA-SUG-${Date.now()}`,
+          docId: 'WHATSAPP',
+          type: 'DPR_ENTRY',
+          title: 'WhatsApp Progress Update',
+          description: `Extracted from message: "${whatsappMessage.substring(0, 50)}..."`,
+          value: extracted,
+          status: 'PENDING'
+        };
+        
+        handleUpdateProject(activeProjectId, (project) => ({
+          ...project,
+          aiSuggestions: [newSuggestion, ...project.aiSuggestions]
+        }));
+        
+        setWhatsappMessage('');
+        setActiveTab('dashboard');
+      }
+    } catch (err) {
+      console.error("WhatsApp simulation failed", err);
+    } finally {
+      setIsSimulatingWhatsApp(false);
+    }
+  };
+
+  if (!isAuthReady) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center bg-slate-50">
+        <Loader2 className="w-10 h-10 text-blue-600 animate-spin mb-4" />
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Auth onUserChange={setUser} />;
+  }
+
+  if (!activeProject) {
+    return (
+      <div className="min-h-screen bg-slate-50">
+        <ProjectList 
+          projects={projects} 
+          onSelectProject={setActiveProjectId} 
+          onCreateProject={handleCreateProject}
+          userRole={user.role}
+          onSwitchRole={() => {}} // Disabled for real users
+        />
+      </div>
+    );
+  }
+
+  const renderContent = () => {
+    if (!activeProjectId || !activeProject) {
+      return (
+        <div className="flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-slate-400">
+          <div className="p-8 rounded-full mb-6 bg-slate-100">
+            <LayoutDashboard className="w-16 h-16 opacity-20" />
+          </div>
+          <h2 className="text-2xl font-bold text-slate-600 mb-2">No Project Selected</h2>
+          <p className="max-w-md text-center mb-8">
+            Please select a project from the sidebar to view its dashboard and manage construction activities.
+          </p>
+          <button 
+            onClick={() => setActiveProjectId(null)}
+            className="flex items-center gap-2 bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700 transition-all shadow-lg active:scale-95 font-semibold"
+          >
+            <PlusCircle className="w-5 h-5" />
+            Go to Project List
+          </button>
+        </div>
+      );
+    }
+
+    switch (activeTab) {
+      case 'dashboard':
+        return (
+          <Dashboard 
+            data={activeProject} 
+            onApplySuggestion={handleApplySuggestion}
+            onDismissSuggestion={handleDismissSuggestion}
+            onUpdateProject={(updater) => handleUpdateProject(activeProjectId, updater)}
+          />
+        );
+      case 'master':
+        return <MasterControl 
+                  data={activeProject} 
+                  onAddDocument={handleAddDocument} 
+                  onAddBOQItem={handleAddBOQItem} 
+                  onUpdateBOQItem={handleUpdateBOQItem} 
+                  onImportBOQItems={handleImportBOQItems}
+                  userRole={activeProjectRole || user.role} 
+               />;
+      case 'site':
+        return <SiteExecution 
+                  data={activeProject} 
+                  onAddDocument={handleAddDocument} 
+                  onAddDPR={handleAddDPR} 
+                  onReceiveMaterial={handleReceiveMaterial}
+                  onUpdatePDRemarks={handleUpdatePDRemarks}
+                  userRole={activeProjectRole || user.role} 
+               />;
+      case 'finance':
+        return <FinancialControl 
+                 data={activeProject} 
+                 onAddDocument={handleAddDocument} 
+                 onUpdateBOQItem={handleUpdateBOQItem} 
+                 onAddBill={handleAddBill}
+                 onUpdatePDRemarks={handleUpdatePDRemarks}
+                 onBillItemizedUpdate={handleBillItemizedUpdate}
+                 userRole={activeProjectRole || user.role} 
+               />;
+      case 'analytics':
+        return (
+          <div className="space-y-6">
+            <FinancialAnalytics boq={activeProject.boq} bills={activeProject.bills} />
+            <div className="pt-6 border-t border-slate-200">
+              <h3 className="text-lg font-bold text-slate-800 mb-4">Sustainability & Waste Tracking</h3>
+              <SustainabilityTracker metrics={activeProject.sustainabilityMetrics || { carbonFootprint: 0, waterUsage: 0, wasteGenerated: [] }} />
+            </div>
+          </div>
+        );
+      case 'procurement':
+        return (
+          <div className="space-y-6">
+            <Procurement materials={activeProject.materials} purchaseOrders={activeProject.purchaseOrders || []} />
+            <div className="pt-6 border-t border-slate-200">
+              <h3 className="text-lg font-bold text-slate-800 mb-4">Vendor Performance</h3>
+              <VendorAnalytics vendors={activeProject.vendors || []} />
+            </div>
+          </div>
+        );
+      case 'equipment':
+        return <EquipmentManager equipment={activeProject.equipment || []} />;
+      case 'labor':
+        return <AttendanceManager attendance={activeProject.attendance || []} />;
+      case 'subcontractors':
+        return <SubcontractorPortal subContractors={activeProject.subContractors} dprs={activeProject.dprs} />;
+      case 'qc-safety':
+        return <QCSafety qualityChecks={activeProject.qualityChecks || []} safetyChecks={activeProject.safetyChecks || []} users={activeProjectMembers} />;
+      case 'gantt':
+        return <GanttChart tasks={activeProjectTasks} />;
+      case 'bim':
+        return <BimViewer models={activeProject.bimModels || []} />;
+      case 'photos':
+        return <PhotoLogs photoLogs={activeProject.photoLogs || []} users={activeProjectMembers} />;
+      case 'reports':
+        return <Reporting project={activeProject} />;
+      case 'client':
+        return <ClientPortal project={activeProject} />;
+      case 'liability':
+        return <LiabilityTracker data={activeProject} onAddDocument={handleAddDocument} userRole={activeProjectRole || user.role} />;
+      case 'documents':
+        return (
+          <div className="h-[calc(100vh-8rem)] flex gap-6">
+            <div className="flex-1">
+              <DocumentManager 
+                documents={activeProject.documents} 
+                onAddDocument={handleAddDocument} 
+                onAnalyzeDocument={handleAnalyzeDocument}
+                onSelectDocument={setSelectedDocId}
+                boqItems={activeProject.boq}
+                allowUpload={(activeProjectRole || user.role) === 'DIRECTOR' || (activeProjectRole || user.role) === 'MANAGER' || (activeProjectRole || user.role) === 'ENGINEER'}
+              />
+            </div>
+            {selectedDocId && (
+              <div className="w-80 h-full">
+                <CommentSection 
+                  projectId={activeProject.id}
+                  targetId={selectedDocId}
+                  targetType="DOCUMENT"
+                  currentUser={user}
+                />
+              </div>
+            )}
+          </div>
+        );
+      case 'tasks':
+        return (
+          <div className="h-[calc(100vh-8rem)]">
+            <TaskManager 
+              projectId={activeProject.id}
+              currentUser={user}
+            />
+          </div>
+        );
+      case 'team':
+        return (
+          <div className="h-[calc(100vh-8rem)]">
+            <MemberManager 
+              projectId={activeProject.id}
+              ownerUid={activeProject.ownerUid}
+              currentUserUid={user.uid || ''}
+            />
+          </div>
+        );
+      default:
+        return <Dashboard data={activeProject} onApplySuggestion={handleApplySuggestion} onDismissSuggestion={handleDismissSuggestion} onUpdateProject={(updater) => handleUpdateProject(activeProjectId, updater)} />;
+    }
+  };
+
+  return (
+    <NotificationProvider>
+      <Layout 
+        activeTab={activeTab} 
+      setActiveTab={setActiveTab} 
+      onSwitchProject={() => setActiveProjectId(null)}
+      projectName={activeProject.name}
+      user={{ ...user, role: activeProjectRole || user.role }}
+      onLogout={handleLogout}
+    >
+      <div className="flex flex-col lg:flex-row gap-6">
+        <div className="flex-1">
+          {renderContent()}
+        </div>
+        
+        {/* Collaboration Sidebar */}
+        <div className="w-full lg:w-80 flex flex-col gap-6">
+          <LocalAssistant currentUser={user!} projectContext={activeProject} />
+          <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
+            <div className="flex items-center gap-2 mb-4">
+              <Smartphone className="w-4 h-4 text-emerald-600" />
+              <h4 className="font-bold text-slate-800 text-sm">WhatsApp DPR Simulation</h4>
+            </div>
+            <p className="text-[10px] text-slate-500 mb-3 leading-relaxed">
+              Paste a message from your site WhatsApp group to automatically extract progress data.
+            </p>
+            <textarea
+              placeholder="e.g. Today we completed 50sqm of brickwork at block A. 5 masons were present."
+              value={whatsappMessage}
+              onChange={(e) => setWhatsappMessage(e.target.value)}
+              className="w-full p-3 text-xs border border-slate-200 rounded-lg focus:ring-2 focus:ring-emerald-500 outline-none h-24 resize-none mb-3"
+            />
+            <button
+              onClick={handleSimulateWhatsApp}
+              disabled={isSimulatingWhatsApp || !whatsappMessage.trim()}
+              className="w-full flex items-center justify-center gap-2 bg-emerald-600 text-white py-2 rounded-lg text-xs font-bold hover:bg-emerald-700 transition-all disabled:opacity-50"
+            >
+              {isSimulatingWhatsApp ? <Loader2 className="w-3 h-3 animate-spin" /> : <Send className="w-3 h-3" />}
+              Process Message
+            </button>
+          </div>
+        </div>
+      </div>
+    </Layout>
+    </NotificationProvider>
+  );
+};
+
+export default App;

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:20-slim AS build
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM node:20-slim AS runtime
+
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=7860
+
+COPY package*.json ./
+RUN npm ci --omit=dev
+COPY --from=build /app/dist ./dist
+COPY server.ts ./server.ts
+
+EXPOSE 7860
+CMD ["npm", "start"]

README.md

@@ -0,0 +1,36 @@
+---
+title: BuildTrack Local
+emoji: 🏗️
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# BuildTrack Local
+
+A fully local construction project management system. The assistant, document suggestions, BOQ parsing, risk scoring, and project insights run with deterministic local logic inside the app. No Gemini, OpenAI, Anthropic, Hugging Face Inference API, or other hosted AI key is required.
+
+## Run Locally
+
+**Prerequisites:** Node.js 20+
+
+1. Install dependencies:
+   `npm install`
+2. Optional: copy [.env.example](.env.example) to `.env.local` and set `MONGODB_URI` or `JWT_SECRET`.
+3. Start the app:
+   `npm run dev`
+4. Open `http://localhost:7860` unless you set a different `PORT`.
+
+If MongoDB is not available, the server automatically uses an in-memory local database for the current session.
+
+## Deploy To Hugging Face Spaces
+
+Create a new Hugging Face Space using the **Docker** SDK, then upload this repository. The included [Dockerfile](Dockerfile) builds the Vite frontend and starts the local Express server on the Space port.
+
+No AI environment variables are needed. Optional variables:
+
+- `MONGODB_URI` - connect to your own MongoDB instance. Leave blank for in-memory storage.
+- `JWT_SECRET` - custom signing secret for login tokens.
+- `PORT` - Hugging Face sets this automatically.

components/AttendanceManager.tsx

@@ -0,0 +1,180 @@
+
+import React, { useState } from 'react';
+import { AttendanceRecord } from '../types';
+import { UserCheck, Search, Filter, Calendar, Clock, MapPin, MoreVertical, Loader2 } from 'lucide-react';
+
+interface AttendanceManagerProps {
+  attendance: AttendanceRecord[];
+}
+
+const AttendanceManager: React.FC<AttendanceManagerProps> = ({ attendance }) => {
+  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+  const [isCheckingIn, setIsCheckingIn] = useState(false);
+
+  const dailyAttendance = attendance.filter(a => a.date === selectedDate);
+
+  const stats = {
+    present: dailyAttendance.filter(a => a.status === 'PRESENT').length,
+    absent: dailyAttendance.filter(a => a.status === 'ABSENT').length,
+    total: dailyAttendance.length
+  };
+
+  const handleGpsCheckIn = () => {
+    setIsCheckingIn(true);
+    if ('geolocation' in navigator) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          setIsCheckingIn(false);
+          const { latitude, longitude } = position.coords;
+          alert(`GPS Check-in Successful!\nLat: ${latitude.toFixed(6)}\nLng: ${longitude.toFixed(6)}\nLocation verified with site geofence.`);
+        },
+        (error) => {
+          setIsCheckingIn(false);
+          alert(`Check-in failed: ${error.message}. Please ensure GPS is enabled.`);
+        },
+        { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
+      );
+    } else {
+      setIsCheckingIn(false);
+      alert('Geolocation is not supported by your browser.');
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
+        <div>
+           <h2 className="text-xl font-bold text-slate-800">Attendance & Labor</h2>
+           <p className="text-sm text-slate-500">Track workforce productivity and geofenced attendance.</p>
+        </div>
+        <button 
+           onClick={handleGpsCheckIn}
+           disabled={isCheckingIn}
+           className="flex items-center gap-2 bg-slate-800 text-white px-4 py-2 rounded-xl text-sm font-bold shadow-lg hover:bg-slate-900 transition-all disabled:opacity-50"
+        >
+          {isCheckingIn ? <Loader2 className="w-4 h-4 animate-spin" /> : <MapPin className="w-4 h-4" />}
+          {isCheckingIn ? 'Locating...' : 'GPS Check-In'}
+        </button>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center">
+              <UserCheck className="w-5 h-5" />
+            </div>
+            <div>
+              <p className="text-xs font-bold text-slate-400 uppercase">Present Today</p>
+              <p className="text-2xl font-black text-slate-800">{stats.present}</p>
+            </div>
+          </div>
+          <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
+            <div 
+              className="h-full bg-emerald-500" 
+              style={{ width: `${(stats.present / (stats.total || 1)) * 100}%` }} 
+            />
+          </div>
+        </div>
+
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center">
+              <Calendar className="w-5 h-5" />
+            </div>
+            <div>
+              <p className="text-xs font-bold text-slate-400 uppercase">Total Workforce</p>
+              <p className="text-2xl font-black text-slate-800">{stats.total}</p>
+            </div>
+          </div>
+          <p className="text-xs text-slate-500 font-medium">Across all categories</p>
+        </div>
+
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 bg-amber-50 text-amber-600 rounded-xl flex items-center justify-center">
+              <Clock className="w-5 h-5" />
+            </div>
+            <div>
+              <p className="text-xs font-bold text-slate-400 uppercase">Avg. Productivity</p>
+              <p className="text-2xl font-black text-slate-800">84%</p>
+            </div>
+          </div>
+          <p className="text-xs text-slate-500 font-medium">Based on DPR work achieved</p>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+        <div className="p-6 border-b border-slate-100 flex flex-wrap items-center justify-between gap-4">
+          <h3 className="font-bold text-slate-800">Daily Attendance Log</h3>
+          <div className="flex items-center gap-3">
+            <input 
+              type="date" 
+              value={selectedDate}
+              onChange={(e) => setSelectedDate(e.target.value)}
+              className="px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
+              <Filter className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="w-full text-left border-collapse">
+            <thead>
+              <tr className="bg-slate-50/50">
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Worker Name</th>
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Category</th>
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Check In</th>
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Check Out</th>
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Status</th>
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider"></th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {dailyAttendance.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="px-6 py-12 text-center text-slate-500 text-sm italic">
+                    No attendance records for this date
+                  </td>
+                </tr>
+              ) : (
+                dailyAttendance.map(record => (
+                  <tr key={record.id} className="hover:bg-slate-50/50 transition-colors">
+                    <td className="px-6 py-4">
+                      <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center text-xs font-bold text-slate-600">
+                          {record.workerName.charAt(0)}
+                        </div>
+                        <span className="text-sm font-bold text-slate-800">{record.workerName}</span>
+                      </div>
+                    </td>
+                    <td className="px-6 py-4">
+                      <span className="text-xs font-medium text-slate-500">{record.category}</span>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-slate-600">{record.checkIn}</td>
+                    <td className="px-6 py-4 text-sm text-slate-600">{record.checkOut || '--:--'}</td>
+                    <td className="px-6 py-4">
+                      <span className={`px-2 py-1 rounded-full text-[10px] font-bold uppercase ${
+                        record.status === 'PRESENT' ? 'text-emerald-600 bg-emerald-50' : 
+                        record.status === 'ABSENT' ? 'text-red-600 bg-red-50' : 'text-amber-600 bg-amber-50'
+                      }`}>
+                        {record.status}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <button className="p-1 text-slate-400 hover:text-slate-600">
+                        <MoreVertical className="w-4 h-4" />
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AttendanceManager;

components/Auth.tsx

@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from 'react';
+import { UserRole } from '../types';
+import { LogIn, ShieldCheck, Construction, Calculator, Briefcase, User as UserIcon, Mail, Lock } from 'lucide-react';
+
+interface AuthProps {
+  onUserChange: (user: any | null) => void;
+}
+
+const Auth: React.FC<AuthProps> = ({ onUserChange }) => {
+  const [isSignup, setIsSignup] = useState(false);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [role, setRole] = useState<UserRole>('DIRECTOR');
+  const [error, setError] = useState<string | null>(null);
+  
+  // Auto-login if token exists
+  useEffect(() => {
+    const token = localStorage.getItem('auth_token');
+    if (token) {
+      fetch('/api/auth/me', {
+        headers: { 'Authorization': `Bearer ${token}` }
+      })
+        .then(res => {
+          if (!res.ok) throw new Error("Invalid token");
+          return res.json();
+        })
+        .then(data => onUserChange(data.user))
+        .catch(err => {
+          console.error("Auto-login failed:", err);
+          localStorage.removeItem('auth_token');
+          localStorage.removeItem('local_user_uid');
+        });
+    }
+  }, [onUserChange]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    
+    try {
+      const endpoint = isSignup ? '/api/auth/signup' : '/api/auth/login';
+      const body = isSignup 
+        ? { name, email, password, role }
+        : { email, password };
+        
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      });
+      
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || (isSignup ? "Signup failed" : "Login failed"));
+
+      if (!isSignup) {
+        if (data.token && data.user) {
+          localStorage.setItem('auth_token', data.token);
+          localStorage.setItem('local_user_uid', data.user.uid);
+          onUserChange(data.user);
+        }
+      } else {
+        setIsSignup(false);
+        alert("Signup successful! Please login.");
+      }
+    } catch (e: any) {
+      setError(e.message);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-slate-50 p-4 font-sans">
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-slate-200">
+        <div className="p-8">
+          <div className="text-center mb-8">
+            <div className="w-16 h-16 bg-blue-600 text-white rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg rotate-3">
+              <Construction className="w-8 h-8" />
+            </div>
+            <h1 className="text-2xl font-bold text-slate-900 mb-2 leading-tight font-heading">BuildTrack</h1>
+            <p className="text-slate-500 text-sm">{isSignup ? 'Create an account to begin' : 'Welcome back'}</p>
+          </div>
+          
+          {error && <div className="mb-4 p-3 bg-red-50 text-red-600 text-sm rounded-lg">{error}</div>}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {isSignup && (
+              <div className="space-y-1">
+                <label className="text-xs font-bold text-slate-700 uppercase tracking-wider ml-1">Your Name</label>
+                <div className="relative">
+                  <UserIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                  <input
+                    type="text"
+                    required
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-600 outline-none text-sm transition-all"
+                    placeholder="Enter your name"
+                  />
+                </div>
+              </div>
+            )}
+            
+            <div className="space-y-1">
+              <label className="text-xs font-bold text-slate-700 uppercase tracking-wider ml-1">Email</label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                <input
+                  type="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-600 outline-none text-sm transition-all"
+                  placeholder="Enter email"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-1">
+              <label className="text-xs font-bold text-slate-700 uppercase tracking-wider ml-1">Password</label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                <input
+                  type="password"
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-600 outline-none text-sm transition-all"
+                  placeholder="Enter password"
+                />
+              </div>
+            </div>
+
+            {isSignup && (
+              <div className="space-y-1 mt-4">
+                <label className="text-xs font-bold text-slate-700 uppercase tracking-wider ml-1">Select Role</label>
+                <div className="grid grid-cols-2 gap-2 mt-2">
+                  {[
+                    { r: 'DIRECTOR', icon: <ShieldCheck className="w-4 h-4" /> },
+                    { r: 'MANAGER', icon: <Briefcase className="w-4 h-4" /> },
+                    { r: 'ENGINEER', icon: <Construction className="w-4 h-4" /> },
+                    { r: 'ACCOUNTANT', icon: <Calculator className="w-4 h-4" /> }
+                  ].map((item) => (
+                    <button
+                      key={item.r}
+                      type="button"
+                      onClick={() => setRole(item.r as UserRole)}
+                      className={`flex items-center gap-2 p-3 rounded-xl border text-xs font-bold transition-all ${
+                        role === item.r 
+                          ? 'bg-blue-50 border-blue-600 text-blue-700' 
+                          : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
+                      }`}
+                    >
+                      {item.icon}
+                      {item.r}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              className="w-full flex items-center justify-center gap-2 bg-slate-900 text-white font-bold py-3 px-4 rounded-xl hover:bg-slate-800 transition-all shadow-lg active:scale-95 mt-6"
+            >
+              <LogIn className="w-4 h-4" />
+              {isSignup ? 'Create Account' : 'Enter Workspace'}
+            </button>
+            <button
+                type="button"
+                onClick={() => setIsSignup(!isSignup)}
+                className="w-full text-slate-500 py-3 text-sm hover:underline mt-2"
+            >
+                {isSignup ? 'Already have an account? Login' : 'Need an account? Sign up'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Auth;

components/BimViewer.tsx

@@ -0,0 +1,148 @@
+
+import React from 'react';
+import { BimModel } from '../types';
+import { Box, Layers, Maximize2, RotateCcw, ZoomIn, ZoomOut, Search, Info, Settings, Eye, EyeOff } from 'lucide-react';
+
+interface BimViewerProps {
+  models: BimModel[];
+}
+
+const BimViewer: React.FC<BimViewerProps> = ({ models }) => {
+  const [selectedModel, setSelectedModel] = React.useState(models[0] || null);
+  const [layers, setLayers] = React.useState([
+    { id: 'arch', name: 'Architectural', visible: true },
+    { id: 'struct', name: 'Structural', visible: true },
+    { id: 'mep', name: 'MEP', visible: false },
+    { id: 'elec', name: 'Electrical', visible: false },
+  ]);
+
+  const toggleLayer = (id: string) => {
+    setLayers(layers.map(l => l.id === id ? { ...l, visible: !l.visible } : l));
+  };
+
+  return (
+    <div className="h-[calc(100vh-12rem)] flex flex-col lg:flex-row gap-6">
+      {/* Model List & Layers */}
+      <div className="w-full lg:w-80 flex flex-col gap-6 shrink-0">
+        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-full">
+          <div className="p-4 border-b border-slate-100 bg-slate-50/50">
+            <h3 className="font-bold text-slate-800 flex items-center gap-2">
+              <Box className="w-4 h-4 text-blue-600" />
+              BIM Models
+            </h3>
+          </div>
+          
+          <div className="flex-1 overflow-y-auto p-4 space-y-3">
+            {models.map(model => (
+              <button
+                key={model.id}
+                onClick={() => setSelectedModel(model)}
+                className={`w-full p-3 rounded-xl border text-left transition-all ${
+                  selectedModel?.id === model.id 
+                    ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-500/10' 
+                    : 'border-slate-200 hover:border-slate-300'
+                }`}
+              >
+                <p className="text-sm font-bold text-slate-800 truncate">{model.name}</p>
+                <div className="flex items-center justify-between mt-1">
+                  <span className="text-[10px] font-bold text-slate-400 uppercase">v{model.version}</span>
+                  <span className="text-[10px] text-slate-400">{model.uploadedAt}</span>
+                </div>
+              </button>
+            ))}
+          </div>
+
+          <div className="p-4 border-t border-slate-100 bg-slate-50/50">
+            <h4 className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">Model Layers</h4>
+            <div className="space-y-2">
+              {layers.map(layer => (
+                <button
+                  key={layer.id}
+                  onClick={() => toggleLayer(layer.id)}
+                  className="w-full flex items-center justify-between p-2 hover:bg-white rounded-lg transition-all group"
+                >
+                  <div className="flex items-center gap-2">
+                    <Layers className={`w-3 h-3 ${layer.visible ? 'text-blue-600' : 'text-slate-300'}`} />
+                    <span className={`text-xs font-medium ${layer.visible ? 'text-slate-700' : 'text-slate-400'}`}>
+                      {layer.name}
+                    </span>
+                  </div>
+                  {layer.visible ? (
+                    <Eye className="w-3 h-3 text-blue-500" />
+                  ) : (
+                    <EyeOff className="w-3 h-3 text-slate-300" />
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Viewer Stage */}
+      <div className="flex-1 bg-slate-900 rounded-2xl shadow-2xl relative overflow-hidden group">
+        {/* Mock 3D Canvas */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="relative w-full h-full flex items-center justify-center">
+            {/* Simple CSS 3D Cube / Shape to simulate a model */}
+            <div className="w-64 h-64 relative preserve-3d animate-slow-spin">
+              <div className="absolute inset-0 border-2 border-blue-500/30 bg-blue-500/10 backdrop-blur-sm rounded-lg transform rotate-x-45 rotate-y-45"></div>
+              <div className="absolute inset-0 border-2 border-blue-400/20 bg-blue-400/5 backdrop-blur-sm rounded-lg transform -rotate-x-45 -rotate-y-45"></div>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <Box className="w-32 h-32 text-blue-500/20 animate-pulse" />
+              </div>
+            </div>
+            
+            {/* Grid Lines */}
+            <div className="absolute inset-0 opacity-10 pointer-events-none" 
+                 style={{ backgroundImage: 'radial-gradient(circle, #3b82f6 1px, transparent 1px)', backgroundSize: '40px 40px' }}></div>
+          </div>
+        </div>
+
+        {/* Viewer Controls */}
+        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-slate-800/80 backdrop-blur-md p-2 rounded-2xl border border-slate-700 shadow-2xl transition-all opacity-0 group-hover:opacity-100">
+          <button className="p-2 text-slate-300 hover:text-white hover:bg-slate-700 rounded-xl transition-all"><ZoomIn className="w-4 h-4" /></button>
+          <button className="p-2 text-slate-300 hover:text-white hover:bg-slate-700 rounded-xl transition-all"><ZoomOut className="w-4 h-4" /></button>
+          <div className="w-px h-4 bg-slate-700 mx-1"></div>
+          <button className="p-2 text-slate-300 hover:text-white hover:bg-slate-700 rounded-xl transition-all"><RotateCcw className="w-4 h-4" /></button>
+          <button className="p-2 text-slate-300 hover:text-white hover:bg-slate-700 rounded-xl transition-all"><Maximize2 className="w-4 h-4" /></button>
+          <div className="w-px h-4 bg-slate-700 mx-1"></div>
+          <button className="p-2 text-slate-300 hover:text-white hover:bg-slate-700 rounded-xl transition-all"><Settings className="w-4 h-4" /></button>
+        </div>
+
+        {/* Info Overlay */}
+        <div className="absolute top-6 left-6 bg-slate-800/80 backdrop-blur-md p-4 rounded-xl border border-slate-700 shadow-xl">
+          <p className="text-[10px] font-bold text-blue-400 uppercase tracking-widest mb-1">Active Model</p>
+          <p className="text-sm font-bold text-white">{selectedModel?.name || 'No Model Selected'}</p>
+          <div className="flex items-center gap-4 mt-3">
+            <div className="flex items-center gap-1.5">
+              <div className="w-2 h-2 rounded-full bg-emerald-500"></div>
+              <span className="text-[10px] text-slate-400">FPS: 60</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <div className="w-2 h-2 rounded-full bg-blue-500"></div>
+              <span className="text-[10px] text-slate-400">Vertices: 1.2M</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Search / Navigation */}
+        <div className="absolute top-6 right-6 flex items-center gap-2">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3 h-3 text-slate-400" />
+            <input 
+              type="text" 
+              placeholder="Find element..." 
+              className="bg-slate-800/80 backdrop-blur-md border border-slate-700 rounded-xl pl-9 pr-4 py-2 text-xs text-white outline-none focus:ring-2 focus:ring-blue-500 w-48"
+            />
+          </div>
+          <button className="p-2 bg-slate-800/80 backdrop-blur-md border border-slate-700 text-slate-300 hover:text-white rounded-xl transition-all">
+            <Info className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BimViewer;

components/ChangeOrderManager.tsx

@@ -0,0 +1,117 @@
+
+import React from 'react';
+import { ChangeOrder } from '../types';
+import { FilePlus, Search, Filter, Plus, MoreVertical, DollarSign, Calendar, CheckCircle2, XCircle, Clock } from 'lucide-react';
+
+interface ChangeOrderManagerProps {
+  changeOrders: ChangeOrder[];
+}
+
+const ChangeOrderManager: React.FC<ChangeOrderManagerProps> = ({ changeOrders }) => {
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const filteredOrders = changeOrders.filter(o => 
+    o.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+    o.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'APPROVED': return <CheckCircle2 className="w-4 h-4 text-emerald-600" />;
+      case 'REJECTED': return <XCircle className="w-4 h-4 text-red-600" />;
+      case 'PENDING': return <Clock className="w-4 h-4 text-amber-600" />;
+      default: return null;
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'APPROVED': return 'text-emerald-600 bg-emerald-50 border-emerald-100';
+      case 'REJECTED': return 'text-red-600 bg-red-50 border-red-100';
+      case 'PENDING': return 'text-amber-600 bg-amber-50 border-amber-100';
+      default: return 'text-slate-600 bg-slate-50 border-slate-100';
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-4 flex-1 max-w-md">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search change orders..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+            />
+          </div>
+          <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
+            <Filter className="w-5 h-5" />
+          </button>
+        </div>
+        <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
+          <Plus className="w-4 h-4" />
+          New Change Order
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4">
+        {filteredOrders.length === 0 ? (
+          <div className="py-20 text-center bg-white rounded-2xl border border-dashed border-slate-300">
+            <FilePlus className="w-12 h-12 text-slate-300 mx-auto mb-4" />
+            <p className="text-slate-500 font-medium">No change orders found</p>
+          </div>
+        ) : (
+          filteredOrders.map(order => (
+            <div key={order.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm hover:border-blue-300 transition-all group p-6">
+              <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-3 mb-2">
+                    <span className={`px-2 py-1 rounded-full border text-[10px] font-bold uppercase tracking-wider flex items-center gap-1.5 ${getStatusColor(order.status)}`}>
+                      {getStatusIcon(order.status)}
+                      {order.status}
+                    </span>
+                    <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{order.id}</span>
+                  </div>
+                  <h3 className="font-bold text-slate-800 text-lg mb-1 truncate">{order.title}</h3>
+                  <p className="text-sm text-slate-500 line-clamp-2">{order.description}</p>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-8 shrink-0">
+                  <div className="space-y-1">
+                    <span className="text-[10px] font-bold text-slate-400 uppercase block">Estimated Cost</span>
+                    <div className="flex items-center gap-1 text-slate-800 font-bold">
+                      <DollarSign className="w-4 h-4 text-slate-400" />
+                      <span>৳{(order.estimatedCost / 100000).toFixed(1)}L</span>
+                    </div>
+                  </div>
+
+                  <div className="space-y-1">
+                    <span className="text-[10px] font-bold text-slate-400 uppercase block">Requested Date</span>
+                    <div className="flex items-center gap-1 text-slate-600 font-medium text-sm">
+                      <Calendar className="w-4 h-4 text-slate-400" />
+                      <span>{order.date}</span>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <button className="px-4 py-2 bg-slate-900 text-white text-xs font-bold rounded-xl hover:bg-slate-800 transition-all">
+                      View Details
+                    </button>
+                    <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
+                      <MoreVertical className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ChangeOrderManager;

components/ClientPortal.tsx

@@ -0,0 +1,147 @@
+
+import React from 'react';
+import { ProjectState } from '../types';
+import { Globe, Camera, CheckCircle2, Calendar, TrendingUp, FileText, MessageSquare } from 'lucide-react';
+
+interface ClientPortalProps {
+  project: ProjectState;
+}
+
+const ClientPortal: React.FC<ClientPortalProps> = ({ project }) => {
+  const completedMilestones = project.milestones.filter(m => m.status === 'COMPLETED');
+  const progress = (completedMilestones.length / (project.milestones.length || 1)) * 100;
+
+  return (
+    <div className="space-y-8 max-w-5xl mx-auto">
+      {/* Client Welcome Header */}
+      <div className="bg-slate-900 rounded-3xl p-8 text-white relative overflow-hidden">
+        <div className="relative z-10">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center">
+              <Globe className="w-6 h-6" />
+            </div>
+            <span className="text-sm font-bold text-blue-400 uppercase tracking-widest">Client Transparency Portal</span>
+          </div>
+          <h1 className="text-3xl font-bold mb-2">Welcome back to {project.name}</h1>
+          <p className="text-slate-400 max-w-xl">
+            Track your project's progress, view site photos, and download official reports in real-time.
+          </p>
+        </div>
+        <div className="absolute top-0 right-0 w-64 h-64 bg-blue-600/20 blur-[100px] rounded-full -mr-32 -mt-32"></div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Progress Overview */}
+        <div className="md:col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
+          <div className="flex items-center justify-between mb-6">
+            <h3 className="font-bold text-slate-800">Overall Progress</h3>
+            <span className="text-2xl font-black text-blue-600">{progress.toFixed(0)}%</span>
+          </div>
+          <div className="w-full bg-slate-100 h-4 rounded-full overflow-hidden mb-8">
+            <div 
+              className="h-full bg-blue-600 transition-all duration-1000" 
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+            <div className="p-4 bg-slate-50 rounded-2xl">
+              <p className="text-[10px] font-bold text-slate-400 uppercase mb-1">Start Date</p>
+              <p className="text-sm font-bold text-slate-800">{project.startDate}</p>
+            </div>
+            <div className="p-4 bg-slate-50 rounded-2xl">
+              <p className="text-[10px] font-bold text-slate-400 uppercase mb-1">Est. Completion</p>
+              <p className="text-sm font-bold text-slate-800">{project.endDate}</p>
+            </div>
+            <div className="p-4 bg-slate-50 rounded-2xl">
+              <p className="text-[10px] font-bold text-slate-400 uppercase mb-1">Milestones</p>
+              <p className="text-sm font-bold text-slate-800">{completedMilestones.length}/{project.milestones.length}</p>
+            </div>
+            <div className="p-4 bg-slate-50 rounded-2xl">
+              <p className="text-[10px] font-bold text-slate-400 uppercase mb-1">Site Photos</p>
+              <p className="text-sm font-bold text-slate-800">{project.photoLogs?.length || 0}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 space-y-4">
+          <h3 className="font-bold text-slate-800 mb-2">Quick Actions</h3>
+          <button className="w-full flex items-center justify-between p-3 bg-slate-50 hover:bg-blue-50 rounded-xl transition-all group">
+            <div className="flex items-center gap-3">
+              <FileText className="w-4 h-4 text-slate-400 group-hover:text-blue-600" />
+              <span className="text-sm font-bold text-slate-700">Latest Report</span>
+            </div>
+            <CheckCircle2 className="w-4 h-4 text-emerald-500" />
+          </button>
+          <button className="w-full flex items-center justify-between p-3 bg-slate-50 hover:bg-blue-50 rounded-xl transition-all group">
+            <div className="flex items-center gap-3">
+              <MessageSquare className="w-4 h-4 text-slate-400 group-hover:text-blue-600" />
+              <span className="text-sm font-bold text-slate-700">Contact Manager</span>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      {/* Recent Site Photos */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="font-bold text-slate-800 flex items-center gap-2">
+            <Camera className="w-5 h-5 text-blue-600" />
+            Recent Site Photos
+          </h3>
+          <button className="text-sm font-bold text-blue-600 hover:underline">View All</button>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {project.photoLogs?.slice(0, 4).map(photo => (
+            <div key={photo.id} className="aspect-square rounded-2xl overflow-hidden border border-slate-200 shadow-sm group relative">
+              <img 
+                src={photo.url} 
+                alt={photo.caption} 
+                className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+                referrerPolicy="no-referrer"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity p-4 flex flex-col justify-end">
+                <p className="text-white text-[10px] font-medium">{photo.caption}</p>
+                <p className="text-white/70 text-[8px]">{photo.createdAt}</p>
+              </div>
+            </div>
+          )) || (
+            <div className="col-span-full py-12 text-center bg-slate-50 rounded-2xl border border-dashed border-slate-300">
+              <p className="text-slate-400 text-sm">No photos uploaded yet</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Milestone Timeline */}
+      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
+        <h3 className="font-bold text-slate-800 mb-6 flex items-center gap-2">
+          <Calendar className="w-5 h-5 text-blue-600" />
+          Project Milestones
+        </h3>
+        <div className="space-y-6 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-0.5 before:bg-slate-100">
+          {project.milestones.map((milestone, idx) => (
+            <div key={milestone.id} className="flex gap-4 relative">
+              <div className={`w-6 h-6 rounded-full border-4 border-white shadow-sm shrink-0 z-10 ${
+                milestone.status === 'COMPLETED' ? 'bg-emerald-500' : 
+                milestone.status === 'AT_RISK' ? 'bg-red-500' : 'bg-slate-300'
+              }`} />
+              <div className="flex-1 pb-6 border-b border-slate-50 last:border-0 last:pb-0">
+                <div className="flex items-center justify-between mb-1">
+                  <h4 className={`text-sm font-bold ${milestone.status === 'COMPLETED' ? 'text-slate-800' : 'text-slate-500'}`}>
+                    {milestone.title}
+                  </h4>
+                  <span className="text-[10px] font-bold text-slate-400">{milestone.date}</span>
+                </div>
+                <p className="text-xs text-slate-500">{milestone.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClientPortal;

components/Collaboration.tsx

@@ -0,0 +1,204 @@
+import React, { useState, useEffect } from 'react';
+import { Comment, Notification, User } from '../types';
+import { MessageSquare, Bell, Send, CheckCircle2, User as UserIcon, Clock, Trash2 } from 'lucide-react';
+import { useLocalCollection } from '../hooks/useLocalCollection';
+
+interface CollaborationProps {
+  projectId: string;
+  targetId: string;
+  targetType: 'DOCUMENT' | 'TASK';
+  currentUser: User;
+}
+
+export const CommentSection: React.FC<CollaborationProps> = ({ projectId, targetId, targetType, currentUser }) => {
+  const { data: allComments, add: addComment, remove: removeComment } = useLocalCollection<Comment & { id: string }>(`comments_${projectId}`);
+  const [newComment, setNewComment] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Derive sorted & filtered comments
+  const comments = allComments
+    .filter(c => c.targetId === targetId && c.targetType === targetType)
+    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newComment.trim() || !currentUser) return;
+
+    setIsLoading(true);
+    const commentId = `COMM-${Date.now()}`;
+    const commentData: Comment & { id: string } = {
+      id: commentId,
+      targetId,
+      targetType,
+      authorUid: currentUser.uid,
+      authorName: currentUser.name,
+      text: newComment.trim(),
+      createdAt: new Date().toISOString()
+    };
+    
+    await addComment(commentData);
+    
+    setNewComment('');
+    setIsLoading(false);
+  };
+
+  const handleDelete = async (commentId: string) => {
+    await removeComment(commentId);
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm">
+      <div className="px-4 py-3 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <MessageSquare className="w-4 h-4 text-blue-600" />
+          <h4 className="font-bold text-slate-800 text-sm">Discussion</h4>
+        </div>
+        <span className="text-xs font-medium text-slate-500 bg-slate-200 px-2 py-0.5 rounded-full">
+          {comments.length}
+        </span>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {comments.length > 0 ? (
+          comments.map((comment) => (
+            <div key={comment.id} className="flex gap-3 group">
+              <div className="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0 font-bold text-xs">
+                {comment.authorName.charAt(0)}
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center justify-between mb-1">
+                  <p className="text-xs font-bold text-slate-900">{comment.authorName}</p>
+                  <div className="flex items-center gap-2">
+                    <p className="text-[10px] text-slate-400 flex items-center gap-1">
+                      <Clock className="w-2.5 h-2.5" />
+                      {new Date(comment.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                    </p>
+                    {currentUser?.uid === comment.authorUid && (
+                      <button 
+                        onClick={() => handleDelete(comment.id)}
+                        className="text-slate-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
+                      >
+                        <Trash2 className="w-3 h-3" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+                <div className="bg-slate-50 p-3 rounded-2xl rounded-tl-none border border-slate-100">
+                  <p className="text-sm text-slate-700 leading-relaxed">{comment.text}</p>
+                </div>
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="flex flex-col items-center justify-center h-full text-slate-400 opacity-50 py-8">
+            <MessageSquare className="w-10 h-10 mb-2" />
+            <p className="text-xs">No comments yet. Start the conversation!</p>
+          </div>
+        )}
+      </div>
+
+      <form onSubmit={handleSubmit} className="p-3 border-t border-slate-100 bg-white">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Write a comment..."
+            value={newComment}
+            onChange={(e) => setNewComment(e.target.value)}
+            disabled={isLoading}
+            className="w-full pl-4 pr-12 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+          />
+          <button
+            type="submit"
+            disabled={!newComment.trim() || isLoading}
+            className="absolute right-1.5 top-1/2 transform -translate-y-1/2 p-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all disabled:opacity-50 disabled:bg-slate-400"
+          >
+            <Send className="w-4 h-4" />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export const NotificationCenter: React.FC<{ uid: string }> = ({ uid }) => {
+  const { data: notifications, update: updateNotif } = useLocalCollection<Notification & { id: string }>(`notifications_${uid}`);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const markAsRead = async (id: string) => {
+    updateNotif(id, { isRead: true });
+  };
+
+  const unreadCount = notifications.filter(n => !n.isRead).length;
+
+  return (
+    <div className="relative">
+      <button 
+        onClick={() => setIsOpen(!isOpen)}
+        className="relative p-2 text-slate-500 hover:bg-slate-100 rounded-full transition-all"
+      >
+        <Bell className="w-5 h-5" />
+        {unreadCount > 0 && (
+          <span className="absolute top-1.5 right-1.5 w-4 h-4 bg-red-500 text-white text-[10px] font-bold flex items-center justify-center rounded-full border-2 border-white">
+            {unreadCount}
+          </span>
+        )}
+      </button>
+
+      {isOpen && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
+          <div className="absolute right-0 mt-2 w-80 bg-white rounded-2xl shadow-2xl border border-slate-200 z-50 overflow-hidden animate-in fade-in zoom-in duration-200 origin-top-right">
+            <div className="px-4 py-3 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
+              <h4 className="font-bold text-slate-800 text-sm">Notifications</h4>
+              {unreadCount > 0 && (
+                <span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
+                  {unreadCount} New
+                </span>
+              )}
+            </div>
+            <div className="max-h-[400px] overflow-y-auto">
+              {notifications.length > 0 ? (
+                notifications.map((n) => (
+                  <div 
+                    key={n.id} 
+                    onClick={() => markAsRead(n.id)}
+                    className={`p-4 border-b border-slate-50 hover:bg-slate-50 transition-all cursor-pointer flex gap-3 ${!n.isRead ? 'bg-blue-50/30' : ''}`}
+                  >
+                    <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
+                      n.type === 'TASK_ASSIGNED' ? 'bg-indigo-100 text-indigo-600' :
+                      n.type === 'TASK_COMPLETED' ? 'bg-emerald-100 text-emerald-600' :
+                      n.type === 'DOC_UPLOADED' ? 'bg-blue-100 text-blue-600' : 'bg-slate-100 text-slate-600'
+                    }`}>
+                      {n.type === 'TASK_ASSIGNED' ? <UserIcon className="w-4 h-4" /> :
+                       n.type === 'TASK_COMPLETED' ? <CheckCircle2 className="w-4 h-4" /> :
+                       n.type === 'DOC_UPLOADED' ? <MessageSquare className="w-4 h-4" /> : <Bell className="w-4 h-4" />}
+                    </div>
+                    <div className="flex-1">
+                      <p className={`text-xs font-bold ${!n.isRead ? 'text-slate-900' : 'text-slate-600'}`}>{n.title}</p>
+                      <p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{n.message}</p>
+                      <p className="text-[10px] text-slate-400 mt-2 flex items-center gap-1">
+                        <Clock className="w-2.5 h-2.5" />
+                        {new Date(n.createdAt).toLocaleDateString()}
+                      </p>
+                    </div>
+                    {!n.isRead && <div className="w-2 h-2 bg-blue-500 rounded-full mt-1.5" />}
+                  </div>
+                ))
+              ) : (
+                <div className="p-8 text-center text-slate-400">
+                  <Bell className="w-10 h-10 mx-auto mb-2 opacity-20" />
+                  <p className="text-xs">All caught up!</p>
+                </div>
+              )}
+            </div>
+            <div className="p-3 bg-slate-50 text-center border-t border-slate-100">
+              <button className="text-[10px] font-bold text-slate-500 hover:text-blue-600 transition-colors uppercase tracking-widest">
+                View All Activity
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

components/Dashboard.tsx

@@ -0,0 +1,679 @@
+
+import React, { useState, useMemo } from 'react';
+import { ProjectState, Priority, AiSuggestion, BOQItem, DPR, RiskAssessment, WeatherForecast } from '../types';
+import { 
+  TrendingUp, 
+  Activity, 
+  AlertCircle, 
+  Wallet,
+  Sparkles,
+  Flag,
+  Zap,
+  Check,
+  Trash2,
+  Clock,
+  ArrowRight,
+  AlertTriangle,
+  Calendar,
+  ChevronRight,
+  BarChart3,
+  Sun,
+  ShieldAlert,
+  Leaf
+} from 'lucide-react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';
+import { generateProjectInsights, generatePredictiveRiskAssessment } from '../services/localAnalysisService';
+import ReactMarkdown from 'react-markdown';
+import RiskAssessmentComponent from './RiskAssessment';
+import WeatherWidget from './WeatherWidget';
+
+interface DashboardProps {
+  data: ProjectState;
+  onApplySuggestion: (suggestionId: string) => void;
+  onDismissSuggestion: (suggestionId: string) => void;
+  onUpdateProject?: (updater: (proj: ProjectState) => ProjectState) => void;
+}
+
+// Helper for Gantt Chart
+const getDaysDiff = (d1: string, d2: string) => {
+  const date1 = new Date(d1);
+  const date2 = new Date(d2);
+  return Math.max(1, (date2.getTime() - date1.getTime()) / (1000 * 3600 * 24));
+};
+
+const ProjectGantt: React.FC<{ data: ProjectState }> = ({ data }) => {
+  const projectStart = new Date(data.startDate);
+  const projectEnd = new Date(data.endDate);
+  const totalDuration = getDaysDiff(data.startDate, data.endDate);
+  
+  // Calculate Today's position relative to project duration
+  const today = new Date();
+  const todayPercent = Math.max(0, Math.min(100, (today.getTime() - projectStart.getTime()) / (projectEnd.getTime() - projectStart.getTime()) * 100));
+
+  const getPositionPercent = (dateStr: string) => {
+    const date = new Date(dateStr);
+    const diff = (date.getTime() - projectStart.getTime()) / (1000 * 3600 * 24);
+    return Math.max(0, Math.min(100, (diff / totalDuration) * 100));
+  };
+
+  // Derive Item Execution Windows from DPRs
+  const itemTimelines = useMemo(() => {
+    const timelines: { itemId: string; name: string; start: string; end: string; progress: number; priority: Priority; status: string }[] = [];
+    
+    // Only look at items that have started or are high priority
+    const activeItems = data.boq.filter(b => b.executedQty > 0 || b.priority === 'HIGH');
+
+    activeItems.forEach(item => {
+      const itemDprs = data.dprs.filter(d => d.linkedBoqId === item.id).sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+      
+      let startDate = itemDprs.length > 0 ? itemDprs[0].date : new Date().toISOString().split('T')[0];
+      let endDate = itemDprs.length > 0 ? itemDprs[itemDprs.length - 1].date : startDate;
+
+      // If only one DPR or duration is 0, give it a visual width (e.g. 15 days)
+      if (startDate === endDate) {
+         const end = new Date(startDate);
+         end.setDate(end.getDate() + 15);
+         endDate = end.toISOString().split('T')[0];
+      }
+
+      // If item hasn't started (no DPRs) but is High Priority, visualize it as "Planned" starting now
+      if (itemDprs.length === 0) {
+         startDate = new Date().toISOString().split('T')[0];
+         const end = new Date(startDate);
+         end.setDate(end.getDate() + 30);
+         endDate = end.toISOString().split('T')[0];
+      }
+
+      const progress = Math.min(100, (item.executedQty / item.plannedQty) * 100);
+      
+      let status = 'On Track';
+      if (progress < 100 && new Date(endDate) < today) status = 'Delayed';
+      if (progress >= 100) status = 'Completed';
+
+      timelines.push({
+        itemId: item.id,
+        name: item.description,
+        start: startDate,
+        end: endDate,
+        progress,
+        priority: item.priority || 'LOW',
+        status
+      });
+    });
+
+    return timelines.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()).slice(0, 10);
+  }, [data.boq, data.dprs]);
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
+      <div className="px-6 py-4 border-b border-slate-200 bg-slate-50/50 flex justify-between items-center">
+        <div className="flex items-center gap-2">
+           <BarChart3 className="w-5 h-5 text-blue-600" />
+           <h3 className="font-bold text-slate-900 tracking-tight">Timeline & Progress</h3>
+        </div>
+        <div className="flex items-center gap-3 text-[10px] font-bold uppercase tracking-wider text-slate-500">
+           <div className="flex items-center gap-1.5"><div className="w-2.5 h-2.5 rounded-full bg-blue-600"></div> High Priority</div>
+           <div className="flex items-center gap-1.5"><div className="w-2.5 h-2.5 rounded-full bg-blue-400"></div> Scheduled</div>
+           <div className="flex items-center gap-1.5 text-rose-500"><div className="w-2.5 h-0.5 bg-rose-500"></div> Today</div>
+        </div>
+      </div>
+      
+      <div className="p-6 overflow-x-auto">
+        <div className="min-w-[700px] relative">
+           {/* Timeline Header (Months) */}
+           <div className="flex border-b border-slate-200 pb-2 mb-4 text-xs text-slate-400 font-medium font-mono uppercase tracking-widest relative h-6">
+              <span className="absolute left-0">{data.startDate}</span>
+              <span className="absolute left-1/2 -translate-x-1/2">Project Duration ({Math.ceil(totalDuration)} Days)</span>
+              <span className="absolute right-0">{data.endDate}</span>
+           </div>
+
+           {/* Grid Lines */}
+           <div className="absolute inset-0 top-8 pointer-events-none flex justify-between px-[1px]">
+              {[0, 25, 50, 75, 100].map(p => (
+                <div key={p} className="h-full w-px bg-slate-100 last:bg-transparent" style={{ left: `${p}%` }}></div>
+              ))}
+           </div>
+           
+           {/* Today Marker */}
+           <div className="absolute top-8 bottom-0 w-px border-l-2 border-red-400 border-dashed z-30 pointer-events-none" style={{ left: `${todayPercent}%` }}>
+               <div className="absolute -top-4 -translate-x-1/2 bg-red-50 text-red-600 text-[9px] font-bold px-1.5 py-0.5 rounded border border-red-100 uppercase tracking-wider">
+                   Today
+               </div>
+           </div>
+
+           {/* Milestones Track */}
+           <div className="h-12 relative mb-6">
+              <div className="absolute top-1/2 left-0 w-full h-1 bg-slate-100 -translate-y-1/2 rounded-full"></div>
+              {data.milestones.map(m => {
+                const pos = getPositionPercent(m.date);
+                return (
+                  <div 
+                    key={m.id} 
+                    className="absolute top-1/2 -translate-y-1/2 group z-20 cursor-pointer" 
+                    style={{ left: `${pos}%` }}
+                  >
+                    <div className={`w-3.5 h-3.5 rotate-45 border-2 border-white shadow-md transition-transform hover:scale-125 ${
+                      m.status === 'COMPLETED' ? 'bg-emerald-500' : 
+                      m.status === 'AT_RISK' ? 'bg-red-500' : 'bg-slate-400'
+                    }`}></div>
+                    
+                    {/* Tooltip for Milestone */}
+                    <div className="absolute top-6 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 bg-slate-800 text-white text-[10px] px-2 py-1.5 rounded whitespace-nowrap transition-opacity pointer-events-none z-40 shadow-xl">
+                      <div className="font-bold">{m.title}</div>
+                      <div className="text-slate-300">{m.date} • {m.status}</div>
+                    </div>
+                    
+                    {/* Date label always visible if needed, but keeping it clean */}
+                    <div className="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] font-bold text-slate-400 whitespace-nowrap opacity-50 group-hover:opacity-100">
+                        {m.date.split('-').slice(1).join('/')}
+                    </div>
+                  </div>
+                );
+              })}
+           </div>
+
+             {/* Items Tracks */}
+           <div className="space-y-4 pt-4">
+              {itemTimelines.map(item => {
+                const left = getPositionPercent(item.start);
+                const width = Math.max(2, getPositionPercent(item.end) - left); // Min width 2%
+                
+                return (
+                  <div key={item.itemId} className="relative h-14 group">
+                     <div className="flex justify-between items-center text-xs mb-1.5 px-1">
+                        <div className="flex flex-col">
+                           <span className="font-bold text-slate-700 truncate max-w-[250px]" title={item.name}>{item.name}</span>
+                           <span className="text-[10px] text-slate-400 font-mono tracking-tighter uppercase">{item.start} — {item.end}</span>
+                        </div>
+                        <div className="flex items-center gap-3">
+                            <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${
+                                item.status === 'Completed' ? 'bg-emerald-50 text-emerald-700 border-emerald-100' :
+                                item.status === 'Delayed' ? 'bg-rose-50 text-rose-700 border-rose-100' :
+                                'bg-indigo-50 text-indigo-700 border-indigo-100'
+                            }`}>{item.status}</span>
+                            <span className="font-mono font-bold text-slate-800 text-sm">{item.progress.toFixed(0)}%</span>
+                        </div>
+                     </div>
+                     <div className="w-full h-4 bg-slate-100 rounded-lg overflow-hidden relative shadow-inner">
+                        {/* The Background Bar (Planned/Total Window) */}
+                        <div 
+                          className={`absolute h-full rounded-lg transition-all duration-500 flex items-center border border-white/20 ${
+                            item.priority === 'HIGH' ? 'bg-indigo-500/10' : 'bg-slate-300/10'
+                          }`}
+                          style={{ left: `${left}%`, width: `${width}%` }}
+                        ></div>
+
+                        {/* The Actual Progress Bar */}
+                        <div 
+                          className={`absolute h-full rounded-lg transition-all duration-700 shadow-sm flex items-center overflow-hidden border border-white/30 ${
+                            item.status === 'Delayed' ? 'bg-rose-500' :
+                            item.status === 'Completed' ? 'bg-emerald-500' :
+                            item.priority === 'HIGH' ? 'bg-indigo-600' : 'bg-blue-500'
+                          }`}
+                          style={{ left: `${left}%`, width: `${(width * item.progress) / 100}%` }}
+                        >
+                           {/* Glossy overlay */}
+                           <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent"></div>
+                           {/* Animated stripes if active */}
+                           {item.status !== 'Completed' && (
+                             <div className="absolute inset-0 opacity-20 bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)] bg-[length:20px_20px] animate-[pulse_2s_infinite]"></div>
+                           )}
+                        </div>
+                     </div>
+                     
+                     {/* Hover Details */}
+                     <div className="absolute -top-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 bg-slate-900 text-white text-[10px] px-3 py-2 rounded-lg z-40 pointer-events-none w-max shadow-2xl transition-all duration-200 transform group-hover:-translate-y-1">
+                        <div className="font-bold border-b border-slate-700 pb-1 mb-1">{item.name}</div>
+                        <div className="grid grid-cols-2 gap-x-4 gap-y-1">
+                            <div><span className="text-slate-400">Duration:</span> {getDaysDiff(item.start, item.end).toFixed(0)}d</div>
+                            <div><span className="text-slate-400">Progress:</span> {item.progress.toFixed(1)}%</div>
+                            <div><span className="text-slate-400">Start:</span> {item.start}</div>
+                            <div><span className="text-slate-400">End:</span> {item.end}</div>
+                        </div>
+                        <div className="absolute bottom-[-4px] left-1/2 -translate-x-1/2 w-2 h-2 bg-slate-900 rotate-45"></div>
+                     </div>
+                  </div>
+                );
+              })}
+              {itemTimelines.length === 0 && (
+                <div className="text-center py-8 text-xs text-slate-400 italic bg-slate-50/50 rounded border border-dashed border-slate-200">
+                  No active work timelines generated yet. Add DPRs to visualize progress.
+                </div>
+              )}
+           </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Dashboard: React.FC<DashboardProps> = ({ data, onApplySuggestion, onDismissSuggestion, onUpdateProject }) => {
+  const [insight, setInsight] = useState<string | null>(null);
+  const [loadingInsight, setLoadingInsight] = useState(false);
+  const [loadingRisk, setLoadingRisk] = useState(false);
+
+  // Calculate high-level metrics
+  const totalPlannedValue = data.boq.reduce((sum, item) => sum + (item.plannedQty * item.rate), 0);
+  const totalExecutedValue = data.boq.reduce((sum, item) => sum + (item.executedQty * item.rate), 0);
+  const progressPercentage = Math.round((totalExecutedValue / totalPlannedValue) * 100) || 0;
+  
+  const totalLiabilities = data.liabilities.reduce((sum, item) => sum + item.amount, 0);
+  const totalBilled = data.bills.filter(b => b.type === 'CLIENT_RA').reduce((sum, b) => sum + b.amount, 0);
+
+  // Calculate Pending Work for Key Points
+  const pendingHighPriorityItems = data.boq
+    .filter(item => item.priority === 'HIGH' && item.executedQty < item.plannedQty)
+    .map(item => ({
+      ...item,
+      pendingQty: item.plannedQty - item.executedQty,
+      pendingValue: (item.plannedQty - item.executedQty) * item.rate,
+      progress: (item.executedQty / item.plannedQty) * 100
+    }))
+    .sort((a, b) => b.pendingValue - a.pendingValue)
+    .slice(0, 5);
+
+  const chartData = [
+    { name: 'Planned', amount: totalPlannedValue },
+    { name: 'Executed', amount: totalExecutedValue },
+    { name: 'Billed', amount: totalBilled },
+    { name: 'Liabilities', amount: totalLiabilities },
+  ];
+
+  const handleGenerateInsights = async () => {
+    setLoadingInsight(true);
+    const result = await generateProjectInsights(data);
+    setInsight(result);
+    setLoadingInsight(false);
+  };
+
+  const handleGenerateRisks = async () => {
+    if (!onUpdateProject) return;
+    setLoadingRisk(true);
+    const result = await generatePredictiveRiskAssessment(data);
+    if (result) {
+      onUpdateProject(proj => ({ ...proj, riskAssessment: result }));
+    }
+    setLoadingRisk(false);
+  };
+
+  const getPriorityColor = (p: Priority) => {
+    switch(p) {
+      case 'HIGH': return 'bg-red-50 text-red-700 border-red-100';
+      case 'MEDIUM': return 'bg-amber-50 text-amber-700 border-amber-100';
+      case 'LOW': return 'bg-blue-50 text-blue-700 border-blue-100';
+      default: return 'bg-slate-50 text-slate-700 border-slate-100';
+    }
+  };
+
+  const pendingSuggestions = data.aiSuggestions.filter(s => s.status === 'PENDING');
+
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500">
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-3 mb-1">
+            <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Project Overview</h1>
+            <div className={`px-2 py-0.5 rounded text-[10px] font-bold border uppercase tracking-wider flex items-center gap-1 ${getPriorityColor(data.priority)}`}>
+              <Flag className="w-2.5 h-2.5" />
+              {data.priority} Priority
+            </div>
+          </div>
+          <p className="text-slate-500 font-medium">Monitoring and insights for <span className="text-slate-900">{data.name}</span></p>
+        </div>
+        <div className="flex items-center gap-3">
+          {onUpdateProject && (
+            <button 
+              onClick={handleGenerateRisks}
+              disabled={loadingRisk}
+              className="flex items-center gap-2 bg-slate-800 text-white px-4 py-2 rounded-lg hover:bg-slate-900 transition-colors shadow-sm text-sm font-medium disabled:opacity-50"
+            >
+              <ShieldAlert className="w-4 h-4" />
+              {loadingRisk ? 'Modeling Risks...' : 'Predict Risks'}
+            </button>
+          )}
+          <button 
+            onClick={handleGenerateInsights}
+            disabled={loadingInsight}
+            className="btn-primary flex items-center gap-2"
+          >
+            <Sparkles className="w-4 h-4" />
+            {loadingInsight ? 'Analyzing Data...' : 'AI Insights'}
+          </button>
+        </div>
+      </div>
+
+      {/* Mini Health Dashboard */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="card p-5 flex items-center gap-4">
+          <div className={`p-3 rounded-xl ${data.riskAssessment?.overallRiskScore && data.riskAssessment.overallRiskScore > 70 ? 'bg-red-50 text-red-600' : 'bg-emerald-50 text-emerald-600'}`}>
+            <ShieldAlert className="w-5 h-5" />
+          </div>
+          <div>
+            <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Risk Score</p>
+            <p className="text-xl font-bold text-slate-900">{data.riskAssessment?.overallRiskScore || 0}%</p>
+          </div>
+        </div>
+        <div className="card p-5 flex items-center gap-4">
+          <div className="p-3 bg-amber-50 text-amber-600 rounded-xl">
+             <Sun className="w-5 h-5" />
+          </div>
+          <div>
+            <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Weather Impact</p>
+            <p className="text-xl font-bold text-slate-900">
+              {data.weatherForecast?.find(f => f.impactOnSite !== 'NONE') ? 'Active Advisory' : 'Operational'}
+            </p>
+          </div>
+        </div>
+        <div className="card p-5 flex items-center gap-4 sm:col-span-2 lg:col-span-1">
+          <div className="p-3 bg-blue-50 text-blue-600 rounded-xl">
+             <Activity className="w-5 h-5" />
+          </div>
+          <div>
+            <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Execution Index</p>
+            <p className="text-xl font-bold text-slate-900">
+              {progressPercentage > 0 ? (progressPercentage / getDaysDiff(data.startDate, new Date().toISOString()) * 100).toFixed(1) : '0.0'}% avg.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+        <div className="xl:col-span-2 space-y-8">
+            {/* KPI Cards */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
+                <div className="card p-5 flex flex-col justify-between">
+                <div className="flex justify-between items-start">
+                    <div>
+                    <p className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Completed</p>
+                    <h3 className="text-2xl font-bold text-slate-900">{progressPercentage}%</h3>
+                    </div>
+                    <div className="p-2 bg-blue-50 text-blue-600 rounded-lg">
+                    <Activity className="w-4 h-4" />
+                    </div>
+                </div>
+                <div className="w-full bg-slate-100 h-1.5 mt-4 rounded-full overflow-hidden">
+                    <div className="bg-blue-600 h-full rounded-full" style={{ width: `${progressPercentage}%` }}></div>
+                </div>
+                </div>
+
+                <div className="card p-5 flex flex-col justify-between">
+                <div className="flex justify-between items-start">
+                    <div>
+                    <p className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Contract</p>
+                    <h3 className="text-2xl font-bold text-slate-900">৳{(data.contractValue / 1000000).toFixed(1)}M</h3>
+                    </div>
+                    <div className="p-2 bg-emerald-50 text-emerald-600 rounded-lg">
+                    <TrendingUp className="w-4 h-4" />
+                    </div>
+                </div>
+                <p className="text-[10px] text-slate-400 font-medium mt-4">Total Budget</p>
+                </div>
+
+                <div className="card p-5 flex flex-col justify-between">
+                <div className="flex justify-between items-start">
+                    <div>
+                    <p className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Billed</p>
+                    <h3 className="text-2xl font-bold text-slate-900">৳{totalBilled > 1000 ? (totalBilled / 1000).toFixed(0) + 'k' : totalBilled}</h3>
+                    </div>
+                    <div className="p-2 bg-violet-50 text-violet-600 rounded-lg">
+                    <Wallet className="w-4 h-4" />
+                    </div>
+                </div>
+                <p className="text-[10px] text-slate-400 font-medium mt-4">Certified Work</p>
+                </div>
+
+                <div className="card p-5 flex flex-col justify-between">
+                <div className="flex justify-between items-start">
+                    <div>
+                    <p className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Liabilities</p>
+                    <h3 className="text-2xl font-bold text-rose-600">৳{totalLiabilities > 1000 ? (totalLiabilities / 1000).toFixed(0) + 'k' : totalLiabilities}</h3>
+                    </div>
+                    <div className="p-2 bg-rose-50 text-rose-600 rounded-lg">
+                    <AlertCircle className="w-4 h-4" />
+                    </div>
+                </div>
+                <p className="text-[10px] text-slate-400 font-medium mt-4">Unpaid Sum</p>
+                </div>
+
+                <div className="card p-5 flex flex-col justify-between">
+                <div className="flex justify-between items-start">
+                    <div>
+                    <p className="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Emissions</p>
+                    <h3 className="text-2xl font-bold text-emerald-600">{data.sustainabilityMetrics?.carbonFootprint || 0}kg</h3>
+                    </div>
+                    <div className="p-2 bg-emerald-50 text-emerald-600 rounded-lg">
+                    <Leaf className="w-4 h-4" />
+                    </div>
+                </div>
+                <p className="text-[10px] text-slate-400 font-medium mt-4">Carbon Output</p>
+                </div>
+            </div>
+
+            {/* Gantt Chart Section */}
+            <ProjectGantt data={data} />
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              {data.riskAssessment && <RiskAssessmentComponent assessment={data.riskAssessment} />}
+              {data.weatherForecast && <WeatherWidget forecast={data.weatherForecast} />}
+            </div>
+
+            {/* KEY POINTS: Pending Progress Table */}
+            <div className="card overflow-hidden">
+               <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-slate-50/30">
+                  <div className="flex items-center gap-2">
+                     <AlertTriangle className="w-5 h-5 text-amber-500" />
+                     <h3 className="font-bold text-slate-900 tracking-tight">Critical Pending Work</h3>
+                  </div>
+                  <span className="text-[10px] font-bold bg-amber-50 text-amber-700 border border-amber-100 px-2 py-0.5 rounded-full uppercase tracking-wider">Action Needed</span>
+               </div>
+               <div className="overflow-x-auto">
+                 <table className="w-full text-left text-sm">
+                   <thead className="bg-slate-50/50 text-[10px] text-slate-500 font-bold uppercase tracking-widest border-b border-slate-200">
+                     <tr>
+                       <th className="px-6 py-4">Item Description</th>
+                       <th className="px-6 py-4 text-right">Balance</th>
+                       <th className="px-6 py-4 text-right">Value</th>
+                       <th className="px-6 py-4 text-right">Progress</th>
+                     </tr>
+                   </thead>
+                   <tbody className="divide-y divide-slate-100">
+                     {pendingHighPriorityItems.length > 0 ? pendingHighPriorityItems.map(item => (
+                       <tr key={item.id} className="hover:bg-slate-50 group transition-colors">
+                         <td className="px-6 py-4">
+                           <div className="font-bold text-slate-800 line-clamp-1">{item.description}</div>
+                           <div className="text-[10px] text-slate-400 font-mono tracking-tighter uppercase">{item.id}</div>
+                         </td>
+                         <td className="px-6 py-4 text-right text-slate-600 font-mono text-xs">
+                           {item.pendingQty.toLocaleString()} <span className="text-[10px] text-slate-400 uppercase tracking-tighter">{item.unit}</span>
+                         </td>
+                         <td className="px-6 py-4 text-right font-bold text-slate-900 font-mono text-xs">
+                           ৳{item.pendingValue.toLocaleString()}
+                         </td>
+                         <td className="px-6 py-4">
+                           <div className="flex items-center justify-end gap-3">
+                             <div className="w-16 h-1.5 bg-slate-100 rounded-full overflow-hidden">
+                               <div className="h-full bg-blue-600 rounded-full" style={{ width: `${item.progress}%` }}></div>
+                             </div>
+                             <span className="text-xs font-bold text-slate-500 w-8 text-right">{item.progress.toFixed(0)}%</span>
+                           </div>
+                         </td>
+                       </tr>
+                     )) : (
+                       <tr>
+                         <td colSpan={4} className="p-12 text-center text-slate-400">
+                           <Check className="w-10 h-10 mx-auto mb-3 text-emerald-400 opacity-50" />
+                           <p className="font-medium">No high-priority pending items detected.</p>
+                         </td>
+                       </tr>
+                     )}
+                   </tbody>
+                 </table>
+               </div>
+            </div>
+
+            {/* Financial Chart */}
+            <div className="card p-6">
+                <div className="flex items-center justify-between mb-8">
+                  <h3 className="text-lg font-bold text-slate-900 tracking-tight">Financial Position</h3>
+                  <div className="flex gap-4">
+                    <div className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-blue-600"></div> <span className="text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Budget</span></div>
+                    <div className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-emerald-600"></div> <span className="text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Done</span></div>
+                  </div>
+                </div>
+                <div className="h-64 w-full">
+                <ResponsiveContainer width="100%" height="100%">
+                    <BarChart data={chartData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
+                    <XAxis 
+                      dataKey="name" 
+                      axisLine={false} 
+                      tickLine={false} 
+                      tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 700 }} 
+                      dy={10} 
+                    />
+                    <YAxis 
+                      axisLine={false} 
+                      tickLine={false} 
+                      tick={{ fill: '#94a3b8', fontSize: 10, fontWeight: 700 }} 
+                      tickFormatter={(value) => `৳${value >= 1000000 ? (value/1000000).toFixed(1) + 'M' : (value/1000).toFixed(0) + 'k'}`} 
+                    />
+                    <Tooltip 
+                        cursor={{ fill: '#f8fafc' }}
+                        contentStyle={{ borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)', padding: '12px' }}
+                        labelStyle={{ fontWeight: 800, color: '#0f172a', marginBottom: '4px', fontSize: '12px' }}
+                        itemStyle={{ fontSize: '11px', fontWeight: 600 }}
+                        formatter={(value: number) => [`৳${value.toLocaleString()}`, 'Amount']}
+                    />
+                    <Bar dataKey="amount" radius={[4, 4, 0, 0]} barSize={40}>
+                        {chartData.map((entry, index) => (
+                        <Cell key={`cell-${index}`} fill={['#2563eb', '#059669', '#7c3aed', '#ea580c'][index]} />
+                        ))}
+                    </Bar>
+                    </BarChart>
+                </ResponsiveContainer>
+                </div>
+            </div>
+
+            {insight && (
+                <div className="bg-white border border-slate-200 rounded-2xl p-8 shadow-sm relative overflow-hidden animate-in slide-in-from-bottom-5">
+                <div className="absolute top-0 left-0 w-1.5 h-full bg-blue-600"></div>
+                <div className="flex items-center gap-3 mb-6">
+                    <div className="p-2 bg-blue-50 rounded-lg">
+                      <Sparkles className="w-5 h-5 text-blue-600" />
+                    </div>
+                    <div>
+                      <h3 className="text-lg font-bold text-slate-900 tracking-tight">AI Strategy & Insights</h3>
+                      <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest leading-none">Generative Analysis</p>
+                    </div>
+                </div>
+                <div className="prose prose-slate max-w-none text-slate-700 text-sm leading-relaxed">
+                    <ReactMarkdown>{insight}</ReactMarkdown>
+                </div>
+                </div>
+            )}
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+            
+            {/* NEW KEY POINTS: Milestone Tracker */}
+            <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+               <div className="p-4 border-b border-slate-200 bg-slate-50/50">
+                  <div className="flex items-center gap-2">
+                     <Flag className="w-5 h-5 text-indigo-500" />
+                     <h3 className="font-bold text-slate-800">Key Project Points</h3>
+                  </div>
+               </div>
+               <div className="p-4 space-y-4">
+                  {data.milestones && data.milestones.length > 0 ? data.milestones.map((milestone) => (
+                    <div key={milestone.id} className="relative pl-4 border-l-2 border-slate-200 last:mb-0">
+                       <div className={`absolute -left-[5px] top-1 w-2.5 h-2.5 rounded-full border-2 border-white shadow-sm ${
+                         milestone.status === 'COMPLETED' ? 'bg-emerald-500' :
+                         milestone.status === 'AT_RISK' ? 'bg-red-500' : 'bg-slate-300'
+                       }`}></div>
+                       <div className="flex justify-between items-start">
+                          <h4 className={`text-sm font-semibold ${milestone.status === 'COMPLETED' ? 'text-slate-400 line-through' : 'text-slate-800'}`}>
+                            {milestone.title}
+                          </h4>
+                          <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded ${
+                            milestone.status === 'COMPLETED' ? 'bg-emerald-50 text-emerald-600' :
+                            milestone.status === 'AT_RISK' ? 'bg-red-50 text-red-600' : 'bg-slate-100 text-slate-500'
+                          }`}>{milestone.status.replace('_', ' ')}</span>
+                       </div>
+                       <div className="flex items-center gap-1.5 mt-1 text-xs text-slate-500">
+                          <Calendar className="w-3 h-3" />
+                          <span>{milestone.date}</span>
+                       </div>
+                       {milestone.description && <p className="text-xs text-slate-400 mt-1">{milestone.description}</p>}
+                    </div>
+                  )) : (
+                    <div className="text-center py-4 text-slate-400 text-sm">No milestones tracked.</div>
+                  )}
+               </div>
+            </div>
+
+            {/* AI Action Sidebar */}
+            <div className="bg-slate-900 rounded-xl p-6 text-white shadow-xl relative overflow-hidden">
+                <div className="absolute -right-10 -top-10 w-40 h-40 bg-indigo-500/20 rounded-full blur-3xl"></div>
+                <div className="relative z-10">
+                    <div className="flex items-center gap-2 mb-4">
+                        <Zap className="w-5 h-5 text-indigo-400 fill-current" />
+                        <h3 className="font-bold text-lg">AI Action Feed</h3>
+                    </div>
+                    <p className="text-slate-400 text-sm mb-6">Actionable data extracted from your recent document scans.</p>
+                    
+                    <div className="space-y-4">
+                        {pendingSuggestions.length > 0 ? pendingSuggestions.map((s) => (
+                            <div key={s.id} className="bg-slate-800/50 border border-slate-700 rounded-lg p-4 hover:border-indigo-500 transition-all group">
+                                <div className="flex justify-between items-start mb-2">
+                                    <span className={`text-[10px] font-bold px-2 py-0.5 rounded border uppercase tracking-wider ${
+                                        s.type === 'QUANTITY_UPDATE' ? 'bg-blue-500/20 text-blue-400 border-blue-500/30' :
+                                        s.type === 'BILL_DETECTION' ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' :
+                                        'bg-red-500/20 text-red-400 border-red-500/30'
+                                    }`}>
+                                        {s.type.replace('_', ' ')}
+                                    </span>
+                                    <Clock className="w-3.5 h-3.5 text-slate-500" />
+                                </div>
+                                <h4 className="text-sm font-bold text-white mb-1 group-hover:text-indigo-400 transition-colors">{s.title}</h4>
+                                <p className="text-xs text-slate-400 line-clamp-2 mb-4">{s.description}</p>
+                                
+                                <div className="flex gap-2">
+                                    <button 
+                                        onClick={() => onApplySuggestion(s.id)}
+                                        className="flex-1 flex items-center justify-center gap-1.5 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded text-xs font-bold transition-colors"
+                                    >
+                                        <Check className="w-3.5 h-3.5" />
+                                        Apply
+                                    </button>
+                                    <button 
+                                        onClick={() => onDismissSuggestion(s.id)}
+                                        className="p-1.5 bg-slate-700 hover:bg-red-900/40 text-slate-400 hover:text-red-400 rounded transition-colors"
+                                    >
+                                        <Trash2 className="w-3.5 h-3.5" />
+                                    </button>
+                                </div>
+                            </div>
+                        )) : (
+                            <div className="text-center py-10">
+                                <Activity className="w-10 h-10 text-slate-700 mx-auto mb-3 opacity-30" />
+                                <p className="text-slate-500 text-sm">No pending actions. Try an AI Deep Scan on your documents.</p>
+                            </div>
+                        )}
+                    </div>
+                    
+                    {pendingSuggestions.length > 0 && (
+                        <button className="w-full mt-6 text-xs text-indigo-400 font-bold flex items-center justify-center gap-1 hover:text-indigo-300 transition-colors">
+                            View All Suggestions
+                            <ArrowRight className="w-3 h-3" />
+                        </button>
+                    )}
+                </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

components/DocumentManager.tsx

@@ -0,0 +1,443 @@
+
+import React, { useState, useEffect } from 'react';
+import { ProjectDocument, DocumentCategory, ModuleType, BOQItem, ExtractedBill } from '../types';
+import { 
+  FileText, 
+  Image, 
+  File, 
+  Search, 
+  UploadCloud, 
+  Download, 
+  X,
+  FileSpreadsheet,
+  Paperclip,
+  Loader2,
+  CheckCircle2,
+  Sparkles,
+  Zap,
+  Tag
+} from 'lucide-react';
+import { analyzeDocumentContent, suggestDocumentMetadata, extractBillData } from '../services/localAnalysisService';
+
+interface DocumentManagerProps {
+  documents: ProjectDocument[];
+  onAddDocument: (doc: ProjectDocument) => void;
+  onAnalyzeDocument?: (docId: string, suggestions: any[]) => void;
+  onSelectDocument?: (docId: string | null) => void;
+  onBillUploaded?: (data: ExtractedBill) => void;
+  boqItems?: BOQItem[];
+  filterModule?: ModuleType; 
+  compact?: boolean; 
+  allowUpload?: boolean;
+}
+
+const DocumentManager: React.FC<DocumentManagerProps> = ({ 
+  documents, 
+  onAddDocument, 
+  onAnalyzeDocument,
+  onBillUploaded,
+  boqItems = [],
+  filterModule,
+  compact = false,
+  allowUpload = true
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<DocumentCategory | 'ALL'>('ALL');
+  const [selectedModule, setSelectedModule] = useState<ModuleType | 'ALL'>('ALL');
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+  const [analyzingDocId, setAnalyzingDocId] = useState<string | null>(null);
+
+  // Upload Form State
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [newDocName, setNewDocName] = useState('');
+  const [newDocType, setNewDocType] = useState('PDF');
+  const [newDocCategory, setNewDocCategory] = useState<DocumentCategory>('REPORT');
+  const [newDocModule, setNewDocModule] = useState<ModuleType>(filterModule || 'GENERAL');
+  const [isUploading, setIsUploading] = useState(false);
+  const [isSuggestingMetadata, setIsSuggestingMetadata] = useState(false);
+  const [isAnalyzingBill, setIsAnalyzingBill] = useState(false);
+  const [hasAiSuggested, setHasAiSuggested] = useState(false);
+  const [newDocTags, setNewDocTags] = useState('');
+
+  const filteredDocs = documents.filter(doc => {
+    const matchesSearch = doc.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
+                          (doc.tags && doc.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())));
+    const matchesCategory = selectedCategory === 'ALL' || doc.category === selectedCategory;
+    const matchesModule = filterModule 
+      ? doc.module === filterModule 
+      : (selectedModule === 'ALL' || doc.module === selectedModule);
+    
+    const matchesDate = (!dateFrom || doc.uploadDate >= dateFrom) && 
+                        (!dateTo || doc.uploadDate <= dateTo);
+
+    return matchesSearch && matchesCategory && matchesModule && matchesDate;
+  });
+
+  const handleDeepScan = async (doc: ProjectDocument) => {
+    if (!onAnalyzeDocument) return;
+    setAnalyzingDocId(doc.id);
+    
+    let mimeType = 'application/pdf';
+    if (doc.type === 'JPG' || doc.type === 'PNG') mimeType = 'image/jpeg';
+    
+    const suggestions = await analyzeDocumentContent(doc.name, doc.category, boqItems, doc.content, mimeType);
+    onAnalyzeDocument(doc.id, suggestions);
+    setAnalyzingDocId(null);
+  };
+
+  const readFileAsBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        // Remove data URL prefix
+        const base64 = result.split(',')[1];
+        resolve(base64);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      setSelectedFile(file);
+      setNewDocName(file.name);
+      setHasAiSuggested(false);
+      
+      const ext = file.name.split('.').pop()?.toLowerCase();
+      if (ext === 'pdf') setNewDocType('PDF');
+      else if (['jpg', 'jpeg', 'png', 'gif'].includes(ext || '')) setNewDocType('JPG');
+      else if (['xlsx', 'xls', 'csv'].includes(ext || '')) setNewDocType('XLSX');
+      else if (['docx', 'doc'].includes(ext || '')) setNewDocType('DOCX');
+      else if (['dwg', 'dxf'].includes(ext || '')) setNewDocType('DWG');
+      else setNewDocType('PDF');
+
+      // AI Meta Suggestion
+      setIsSuggestingMetadata(true);
+      const suggestion = await suggestDocumentMetadata(file.name, "USER_ROLE"); // Pass role if available
+      setIsSuggestingMetadata(false);
+      
+      if (suggestion) {
+        if (suggestion.category) setNewDocCategory(suggestion.category as DocumentCategory);
+        if (suggestion.module) setNewDocModule(suggestion.module as ModuleType);
+        setHasAiSuggested(true);
+      }
+    }
+  };
+
+  const handleUpload = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsUploading(true);
+    
+    // Simulate upload delay
+    await new Promise(resolve => setTimeout(resolve, 800));
+    
+    let fileSize = '0.0 MB';
+    let fileUrl = undefined;
+    let base64Content: string | undefined = undefined;
+
+    if (selectedFile) {
+      fileSize = `${(selectedFile.size / (1024 * 1024)).toFixed(2)} MB`;
+      fileUrl = URL.createObjectURL(selectedFile);
+      try {
+          base64Content = await readFileAsBase64(selectedFile);
+      } catch (err) {
+          console.error("Failed to read file", err);
+      }
+    } else {
+      fileSize = `${(Math.random() * 5 + 0.5).toFixed(1)} MB`;
+    }
+
+    const newDoc: ProjectDocument = {
+      id: `D${Date.now()}`,
+      name: newDocName,
+      type: newDocType,
+      category: newDocCategory,
+      module: newDocModule,
+      uploadDate: new Date().toISOString().split('T')[0],
+      size: fileSize,
+      url: fileUrl,
+      content: base64Content,
+      isAnalyzed: false,
+      tags: newDocTags.split(',').map(t => t.trim()).filter(t => t !== '')
+    };
+
+    onAddDocument(newDoc);
+
+    // Auto-Extraction for Bills
+    if (newDocCategory === 'BILL' && onBillUploaded) {
+      setIsAnalyzingBill(true);
+      try {
+        let mimeType = 'application/pdf';
+        if (newDocType === 'JPG' || newDocType === 'PNG') mimeType = 'image/jpeg';
+
+        const extracted = await extractBillData(newDocName, base64Content, mimeType);
+        if (extracted) {
+          onBillUploaded(extracted);
+        }
+      } catch (err) {
+        console.error("Bill extraction failed", err);
+      }
+      setIsAnalyzingBill(false);
+    }
+
+    setIsUploading(false);
+    setIsUploadModalOpen(false);
+    setNewDocName('');
+    setNewDocTags('');
+    setSelectedFile(null);
+    setHasAiSuggested(false);
+  };
+
+  const getIcon = (type: string) => {
+    if (type.includes('PDF')) return <FileText className="w-5 h-5 text-red-500" />;
+    if (type.includes('JPG') || type.includes('PNG')) return <Image className="w-5 h-5 text-blue-500" />;
+    if (type.includes('XLS')) return <FileSpreadsheet className="w-5 h-5 text-green-600" />;
+    if (type.includes('DOC')) return <FileText className="w-5 h-5 text-blue-600" />;
+    if (type.includes('DWG')) return <Paperclip className="w-5 h-5 text-slate-500" />;
+    return <File className="w-5 h-5 text-slate-400" />;
+  };
+
+  return (
+    <div className={`bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden ${compact ? '' : 'h-full flex flex-col'}`}>
+      <div className="px-6 py-4 border-b border-slate-200 flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h3 className="font-semibold text-slate-800">
+            {compact ? 'Related Documents' : 'Document Management'}
+          </h3>
+          {!compact && <p className="text-sm text-slate-500">Central repository for all project files</p>}
+        </div>
+        {allowUpload && (
+          <button 
+            onClick={() => setIsUploadModalOpen(true)}
+            className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors shadow-sm text-sm"
+          >
+            <UploadCloud className="w-4 h-4" />
+            Upload Document
+          </button>
+        )}
+      </div>
+
+      <div className="px-6 py-3 bg-slate-50 border-b border-slate-200 flex flex-col gap-3">
+        <div className="relative w-full">
+          <Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
+          <input 
+            type="text" 
+            placeholder="Search documents by name or tags..." 
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-9 pr-4 py-2 text-sm border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
+          />
+        </div>
+        
+        <div className="flex flex-wrap items-center gap-2">
+            <select 
+                value={selectedCategory} 
+                onChange={(e) => setSelectedCategory(e.target.value as any)}
+                className="px-3 py-2 text-sm border border-slate-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none min-w-[140px]"
+            >
+                <option value="ALL">All Categories</option>
+                <option value="CONTRACT">Contracts</option>
+                <option value="DRAWING">Drawings</option>
+                <option value="PERMIT">Permits</option>
+                <option value="REPORT">Reports</option>
+                <option value="BILL">Bills</option>
+            </select>
+        </div>
+      </div>
+
+      <div className={`${compact ? 'max-h-[300px]' : 'flex-1'} overflow-y-auto`}>
+        {filteredDocs.length > 0 ? (
+          <table className="w-full text-left text-sm">
+            <thead className="bg-slate-50 text-slate-600 font-medium border-b border-slate-200 sticky top-0">
+              <tr>
+                <th className="px-6 py-3">Name</th>
+                <th className="px-6 py-3 hidden md:table-cell">Category</th>
+                <th className="px-6 py-3 text-right">Date</th>
+                <th className="px-6 py-3 text-center">AI Scan</th>
+                <th className="px-6 py-3 text-center">Action</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {filteredDocs.map((doc) => (
+                <tr key={doc.id} className="hover:bg-slate-50 transition-colors">
+                  <td className="px-6 py-3">
+                    <div className="flex flex-col gap-1">
+                      <div className="flex items-center gap-3">
+                        {getIcon(doc.type)}
+                        <p className="font-medium text-slate-700">{doc.name}</p>
+                      </div>
+                      {doc.tags && doc.tags.length > 0 && (
+                        <div className="flex flex-wrap gap-1 ml-8">
+                          {doc.tags.map((tag, i) => (
+                            <span key={i} className="flex items-center gap-0.5 px-1.5 py-0.5 bg-slate-100 text-slate-500 text-[10px] rounded-full border border-slate-200">
+                              <Tag className="w-2 h-2" />
+                              {tag}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-6 py-3 hidden md:table-cell">
+                    <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-600 border border-slate-200">
+                      {doc.category}
+                    </span>
+                  </td>
+                  <td className="px-6 py-3 text-right text-slate-500">{doc.uploadDate}</td>
+                  <td className="px-6 py-3 text-center">
+                    {analyzingDocId === doc.id ? (
+                      <div className="flex items-center justify-center gap-1.5 text-indigo-600 font-bold text-xs animate-pulse">
+                        <Loader2 className="w-3 h-3 animate-spin" />
+                        Reading...
+                      </div>
+                    ) : doc.isAnalyzed ? (
+                      <div className="flex items-center justify-center gap-1 text-emerald-600 font-bold text-xs">
+                        <CheckCircle2 className="w-3.5 h-3.5" />
+                        Synced
+                      </div>
+                    ) : (
+                      <button 
+                        onClick={() => handleDeepScan(doc)}
+                        className="inline-flex items-center gap-1 px-2 py-1 bg-indigo-50 text-indigo-600 border border-indigo-100 rounded text-[10px] font-bold hover:bg-indigo-100 transition-colors"
+                      >
+                        <Zap className="w-3 h-3 fill-current" />
+                        AI Deep Scan
+                      </button>
+                    )}
+                  </td>
+                  <td className="px-6 py-3 text-center">
+                    <a href={doc.url} download={doc.name} className="text-blue-600 hover:text-blue-800 p-1">
+                      <Download className="w-4 h-4" />
+                    </a>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-12 text-slate-400">
+            <File className="w-12 h-12 mb-3 opacity-20" />
+            <p>No documents found</p>
+          </div>
+        )}
+      </div>
+
+      {isUploadModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden">
+            <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center">
+              <div className="flex items-center gap-2">
+                <h3 className="font-semibold text-slate-800">Upload & Analyze</h3>
+                {isSuggestingMetadata && !isAnalyzingBill && (
+                   <div className="flex items-center gap-1 px-2 py-0.5 bg-indigo-50 text-indigo-600 text-[10px] font-bold rounded animate-pulse">
+                      <Sparkles className="w-2.5 h-2.5" />
+                      AI Analyzing Name...
+                   </div>
+                )}
+                {isAnalyzingBill && (
+                   <div className="flex items-center gap-1 px-2 py-0.5 bg-emerald-50 text-emerald-600 text-[10px] font-bold rounded animate-pulse">
+                      <Loader2 className="w-2.5 h-2.5 animate-spin" />
+                      Extracting Bill Data...
+                   </div>
+                )}
+              </div>
+              <button onClick={() => !isUploading && setIsUploadModalOpen(false)} className="text-slate-400 hover:text-slate-600">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            
+            <form onSubmit={handleUpload} className="p-6 space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-2">Select File</label>
+                <div className={`border-2 border-dashed rounded-xl p-6 text-center transition-colors relative group ${selectedFile ? 'border-emerald-400 bg-emerald-50' : 'border-slate-300 hover:bg-slate-50'}`}>
+                  <input type="file" onChange={handleFileChange} disabled={isUploading} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
+                  <div className="flex flex-col items-center gap-2">
+                    <div className={`p-3 rounded-full ${selectedFile ? 'bg-emerald-100 text-emerald-600' : 'bg-blue-50 text-blue-600'}`}>
+                      {selectedFile ? <CheckCircle2 className="w-6 h-6" /> : <UploadCloud className="w-6 h-6" />}
+                    </div>
+                    <p className="text-sm font-medium">{selectedFile ? selectedFile.name : "Choose file"}</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <div className="flex items-center justify-between">
+                    <label className="block text-xs font-bold text-slate-500 uppercase tracking-tight">Category</label>
+                    {hasAiSuggested && (
+                      <span className="text-[9px] font-bold text-indigo-500 flex items-center gap-0.5">
+                        <Sparkles className="w-2 h-2" /> AI Sug
+                      </span>
+                    )}
+                  </div>
+                  <select 
+                    value={newDocCategory}
+                    onChange={(e) => setNewDocCategory(e.target.value as any)}
+                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all bg-white ${isSuggestingMetadata ? 'opacity-50 blur-[1px]' : ''} ${hasAiSuggested ? 'border-indigo-200' : 'border-slate-300'}`}
+                  >
+                    <option value="REPORT">Progress Report</option>
+                    <option value="BILL">Invoice / Bill</option>
+                    <option value="DRAWING">Technical Drawing</option>
+                    <option value="CONTRACT">Contract</option>
+                    <option value="PERMIT">Permit</option>
+                    <option value="OTHER">Other</option>
+                  </select>
+                </div>
+
+                <div className="space-y-1">
+                   <div className="flex items-center justify-between">
+                    <label className="block text-xs font-bold text-slate-500 uppercase tracking-tight">Module</label>
+                    {hasAiSuggested && (
+                      <span className="text-[9px] font-bold text-indigo-500 flex items-center gap-0.5">
+                        <Sparkles className="w-2 h-2" /> AI Sug
+                      </span>
+                    )}
+                  </div>
+                  <select 
+                    value={newDocModule}
+                    onChange={(e) => setNewDocModule(e.target.value as any)}
+                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all bg-white ${isSuggestingMetadata ? 'opacity-50 blur-[1px]' : ''} ${hasAiSuggested ? 'border-indigo-200' : 'border-slate-300'}`}
+                  >
+                    <option value="GENERAL">General</option>
+                    <option value="SITE">Site Ops</option>
+                    <option value="FINANCE">Financials</option>
+                    <option value="MASTER">Master Records</option>
+                    <option value="LIABILITY">Liabilities</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="space-y-1">
+                <label className="block text-xs font-bold text-slate-500 uppercase tracking-tight">Tags (comma separated)</label>
+                <div className="relative">
+                  <Tag className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
+                  <input 
+                    type="text"
+                    placeholder="e.g. foundation, structural, approved"
+                    value={newDocTags}
+                    onChange={(e) => setNewDocTags(e.target.value)}
+                    className="w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+                  />
+                </div>
+              </div>
+
+              <div className="pt-4 flex justify-end gap-3 border-t border-slate-100">
+                <button type="button" onClick={() => setIsUploadModalOpen(false)} className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded-lg transition-colors">Cancel</button>
+                <button type="submit" disabled={isUploading || isSuggestingMetadata || isAnalyzingBill} className="px-6 py-2 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md active:scale-95 transition-all disabled:opacity-50 disabled:active:scale-100">
+                  {isAnalyzingBill ? 'Extracting Data...' : (isUploading ? 'Uploading...' : 'Save Document')}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DocumentManager;

components/EquipmentManager.tsx

@@ -0,0 +1,111 @@
+
+import React from 'react';
+import { Equipment } from '../types';
+import { Truck, Settings, AlertTriangle, CheckCircle2, Plus, Search, Filter } from 'lucide-react';
+
+interface EquipmentManagerProps {
+  equipment: Equipment[];
+}
+
+const EquipmentManager: React.FC<EquipmentManagerProps> = ({ equipment }) => {
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const filteredEquipment = equipment.filter(e => 
+    e.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
+    e.type.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'OPERATIONAL': return 'text-emerald-600 bg-emerald-50 border-emerald-100';
+      case 'MAINTENANCE': return 'text-amber-600 bg-amber-50 border-amber-100';
+      case 'OUT_OF_ORDER': return 'text-red-600 bg-red-50 border-red-100';
+      default: return 'text-slate-600 bg-slate-50 border-slate-100';
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-4 flex-1 max-w-md">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search equipment..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+            />
+          </div>
+          <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
+            <Filter className="w-5 h-5" />
+          </button>
+        </div>
+        <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
+          <Plus className="w-4 h-4" />
+          Add Equipment
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredEquipment.length === 0 ? (
+          <div className="col-span-full py-20 text-center bg-white rounded-2xl border border-dashed border-slate-300">
+            <Truck className="w-12 h-12 text-slate-300 mx-auto mb-4" />
+            <p className="text-slate-500 font-medium">No equipment found</p>
+          </div>
+        ) : (
+          filteredEquipment.map(item => (
+            <div key={item.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm hover:border-blue-300 transition-all group">
+              <div className="p-6 border-b border-slate-100">
+                <div className="flex items-start justify-between mb-4">
+                  <div className="w-12 h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center">
+                    <Truck className="w-6 h-6" />
+                  </div>
+                  <span className={`px-2 py-1 rounded-full border text-[10px] font-bold uppercase tracking-wider ${getStatusColor(item.status)}`}>
+                    {item.status.replace('_', ' ')}
+                  </span>
+                </div>
+                <h3 className="font-bold text-slate-800 text-lg mb-1">{item.name}</h3>
+                <p className="text-xs text-slate-500 font-medium">{item.type}</p>
+              </div>
+
+              <div className="p-6 space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1">
+                    <span className="text-[10px] font-bold text-slate-400 uppercase">Last Maint.</span>
+                    <p className="text-xs font-bold text-slate-700">{item.lastMaintenance}</p>
+                  </div>
+                  <div className="space-y-1">
+                    <span className="text-[10px] font-bold text-slate-400 uppercase">Next Maint.</span>
+                    <p className="text-xs font-bold text-blue-600">{item.nextMaintenance}</p>
+                  </div>
+                </div>
+
+                <div className="p-3 bg-slate-50 rounded-xl flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Settings className="w-4 h-4 text-slate-400" />
+                    <span className="text-xs font-medium text-slate-600">Hourly Rate</span>
+                  </div>
+                  <span className="text-sm font-bold text-slate-800">৳{item.hourlyRate}/hr</span>
+                </div>
+
+                <div className="flex items-center justify-between pt-2">
+                  <div className="flex items-center gap-2">
+                    <div className="w-6 h-6 bg-slate-200 rounded-full flex items-center justify-center text-[10px] font-bold text-slate-600">
+                      {item.assignedOperator?.charAt(0) || '?'}
+                    </div>
+                    <span className="text-xs text-slate-500">{item.assignedOperator || 'No Operator'}</span>
+                  </div>
+                  <button className="text-xs font-bold text-blue-600 hover:text-blue-700">Manage</button>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EquipmentManager;

components/FinancialAnalytics.tsx

@@ -0,0 +1,143 @@
+
+import React from 'react';
+import { BOQItem, Bill } from '../types';
+import { 
+  BarChart, 
+  Bar, 
+  XAxis, 
+  YAxis, 
+  CartesianGrid, 
+  Tooltip, 
+  Legend, 
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  LineChart,
+  Line
+} from 'recharts';
+import { TrendingUp, TrendingDown, DollarSign, PieChart as PieChartIcon, BarChart3 } from 'lucide-react';
+
+interface FinancialAnalyticsProps {
+  boq: BOQItem[];
+  bills: Bill[];
+}
+
+const FinancialAnalytics: React.FC<FinancialAnalyticsProps> = ({ boq, bills }) => {
+  const totalBudget = boq.reduce((acc, item) => acc + (item.plannedQty * item.plannedUnitCost), 0);
+  const totalActual = bills.reduce((acc, bill) => acc + bill.amount, 0);
+  const totalContract = boq.reduce((acc, item) => acc + (item.plannedQty * item.rate), 0);
+  
+  const budgetVsActualData = boq.slice(0, 5).map(item => ({
+    name: item.description.substring(0, 15) + '...',
+    Budget: item.plannedQty * item.plannedUnitCost,
+    Actual: (item.executedQty / item.plannedQty) * (item.plannedQty * item.plannedUnitCost) * 1.1 // Simulated actual
+  }));
+
+  const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
+
+  const expenseByCategory = [
+    { name: 'Material', value: bills.filter(b => b.category === 'MATERIAL').reduce((a, b) => a + b.amount, 0) || 450000 },
+    { name: 'Labor', value: bills.filter(b => b.category === 'LABOR').reduce((a, b) => a + b.amount, 0) || 280000 },
+    { name: 'Equipment', value: bills.filter(b => b.category === 'EQUIPMENT').reduce((a, b) => a + b.amount, 0) || 120000 },
+    { name: 'Overhead', value: bills.filter(b => b.category === 'OVERHEAD').reduce((a, b) => a + b.amount, 0) || 85000 },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Top Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+          <div className="flex items-center justify-between mb-4">
+            <div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
+              <DollarSign className="w-5 h-5 text-blue-600" />
+            </div>
+            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Budget</span>
+          </div>
+          <h3 className="text-2xl font-bold text-slate-800">৳{(totalBudget / 1000000).toFixed(2)}M</h3>
+          <p className="text-xs text-slate-500 mt-1">Internal estimated cost</p>
+        </div>
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+          <div className="flex items-center justify-between mb-4">
+            <div className="w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center">
+              <TrendingUp className="w-5 h-5 text-emerald-600" />
+            </div>
+            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Actual Spent</span>
+          </div>
+          <h3 className="text-2xl font-bold text-slate-800">৳{(totalActual / 1000000).toFixed(2)}M</h3>
+          <p className="text-xs text-emerald-600 mt-1 flex items-center gap-1">
+            <TrendingUp className="w-3 h-3" />
+            {((totalActual / totalBudget) * 100).toFixed(1)}% of budget used
+          </p>
+        </div>
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+          <div className="flex items-center justify-between mb-4">
+            <div className="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center">
+              <BarChart3 className="w-5 h-5 text-amber-600" />
+            </div>
+            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Project Margin</span>
+          </div>
+          <h3 className="text-2xl font-bold text-slate-800">৳{((totalContract - totalActual) / 1000000).toFixed(2)}M</h3>
+          <p className="text-xs text-amber-600 mt-1">Estimated gross profit</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Budget vs Actual Chart */}
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+          <h3 className="font-bold text-slate-800 mb-6 flex items-center gap-2">
+            <BarChart3 className="w-5 h-5 text-blue-600" />
+            Budget vs Actual (Top Items)
+          </h3>
+          <div className="h-[300px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={budgetVsActualData}>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
+                <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: '#64748b' }} />
+                <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: '#64748b' }} />
+                <Tooltip 
+                  contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
+                  cursor={{ fill: '#f8fafc' }}
+                />
+                <Legend iconType="circle" />
+                <Bar dataKey="Budget" fill="#cbd5e1" radius={[4, 4, 0, 0]} />
+                <Bar dataKey="Actual" fill="#3b82f6" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+
+        {/* Expense Distribution */}
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+          <h3 className="font-bold text-slate-800 mb-6 flex items-center gap-2">
+            <PieChartIcon className="w-5 h-5 text-blue-600" />
+            Expense Distribution
+          </h3>
+          <div className="h-[300px] flex items-center">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={expenseByCategory}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={60}
+                  outerRadius={80}
+                  paddingAngle={5}
+                  dataKey="value"
+                >
+                  {expenseByCategory.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                  ))}
+                </Pie>
+                <Tooltip />
+                <Legend verticalAlign="bottom" height={36} />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FinancialAnalytics;

components/FinancialControl.tsx

@@ -0,0 +1,768 @@
+import React, { useState, useMemo } from 'react';
+import { ProjectState, ProjectDocument, BOQItem, UserRole, Bill, ExtractedBill } from '../types';
+import { Download, PlusCircle, CheckCircle2, ChevronDown, ChevronUp, TrendingUp, Wallet, ArrowDownRight, Sparkles, Loader2, Zap, Package, X, Save, Edit2, Hammer, UsersRound, AlertOctagon, FileText } from 'lucide-react';
+import DocumentManager from './DocumentManager';
+import { extractBillData, suggestActualCostBreakdown, parseRunningBillDetails } from '../services/localAnalysisService';
+import jsPDF from 'jspdf';
+import autoTable from 'jspdf-autotable';
+
+interface FinancialControlProps {
+  data: ProjectState;
+  onAddDocument: (doc: ProjectDocument) => void;
+  onUpdateBOQItem?: (itemId: string, updatedItem: Partial<BOQItem>) => void;
+  onAddBill: (bill: Bill) => void;
+  onUpdatePDRemarks: (type: 'BILL', id: string, remarks: string) => void;
+  onBillItemizedUpdate: (items: { boqId: string; amount: number }[]) => void;
+  userRole: UserRole;
+}
+
+const FinancialControl: React.FC<FinancialControlProps> = ({ data, onAddDocument, onUpdateBOQItem, onAddBill, onUpdatePDRemarks, onBillItemizedUpdate, userRole }) => {
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
+  const [isAiLoading, setIsAiLoading] = useState(false);
+  const [analyzingItemId, setAnalyzingItemId] = useState<string | null>(null);
+  const [isBillModalOpen, setIsBillModalOpen] = useState(false);
+  const [editingRemarksId, setEditingRemarksId] = useState<string | null>(null);
+  const [tempRemarks, setTempRemarks] = useState('');
+
+  // Bill Form
+  const [billType, setBillType] = useState<Bill['type']>('VENDOR_INVOICE');
+  const [billCategory, setBillCategory] = useState<NonNullable<Bill['category']>>('OTHER');
+  const [billEntity, setBillEntity] = useState('');
+  const [billAmount, setBillAmount] = useState('');
+  const [billDate, setBillDate] = useState(new Date().toISOString().split('T')[0]);
+  const [aiAutofilled, setAiAutofilled] = useState(false);
+  const [detectedBillDocName, setDetectedBillDocName] = useState('');
+
+  const canAddClientBill = userRole === 'MANAGER' || userRole === 'DIRECTOR';
+  const canAddVendorBill = userRole === 'ACCOUNTANT' || userRole === 'DIRECTOR';
+  const canUploadDoc = canAddClientBill || canAddVendorBill;
+  const isDirector = userRole === 'DIRECTOR';
+
+  const clientBills = data.bills.filter(b => b.type === 'CLIENT_RA');
+  const vendorBills = data.bills.filter(b => b.type === 'VENDOR_INVOICE' || b.type === 'MATERIAL_EXPENSE' || b.type === 'SUB_CONTRACTOR');
+
+  const totalRevenue = clientBills.reduce((acc, b) => acc + b.amount, 0);
+  const totalExpenses = vendorBills.reduce((acc, b) => acc + b.amount, 0);
+  
+  // Material Value Calculation
+  const materialInventoryValue = data.materials.reduce((sum, mat) => sum + (mat.currentStock * mat.averageRate), 0);
+
+  // --- LIVE SYNC CALCULATIONS ---
+
+  // 1. Live Material Stats (Automated from DPRs)
+  const materialStats = useMemo(() => {
+    return data.materials.map(m => {
+      const consumedQty = data.dprs.reduce((acc, dpr) => {
+         const usage = dpr.materialsUsed?.find(u => u.materialId === m.id);
+         return acc + (usage ? usage.qty : 0);
+      }, 0);
+      return {
+        ...m,
+        liveConsumedQty: consumedQty,
+        liveExpense: consumedQty * m.averageRate
+      };
+    }).filter(m => m.liveConsumedQty > 0 || m.totalConsumed > 0);
+  }, [data.materials, data.dprs]);
+
+  // 2. Live Sub-Contractor Stats (Automated from DPRs vs Bills)
+  const subContractorStats = useMemo(() => {
+     if (!data.subContractors) return [];
+     return data.subContractors.map(sc => {
+        // Calculate accrued liability directly from DPRs for perfect sync
+        const liveWorkValue = data.dprs
+            .filter(d => d.subContractorId === sc.id && d.workDoneQty && d.linkedBoqId)
+            .reduce((sum, d) => {
+                const rate = sc.agreedRates.find(r => r.boqId === d.linkedBoqId)?.rate || 0;
+                return sum + (d.workDoneQty! * rate);
+            }, 0);
+        
+        return {
+           ...sc,
+           liveWorkValue,
+           balance: liveWorkValue - sc.totalBilled
+        };
+     });
+  }, [data.subContractors, data.dprs]);
+
+  // 3. Live BOQ Item Costing
+  const liveItemStats = useMemo(() => {
+    return data.boq.map(item => {
+        const relevantDPRs = data.dprs.filter(d => d.linkedBoqId === item.id);
+        
+        // Calculate Material Expense
+        let materialExp = 0;
+        relevantDPRs.forEach(dpr => {
+            dpr.materialsUsed?.forEach(usage => {
+                const mat = data.materials.find(m => m.id === usage.materialId);
+                if (mat) {
+                    materialExp += usage.qty * mat.averageRate;
+                }
+            });
+        });
+
+        // Calculate Sub-Contractor Liability
+        let subContractExp = 0;
+        relevantDPRs.forEach(dpr => {
+            if (dpr.subContractorId && dpr.workDoneQty) {
+                 const sc = data.subContractors.find(s => s.id === dpr.subContractorId);
+                 const rateObj = sc?.agreedRates.find(r => r.boqId === item.id);
+                 if (rateObj) {
+                     subContractExp += dpr.workDoneQty * rateObj.rate;
+                 }
+            }
+        });
+
+        // Estimate Direct Labor
+        let directLaborExp = 0;
+        const avgDailyWage = 800;
+        const dprsWithNoSC = relevantDPRs.filter(d => !d.subContractorId);
+        const totalLaborDays = dprsWithNoSC.reduce((acc, d) => acc + d.laborCount, 0);
+        directLaborExp = totalLaborDays * avgDailyWage;
+
+        const totalActualCost = materialExp + subContractExp + directLaborExp;
+        const revenue = (item.billedAmount || 0);
+        const workDoneValue = item.executedQty * item.rate;
+        const profit = revenue - totalActualCost;
+
+        return {
+            ...item,
+            stats: {
+                materialExp,
+                subContractExp,
+                directLaborExp,
+                totalActualCost,
+                profit
+            }
+        };
+    });
+  }, [data.boq, data.dprs, data.materials, data.subContractors]);
+
+  const totalOperationalProfit = liveItemStats.reduce((acc, item) => {
+     const workValue = item.executedQty * item.rate;
+     return acc + (workValue - item.stats.totalActualCost);
+  }, 0);
+
+  const generateRABill = () => {
+    const doc = new jsPDF();
+    
+    // Header
+    doc.setFontSize(20);
+    doc.text('Running Account (RA) Bill', 14, 22);
+    
+    doc.setFontSize(10);
+    doc.text(`Project: ${data.name}`, 14, 30);
+    doc.text(`Date: ${new Date().toLocaleDateString()}`, 14, 35);
+    doc.text(`Generated By: BuildTrack AI`, 14, 40);
+
+    // Table Data
+    const tableData = data.boq
+      .filter(item => item.executedQty > 0)
+      .map((item, index) => [
+        index + 1,
+        item.description,
+        item.unit,
+        item.plannedQty.toLocaleString(),
+        item.executedQty.toLocaleString(),
+        `৳${item.rate.toLocaleString()}`,
+        `৳${(item.executedQty * item.rate).toLocaleString()}`
+      ]);
+
+    const totalBillValue = data.boq.reduce((sum, item) => sum + (item.executedQty * item.rate), 0);
+    const previouslyBilled = data.boq.reduce((sum, item) => sum + (item.billedAmount || 0), 0);
+    const netPayable = totalBillValue - previouslyBilled;
+
+    autoTable(doc, {
+      startY: 50,
+      head: [['Sr.', 'Description', 'Unit', 'Total Qty', 'Executed Qty', 'Rate', 'Amount']],
+      body: tableData,
+      theme: 'grid',
+      styles: { fontSize: 8 },
+      headStyles: { fillColor: [15, 23, 42] } // Slate-900
+    });
+
+    const finalY = (doc as any).lastAutoTable.finalY || 50;
+
+    doc.setFontSize(10);
+    doc.text(`Total Value of Work Executed: ৳${totalBillValue.toLocaleString()}`, 14, finalY + 10);
+    doc.text(`Less: Previously Billed: ৳${previouslyBilled.toLocaleString()}`, 14, finalY + 16);
+    doc.setFontSize(12);
+    doc.setFont("helvetica", "bold");
+    doc.text(`Net Amount Payable: ৳${netPayable.toLocaleString()}`, 14, finalY + 24);
+
+    doc.save(`RA_Bill_${data.id}_${new Date().toISOString().split('T')[0]}.pdf`);
+  };
+
+  const toggleRow = (id: string) => {
+    setExpandedRow(expandedRow === id ? null : id);
+  };
+
+  const handleBillUploaded = (extracted: ExtractedBill) => {
+    setAiAutofilled(true);
+    const latestBill = data.documents.find(d => d.category === 'BILL' && d.uploadDate === new Date().toISOString().split('T')[0]);
+    if (latestBill) setDetectedBillDocName(latestBill.name);
+
+    if (extracted.type) setBillType(extracted.type === 'CLIENT_RA' ? 'CLIENT_RA' : 'VENDOR_INVOICE');
+    if (extracted.entityName) setBillEntity(extracted.entityName);
+    if (extracted.amount) setBillAmount(extracted.amount.toString());
+    if (extracted.date) setBillDate(extracted.date);
+    
+    setIsBillModalOpen(true);
+    setTimeout(() => setAiAutofilled(false), 5000);
+  };
+
+  const handleAiBillExtraction = async () => {
+    const lastBillDoc = data.documents.find(d => d.category === 'BILL');
+    if (!lastBillDoc) {
+      alert("No bill documents found to analyze.");
+      return;
+    }
+    setIsAiLoading(true);
+    const extracted = await extractBillData(lastBillDoc.name);
+    setDetectedBillDocName(lastBillDoc.name);
+    setIsAiLoading(false);
+    if (extracted) {
+      alert(`AI Extracted Bill Info:\n\nEntity: ${extracted.entityName}\nAmount: ৳${extracted.amount}\nType: ${extracted.type}\n\nYou can now use these values to populate the form.`);
+      handleBillUploaded(extracted);
+    }
+  };
+
+  const handleCreateBill = async (e: React.FormEvent) => {
+    e.preventDefault();
+    onAddBill({
+      id: `BILL-${Date.now()}`,
+      type: billType,
+      entityName: billEntity,
+      amount: Number(billAmount),
+      date: billDate,
+      status: 'PENDING',
+      category: billType === 'CLIENT_RA' ? undefined : billCategory
+    });
+
+    if (billType === 'CLIENT_RA' && detectedBillDocName) {
+      const confirmItemize = window.confirm("Do you want to automatically distribute this bill amount to BOQ items based on the uploaded document?");
+      if (confirmItemize) {
+        setIsAiLoading(true);
+        const itemizedUpdates = await parseRunningBillDetails(detectedBillDocName, data.boq);
+        onBillItemizedUpdate(itemizedUpdates);
+        setIsAiLoading(false);
+        alert(`Successfully mapped bill amount to ${itemizedUpdates.length} BOQ items.`);
+      }
+    }
+
+    setIsBillModalOpen(false);
+    setBillEntity('');
+    setBillAmount('');
+    setAiAutofilled(false);
+    setDetectedBillDocName('');
+    setBillCategory('OTHER');
+  };
+
+  const handleBillTypeChange = (newType: Bill['type']) => {
+    setBillType(newType);
+    if (newType === 'MATERIAL_EXPENSE') setBillCategory('MATERIAL');
+    else if (newType === 'SUB_CONTRACTOR') setBillCategory('LABOR');
+    else setBillCategory('OTHER');
+  };
+
+  const saveRemarks = (id: string) => {
+    onUpdatePDRemarks('BILL', id, tempRemarks);
+    setEditingRemarksId(null);
+  };
+
+  const BillTable = ({ bills, title }: { bills: typeof data.bills, title: string }) => (
+    <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-full">
+      <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-slate-50">
+        <h3 className="font-semibold text-slate-800">{title}</h3>
+        <button className="p-2 text-slate-400 hover:text-slate-600">
+          <Download className="w-4 h-4" />
+        </button>
+      </div>
+      <div className="overflow-x-auto flex-1">
+        <table className="w-full text-left text-sm">
+          <thead className="bg-slate-50 text-slate-600 font-medium border-b border-slate-200">
+            <tr>
+              <th className="px-6 py-3 whitespace-nowrap">Bill ID</th>
+              <th className="px-6 py-3 whitespace-nowrap">Entity / Description</th>
+              <th className="px-6 py-3 whitespace-nowrap">Date</th>
+              <th className="px-6 py-3 text-right whitespace-nowrap">Amount</th>
+              <th className="px-6 py-3 text-center whitespace-nowrap">Status</th>
+              <th className="px-6 py-3 whitespace-nowrap">Notes</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-100">
+            {bills.map(bill => (
+              <tr key={bill.id} className="hover:bg-slate-50 transition-colors">
+                <td className="px-6 py-3 font-medium text-slate-700">
+                  {bill.id}
+                  {bill.type === 'SUB_CONTRACTOR' && <div className="text-[10px] text-orange-600 font-bold">Sub-Contract</div>}
+                  {bill.type === 'MATERIAL_EXPENSE' && <div className="text-[10px] text-indigo-600 font-bold">Material</div>}
+                  {bill.category && bill.category !== 'OTHER' && (
+                    <div className="text-[10px] text-slate-500 font-medium bg-slate-100 px-1 rounded inline-block mt-0.5 border border-slate-200 ml-1">
+                      {bill.category}
+                    </div>
+                  )}
+                </td>
+                <td className="px-6 py-3 text-slate-600 truncate max-w-[200px]">{bill.entityName}</td>
+                <td className="px-6 py-3 text-slate-500">{bill.date}</td>
+                <td className="px-6 py-3 text-right font-medium text-slate-900">৳{bill.amount.toLocaleString()}</td>
+                <td className="px-6 py-3 text-center">
+                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${
+                    bill.status === 'PAID' 
+                      ? 'bg-emerald-50 text-emerald-700 border-emerald-200' 
+                      : 'bg-amber-50 text-amber-700 border-amber-200'
+                  }`}>
+                    {bill.status}
+                  </span>
+                </td>
+                <td className="px-6 py-3 min-w-[200px]">
+                  {editingRemarksId === bill.id ? (
+                    <div className="flex items-center gap-1">
+                      <input 
+                        type="text" 
+                        value={tempRemarks} 
+                        onChange={(e) => setTempRemarks(e.target.value)} 
+                        className="w-full text-xs border border-blue-300 rounded px-1 py-0.5 outline-none"
+                        autoFocus
+                      />
+                      <button onClick={() => saveRemarks(bill.id)} className="text-emerald-600"><Save className="w-3.5 h-3.5"/></button>
+                      <button onClick={() => setEditingRemarksId(null)} className="text-red-500"><X className="w-3.5 h-3.5"/></button>
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-2 group/remark">
+                      <span className="text-xs text-slate-500 italic truncate max-w-[150px]">
+                        {bill.pdRemarks || (isDirector ? "Add note..." : "")}
+                      </span>
+                      {isDirector && (
+                        <button 
+                          onClick={() => { setEditingRemarksId(bill.id); setTempRemarks(bill.pdRemarks || ''); }}
+                          className="opacity-0 group-hover/remark:opacity-100 text-slate-400 hover:text-blue-600 transition-opacity"
+                        >
+                          <Edit2 className="w-3 h-3" />
+                        </button>
+                      )}
+                    </div>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="space-y-6">
+       <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-800">Financial Control</h1>
+          <p className="text-slate-500">Track Bills, Costs, and Profitability</p>
+        </div>
+        <div className="flex gap-2">
+          <button 
+            onClick={handleAiBillExtraction}
+            disabled={isAiLoading}
+            className="flex items-center gap-2 bg-indigo-50 border border-indigo-200 text-indigo-600 px-4 py-2 rounded-lg hover:bg-indigo-100 transition-colors shadow-sm text-sm font-bold"
+          >
+            {isAiLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
+            Auto-Scan Bill
+          </button>
+          {canAddVendorBill && (
+             <button 
+               onClick={() => { setIsBillModalOpen(true); setBillType('VENDOR_INVOICE'); setBillCategory('OTHER'); setBillEntity(''); setBillAmount(''); setAiAutofilled(false); }}
+               className="flex items-center gap-2 bg-white border border-slate-300 text-slate-700 px-4 py-2 rounded-lg hover:bg-slate-50 transition-colors shadow-sm text-sm font-medium"
+             >
+              <PlusCircle className="w-4 h-4" />
+              Add Expense / Bill
+            </button>
+          )}
+          {canAddClientBill && (
+            <button 
+              onClick={() => { setIsBillModalOpen(true); setBillType('CLIENT_RA'); setBillEntity(''); setBillAmount(''); setAiAutofilled(false); }}
+              className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors shadow-sm text-sm font-medium"
+            >
+              <PlusCircle className="w-4 h-4" />
+              Record Bill Received (PE)
+            </button>
+          )}
+          {canAddClientBill && (
+            <button 
+              onClick={generateRABill}
+              className="flex items-center gap-2 bg-slate-800 text-white px-4 py-2 rounded-lg hover:bg-slate-900 transition-colors shadow-sm text-sm font-medium"
+            >
+              <FileText className="w-4 h-4" />
+              Generate RA Bill (PDF)
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm relative overflow-hidden">
+           <div className="flex justify-between items-start mb-2">
+             <div className="p-2 bg-blue-50 rounded-lg text-blue-600">
+                <Wallet className="w-5 h-5" />
+             </div>
+           </div>
+           <p className="text-sm font-semibold text-slate-500 uppercase tracking-wide">Total Revenue</p>
+           <h2 className="text-2xl font-bold text-slate-800 mt-1">৳{totalRevenue.toLocaleString()}</h2>
+           <p className="text-xs text-slate-400 mt-1">Total Billed to Client</p>
+        </div>
+
+        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm relative overflow-hidden">
+           <div className="flex justify-between items-start mb-2">
+             <div className="p-2 bg-red-50 rounded-lg text-red-600">
+                <ArrowDownRight className="w-5 h-5" />
+             </div>
+           </div>
+           <p className="text-sm font-semibold text-slate-500 uppercase tracking-wide">Total Expenses</p>
+           <h2 className="text-2xl font-bold text-slate-800 mt-1">৳{totalExpenses.toLocaleString()}</h2>
+           <p className="text-xs text-slate-400 mt-1">Vendor + Sub-contract + Materials</p>
+        </div>
+
+        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm relative overflow-hidden">
+           <div className="flex justify-between items-start mb-2">
+             <div className="p-2 bg-indigo-50 rounded-lg text-indigo-600">
+                <Package className="w-5 h-5" />
+             </div>
+           </div>
+           <p className="text-sm font-semibold text-slate-500 uppercase tracking-wide">Material Inventory Value</p>
+           <h2 className="text-2xl font-bold text-slate-800 mt-1">৳{materialInventoryValue.toLocaleString()}</h2>
+           <p className="text-xs text-slate-400 mt-1">Asset Value in Stock</p>
+        </div>
+
+        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm relative overflow-hidden border-l-4 border-l-violet-500">
+           <div className="flex justify-between items-start mb-2">
+             <div className="p-2 bg-violet-50 rounded-lg text-violet-600">
+                <TrendingUp className="w-5 h-5" />
+             </div>
+           </div>
+           <p className="text-sm font-semibold text-slate-500 uppercase tracking-wide">Accrued Profit</p>
+           <h2 className={`text-2xl font-bold mt-1 ${totalOperationalProfit >= 0 ? 'text-violet-700' : 'text-red-600'}`}>
+             {totalOperationalProfit >= 0 ? '+' : ''}৳{totalOperationalProfit.toLocaleString()}
+           </h2>
+           <p className="text-xs text-slate-400 mt-1">Work Value - Actual Expense</p>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-200 bg-slate-50 flex justify-between items-center">
+          <h3 className="font-semibold text-slate-800">Live Item-Wise Cost Sheet</h3>
+          <span className="text-xs font-bold text-emerald-600 bg-emerald-50 border border-emerald-200 px-2 py-1 rounded flex items-center gap-1">
+            <Zap className="w-3 h-3 fill-current" />
+            Auto-Synced with DPR
+          </span>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-left text-sm">
+            <thead className="bg-white text-slate-600 font-medium border-b border-slate-200 text-xs uppercase tracking-wider">
+              <tr>
+                <th className="px-4 py-3 w-8"></th>
+                <th className="px-4 py-3">Description</th>
+                <th className="px-4 py-3 text-right">Selling Rate</th>
+                <th className="px-4 py-3 text-right bg-indigo-50/50 text-indigo-700">Material Exp.</th>
+                <th className="px-4 py-3 text-right bg-orange-50/50 text-orange-700">Sub-Contract</th>
+                <th className="px-4 py-3 text-right text-slate-500">Est. Labor</th>
+                <th className="px-4 py-3 text-right font-bold text-slate-800 border-l border-slate-200">Total Actual</th>
+                <th className="px-4 py-3 text-right">Billed (PE)</th>
+                <th className="px-4 py-3 text-right">Net Profit</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {liveItemStats.map((item) => {
+                if (item.executedQty === 0) return null;
+                const totalPL = item.stats.profit;
+                const workDoneValue = item.executedQty * item.rate;
+                const pendingBill = Math.max(0, workDoneValue - (item.billedAmount || 0));
+
+                return (
+                  <React.Fragment key={item.id}>
+                    <tr 
+                      className={`hover:bg-slate-50 transition-colors cursor-pointer ${expandedRow === item.id ? 'bg-slate-50' : ''}`}
+                      onClick={() => toggleRow(item.id)}
+                    >
+                      <td className="px-4 py-4 text-center">
+                        {expandedRow === item.id ? <ChevronUp className="w-4 h-4 text-slate-400" /> : <ChevronDown className="w-4 h-4 text-slate-400" />}
+                      </td>
+                      <td className="px-4 py-4 font-medium text-slate-700 max-w-[250px]">
+                        <div className="truncate">{item.description}</div>
+                        <div className="text-[10px] text-slate-400 font-mono mt-0.5">{item.id} • Qty: {item.executedQty.toLocaleString()} {item.unit}</div>
+                      </td>
+                      <td className="px-4 py-4 text-right text-slate-900 font-mono">৳{item.rate.toLocaleString()}</td>
+                      
+                      <td className="px-4 py-4 text-right font-mono bg-indigo-50/30 text-indigo-700">
+                         {item.stats.materialExp > 0 ? `৳${item.stats.materialExp.toLocaleString()}` : '-'}
+                      </td>
+                      <td className="px-4 py-4 text-right font-mono bg-orange-50/30 text-orange-700">
+                         {item.stats.subContractExp > 0 ? `৳${item.stats.subContractExp.toLocaleString()}` : '-'}
+                      </td>
+                      <td className="px-4 py-4 text-right font-mono text-slate-500">
+                         {item.stats.directLaborExp > 0 ? `~৳${item.stats.directLaborExp.toLocaleString()}` : '-'}
+                      </td>
+                      
+                      <td className="px-4 py-4 text-right font-bold text-slate-900 font-mono border-l border-slate-200 bg-slate-50/50">
+                        ৳{item.stats.totalActualCost.toLocaleString()}
+                      </td>
+                      
+                      <td className="px-4 py-4 text-right text-emerald-700 font-medium">
+                        ৳{(item.billedAmount || 0).toLocaleString()}
+                        {pendingBill > 0 && <div className="text-[9px] text-orange-400">Due: ৳{pendingBill.toLocaleString()}</div>}
+                      </td>
+                      
+                      <td className={`px-4 py-4 text-right font-bold ${totalPL >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
+                         ৳{totalPL.toLocaleString()}
+                      </td>
+                    </tr>
+                    {expandedRow === item.id && (
+                      <tr className="bg-slate-50">
+                        <td colSpan={9} className="px-6 py-4">
+                          <div className="ml-8 flex gap-4">
+                            <div className="flex-1 bg-white p-4 rounded-lg border border-slate-200 shadow-sm">
+                               <h4 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-3">DPR Source Data Breakdown</h4>
+                               <div className="grid grid-cols-3 gap-4 text-center">
+                                  <div className="p-2 bg-indigo-50 rounded border border-indigo-100">
+                                     <div className="text-[10px] text-indigo-500 font-bold uppercase">Material Consumed</div>
+                                     <div className="font-mono font-bold text-indigo-700">৳{item.stats.materialExp.toLocaleString()}</div>
+                                     <div className="text-[9px] text-indigo-400 mt-1">From Stock Out</div>
+                                  </div>
+                                  <div className="p-2 bg-orange-50 rounded border border-orange-100">
+                                     <div className="text-[10px] text-orange-500 font-bold uppercase">Sub-Contract Work</div>
+                                     <div className="font-mono font-bold text-orange-700">৳{item.stats.subContractExp.toLocaleString()}</div>
+                                     <div className="text-[9px] text-orange-400 mt-1">Based on Agreed Rate</div>
+                                  </div>
+                                  <div className="p-2 bg-slate-50 rounded border border-slate-200">
+                                     <div className="text-[10px] text-slate-500 font-bold uppercase">Direct Labor</div>
+                                     <div className="font-mono font-bold text-slate-700">৳{item.stats.directLaborExp.toLocaleString()}</div>
+                                     <div className="text-[9px] text-slate-400 mt-1">Daily Labor Count</div>
+                                  </div>
+                               </div>
+                            </div>
+                            <div className="w-1/3 bg-white p-4 rounded-lg border border-slate-200 shadow-sm flex flex-col justify-center">
+                                <div className="flex justify-between items-center mb-2">
+                                   <span className="text-xs font-bold text-slate-500">Actual Unit Cost</span>
+                                   <span className="font-mono font-bold text-slate-800">৳{(item.stats.totalActualCost / item.executedQty).toFixed(2)}</span>
+                                </div>
+                                <div className="flex justify-between items-center mb-2">
+                                   <span className="text-xs font-bold text-slate-500">Planned Unit Cost</span>
+                                   <span className="font-mono text-slate-600">৳{item.plannedUnitCost.toFixed(2)}</span>
+                                </div>
+                                <div className="h-px bg-slate-100 my-2"></div>
+                                <div className="flex justify-between items-center">
+                                   <span className="text-xs font-bold text-slate-500">Variance</span>
+                                   <span className={`font-mono font-bold ${item.plannedUnitCost - (item.stats.totalActualCost / item.executedQty) >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
+                                      {item.plannedUnitCost - (item.stats.totalActualCost / item.executedQty) >= 0 ? 'Savings' : 'Overrun'}
+                                   </span>
+                                </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      
+      {/* COST CENTER BREAKDOWN SECTION */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden h-fit">
+            <div className="px-6 py-4 border-b border-slate-200 bg-slate-50/50 flex items-center gap-2">
+                <Hammer className="w-4 h-4 text-indigo-600" />
+                <h3 className="font-semibold text-slate-800">Material Cost Breakdown</h3>
+            </div>
+            <div className="overflow-x-auto">
+                <table className="w-full text-left text-sm">
+                    <thead className="bg-slate-50 text-slate-500 font-medium text-xs uppercase border-b border-slate-100">
+                        <tr>
+                            <th className="px-4 py-2">Material</th>
+                            <th className="px-4 py-2 text-right">Avg Rate</th>
+                            <th className="px-4 py-2 text-right">Qty Consumed</th>
+                            <th className="px-4 py-2 text-right">Total Expense</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-slate-50">
+                        {materialStats.map(m => (
+                            <tr key={m.id} className="hover:bg-slate-50">
+                                <td className="px-4 py-2 font-medium text-slate-700">{m.name}</td>
+                                <td className="px-4 py-2 text-right font-mono text-slate-600">৳{m.averageRate.toLocaleString()}</td>
+                                <td className="px-4 py-2 text-right font-mono text-slate-600">{m.liveConsumedQty} <span className="text-[10px] text-slate-400">{m.unit}</span></td>
+                                <td className="px-4 py-2 text-right font-bold text-indigo-600 font-mono">৳{m.liveExpense.toLocaleString()}</td>
+                            </tr>
+                        ))}
+                        {materialStats.length === 0 && (
+                            <tr><td colSpan={4} className="p-4 text-center text-slate-400 text-xs">No consumption data</td></tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden h-fit">
+            <div className="px-6 py-4 border-b border-slate-200 bg-slate-50/50 flex items-center gap-2">
+                <UsersRound className="w-4 h-4 text-orange-600" />
+                <h3 className="font-semibold text-slate-800">Sub-Contractor Reconciliation</h3>
+            </div>
+            <div className="overflow-x-auto">
+                <table className="w-full text-left text-sm">
+                    <thead className="bg-slate-50 text-slate-500 font-medium text-xs uppercase border-b border-slate-100">
+                        <tr>
+                            <th className="px-4 py-2">Sub-Contractor</th>
+                            <th className="px-4 py-2 text-right">Work Value</th>
+                            <th className="px-4 py-2 text-right">Billed</th>
+                            <th className="px-4 py-2 text-right">Balance</th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-slate-50">
+                        {subContractorStats.map(sc => (
+                            <tr key={sc.id} className="hover:bg-slate-50">
+                                <td className="px-4 py-2">
+                                    <div className="font-medium text-slate-700">{sc.name}</div>
+                                    <div className="text-[10px] text-slate-400">{sc.specialization}</div>
+                                </td>
+                                <td className="px-4 py-2 text-right font-mono text-slate-600">৳{sc.liveWorkValue.toLocaleString()}</td>
+                                <td className="px-4 py-2 text-right font-mono text-slate-600">৳{sc.totalBilled.toLocaleString()}</td>
+                                <td className="px-4 py-2 text-right">
+                                    <span className={`font-mono font-bold ${sc.balance > 0 ? 'text-red-600' : 'text-emerald-600'}`}>
+                                        ৳{sc.balance.toLocaleString()}
+                                    </span>
+                                    {sc.balance > 0 && <AlertOctagon className="w-3 h-3 inline ml-1 text-red-500" />}
+                                </td>
+                            </tr>
+                        ))}
+                        {subContractorStats.length === 0 && (
+                             <tr><td colSpan={4} className="p-4 text-center text-slate-400 text-xs">No sub-contractors engaged</td></tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 min-h-[400px]">
+        <BillTable bills={clientBills} title="Client RA Bills" />
+        <BillTable bills={vendorBills} title="Vendor Invoices (Payables)" />
+      </div>
+
+      {isBillModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+          <div className="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
+            <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-slate-50">
+              <div className="flex items-center gap-2">
+                <h3 className="font-semibold text-slate-800">
+                  {billType === 'CLIENT_RA' ? 'Record Bill Received (PE)' : 'Add Expense / Invoice'}
+                </h3>
+                {aiAutofilled && (
+                  <div className="flex items-center gap-1.5 px-2 py-0.5 bg-emerald-50 text-emerald-600 text-[10px] font-bold rounded animate-pulse">
+                    <CheckCircle2 className="w-3 h-3" />
+                    AI Auto-Filled
+                  </div>
+                )}
+              </div>
+              <button onClick={() => setIsBillModalOpen(false)}><X className="w-5 h-5 text-slate-400"/></button>
+            </div>
+            <form onSubmit={handleCreateBill} className="p-6 space-y-4">
+               {billType !== 'CLIENT_RA' && (
+                 <>
+                   <div>
+                     <label className="block text-sm font-medium text-slate-700 mb-1">Expense Type</label>
+                     <select 
+                       value={billType} 
+                       onChange={(e) => handleBillTypeChange(e.target.value as any)}
+                       className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white"
+                     >
+                       <option value="VENDOR_INVOICE">General Vendor Invoice</option>
+                       <option value="MATERIAL_EXPENSE">Material Purchase</option>
+                       <option value="SUB_CONTRACTOR">Sub-Contractor Bill</option>
+                     </select>
+                   </div>
+                   <div>
+                      <label className="block text-sm font-medium text-slate-700 mb-1">Cost Category</label>
+                      <select
+                          value={billCategory}
+                          onChange={(e) => setBillCategory(e.target.value as any)}
+                           className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white"
+                      >
+                          <option value="MATERIAL">Material</option>
+                          <option value="LABOR">Labor</option>
+                          <option value="EQUIPMENT">Equipment</option>
+                          <option value="OVERHEAD">Overhead</option>
+                          <option value="OTHER">Other</option>
+                      </select>
+                   </div>
+                 </>
+               )}
+               <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-1">
+                    Entity Name
+                    {aiAutofilled && <Sparkles className="w-2.5 h-2.5 text-emerald-500" />}
+                  </label>
+                  <input 
+                    type="text" 
+                    required 
+                    value={billEntity} 
+                    onChange={(e) => setBillEntity(e.target.value)}
+                    placeholder="e.g. ABC Constructions Ltd."
+                    className={`w-full px-3 py-2 border rounded-lg text-sm transition-all ${aiAutofilled ? 'border-emerald-200 bg-emerald-50/20' : 'border-slate-300'}`}
+                  />
+               </div>
+               <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-1">
+                    Amount (৳)
+                    {aiAutofilled && <Sparkles className="w-2.5 h-2.5 text-emerald-500" />}
+                  </label>
+                  <input 
+                    type="number" 
+                    required 
+                    min="0"
+                    step="0.01"
+                    value={billAmount} 
+                    onChange={(e) => setBillAmount(e.target.value)}
+                    className={`w-full px-3 py-2 border rounded-lg text-sm transition-all ${aiAutofilled ? 'border-emerald-200 bg-emerald-50/20' : 'border-slate-300'}`}
+                  />
+               </div>
+               <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-1">
+                    Date
+                    {aiAutofilled && <Sparkles className="w-2.5 h-2.5 text-emerald-500" />}
+                  </label>
+                  <input 
+                    type="date" 
+                    required 
+                    value={billDate} 
+                    onChange={(e) => setBillDate(e.target.value)}
+                    className={`w-full px-3 py-2 border rounded-lg text-sm transition-all ${aiAutofilled ? 'border-emerald-200 bg-emerald-50/20' : 'border-slate-300'}`}
+                  />
+               </div>
+               
+               {billType === 'CLIENT_RA' && detectedBillDocName && (
+                 <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
+                   <p className="text-xs text-blue-700">
+                     <strong>AI Action:</strong> Upon saving, the system will read <em>"{detectedBillDocName}"</em> to automatically distribute the billed amount to individual BOQ items.
+                   </p>
+                 </div>
+               )}
+
+               <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded-lg font-bold hover:bg-blue-700">
+                 Save Record {billType === 'CLIENT_RA' && detectedBillDocName ? '& Auto-Distribute' : ''}
+               </button>
+            </form>
+          </div>
+        </div>
+      )}
+
+      <DocumentManager 
+        documents={data.documents} 
+        onAddDocument={onAddDocument} 
+        onBillUploaded={handleBillUploaded}
+        filterModule="FINANCE" 
+        compact={true}
+        allowUpload={canUploadDoc}
+      />
+    </div>
+  );
+};
+
+export default FinancialControl;

components/GanttChart.tsx

@@ -0,0 +1,133 @@
+
+import React from 'react';
+import { Task } from '../types';
+import { Calendar, ChevronLeft, ChevronRight, Filter } from 'lucide-react';
+
+interface GanttChartProps {
+  tasks: Task[];
+}
+
+const GanttChart: React.FC<GanttChartProps> = ({ tasks }) => {
+  const [viewMode, setViewMode] = React.useState<'WEEK' | 'MONTH'>('MONTH');
+  
+  // Simple Gantt Logic
+  const sortedTasks = [...tasks].sort((a, b) => new Date(a.startDate || a.createdAt).getTime() - new Date(b.startDate || b.createdAt).getTime());
+  
+  const getTaskDuration = (task: Task) => {
+    const start = new Date(task.startDate || task.createdAt);
+    const end = new Date(task.dueDate);
+    const diffTime = Math.abs(end.getTime() - start.getTime());
+    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+  };
+
+  return (
+    <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-full">
+      <div className="p-6 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+        <div>
+          <h2 className="text-xl font-bold text-slate-800">Project Timeline</h2>
+          <p className="text-sm text-slate-500">Visual schedule of all construction activities</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="flex bg-slate-100 p-1 rounded-lg">
+            <button 
+              onClick={() => setViewMode('WEEK')}
+              className={`px-3 py-1.5 text-xs font-bold rounded-md transition-all ${viewMode === 'WEEK' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
+            >
+              Week
+            </button>
+            <button 
+              onClick={() => setViewMode('MONTH')}
+              className={`px-3 py-1.5 text-xs font-bold rounded-md transition-all ${viewMode === 'MONTH' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
+            >
+              Month
+            </button>
+          </div>
+          <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
+            <Filter className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto p-6">
+        <div className="min-w-[800px]">
+          {/* Timeline Header */}
+          <div className="flex border-b border-slate-100 pb-4 mb-6">
+            <div className="w-64 shrink-0 font-bold text-slate-400 text-xs uppercase tracking-wider">Activity / Task</div>
+            <div className="flex-1 flex justify-between px-4 text-xs font-bold text-slate-400 uppercase tracking-wider">
+              <span>Jan</span>
+              <span>Feb</span>
+              <span>Mar</span>
+              <span>Apr</span>
+              <span>May</span>
+              <span>Jun</span>
+              <span>Jul</span>
+              <span>Aug</span>
+              <span>Sep</span>
+              <span>Oct</span>
+              <span>Nov</span>
+              <span>Dec</span>
+            </div>
+          </div>
+
+          {/* Task Bars */}
+          <div className="space-y-6">
+            {sortedTasks.map((task, idx) => {
+              const start = new Date(task.startDate || task.createdAt);
+              const startMonth = start.getMonth();
+              const duration = getTaskDuration(task);
+              const widthPercent = Math.min(100, (duration / 365) * 100 * 12); // Rough estimation
+              const leftPercent = (startMonth / 12) * 100;
+
+              return (
+                <div key={task.id} className="flex items-center group">
+                  <div className="w-64 shrink-0 pr-4">
+                    <h4 className="font-bold text-slate-700 text-sm truncate group-hover:text-blue-600 transition-colors">{task.title}</h4>
+                    <span className="text-[10px] text-slate-400 font-medium">{new Date(task.startDate || task.createdAt).toLocaleDateString()} - {new Date(task.dueDate).toLocaleDateString()}</span>
+                  </div>
+                  <div className="flex-1 h-8 bg-slate-50 rounded-lg relative overflow-hidden">
+                    <div 
+                      className={`absolute top-0 bottom-0 rounded-lg shadow-sm transition-all hover:brightness-110 cursor-pointer ${
+                        task.status === 'COMPLETED' ? 'bg-emerald-500' : 
+                        task.status === 'IN_PROGRESS' ? 'bg-blue-500' : 
+                        task.status === 'BLOCKED' ? 'bg-red-500' : 'bg-slate-300'
+                      }`}
+                      style={{ 
+                        left: `${leftPercent}%`, 
+                        width: `${Math.max(5, widthPercent)}%` 
+                      }}
+                    >
+                      <div className="px-2 py-1 text-[8px] font-bold text-white truncate">
+                        {task.status}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      
+      <div className="p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-center gap-6">
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 bg-emerald-500 rounded-full" />
+          <span className="text-[10px] font-bold text-slate-500 uppercase">Completed</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 bg-blue-500 rounded-full" />
+          <span className="text-[10px] font-bold text-slate-500 uppercase">In Progress</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 bg-slate-300 rounded-full" />
+          <span className="text-[10px] font-bold text-slate-500 uppercase">Pending</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 bg-red-500 rounded-full" />
+          <span className="text-[10px] font-bold text-slate-500 uppercase">Blocked</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GanttChart;

components/Layout.tsx

@@ -0,0 +1,195 @@
+
+import React from 'react';
+import { 
+  LayoutDashboard, 
+  FileText, 
+  HardHat, 
+  DollarSign, 
+  AlertTriangle,
+  FolderOpen,
+  Menu,
+  X,
+  ChevronLeft,
+  UserCircle,
+  LogOut,
+  Bell,
+  CheckCircle2,
+  Users,
+  Calendar,
+  BarChart3,
+  ShoppingCart,
+  ShieldCheck,
+  Camera,
+  FileBarChart,
+  Truck,
+  UserCheck,
+  Box,
+  Globe
+} from 'lucide-react';
+import { UserRole, User } from '../types';
+import { NotificationCenter } from './Collaboration';
+
+interface LayoutProps {
+  children: React.ReactNode;
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+  onSwitchProject: () => void;
+  projectName: string;
+  user: User;
+  onLogout: () => void;
+}
+
+const Layout: React.FC<LayoutProps> = ({ 
+  children, 
+  activeTab, 
+  setActiveTab, 
+  onSwitchProject, 
+  projectName,
+  user,
+  onLogout
+}) => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
+
+  const navItems = [
+    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
+    { id: 'master', label: 'Master Control', icon: FileText },
+    { id: 'site', label: 'Site Execution', icon: HardHat },
+    { id: 'finance', label: 'Financial Control', icon: DollarSign },
+    { id: 'analytics', label: 'Financial Analytics', icon: BarChart3 },
+    { id: 'procurement', label: 'Procurement', icon: ShoppingCart },
+    { id: 'equipment', label: 'Equipment', icon: Truck },
+    { id: 'labor', label: 'Labor & Attendance', icon: UserCheck },
+    { id: 'subcontractors', label: 'Sub-contractors', icon: Users },
+    { id: 'qc-safety', label: 'QC & Safety', icon: ShieldCheck },
+    { id: 'tasks', label: 'Tasks', icon: CheckCircle2 },
+    { id: 'gantt', label: 'Timeline', icon: Calendar },
+    { id: 'bim', label: 'BIM Viewer', icon: Box },
+    { id: 'photos', label: 'Photo Logs', icon: Camera },
+    { id: 'reports', label: 'Reports', icon: FileBarChart },
+    { id: 'client', label: 'Client Portal', icon: Globe },
+    { id: 'team', label: 'Team', icon: Users },
+    { id: 'documents', label: 'Documents', icon: FolderOpen },
+  ];
+
+  const getRoleLabel = (role: string) => {
+    switch(role) {
+      case 'DIRECTOR': return 'Project Director';
+      case 'MANAGER': return 'Project Manager';
+      case 'ENGINEER': return 'Site Engineer';
+      case 'ACCOUNTANT': return 'Accountant';
+      default: return role;
+    }
+  };
+
+  const renderNav = () => (
+    <nav className="flex flex-col h-full">
+      <div className="p-4 border-b border-slate-100">
+        <div className="flex items-center gap-2 mb-2 text-slate-800">
+           <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center shrink-0">
+            <span className="text-white font-bold text-lg">B</span>
+          </div>
+          <span className="text-xl font-bold tracking-tight">Project Management AI</span>
+        </div>
+        <button 
+          onClick={onSwitchProject}
+          className="w-full flex items-center gap-2 text-xs font-medium text-slate-500 hover:text-blue-600 hover:bg-blue-50 p-2 rounded transition-colors mt-2"
+        >
+          <ChevronLeft className="w-3 h-3" />
+          Switch Project
+        </button>
+        <div className="mt-2 text-sm font-semibold text-slate-800 truncate" title={projectName}>
+          {projectName}
+        </div>
+      </div>
+
+            <div className="flex-1 p-4 space-y-1 overflow-y-auto">
+        {navItems.map((item) => (
+          <button
+            key={item.id}
+            onClick={() => {
+              setActiveTab(item.id);
+              setIsMobileMenuOpen(false);
+            }}
+            className={`w-full sidebar-item ${
+              activeTab === item.id ? 'sidebar-item-active' : ''
+            }`}
+          >
+            <item.icon className="w-4 h-4 shrink-0 transition-transform group-hover:scale-110" />
+            <span className="font-medium tracking-tight">{item.label}</span>
+          </button>
+        ))}
+      </div>
+
+      <div className="p-4 border-t border-slate-200">
+        <div className="flex items-center gap-3 px-3 py-2 bg-white border border-slate-200 rounded-xl shadow-sm">
+          {user.avatar ? (
+            <img src={user.avatar} alt={user.name} className="w-8 h-8 rounded-full border border-slate-100" referrerPolicy="no-referrer" />
+          ) : (
+            <div className="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center font-bold text-xs">
+              {user.name.charAt(0)}
+            </div>
+          )}
+          <div className="flex-1 min-w-0">
+            <p className="text-xs font-bold text-slate-800 truncate">{user.name}</p>
+            <p className="text-[9px] font-bold text-slate-500 uppercase tracking-wider">{getRoleLabel(user.role)}</p>
+          </div>
+          <button 
+            onClick={onLogout}
+            className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all"
+            title="Logout"
+          >
+            <LogOut className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+
+  return (
+    <div className="flex min-h-screen bg-slate-50">
+      {/* Mobile Header */}
+      <div className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-white border-b z-20 flex items-center justify-between px-4">
+        <div className="flex items-center gap-3">
+          <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="p-2 text-slate-600">
+            {isMobileMenuOpen ? <X /> : <Menu />}
+          </button>
+          <div className="flex flex-col">
+            <span className="font-bold text-lg text-slate-800">Project Management AI</span>
+            <span className="text-xs text-slate-500 truncate max-w-[150px]">{projectName}</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <NotificationCenter uid={user.uid || ''} />
+          {user.avatar && <img src={user.avatar} alt="User" className="w-8 h-8 rounded-full border border-slate-200" referrerPolicy="no-referrer" />}
+        </div>
+      </div>
+
+      {/* Sidebar Desktop */}
+      <aside className="hidden lg:block w-64 bg-white border-r border-slate-200 fixed h-full z-10">
+        {renderNav()}
+      </aside>
+
+      {/* Sidebar Mobile */}
+      {isMobileMenuOpen && (
+        <aside className="lg:hidden fixed inset-0 z-30 bg-white shadow-xl">
+          <div className="flex justify-end p-4">
+             <button onClick={() => setIsMobileMenuOpen(false)}><X /></button>
+          </div>
+          {renderNav()}
+        </aside>
+      )}
+
+      {/* Main Content */}
+      <main className="flex-1 lg:ml-64 p-4 lg:p-8 pt-20 lg:pt-8 transition-all">
+        <div className="max-w-7xl mx-auto">
+          <div className="hidden lg:flex justify-end mb-6">
+            <NotificationCenter uid={user.uid || ''} />
+          </div>
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default Layout;

components/LiabilityTracker.tsx

@@ -0,0 +1,110 @@
+
+import React from 'react';
+import { ProjectState, ProjectDocument, UserRole } from '../types';
+import { AlertTriangle, Clock, Lock } from 'lucide-react';
+import DocumentManager from './DocumentManager';
+
+interface LiabilityTrackerProps {
+  data: ProjectState;
+  onAddDocument: (doc: ProjectDocument) => void;
+  userRole: UserRole;
+}
+
+const LiabilityTracker: React.FC<LiabilityTrackerProps> = ({ data, onAddDocument, userRole }) => {
+  const retentionTotal = data.liabilities.filter(l => l.type === 'RETENTION').reduce((s, l) => s + l.amount, 0);
+  const poTotal = data.liabilities.filter(l => l.type === 'PENDING_PO').reduce((s, l) => s + l.amount, 0);
+  const unbilledTotal = data.liabilities.filter(l => l.type === 'UNBILLED_WORK').reduce((s, l) => s + l.amount, 0);
+
+  const canEdit = userRole === 'DIRECTOR' || userRole === 'ACCOUNTANT';
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-800">Liability Tracker</h1>
+          <p className="text-slate-500">Monitor Future Obligations & Risks</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-white p-6 rounded-xl border-l-4 border-indigo-500 shadow-sm">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="p-2 bg-indigo-50 rounded-lg text-indigo-600">
+              <Lock className="w-5 h-5" />
+            </div>
+            <h3 className="font-semibold text-slate-800">Retention Money</h3>
+          </div>
+          <p className="text-2xl font-bold text-slate-900">৳{retentionTotal.toLocaleString()}</p>
+          <p className="text-sm text-slate-500 mt-1">Held by client, due after defect liability period.</p>
+        </div>
+
+        <div className="bg-white p-6 rounded-xl border-l-4 border-orange-500 shadow-sm">
+          <div className="flex items-center gap-3 mb-2">
+             <div className="p-2 bg-orange-50 rounded-lg text-orange-600">
+              <Clock className="w-5 h-5" />
+            </div>
+            <h3 className="font-semibold text-slate-800">Pending POs</h3>
+          </div>
+          <p className="text-2xl font-bold text-slate-900">৳{poTotal.toLocaleString()}</p>
+          <p className="text-sm text-slate-500 mt-1">Committed costs for materials ordered but not billed.</p>
+        </div>
+
+        <div className="bg-white p-6 rounded-xl border-l-4 border-red-500 shadow-sm">
+          <div className="flex items-center gap-3 mb-2">
+             <div className="p-2 bg-red-50 rounded-lg text-red-600">
+              <AlertTriangle className="w-5 h-5" />
+            </div>
+            <h3 className="font-semibold text-slate-800">Unbilled Liabilities</h3>
+          </div>
+          <p className="text-2xl font-bold text-slate-900">৳{unbilledTotal.toLocaleString()}</p>
+          <p className="text-sm text-slate-500 mt-1">Work done by subcontractors, not yet invoiced.</p>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-200">
+          <h3 className="font-semibold text-slate-800">Detailed Liability Ledger</h3>
+        </div>
+        <table className="w-full text-left text-sm">
+          <thead className="bg-slate-50 text-slate-600 font-medium border-b border-slate-200">
+            <tr>
+              <th className="px-6 py-3">ID</th>
+              <th className="px-6 py-3">Description</th>
+              <th className="px-6 py-3">Type</th>
+              <th className="px-6 py-3">Due Date</th>
+              <th className="px-6 py-3 text-right">Amount</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-100">
+            {data.liabilities.map(liability => (
+              <tr key={liability.id} className="hover:bg-slate-50">
+                <td className="px-6 py-3 font-medium text-slate-700">{liability.id}</td>
+                <td className="px-6 py-3 text-slate-600">{liability.description}</td>
+                <td className="px-6 py-3">
+                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
+                    ${liability.type === 'RETENTION' ? 'bg-indigo-100 text-indigo-800' : 
+                      liability.type === 'PENDING_PO' ? 'bg-orange-100 text-orange-800' : 
+                      'bg-red-100 text-red-800'}`}>
+                    {liability.type.replace('_', ' ')}
+                  </span>
+                </td>
+                <td className="px-6 py-3 text-slate-500">{liability.dueDate}</td>
+                <td className="px-6 py-3 text-right font-medium text-slate-900">৳{liability.amount.toLocaleString()}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <DocumentManager 
+        documents={data.documents} 
+        onAddDocument={onAddDocument} 
+        filterModule="LIABILITY" 
+        compact={true} 
+        allowUpload={canEdit}
+      />
+    </div>
+  );
+};
+
+export default LiabilityTracker;

components/LocalAssistant.tsx

@@ -0,0 +1,250 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { ChatMessage, User } from '../types';
+import { Send, Bot, User as UserIcon, X, Maximize2, Minimize2, Loader2, Sparkles } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface LocalAssistantProps {
+  currentUser: User;
+  projectContext?: any;
+}
+
+const LocalAssistant: React.FC<LocalAssistantProps> = ({ currentUser, projectContext }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
+  const [input, setInput] = useState('');
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    {
+      role: 'model',
+      parts: [{ text: "Hello! I'm BuildTrack Local Assistant. I can summarize project data without using any external AI service." }]
+    }
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  const buildLocalResponse = (question: string) => {
+    const project = projectContext;
+    const normalized = question.toLowerCase();
+
+    if (!project) {
+      return "No project is selected yet. Open a project and I can summarize progress, risks, BOQ status, bills, documents, and pending suggestions from the local project data.";
+    }
+
+    const boq = project.boq || [];
+    const bills = project.bills || [];
+    const liabilities = project.liabilities || [];
+    const dprs = project.dprs || [];
+    const documents = project.documents || [];
+    const suggestions = project.aiSuggestions || [];
+    const planned = boq.reduce((sum: number, item: any) => sum + (item.plannedQty || 0) * (item.rate || 0), 0);
+    const executed = boq.reduce((sum: number, item: any) => sum + (item.executedQty || 0) * (item.rate || 0), 0);
+    const progress = planned > 0 ? ((executed / planned) * 100).toFixed(1) : "0.0";
+    const pendingHigh = boq.filter((item: any) => item.priority === 'HIGH' && (item.executedQty || 0) < (item.plannedQty || 0));
+    const money = (value: number) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(value || 0);
+
+    if (normalized.includes('risk')) {
+      const risk = project.riskAssessment;
+      if (risk?.risks?.length) {
+        return `Current local risk score is **${risk.overallRiskScore}/100**.\n\n${risk.risks.slice(0, 3).map((r: any) => `- **${r.category} (${r.impact})**: ${r.description} Mitigation: ${r.mitigation}`).join('\n')}`;
+      }
+      return `No saved risk assessment is available yet. Based on local project data, I would first review ${pendingHigh.length} high-priority pending BOQ item(s), ${liabilities.length} liability record(s), and upcoming milestones.`;
+    }
+
+    if (normalized.includes('bill') || normalized.includes('finance') || normalized.includes('money')) {
+      const clientBilled = bills.filter((b: any) => b.type === 'CLIENT_RA').reduce((sum: number, b: any) => sum + (b.amount || 0), 0);
+      const expenses = bills.filter((b: any) => b.type !== 'CLIENT_RA').reduce((sum: number, b: any) => sum + (b.amount || 0), 0);
+      const liabilityTotal = liabilities.reduce((sum: number, l: any) => sum + (l.amount || 0), 0);
+      return `Financial snapshot:\n\n- Client billed: **${money(clientBilled)}**\n- Recorded expenses: **${money(expenses)}**\n- Open liabilities: **${money(liabilityTotal)}**\n- Executed value: **${money(executed)}**`;
+    }
+
+    if (normalized.includes('document') || normalized.includes('file')) {
+      return `This project has **${documents.length}** document(s). Pending local suggestions: **${suggestions.filter((s: any) => s.status === 'PENDING').length}**. Use the document manager's scan action to create local suggestions from file names and available text.`;
+    }
+
+    if (normalized.includes('boq') || normalized.includes('progress') || normalized.includes('status')) {
+      const pendingText = pendingHigh.length
+        ? pendingHigh.slice(0, 3).map((item: any) => `- ${item.description}: ${(item.plannedQty || 0) - (item.executedQty || 0)} ${item.unit} pending`).join('\n')
+        : "- No high-priority BOQ items are pending.";
+      return `Project status for **${project.name}**:\n\n- Progress: **${progress}%** by value\n- Planned value: **${money(planned)}**\n- Executed value: **${money(executed)}**\n- DPR entries: **${dprs.length}**\n\n${pendingText}`;
+    }
+
+      return `I am running fully locally for ${currentUser.name} (${currentUser.role}). For **${project.name}**, I can summarize progress, BOQ, risks, bills, DPRs, documents, and pending suggestions using data already stored in this app.`;
+  };
+
+  const handleSend = async () => {
+    if (!input.trim() || isLoading) return;
+
+    const question = input.trim();
+    const userMessage: ChatMessage = {
+      role: 'user',
+      parts: [{ text: question }]
+    };
+
+    setMessages(prev => [...prev, userMessage]);
+    setInput('');
+    setIsLoading(true);
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 250));
+
+      const modelResponse: ChatMessage = {
+        role: 'model',
+        parts: [{ text: buildLocalResponse(question) }]
+      };
+
+      setMessages(prev => [...prev, modelResponse]);
+    } catch (error) {
+      console.error("Local assistant error:", error);
+      setMessages(prev => [...prev, {
+        role: 'model',
+        parts: [{ text: "I could not process that local request. Please try a shorter question about progress, risk, bills, documents, or BOQ." }]
+      }]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end">
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9, y: 20 }}
+            animate={{ 
+              opacity: 1, 
+              scale: 1, 
+              y: 0,
+              height: isMinimized ? '64px' : '600px',
+              width: isMinimized ? '300px' : '400px'
+            }}
+            exit={{ opacity: 0, scale: 0.9, y: 20 }}
+            className="bg-white rounded-2xl shadow-2xl border border-slate-200 overflow-hidden mb-4 flex flex-col max-h-[80vh] w-[90vw] md:w-[400px]"
+          >
+            {/* Header */}
+            <div className="p-4 bg-blue-600 text-white flex items-center justify-between shrink-0">
+              <div className="flex items-center gap-2">
+                <div className="p-1.5 bg-white/20 rounded-lg">
+                  <Sparkles className="w-4 h-4 text-white" />
+                </div>
+                <div>
+                  <h3 className="font-bold text-sm leading-none">Local Assistant</h3>
+                  <span className="text-[10px] text-blue-100 animate-pulse">Local & Ready</span>
+                </div>
+              </div>
+              <div className="flex items-center gap-1">
+                <button 
+                  onClick={() => setIsMinimized(!isMinimized)}
+                  className="p-1.5 hover:bg-white/10 rounded-lg transition-colors"
+                >
+                  {isMinimized ? <Maximize2 className="w-4 h-4" /> : <Minimize2 className="w-4 h-4" />}
+                </button>
+                <button 
+                  onClick={() => setIsOpen(false)}
+                  className="p-1.5 hover:bg-white/10 rounded-lg transition-colors"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+
+            {!isMinimized && (
+              <>
+                {/* Messages */}
+                <div 
+                  ref={scrollRef}
+                  className="flex-1 overflow-y-auto p-4 space-y-4 bg-slate-50"
+                >
+                  {messages.map((m, i) => (
+                    <div 
+                      key={i} 
+                      className={`flex gap-3 ${m.role === 'user' ? 'flex-row-reverse' : ''}`}
+                    >
+                      <div className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0 ${
+                        m.role === 'user' ? 'bg-blue-600 text-white' : 'bg-white border border-slate-200 text-blue-600 shadow-sm'
+                      }`}>
+                        {m.role === 'user' ? <UserIcon className="w-4 h-4" /> : <Bot className="w-4 h-4" />}
+                      </div>
+                      <div className={`max-w-[80%] rounded-2xl p-3 text-sm shadow-sm ${
+                        m.role === 'user' 
+                          ? 'bg-blue-600 text-white rounded-tr-none' 
+                          : 'bg-white text-slate-700 rounded-tl-none border border-slate-100'
+                      }`}>
+                        <div className="prose prose-sm max-w-none prose-slate">
+                          <ReactMarkdown
+                             components={{
+                              p: ({ children }) => <p className="mb-0">{children}</p>,
+                              ul: ({ children }) => <ul className="my-1 list-disc pl-4">{children}</ul>,
+                              ol: ({ children }) => <ol className="my-1 list-decimal pl-4">{children}</ol>,
+                            }}
+                          >
+                            {m.parts[0].text}
+                          </ReactMarkdown>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                  {isLoading && (
+                    <div className="flex gap-3">
+                      <div className="w-8 h-8 rounded-full bg-white border border-slate-200 text-blue-600 flex items-center justify-center shrink-0 shadow-sm">
+                        <Bot className="w-4 h-4" />
+                      </div>
+                      <div className="bg-white border border-slate-100 rounded-2xl rounded-tl-none p-3 shadow-sm">
+                        <Loader2 className="w-4 h-4 animate-spin text-blue-600" />
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Input */}
+                <div className="p-4 bg-white border-t border-slate-100 shrink-0">
+                  <div className="relative">
+                    <input 
+                      type="text"
+                      placeholder="Ask local assistant..."
+                      value={input}
+                      onChange={(e) => setInput(e.target.value)}
+                      onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+                      className="w-full pl-4 pr-12 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-600 outline-none text-sm transition-all"
+                    />
+                    <button 
+                      onClick={handleSend}
+                      disabled={!input.trim() || isLoading}
+                      className="absolute right-1.5 top-1/2 -translate-y-1/2 p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all disabled:bg-slate-300 disabled:shadow-none shadow-lg shadow-blue-200"
+                    >
+                      <Send className="w-4 h-4" />
+                    </button>
+                  </div>
+                  <p className="text-[10px] text-slate-400 mt-2 text-center">
+                    Local assistant uses project data stored in this app.
+                  </p>
+                </div>
+              </>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        onClick={() => {
+          if (!isOpen) setIsOpen(true);
+          setIsMinimized(false);
+        }}
+        className={`w-14 h-14 rounded-full flex items-center justify-center shadow-2xl transition-colors ${
+          isOpen ? 'bg-white text-blue-600 border border-blue-100' : 'bg-blue-600 text-white'
+        }`}
+      >
+        <Sparkles className="w-6 h-6" />
+      </motion.button>
+    </div>
+  );
+};
+
+export default LocalAssistant;

components/ManualOverrideToggle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ShieldAlert } from 'lucide-react';
+import { useNotification } from '../contexts/NotificationContext';
+
+const ManualOverrideToggle: React.FC = () => {
+  const [isOverride, setIsOverride] = React.useState(false);
+  const { showToast } = useNotification();
+
+  const toggle = () => {
+    const newState = !isOverride;
+    setIsOverride(newState);
+    showToast(`System Override Mode: ${newState ? 'ENABLED' : 'DISABLED'}`, newState ? 'error' : 'info');
+  };
+
+  return (
+    <button 
+      onClick={toggle}
+      className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${isOverride ? 'bg-red-600 text-white shadow-lg' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'}`}
+    >
+      <ShieldAlert className="w-4 h-4" />
+      {isOverride ? 'Override ACTIVE' : 'Manual Override'}
+    </button>
+  );
+};
+
+export default ManualOverrideToggle;

components/MasterControl.tsx

@@ -0,0 +1,1064 @@
+
+import React, { useState, useMemo, useEffect } from 'react';
+import { ProjectState, ProjectDocument, UserRole, BOQItem, Unit, Priority } from '../types';
+import DocumentManager from './DocumentManager';
+import ChangeOrderManager from './ChangeOrderManager';
+import ManualOverrideToggle from './ManualOverrideToggle';
+import { 
+  PlusCircle, 
+  X, 
+  Search, 
+  Filter, 
+  ArrowUpDown, 
+  ChevronDown, 
+  ArrowUp, 
+  ArrowDown, 
+  Activity, 
+  RotateCcw, 
+  Sparkles, 
+  Loader2, 
+  ChevronUp, 
+  Layers, 
+  Flag, 
+  Save, 
+  Info, 
+  CheckCircle2, 
+  FileText, 
+  UploadCloud, 
+  Link as LinkIcon, 
+  Download, 
+  FileUp 
+} from 'lucide-react';
+import { suggestPlannedUnitCost, parseBOQDocument } from '../services/localAnalysisService';
+
+interface MasterControlProps {
+  data: ProjectState;
+  onAddDocument: (doc: ProjectDocument) => void;
+  onAddBOQItem: (item: BOQItem) => void;
+  onUpdateBOQItem?: (itemId: string, updatedItem: Partial<BOQItem>) => void;
+  onImportBOQItems: (items: BOQItem[]) => void;
+  userRole: UserRole;
+}
+
+type SortField = 'id' | 'rate' | 'plannedUnitCost' | 'plannedQty' | 'executedQty' | 'progress' | 'revenue' | 'variance' | 'profit' | 'priority';
+type SortDirection = 'asc' | 'desc';
+type StatusFilter = 'ALL' | 'PENDING' | 'IN_PROGRESS' | 'COMPLETED';
+
+const MasterControl: React.FC<MasterControlProps> = ({ data, onAddDocument, onAddBOQItem, onUpdateBOQItem, onImportBOQItems, userRole }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [unitFilter, setUnitFilter] = useState<Unit | 'ALL'>('ALL');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('ALL');
+  const [priorityFilter, setPriorityFilter] = useState<Priority | 'ALL'>('ALL');
+  const [sortField, setSortField] = useState<SortField>('id');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+
+  // Import State
+  const [importTab, setImportTab] = useState<'EXISTING' | 'UPLOAD'>('EXISTING');
+  const [selectedFileId, setSelectedFileId] = useState('');
+  const [fileToUpload, setFileToUpload] = useState<File | null>(null);
+  const [isImporting, setIsImporting] = useState(false);
+  const [importStatus, setImportStatus] = useState<string | null>(null);
+
+  // Editing state for breakdown
+  const [editId, setEditId] = useState<string | null>(null);
+  const [editMat, setEditMat] = useState<string>('0');
+  const [editLab, setEditLab] = useState<string>('0');
+  const [editEqp, setEditEqp] = useState<string>('0');
+  const [editOH, setEditOH] = useState<string>('0');
+
+  const canEditBOQ = userRole === 'DIRECTOR' || userRole === 'MANAGER';
+
+  // Form State for Adding Item
+  const [description, setDescription] = useState('');
+  const [unit, setUnit] = useState<Unit>(Unit.CUM);
+  const [rate, setRate] = useState<string>('');
+  const [plannedUnitCost, setPlannedUnitCost] = useState<string>('');
+  const [itemPriority, setItemPriority] = useState<Priority>('MEDIUM');
+  const [plannedQty, setPlannedQty] = useState<string>('');
+  
+  // Breakdown states for new item
+  const [plannedMat, setPlannedMat] = useState<string>('0');
+  const [plannedLab, setPlannedLab] = useState<string>('0');
+  const [plannedEqp, setPlannedEqp] = useState<string>('0');
+  const [plannedOH, setPlannedOH] = useState<string>('0');
+  
+  const [isSuggesting, setIsSuggesting] = useState(false);
+  const [aiAppliedFields, setAiAppliedFields] = useState<boolean>(false);
+
+  // Auto-calculate plannedUnitCost when breakdown changes for NEW item
+  useEffect(() => {
+    const total = Number(plannedMat) + Number(plannedLab) + Number(plannedEqp) + Number(plannedOH);
+    setPlannedUnitCost(total.toString());
+  }, [plannedMat, plannedLab, plannedEqp, plannedOH]);
+
+  // Use all documents for import selection to give user full flexibility
+  const availableDocs = useMemo(() => {
+    // Filter for documents that are likely to be BOQs (PDF, Excel, etc.)
+    return data.documents.filter(d => 
+      ['PDF', 'XLSX', 'CSV', 'DOC', 'DOCX'].includes(d.type) || 
+      ['CONTRACT', 'REPORT', 'BILL'].includes(d.category)
+    );
+  }, [data.documents]);
+
+  const handleAddItem = (e: React.FormEvent) => {
+    e.preventDefault();
+    const newItem: BOQItem = {
+      id: `${(data.boq.length + 1) * 10}-NEW`,
+      description,
+      unit,
+      rate: Number(rate),
+      priority: itemPriority,
+      plannedUnitCost: Number(plannedUnitCost),
+      plannedBreakdown: {
+        material: Number(plannedMat),
+        labor: Number(plannedLab),
+        equipment: Number(plannedEqp),
+        overhead: Number(plannedOH)
+      },
+      plannedQty: Number(plannedQty),
+      executedQty: 0
+    };
+    onAddBOQItem(newItem);
+    setIsModalOpen(false);
+    resetForm();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setFileToUpload(e.target.files[0]);
+    }
+  };
+
+  const handleImport = async () => {
+    if (importTab === 'EXISTING' && !selectedFileId) return;
+    if (importTab === 'UPLOAD' && !fileToUpload) return;
+
+    setIsImporting(true);
+    
+    try {
+      let docName = '';
+      
+      if (importTab === 'UPLOAD' && fileToUpload) {
+         setImportStatus('Uploading & Scanning...');
+         
+         // 1. Create and Add Document
+         const newDoc: ProjectDocument = {
+            id: `D${Date.now()}`,
+            name: fileToUpload.name,
+            type: fileToUpload.name.split('.').pop()?.toUpperCase() || 'PDF',
+            category: 'CONTRACT',
+            module: 'MASTER',
+            uploadDate: new Date().toISOString().split('T')[0],
+            size: `${(fileToUpload.size / (1024 * 1024)).toFixed(2)} MB`,
+            url: URL.createObjectURL(fileToUpload),
+            isAnalyzed: true
+         };
+         
+         onAddDocument(newDoc);
+         docName = newDoc.name;
+         
+         // Artificial delay for UX
+         await new Promise(resolve => setTimeout(resolve, 1500));
+         
+      } else {
+         const file = data.documents.find(d => d.id === selectedFileId);
+         if (!file) return;
+         docName = file.name;
+         setImportStatus('Analyzing existing document...');
+      }
+
+      // 2. Parse Items via AI Service
+      const items = await parseBOQDocument(docName);
+      
+      setImportStatus(`Found ${items.length} BOQ items. Syncing...`);
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      // 3. Import Items
+      onImportBOQItems(items);
+      
+      resetImport();
+    } catch (e) {
+      setImportStatus('Failed to parse document.');
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  const resetImport = () => {
+    setIsImportModalOpen(false);
+    setSelectedFileId('');
+    setFileToUpload(null);
+    setImportTab('EXISTING');
+    setImportStatus(null);
+  };
+
+  const resetForm = () => {
+    setDescription('');
+    setRate('');
+    setPlannedUnitCost('');
+    setPlannedQty('');
+    setPlannedMat('0');
+    setPlannedLab('0');
+    setPlannedEqp('0');
+    setPlannedOH('0');
+    setItemPriority('MEDIUM');
+    setAiAppliedFields(false);
+  };
+
+  const handleSuggestCost = async () => {
+    if (!description) return;
+    setIsSuggesting(true);
+    const suggestion = await suggestPlannedUnitCost(description, unit, data.boq);
+    setIsSuggesting(false);
+    
+    if (suggestion) {
+      setPlannedMat(suggestion.breakdown.material.toString());
+      setPlannedLab(suggestion.breakdown.labor.toString());
+      setPlannedEqp(suggestion.breakdown.equipment.toString());
+      setPlannedOH(suggestion.breakdown.overhead.toString());
+      setAiAppliedFields(true);
+      
+      // Reset highlight after 3 seconds
+      setTimeout(() => setAiAppliedFields(false), 3000);
+    }
+  };
+
+  const startEditing = (item: BOQItem) => {
+    setEditId(item.id);
+    setEditMat(item.plannedBreakdown?.material?.toString() || '0');
+    setEditLab(item.plannedBreakdown?.labor?.toString() || '0');
+    setEditEqp(item.plannedBreakdown?.equipment?.toString() || '0');
+    setEditOH(item.plannedBreakdown?.overhead?.toString() || '0');
+  };
+
+  const cancelEditing = () => {
+    setEditId(null);
+  };
+
+  const saveEditing = (id: string) => {
+    if (!onUpdateBOQItem) return;
+    const total = Number(editMat) + Number(editLab) + Number(editEqp) + Number(editOH);
+    onUpdateBOQItem(id, {
+      plannedUnitCost: total,
+      plannedBreakdown: {
+        material: Number(editMat),
+        labor: Number(editLab),
+        equipment: Number(editEqp),
+        overhead: Number(editOH)
+      }
+    });
+    setEditId(null);
+  };
+
+  const handleLinkDocument = (itemId: string, docId: string) => {
+    if (onUpdateBOQItem) {
+      onUpdateBOQItem(itemId, { linkedDocId: docId || undefined });
+    }
+  };
+
+  const toggleRow = (id: string) => {
+    const newExpanded = new Set(expandedRows);
+    if (newExpanded.has(id)) {
+      newExpanded.delete(id);
+      if (editId === id) setEditId(null);
+    } else {
+      newExpanded.add(id);
+    }
+    setExpandedRows(newExpanded);
+  };
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortDirection('asc');
+    }
+  };
+
+  const clearFilters = () => {
+    setSearchTerm('');
+    setUnitFilter('ALL');
+    setStatusFilter('ALL');
+    setPriorityFilter('ALL');
+  };
+
+  const hasActiveFilters = searchTerm !== '' || unitFilter !== 'ALL' || statusFilter !== 'ALL' || priorityFilter !== 'ALL';
+
+  const getPriorityWeight = (p?: Priority) => {
+    if (p === 'HIGH') return 3;
+    if (p === 'MEDIUM') return 2;
+    if (p === 'LOW') return 1;
+    return 0;
+  };
+
+  // Group documents by category for the dropdown
+  const groupedDocuments = useMemo(() => {
+    const groups: Record<string, ProjectDocument[]> = {};
+    data.documents.forEach(doc => {
+      if (!groups[doc.category]) groups[doc.category] = [];
+      groups[doc.category].push(doc);
+    });
+    return groups;
+  }, [data.documents]);
+
+  const filteredAndSortedBOQ = useMemo(() => {
+    return data.boq
+      .filter(item => {
+        const matchesSearch = item.description.toLowerCase().includes(searchTerm.toLowerCase()) || item.id.toLowerCase().includes(searchTerm.toLowerCase());
+        const matchesUnit = unitFilter === 'ALL' || item.unit === unitFilter;
+        const matchesPriority = priorityFilter === 'ALL' || item.priority === priorityFilter;
+        
+        let currentStatus: StatusFilter = 'PENDING';
+        if (item.executedQty >= item.plannedQty) currentStatus = 'COMPLETED';
+        else if (item.executedQty > 0) currentStatus = 'IN_PROGRESS';
+        
+        const matchesStatus = statusFilter === 'ALL' || currentStatus === statusFilter;
+        
+        return matchesSearch && matchesUnit && matchesStatus && matchesPriority;
+      })
+      .sort((a, b) => {
+        let valA: any, valB: any;
+        
+        const getVariance = (item: BOQItem) => {
+          if (item.executedQty === 0 || !item.costAnalysis) return 0;
+          return item.plannedUnitCost - item.costAnalysis.unitCost;
+        };
+
+        const getProfit = (item: BOQItem) => {
+          if (item.executedQty === 0) return 0;
+          const cost = item.costAnalysis?.unitCost || item.plannedUnitCost;
+          return (item.rate - cost) * item.executedQty;
+        };
+        
+        switch (sortField) {
+          case 'rate': valA = a.rate; valB = b.rate; break;
+          case 'plannedUnitCost': valA = a.plannedUnitCost; valB = b.plannedUnitCost; break;
+          case 'plannedQty': valA = a.plannedQty; valB = b.plannedQty; break;
+          case 'executedQty': valA = a.executedQty; valB = b.executedQty; break;
+          case 'variance': valA = getVariance(a); valB = getVariance(b); break;
+          case 'profit': valA = getProfit(a); valB = getProfit(b); break;
+          case 'priority': valA = getPriorityWeight(a.priority); valB = getPriorityWeight(b.priority); break;
+          case 'progress': 
+            valA = (a.executedQty / a.plannedQty) || 0; 
+            valB = (b.executedQty / b.plannedQty) || 0; 
+            break;
+          case 'revenue': valA = a.rate * a.plannedQty; valB = b.rate * b.plannedQty; break;
+          default: valA = a.id; valB = b.id;
+        }
+
+        if (valA < valB) return sortDirection === 'asc' ? -1 : 1;
+        if (valA > valB) return sortDirection === 'asc' ? 1 : -1;
+        return 0;
+      });
+  }, [data.boq, searchTerm, unitFilter, statusFilter, priorityFilter, sortField, sortDirection]);
+
+  const SortIcon = ({ field }: { field: SortField }) => {
+    if (sortField !== field) return <ArrowUpDown className="w-3.5 h-3.5 ml-1 inline opacity-30 group-hover:opacity-100 transition-opacity" />;
+    return sortDirection === 'asc' ? <ArrowUp className="w-3.5 h-3.5 ml-1 inline text-blue-600" /> : <ArrowDown className="w-3.5 h-3.5 ml-1 inline text-blue-600" />;
+  };
+
+  const getPriorityColor = (p?: Priority) => {
+    switch(p) {
+      case 'HIGH': return 'bg-red-50 text-red-600 border-red-100';
+      case 'MEDIUM': return 'bg-amber-50 text-amber-600 border-amber-100';
+      case 'LOW': return 'bg-blue-50 text-blue-600 border-blue-100';
+      default: return 'bg-slate-50 text-slate-600 border-slate-100';
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-800">Master Control (Baseline)</h1>
+          <p className="text-slate-500">Fixed Contract Data, BOQ & Budget</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
+          <h4 className="text-sm font-semibold text-slate-500 uppercase tracking-wider">Project Name</h4>
+          <p className="text-lg font-medium text-slate-900 mt-1">{data.name}</p>
+        </div>
+        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
+          <h4 className="text-sm font-semibold text-slate-500 uppercase tracking-wider">Contract Duration</h4>
+          <p className="text-lg font-medium text-slate-900 mt-1">{data.startDate} to {data.endDate}</p>
+        </div>
+        <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
+          <h4 className="text-sm font-semibold text-slate-500 uppercase tracking-wider">Total Contract Value</h4>
+          <p className="text-lg font-medium text-slate-900 mt-1">৳{data.contractValue.toLocaleString()}</p>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+        {/* Table Toolbar */}
+        <div className="px-6 py-4 border-b border-slate-200 flex flex-col xl:flex-row justify-between items-start xl:items-center gap-4 bg-slate-50/50">
+          <div className="flex items-center gap-3">
+             <h3 className="font-semibold text-slate-800">Bill of Quantities (BOQ)</h3>
+             <span className="text-xs font-medium bg-white border border-slate-200 text-slate-500 px-2 py-1 rounded">Rev 1.0</span>
+          </div>
+          
+          <div className="flex flex-wrap items-center gap-2 w-full xl:w-auto">
+            <div className="relative flex-1 min-w-[150px] xl:flex-none">
+              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+              <input 
+                type="text" 
+                placeholder="Search items..." 
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-9 pr-4 py-1.5 text-sm bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all"
+              />
+            </div>
+            
+            <div className="flex items-center gap-1.5 px-2.5 py-1.5 bg-white border border-slate-300 rounded-lg">
+              <Filter className="w-3.5 h-3.5 text-slate-400" />
+              <select 
+                value={unitFilter}
+                onChange={(e) => setUnitFilter(e.target.value as any)}
+                className="text-xs font-medium text-slate-600 outline-none bg-transparent"
+              >
+                <option value="ALL">All Units</option>
+                {Object.values(Unit).map(u => <option key={u} value={u}>{u}</option>)}
+              </select>
+            </div>
+
+            <div className="flex items-center gap-1.5 px-2.5 py-1.5 bg-white border border-slate-300 rounded-lg">
+              <Flag className="w-3.5 h-3.5 text-slate-400" />
+              <select 
+                value={priorityFilter}
+                onChange={(e) => setPriorityFilter(e.target.value as any)}
+                className="text-xs font-medium text-slate-600 outline-none bg-transparent"
+              >
+                <option value="ALL">All Priority</option>
+                <option value="LOW">Low</option>
+                <option value="MEDIUM">Medium</option>
+                <option value="HIGH">High</option>
+              </select>
+            </div>
+
+            {hasActiveFilters && (
+              <button 
+                onClick={clearFilters}
+                className="flex items-center gap-1.5 text-xs font-semibold text-slate-500 hover:text-blue-600 bg-slate-100 px-3 py-1.5 rounded-lg transition-colors border border-slate-200"
+              >
+                <RotateCcw className="w-3.5 h-3.5" />
+                Clear
+              </button>
+            )}
+
+            <div className="h-6 w-px bg-slate-300 mx-1 hidden xl:block"></div>
+
+            {canEditBOQ && (
+              <>
+                <ManualOverrideToggle />
+                <button 
+                  onClick={() => setIsImportModalOpen(true)}
+                  className="flex items-center gap-2 bg-indigo-50 border border-indigo-200 text-indigo-700 px-3 py-1.5 rounded-lg hover:bg-indigo-100 transition-colors shadow-sm text-sm font-medium"
+                >
+                  <UploadCloud className="w-4 h-4" />
+                  Import BOQ
+                </button>
+                <button 
+                  onClick={() => setIsModalOpen(true)}
+                  className="flex items-center gap-2 bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700 transition-colors shadow-sm text-sm font-medium"
+                >
+                  <PlusCircle className="w-4 h-4" />
+                  Add Item
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="w-full text-left text-sm border-collapse">
+            <thead className="bg-white text-slate-600 font-medium border-b border-slate-200">
+              <tr>
+                <th className="px-6 py-4 w-8"></th>
+                <th className="px-6 py-4 cursor-pointer hover:bg-slate-50 transition-colors group" onClick={() => handleSort('id')}>
+                  ID <SortIcon field="id" />
+                </th>
+                <th className="px-6 py-4">Description & Status</th>
+                <th className="px-6 py-4 cursor-pointer hover:bg-slate-50 transition-colors group" onClick={() => handleSort('priority')}>
+                  Priority <SortIcon field="priority" />
+                </th>
+                <th className="px-6 py-4">Unit</th>
+                <th className="px-6 py-4 text-right cursor-pointer hover:bg-slate-50 transition-colors group" onClick={() => handleSort('rate')}>
+                  Rate (৳) <SortIcon field="rate" />
+                </th>
+                <th className="px-6 py-4 text-right cursor-pointer hover:bg-slate-50 transition-colors group" onClick={() => handleSort('variance')}>
+                  Cost Var. <SortIcon field="variance" />
+                </th>
+                <th className="px-6 py-4 text-right cursor-pointer hover:bg-slate-50 transition-colors group" onClick={() => handleSort('profit')}>
+                  Profit Cont. <SortIcon field="profit" />
+                </th>
+                <th className="px-6 py-4 text-right cursor-pointer hover:bg-slate-50 transition-colors group" onClick={() => handleSort('plannedQty')}>
+                  Planned <SortIcon field="plannedQty" />
+                </th>
+                <th className="px-6 py-4 text-right cursor-pointer hover:bg-slate-50 transition-colors group" onClick={() => handleSort('executedQty')}>
+                  Executed <SortIcon field="executedQty" />
+                </th>
+                <th className="px-6 py-4 text-right cursor-pointer hover:bg-slate-50 transition-colors group" onClick={() => handleSort('progress')}>
+                  Progress <SortIcon field="progress" />
+                </th>
+                <th className="px-6 py-4 text-right cursor-pointer hover:bg-slate-50 transition-colors group" onClick={() => handleSort('revenue')}>
+                  Total Rev (৳) <SortIcon field="revenue" />
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {filteredAndSortedBOQ.map((item) => {
+                const progress = Math.min(100, (item.executedQty / item.plannedQty) * 100) || 0;
+                const isCompleted = item.executedQty >= item.plannedQty;
+                const isInProgress = item.executedQty > 0 && !isCompleted;
+                const isExpanded = expandedRows.has(item.id);
+                const isEditing = editId === item.id;
+
+                // Finance Analysis
+                const hasActualCost = item.executedQty > 0 && !!item.costAnalysis;
+                const actualCost = item.costAnalysis?.unitCost || 0;
+                const costVariance = hasActualCost ? (item.plannedUnitCost - actualCost) : 0;
+                const margin = hasActualCost ? (item.rate - actualCost) : (item.rate - item.plannedUnitCost);
+                const profitContribution = item.executedQty > 0 ? (margin * item.executedQty) : 0;
+                
+                const currentTotal = isEditing ? (Number(editMat) + Number(editLab) + Number(editEqp) + Number(editOH)) : item.plannedUnitCost;
+
+                return (
+                  <React.Fragment key={item.id}>
+                    <tr 
+                      className={`hover:bg-slate-50/50 transition-colors group cursor-pointer ${isExpanded ? 'bg-slate-50/80' : ''}`}
+                      onClick={() => toggleRow(item.id)}
+                    >
+                      <td className="px-4 py-4 text-slate-400">
+                        {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+                      </td>
+                      <td className="px-6 py-4 font-medium text-slate-900 whitespace-nowrap">{item.id}</td>
+                      <td className="px-6 py-4 text-slate-700 min-w-[280px]">
+                        <div className="font-medium text-slate-800 line-clamp-1 group-hover:line-clamp-none transition-all duration-300">
+                          {item.description}
+                        </div>
+                        <div className="mt-1.5 flex items-center gap-2">
+                           {isCompleted ? (
+                             <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-100 uppercase tracking-tight">Completed</span>
+                           ) : isInProgress ? (
+                             <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-700 border border-blue-100 uppercase tracking-tight">In Progress</span>
+                           ) : (
+                             <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-slate-100 text-slate-600 border border-slate-200 uppercase tracking-tight">Pending</span>
+                           )}
+                           <span className="text-[10px] text-slate-400 font-medium">Budget: ৳{item.plannedUnitCost.toLocaleString()}</span>
+                           
+                           {/* Linked Doc Indicator */}
+                           {item.linkedDocId && (
+                             <span className="flex items-center gap-1 text-[10px] bg-indigo-50 text-indigo-600 px-1.5 py-0.5 rounded border border-indigo-100 font-medium" title="Has Linked Document">
+                               <LinkIcon className="w-3 h-3" />
+                               Doc
+                             </span>
+                           )}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold border uppercase tracking-wider ${getPriorityColor(item.priority)}`}>
+                          <Flag className="w-2.5 h-2.5" />
+                          {item.priority || 'N/A'}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <span className="text-xs font-bold bg-slate-100 px-2 py-0.5 rounded text-slate-500">
+                          {item.unit}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 text-right text-slate-700 font-mono">
+                        {item.rate.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                        {hasActualCost ? (
+                          <div className="flex flex-col items-end">
+                            <span className={`font-mono text-xs font-bold ${costVariance >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
+                              {costVariance >= 0 ? '+' : ''}{costVariance.toFixed(2)}
+                            </span>
+                          </div>
+                        ) : (
+                          <span className="text-slate-300 font-mono text-xs italic">N/A</span>
+                        )}
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                         {item.executedQty > 0 ? (
+                           <div className="flex flex-col items-end">
+                              <span className={`font-mono text-xs font-bold ${profitContribution >= 0 ? 'text-blue-700' : 'text-red-700'}`}>
+                                ৳{profitContribution.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+                              </span>
+                           </div>
+                         ) : (
+                           <span className="text-slate-300 font-mono text-xs">0</span>
+                         )}
+                      </td>
+                      <td className="px-6 py-4 text-right text-slate-600 font-mono">
+                        {item.plannedQty.toLocaleString()}
+                      </td>
+                      <td className="px-6 py-4 text-right text-slate-900 font-semibold font-mono">
+                        {item.executedQty.toLocaleString()}
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                         <div className="flex flex-col items-end gap-1">
+                            <span className={`text-[11px] font-bold ${progress >= 100 ? 'text-emerald-600' : progress > 0 ? 'text-blue-600' : 'text-slate-400'}`}>
+                              {progress.toFixed(1)}%
+                            </span>
+                            <div className="w-16 h-1 bg-slate-100 rounded-full overflow-hidden">
+                              <div 
+                                className={`h-full transition-all duration-500 ${progress >= 100 ? 'bg-emerald-500' : 'bg-blue-500'}`} 
+                                style={{ width: `${progress}%` }}
+                              ></div>
+                            </div>
+                         </div>
+                      </td>
+                      <td className="px-6 py-4 text-right font-bold text-slate-900 font-mono">
+                        {(item.rate * item.plannedQty).toLocaleString(undefined, { minimumFractionDigits: 2 })}
+                      </td>
+                    </tr>
+                    
+                    {isExpanded && (
+                      <tr className="bg-slate-50 border-y border-slate-200" onClick={(e) => e.stopPropagation()}>
+                        <td colSpan={12} className="px-6 py-6">
+                           <div className="max-w-4xl bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden ml-8">
+                             <div className="px-4 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
+                               <div className="flex items-center gap-2">
+                                 <Layers className="w-4 h-4 text-indigo-500" />
+                                 <span className="text-xs font-bold text-slate-600 uppercase tracking-wider">Item Details & Cost Breakdown</span>
+                               </div>
+                               {!isEditing && canEditBOQ && (
+                                 <button 
+                                   onClick={() => startEditing(item)}
+                                   className="text-xs font-bold text-blue-600 hover:text-blue-700 bg-blue-50 px-3 py-1 rounded-lg transition-colors border border-blue-100"
+                                 >
+                                   Edit Components
+                                 </button>
+                               )}
+                               {isEditing && (
+                                 <div className="flex items-center gap-2">
+                                   <button 
+                                     onClick={cancelEditing}
+                                     className="text-xs font-bold text-slate-500 hover:text-slate-700 px-3 py-1 rounded-lg transition-colors"
+                                   >
+                                     Cancel
+                                   </button>
+                                   <button 
+                                     onClick={() => saveEditing(item.id)}
+                                     className="text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 px-4 py-1.5 rounded-lg transition-colors shadow-sm flex items-center gap-1.5"
+                                   >
+                                     <Save className="w-3 h-3" />
+                                     Save Changes
+                                   </button>
+                                 </div>
+                               )}
+                             </div>
+                             
+                             <div className="p-6">
+                                {/* Document Link Section */}
+                                <div className="mb-6 bg-slate-50 p-3 rounded-lg border border-slate-200 flex items-center gap-3">
+                                    <div className="p-2 bg-white rounded-md border border-slate-200 text-slate-400">
+                                        <LinkIcon className="w-4 h-4" />
+                                    </div>
+                                    <div className="flex-1">
+                                        <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Linked Reference Document</label>
+                                        <select
+                                            value={item.linkedDocId || ''}
+                                            onChange={(e) => handleLinkDocument(item.id, e.target.value)}
+                                            disabled={!canEditBOQ}
+                                            className="w-full bg-transparent text-sm font-medium text-slate-700 outline-none border-none p-0 focus:ring-0 cursor-pointer hover:bg-slate-100 rounded"
+                                        >
+                                            <option value="">Select a document to link (Contract, Bill, Drawing)...</option>
+                                            {Object.entries(groupedDocuments).map(([category, docs]) => (
+                                              <optgroup key={category} label={category}>
+                                                {docs.map(d => (
+                                                  <option key={d.id} value={d.id}>
+                                                    {d.name} ({d.uploadDate})
+                                                  </option>
+                                                ))}
+                                              </optgroup>
+                                            ))}
+                                            {Object.keys(groupedDocuments).length === 0 && (
+                                               <option disabled value="">No documents available</option>
+                                            )}
+                                        </select>
+                                    </div>
+                                    {item.linkedDocId && (
+                                        <a 
+                                            href={data.documents.find(d => d.id === item.linkedDocId)?.url} 
+                                            download={data.documents.find(d => d.id === item.linkedDocId)?.name}
+                                            className="text-blue-600 hover:text-blue-800 p-2 hover:bg-blue-50 rounded-full transition-colors"
+                                            title="Download Linked Document"
+                                        >
+                                            <Download className="w-4 h-4" />
+                                        </a>
+                                    )}
+                                </div>
+
+                                <div className="grid grid-cols-4 gap-8 mb-8">
+                                  {/* Component Inputs/Views */}
+                                  {[
+                                    { label: 'Material', value: item.plannedBreakdown?.material || 0, editValue: editMat, setEdit: setEditMat, color: 'bg-blue-500' },
+                                    { label: 'Labor', value: item.plannedBreakdown?.labor || 0, editValue: editLab, setEdit: setEditLab, color: 'bg-amber-500' },
+                                    { label: 'Equipment', value: item.plannedBreakdown?.equipment || 0, editValue: editEqp, setEdit: setEditEqp, color: 'bg-emerald-500' },
+                                    { label: 'Overhead', value: item.plannedBreakdown?.overhead || 0, editValue: editOH, setEdit: setEditOH, color: 'bg-violet-500' },
+                                  ].map((comp, idx) => {
+                                    const percent = (isEditing ? Number(comp.editValue) : comp.value) / (currentTotal || 1) * 100 || 0;
+                                    return (
+                                      <div key={idx} className="space-y-3">
+                                        <div className="flex justify-between items-center">
+                                          <p className="text-[11px] font-bold text-slate-400 uppercase tracking-wide">{comp.label}</p>
+                                          <span className="text-[10px] font-bold text-slate-400">{percent.toFixed(0)}%</span>
+                                        </div>
+                                        {isEditing ? (
+                                          <div className="relative">
+                                            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-mono">৳</span>
+                                            <input 
+                                              type="number"
+                                              value={comp.editValue}
+                                              onChange={(e) => comp.setEdit(e.target.value)}
+                                              className="w-full pl-7 pr-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm font-mono font-bold"
+                                            />
+                                          </div>
+                                        ) : (
+                                          <p className="text-xl font-mono font-bold text-slate-800">৳{comp.value.toLocaleString()}</p>
+                                        )}
+                                        <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden shadow-inner">
+                                          <div className={`h-full transition-all duration-500 ${comp.color}`} style={{ width: `${percent}%` }}></div>
+                                        </div>
+                                      </div>
+                                    );
+                                  })}
+                                </div>
+                                
+                                <div className="flex items-center justify-between p-4 bg-slate-50 rounded-xl border border-slate-200">
+                                   <div className="flex items-center gap-2">
+                                     <Info className="w-4 h-4 text-blue-500" />
+                                     <span className="text-sm font-semibold text-slate-600">Calculated Planned Unit Cost:</span>
+                                   </div>
+                                   <div className="flex items-center gap-3">
+                                      {isEditing && currentTotal !== item.plannedUnitCost && (
+                                        <span className={`text-xs font-bold px-2 py-0.5 rounded ${currentTotal > item.plannedUnitCost ? 'bg-red-100 text-red-600' : 'bg-emerald-100 text-emerald-600'}`}>
+                                          {currentTotal > item.plannedUnitCost ? 'Increased' : 'Decreased'} by ৳{Math.abs(currentTotal - item.plannedUnitCost).toLocaleString()}
+                                        </span>
+                                      )}
+                                      <span className="text-2xl font-mono font-black text-indigo-700">
+                                        ৳{currentTotal.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+                                      </span>
+                                   </div>
+                                </div>
+                             </div>
+                           </div>
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="pt-10 border-t border-slate-200">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="p-2 bg-amber-100 text-amber-600 rounded-lg">
+            <Activity className="w-6 h-6" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-slate-800">Change Order Management</h2>
+            <p className="text-sm text-slate-500">Track extra work requests and contract variations</p>
+          </div>
+        </div>
+        <ChangeOrderManager changeOrders={data.changeOrders || []} />
+      </div>
+
+       {/* Import BOQ Modal */}
+       {isImportModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+          <div className="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden">
+             <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-indigo-50/50">
+               <div className="flex items-center gap-2 text-indigo-800">
+                 <UploadCloud className="w-5 h-5" />
+                 <h3 className="font-bold">Import BOQ Items</h3>
+               </div>
+               <button onClick={resetImport} className="text-slate-400 hover:text-slate-600">
+                 <X className="w-5 h-5" />
+               </button>
+             </div>
+             
+             {/* Tabs */}
+             <div className="flex border-b border-slate-200">
+                <button 
+                  className={`flex-1 py-3 text-sm font-medium border-b-2 transition-colors ${importTab === 'EXISTING' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}
+                  onClick={() => setImportTab('EXISTING')}
+                >
+                  Select Existing
+                </button>
+                <button 
+                  className={`flex-1 py-3 text-sm font-medium border-b-2 transition-colors ${importTab === 'UPLOAD' ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}
+                  onClick={() => setImportTab('UPLOAD')}
+                >
+                  Upload New
+                </button>
+             </div>
+
+             <div className="p-6 space-y-4">
+               <p className="text-sm text-slate-600">
+                 AI will extract items, quantities, and rates from the document to populate the master schedule.
+               </p>
+               
+               {importTab === 'EXISTING' ? (
+                 <div>
+                    <label className="block text-xs font-bold text-slate-500 uppercase tracking-tight mb-2">Select Existing Document</label>
+                    <div className="relative">
+                      <FileText className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+                      <select 
+                        value={selectedFileId}
+                        onChange={(e) => setSelectedFileId(e.target.value)}
+                        className="w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none"
+                      >
+                        <option value="">-- Choose BOQ File --</option>
+                        {availableDocs.map(f => (
+                          <option key={f.id} value={f.id}>{f.name} ({f.category})</option>
+                        ))}
+                      </select>
+                    </div>
+                    {availableDocs.length === 0 && (
+                      <p className="text-xs text-red-500 mt-1">No compatible files found (PDF/Excel).</p>
+                    )}
+                 </div>
+               ) : (
+                 <div>
+                    <label className="block text-xs font-bold text-slate-500 uppercase tracking-tight mb-2">Upload File</label>
+                    <div className={`border-2 border-dashed rounded-xl p-6 text-center transition-colors relative group ${fileToUpload ? 'border-indigo-400 bg-indigo-50' : 'border-slate-300 hover:bg-slate-50'}`}>
+                      <input 
+                        type="file" 
+                        onChange={handleFileChange} 
+                        accept=".pdf,.xlsx,.csv,.doc,.docx"
+                        disabled={isImporting} 
+                        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" 
+                      />
+                      <div className="flex flex-col items-center gap-2">
+                        <div className={`p-3 rounded-full ${fileToUpload ? 'bg-indigo-100 text-indigo-600' : 'bg-slate-100 text-slate-500'}`}>
+                          {fileToUpload ? <FileUp className="w-6 h-6" /> : <UploadCloud className="w-6 h-6" />}
+                        </div>
+                        <p className="text-sm font-medium text-slate-700 max-w-[200px] truncate">
+                          {fileToUpload ? fileToUpload.name : "Click to browse or drag file"}
+                        </p>
+                        {!fileToUpload && <p className="text-xs text-slate-400">PDF, Excel, or Word</p>}
+                      </div>
+                    </div>
+                 </div>
+               )}
+
+               {importStatus && (
+                 <div className="p-3 bg-indigo-50 text-indigo-700 text-sm rounded-lg flex items-center gap-2 animate-in fade-in slide-in-from-top-2">
+                   {isImporting ? <Loader2 className="w-4 h-4 animate-spin" /> : <CheckCircle2 className="w-4 h-4" />}
+                   {importStatus}
+                 </div>
+               )}
+
+               <div className="pt-2 flex justify-end gap-2">
+                 <button 
+                   onClick={resetImport}
+                   className="px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-lg"
+                 >
+                   Cancel
+                 </button>
+                 <button 
+                   onClick={handleImport}
+                   disabled={(importTab === 'EXISTING' && !selectedFileId) || (importTab === 'UPLOAD' && !fileToUpload) || isImporting}
+                   className="px-4 py-2 text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg disabled:opacity-50 shadow-md flex items-center gap-2"
+                 >
+                   {isImporting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
+                   {isImporting ? 'Processing...' : 'Sync & Parse'}
+                 </button>
+               </div>
+             </div>
+          </div>
+        </div>
+      )}
+
+      {/* Add Item Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+          <div className="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200">
+            <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-slate-50/50">
+              <div className="flex items-center gap-2">
+                <h3 className="font-semibold text-slate-800">Add New BOQ Item</h3>
+                {isSuggesting && (
+                  <div className="flex items-center gap-1.5 px-2 py-0.5 bg-indigo-50 text-indigo-600 text-[10px] font-bold rounded animate-pulse">
+                    <Sparkles className="w-2.5 h-2.5" />
+                    AI Estimating...
+                  </div>
+                )}
+              </div>
+              <button onClick={() => { setIsModalOpen(false); resetForm(); }} className="text-slate-400 hover:text-slate-600 transition-colors">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            
+            <form onSubmit={handleAddItem} className="p-6 space-y-4 max-h-[80vh] overflow-y-auto">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Item Description</label>
+                <textarea 
+                  required
+                  rows={2}
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none resize-none text-sm"
+                  placeholder="e.g., Earth work in cutting and filling of eroded bank"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                 <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">Unit</label>
+                  <select 
+                    value={unit}
+                    onChange={(e) => setUnit(e.target.value as Unit)}
+                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm bg-white"
+                  >
+                    {Object.values(Unit).map(u => <option key={u} value={u}>{u}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">Priority</label>
+                  <select 
+                    value={itemPriority}
+                    onChange={(e) => setItemPriority(e.target.value as Priority)}
+                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm bg-white"
+                  >
+                    <option value="LOW">Low</option>
+                    <option value="MEDIUM">Medium</option>
+                    <option value="HIGH">High</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                   <label className="block text-sm font-medium text-slate-700 mb-1">Selling Rate (৳)</label>
+                   <input 
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    required
+                    value={rate}
+                    onChange={(e) => setRate(e.target.value)}
+                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm font-mono"
+                    placeholder="0.00"
+                  />
+                </div>
+                <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Planned Quantity</label>
+                <input 
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  required
+                  value={plannedQty}
+                  onChange={(e) => setPlannedQty(e.target.value)}
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm font-mono"
+                  placeholder="0.00"
+                />
+              </div>
+              </div>
+
+              <div className="bg-slate-50 rounded-xl p-4 border border-slate-200 space-y-4">
+                 <div className="flex items-center justify-between">
+                    <div className="flex flex-col">
+                      <h4 className="text-xs font-bold text-slate-500 uppercase">Internal Budget Components</h4>
+                      {aiAppliedFields && (
+                        <span className="text-[10px] text-indigo-600 font-bold flex items-center gap-1 animate-in fade-in slide-in-from-left-2">
+                           <CheckCircle2 className="w-3 h-3" /> Populated by AI
+                        </span>
+                      )}
+                    </div>
+                    {description && (
+                       <button 
+                         type="button"
+                         onClick={handleSuggestCost}
+                         disabled={isSuggesting}
+                         className="flex items-center gap-1.5 px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-xs font-bold shadow-md hover:bg-indigo-700 transition-all disabled:opacity-50 active:scale-95"
+                       >
+                         {isSuggesting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
+                         AI Suggest Cost
+                       </button>
+                    )}
+                 </div>
+
+                 <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="block text-[11px] font-medium text-slate-500 mb-1 uppercase">Material</label>
+                      <input 
+                        type="number" 
+                        value={plannedMat} 
+                        onChange={(e) => { setPlannedMat(e.target.value); setAiAppliedFields(false); }} 
+                        className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm font-mono transition-all ${aiAppliedFields ? 'border-indigo-300 bg-indigo-50/30' : 'border-slate-300 bg-white'}`}
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-[11px] font-medium text-slate-500 mb-1 uppercase">Labor</label>
+                      <input 
+                        type="number" 
+                        value={plannedLab} 
+                        onChange={(e) => { setPlannedLab(e.target.value); setAiAppliedFields(false); }} 
+                        className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm font-mono transition-all ${aiAppliedFields ? 'border-indigo-300 bg-indigo-50/30' : 'border-slate-300 bg-white'}`}
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-[11px] font-medium text-slate-500 mb-1 uppercase">Equipment</label>
+                      <input 
+                        type="number" 
+                        value={plannedEqp} 
+                        onChange={(e) => { setPlannedEqp(e.target.value); setAiAppliedFields(false); }} 
+                        className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm font-mono transition-all ${aiAppliedFields ? 'border-indigo-300 bg-indigo-50/30' : 'border-slate-300 bg-white'}`}
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-[11px] font-medium text-slate-500 mb-1 uppercase">Overhead</label>
+                      <input 
+                        type="number" 
+                        value={plannedOH} 
+                        onChange={(e) => { setPlannedOH(e.target.value); setAiAppliedFields(false); }} 
+                        className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm font-mono transition-all ${aiAppliedFields ? 'border-indigo-300 bg-indigo-50/30' : 'border-slate-300 bg-white'}`}
+                      />
+                    </div>
+                 </div>
+
+                 <div className="pt-2 border-t border-slate-200">
+                    <div className="flex justify-between items-center">
+                       <span className="text-sm font-bold text-slate-700">Planned Unit Cost:</span>
+                       <span className="text-xl font-mono font-black text-indigo-700">৳{Number(plannedUnitCost).toLocaleString()}</span>
+                    </div>
+                 </div>
+              </div>
+
+              <div className="pt-4 flex justify-end gap-3 border-t border-slate-100">
+                <button 
+                  type="button" 
+                  onClick={() => { setIsModalOpen(false); resetForm(); }}
+                  className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
+                >
+                  Cancel
+                </button>
+                <button 
+                  type="submit"
+                  className="px-6 py-2 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-all shadow-md active:scale-95"
+                >
+                  Create BOQ Item
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MasterControl;

components/MemberManager.tsx

@@ -0,0 +1,236 @@
+import React, { useState, useEffect } from 'react';
+import { ProjectMember, User, UserRole } from '../types';
+import { 
+  UserPlus, 
+  Shield, 
+  Trash2, 
+  Search, 
+  CheckCircle2, 
+  XCircle,
+  User as UserIcon,
+  Crown
+} from 'lucide-react';
+import { useLocalCollection } from '../hooks/useLocalCollection';
+
+interface MemberManagerProps {
+  projectId: string;
+  ownerUid: string;
+  currentUserUid: string;
+}
+
+const MemberManager: React.FC<MemberManagerProps> = ({ projectId, ownerUid, currentUserUid }) => {
+  const { data: members, add, update, remove } = useLocalCollection<ProjectMember & { id: string }>(`members_${projectId}`);
+  const [searchEmail, setSearchEmail] = useState('');
+  const [searchResult, setSearchResult] = useState<User | null>(null);
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const [allUsers, setAllUsers] = useState<User[]>([]);
+
+  const isOwner = currentUserUid === ownerUid;
+
+  useEffect(() => {
+    // Fetch all users for search (ideally this is a backend search API, but we'll fetch entire mock users collection for now)
+    fetch('/api/collections/users')
+      .then(res => res.json())
+      .then(result => setAllUsers(result || []))
+      .catch(console.error);
+  }, []);
+
+  const handleSearch = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!searchEmail.trim()) return;
+
+    setSearchError(null);
+    setSearchResult(null);
+
+    // Mock search against users collection
+    if (searchEmail === 'mock@example.com') {
+         setSearchResult({ uid: 'mock-1', name: 'Mock User', role: 'ENGINEER', avatar: '', email: 'mock@example.com' });
+         return;
+    }
+
+    const found = allUsers.find(u => u.email === searchEmail || u.name?.toLowerCase() === searchEmail.toLowerCase());
+    if (found) {
+        if (members.some(m => m.uid === found.uid)) {
+           setSearchError('This user is already a member of the project.');
+        } else {
+           setSearchResult(found);
+        }
+    } else {
+        setSearchError('User not found. For offline simulation, type "mock@example.com"');
+    }
+  };
+
+  const handleAddMember = async (user: User) => {
+    if (!user.uid) return;
+    
+    // We append the standard useLocalCollection ID to map it uniquely
+    const memberData: ProjectMember & { id: string } = {
+      id: user.uid, // Map uid to the collection's string ID
+      uid: user.uid,
+      name: user.name,
+      role: user.role,
+      avatar: user.avatar || null,
+      joinedAt: new Date().toISOString()
+    };
+    
+    add(memberData);
+
+    setSearchResult(null);
+    setSearchEmail('');
+  };
+
+  const handleUpdateRole = async (memberUid: string, newRole: UserRole) => {
+    // Map using memberUid as id 
+    update(memberUid, { role: newRole });
+  };
+
+  const handleRemoveMember = async (memberUid: string) => {
+    if (memberUid === ownerUid) return; // Cannot remove owner
+    if (!window.confirm('Are you sure you want to remove this member from the project?')) return;
+
+    remove(memberUid);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Add Member Section */}
+      {isOwner && (
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+          <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
+            <UserPlus className="w-5 h-5 text-blue-600" />
+            Add Team Member
+          </h3>
+          <form onSubmit={handleSearch} className="flex gap-3">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+              <input
+                type="email"
+                placeholder="Enter user email..."
+                value={searchEmail}
+                onChange={(e) => setSearchEmail(e.target.value)}
+                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={!searchEmail.trim()}
+              className="px-6 py-2.5 bg-blue-600 text-white rounded-xl font-bold text-sm hover:bg-blue-700 transition-all disabled:opacity-50 flex items-center gap-2"
+            >
+              <Search className="w-4 h-4" />
+              Search
+            </button>
+          </form>
+
+          {searchError && (
+            <div className="mt-4 p-3 bg-red-50 border border-red-100 rounded-xl flex items-center gap-2 text-red-600 text-sm">
+              <XCircle className="w-4 h-4" />
+              {searchError}
+            </div>
+          )}
+
+          {searchResult && (
+            <div className="mt-4 p-4 bg-blue-50 border border-blue-100 rounded-xl flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                {searchResult.avatar ? (
+                  <img src={searchResult.avatar} alt="" className="w-10 h-10 rounded-full border-2 border-white" />
+                ) : (
+                  <div className="w-10 h-10 bg-blue-200 text-blue-700 rounded-full flex items-center justify-center font-bold">
+                    {searchResult.name.charAt(0)}
+                  </div>
+                )}
+                <div>
+                  <p className="text-sm font-bold text-slate-800">{searchResult.name}</p>
+                  <p className="text-xs text-slate-500">{searchResult.email}</p>
+                </div>
+              </div>
+              <button
+                onClick={() => handleAddMember(searchResult)}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg font-bold text-xs hover:bg-blue-700 transition-all flex items-center gap-2"
+              >
+                <UserPlus className="w-3 h-3" />
+                Add to Project
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Members List */}
+      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
+          <h3 className="font-bold text-slate-800 flex items-center gap-2">
+            <Shield className="w-5 h-5 text-indigo-600" />
+            Project Team
+          </h3>
+          <span className="text-xs font-bold text-slate-500 bg-slate-200 px-2 py-0.5 rounded-full">
+            {members.length} Members
+          </span>
+        </div>
+        <div className="divide-y divide-slate-100">
+          {members.map((member) => (
+            <div key={member.uid} className="p-6 flex items-center justify-between group hover:bg-slate-50 transition-all">
+              <div className="flex items-center gap-4">
+                <div className="relative">
+                  {member.avatar ? (
+                    <img src={member.avatar} alt="" className="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
+                  ) : (
+                    <div className="w-12 h-12 bg-slate-100 text-slate-600 rounded-full flex items-center justify-center font-bold text-lg">
+                      {member.name.charAt(0)}
+                    </div>
+                  )}
+                  {member.uid === ownerUid && (
+                    <div className="absolute -top-1 -right-1 bg-amber-400 text-white p-1 rounded-full border-2 border-white shadow-sm">
+                      <Crown className="w-3 h-3" />
+                    </div>
+                  )}
+                </div>
+                <div>
+                  <div className="flex items-center gap-2">
+                    <p className="font-bold text-slate-800">{member.name}</p>
+                    {member.uid === currentUserUid && (
+                      <span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded uppercase">You</span>
+                    )}
+                  </div>
+                  <p className="text-xs text-slate-500 mt-0.5">Joined {new Date(member.joinedAt).toLocaleDateString()}</p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-6">
+                <div className="flex flex-col items-end">
+                  {isOwner && member.uid !== ownerUid ? (
+                    <select
+                      value={member.role}
+                      onChange={(e) => handleUpdateRole(member.uid, e.target.value as UserRole)}
+                      className="text-xs font-bold text-blue-600 bg-blue-50 px-3 py-1.5 rounded-lg border-none outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
+                    >
+                      <option value="DIRECTOR">Project Director</option>
+                      <option value="MANAGER">Project Manager</option>
+                      <option value="ENGINEER">Site Engineer</option>
+                      <option value="ACCOUNTANT">Accountant</option>
+                    </select>
+                  ) : (
+                    <span className="text-xs font-bold text-slate-600 bg-slate-100 px-3 py-1.5 rounded-lg">
+                      {member.role}
+                    </span>
+                  )}
+                </div>
+
+                {isOwner && member.uid !== ownerUid && (
+                  <button
+                    onClick={() => handleRemoveMember(member.uid)}
+                    className="p-2 text-slate-300 hover:text-red-500 hover:bg-red-50 rounded-xl transition-all"
+                    title="Remove Member"
+                  >
+                    <Trash2 className="w-5 h-5" />
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MemberManager;

components/PhotoLogs.tsx

@@ -0,0 +1,156 @@
+
+import React from 'react';
+import { PhotoLog, User } from '../types';
+import { 
+  Camera, 
+  Search, 
+  Filter, 
+  Plus, 
+  MoreVertical, 
+  MapPin, 
+  Calendar, 
+  Tag, 
+  Download, 
+  Share2, 
+  Maximize2,
+  User as UserIcon,
+  ChevronRight
+} from 'lucide-react';
+
+interface PhotoLogsProps {
+  photoLogs: PhotoLog[];
+  users: User[];
+}
+
+const PhotoLogs: React.FC<PhotoLogsProps> = ({ photoLogs, users }) => {
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [selectedPhoto, setSelectedPhoto] = React.useState<PhotoLog | null>(null);
+
+  const filteredPhotos = photoLogs.filter(p => 
+    p.caption.toLowerCase().includes(searchQuery.toLowerCase()) || 
+    p.location.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    p.tags.some(t => t.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  const getUploaderName = (uid: string) => {
+    return users.find(u => u.uid === uid)?.name || 'Unknown User';
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header & Filters */}
+      <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-4 flex-1 max-w-md">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search photos, locations, or tags..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+            />
+          </div>
+          <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
+            <Filter className="w-5 h-5" />
+          </button>
+        </div>
+        <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
+          <Plus className="w-4 h-4" />
+          Upload Photos
+        </button>
+      </div>
+
+      {/* Photo Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {filteredPhotos.map(photo => (
+          <div key={photo.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden hover:border-blue-300 transition-all group">
+            <div className="relative aspect-square overflow-hidden bg-slate-100">
+              <img 
+                src={photo.url} 
+                alt={photo.caption} 
+                className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+                referrerPolicy="no-referrer"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-4 gap-2">
+                <button 
+                  onClick={() => setSelectedPhoto(photo)}
+                  className="p-2 bg-white/20 backdrop-blur-md text-white rounded-lg hover:bg-white/40 transition-all"
+                >
+                  <Maximize2 className="w-4 h-4" />
+                </button>
+                <button className="p-2 bg-white/20 backdrop-blur-md text-white rounded-lg hover:bg-white/40 transition-all">
+                  <Download className="w-4 h-4" />
+                </button>
+                <button className="p-2 bg-white/20 backdrop-blur-md text-white rounded-lg hover:bg-white/40 transition-all">
+                  <Share2 className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+            
+            <div className="p-4">
+              <h4 className="font-bold text-slate-800 text-sm mb-2 line-clamp-1">{photo.caption}</h4>
+              
+              <div className="flex items-center gap-3 mb-3">
+                <div className="flex items-center gap-1 text-[10px] text-slate-500 font-medium">
+                  <MapPin className="w-3 h-3" />
+                  {photo.location}
+                </div>
+                <div className="flex items-center gap-1 text-[10px] text-slate-500 font-medium">
+                  <Calendar className="w-3 h-3" />
+                  {new Date(photo.createdAt).toLocaleDateString()}
+                </div>
+              </div>
+
+              <div className="flex flex-wrap gap-1.5 mb-4">
+                {photo.tags.map((tag, idx) => (
+                  <span key={idx} className="px-2 py-0.5 bg-slate-100 text-slate-500 text-[9px] font-bold rounded-full border border-slate-200">
+                    #{tag}
+                  </span>
+                ))}
+              </div>
+
+              <div className="flex items-center justify-between pt-3 border-t border-slate-100">
+                <div className="flex items-center gap-2">
+                  <div className="w-6 h-6 bg-slate-100 rounded-full flex items-center justify-center">
+                    <UserIcon className="w-3 h-3 text-slate-500" />
+                  </div>
+                  <span className="text-[10px] font-bold text-slate-500 uppercase">{getUploaderName(photo.uploadedBy)}</span>
+                </div>
+                <button className="p-1 text-slate-400 hover:text-slate-600 rounded-lg transition-all">
+                  <MoreVertical className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Photo Modal */}
+      {selectedPhoto && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-slate-900/90 backdrop-blur-sm">
+          <div className="relative w-full max-w-5xl aspect-video bg-black rounded-2xl overflow-hidden shadow-2xl">
+            <img 
+              src={selectedPhoto.url} 
+              alt={selectedPhoto.caption} 
+              className="w-full h-full object-contain"
+              referrerPolicy="no-referrer"
+            />
+            <button 
+              onClick={() => setSelectedPhoto(null)}
+              className="absolute top-4 right-4 p-2 bg-white/10 backdrop-blur-md text-white rounded-full hover:bg-white/20 transition-all"
+            >
+              <Plus className="w-6 h-6 rotate-45" />
+            </button>
+            <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent text-white">
+              <h3 className="text-xl font-bold mb-2">{selectedPhoto.caption}</h3>
+              <p className="text-sm text-slate-300">{selectedPhoto.location} • {new Date(selectedPhoto.createdAt).toLocaleString()}</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PhotoLogs;

components/Procurement.tsx

@@ -0,0 +1,173 @@
+
+import React from 'react';
+import { Material, PurchaseOrder, Unit } from '../types';
+import { 
+  Plus, 
+  Search, 
+  Filter, 
+  ShoppingCart, 
+  Package, 
+  Truck, 
+  CheckCircle2, 
+  Clock, 
+  AlertTriangle,
+  MoreVertical,
+  ChevronRight
+} from 'lucide-react';
+
+interface ProcurementProps {
+  materials: Material[];
+  purchaseOrders: PurchaseOrder[];
+}
+
+const Procurement: React.FC<ProcurementProps> = ({ materials, purchaseOrders }) => {
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [activeTab, setActiveTab] = React.useState<'INVENTORY' | 'ORDERS'>('INVENTORY');
+
+  const filteredMaterials = materials.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  const filteredOrders = purchaseOrders.filter(o => o.vendorName.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const getStatusColor = (status: string) => {
+    switch(status) {
+      case 'DELIVERED': return 'text-emerald-600 bg-emerald-50 border-emerald-100';
+      case 'SENT': return 'text-blue-600 bg-blue-50 border-blue-100';
+      case 'DRAFT': return 'text-slate-600 bg-slate-50 border-slate-100';
+      case 'CANCELLED': return 'text-red-600 bg-red-50 border-red-100';
+      default: return 'text-slate-600 bg-slate-50 border-slate-100';
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header & Tabs */}
+      <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-4">
+        <div className="flex bg-slate-100 p-1 rounded-xl">
+          <button 
+            onClick={() => setActiveTab('INVENTORY')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg font-bold text-sm transition-all ${activeTab === 'INVENTORY' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
+          >
+            <Package className="w-4 h-4" />
+            Inventory
+          </button>
+          <button 
+            onClick={() => setActiveTab('ORDERS')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg font-bold text-sm transition-all ${activeTab === 'ORDERS' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
+          >
+            <ShoppingCart className="w-4 h-4" />
+            Purchase Orders
+          </button>
+        </div>
+        
+        <div className="flex items-center gap-3 flex-1 max-w-md">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <input
+              type="text"
+              placeholder={`Search ${activeTab.toLowerCase()}...`}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+            />
+          </div>
+          <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
+            <Plus className="w-4 h-4" />
+            {activeTab === 'INVENTORY' ? 'Add Material' : 'New Order'}
+          </button>
+        </div>
+      </div>
+
+      {activeTab === 'INVENTORY' ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredMaterials.map(material => (
+            <div key={material.id} className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:border-blue-300 transition-all group">
+              <div className="flex items-start justify-between mb-4">
+                <div className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center group-hover:bg-blue-600 group-hover:text-white transition-all">
+                  <Package className="w-6 h-6" />
+                </div>
+                {material.currentStock < (material.totalReceived * 0.1) && (
+                  <div className="flex items-center gap-1 text-[10px] font-bold text-red-600 bg-red-50 px-2 py-1 rounded-full border border-red-100 animate-pulse">
+                    <AlertTriangle className="w-3 h-3" />
+                    LOW STOCK
+                  </div>
+                )}
+              </div>
+              <h3 className="font-bold text-slate-800 mb-1">{material.name}</h3>
+              <p className="text-xs text-slate-500 mb-4">ID: {material.id}</p>
+              
+              <div className="grid grid-cols-2 gap-4 mb-4">
+                <div className="p-3 bg-slate-50 rounded-xl">
+                  <span className="text-[10px] font-bold text-slate-400 uppercase">Stock</span>
+                  <p className="text-lg font-bold text-slate-800">{material.currentStock} {material.unit}</p>
+                </div>
+                <div className="p-3 bg-slate-50 rounded-xl">
+                  <span className="text-[10px] font-bold text-slate-400 uppercase">Consumed</span>
+                  <p className="text-lg font-bold text-slate-800">{material.totalConsumed} {material.unit}</p>
+                </div>
+              </div>
+
+              <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden mb-4">
+                <div 
+                  className={`h-full transition-all ${material.currentStock < (material.totalReceived * 0.1) ? 'bg-red-500' : 'bg-blue-500'}`}
+                  style={{ width: `${(material.currentStock / material.totalReceived) * 100}%` }}
+                />
+              </div>
+
+              <button className="w-full py-2 text-blue-600 font-bold text-xs hover:bg-blue-50 rounded-lg transition-all flex items-center justify-center gap-2">
+                View Details
+                <ChevronRight className="w-3 h-3" />
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+          <table className="w-full text-left border-collapse">
+            <thead>
+              <tr className="bg-slate-50 border-b border-slate-100">
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Order ID</th>
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Vendor</th>
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Amount</th>
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Status</th>
+                <th className="px-6 py-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">Delivery Date</th>
+                <th className="px-6 py-4"></th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {filteredOrders.map(order => (
+                <tr key={order.id} className="hover:bg-slate-50/50 transition-colors group">
+                  <td className="px-6 py-4">
+                    <span className="font-bold text-slate-800 text-sm">{order.id}</span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center">
+                        <Truck className="w-4 h-4 text-slate-500" />
+                      </div>
+                      <span className="font-medium text-slate-700 text-sm">{order.vendorName}</span>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4 font-bold text-slate-800 text-sm">৳{order.totalAmount.toLocaleString()}</td>
+                  <td className="px-6 py-4">
+                    <span className={`px-2.5 py-1 rounded-full text-[10px] font-bold border ${getStatusColor(order.status)}`}>
+                      {order.status}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-sm text-slate-500">
+                    {order.expectedDeliveryDate || 'TBD'}
+                  </td>
+                  <td className="px-6 py-4 text-right">
+                    <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
+                      <MoreVertical className="w-4 h-4" />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Procurement;

components/ProjectList.tsx

@@ -0,0 +1,256 @@
+
+import React, { useState } from 'react';
+import { ProjectState, UserRole, Priority } from '../types';
+import { 
+  PlusCircle, 
+  Building2, 
+  Calendar, 
+  ArrowRight,
+  Activity,
+  DollarSign,
+  UserCircle,
+  Lock,
+  Flag
+} from 'lucide-react';
+
+interface ProjectListProps {
+  projects: ProjectState[];
+  onSelectProject: (projectId: string) => void;
+  onCreateProject: (project: Partial<ProjectState>) => void;
+  userRole: UserRole;
+  onSwitchRole: (role: UserRole) => void;
+}
+
+const ProjectList: React.FC<ProjectListProps> = ({ projects, onSelectProject, onCreateProject, userRole, onSwitchRole }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [newProjectName, setNewProjectName] = useState('');
+  const [contractValue, setContractValue] = useState('');
+  const [priority, setPriority] = useState<Priority>('MEDIUM');
+
+  const canCreateProject = userRole === 'DIRECTOR';
+
+  console.log('Current projects IDs:', projects.map(p => p.id));
+
+  const handleCreate = (e: React.FormEvent) => {
+    e.preventDefault();
+    onCreateProject({
+      name: newProjectName,
+      contractValue: Number(contractValue),
+      priority,
+      startDate: new Date().toISOString().split('T')[0],
+      endDate: new Date().toISOString().split('T')[0],
+      status: 'ACTIVE',
+      boq: [],
+      dprs: [],
+      bills: [],
+      liabilities: [],
+      documents: []
+    });
+    setIsModalOpen(false);
+    setNewProjectName('');
+    setContractValue('');
+    setPriority('MEDIUM');
+  };
+
+  const getRoleLabel = (role: UserRole) => {
+    switch(role) {
+      case 'DIRECTOR': return 'Project Director';
+      case 'MANAGER': return 'Project Manager';
+      case 'ENGINEER': return 'Site Engineer';
+      case 'ACCOUNTANT': return 'Accountant';
+      default: return role;
+    }
+  };
+
+  const getPriorityColor = (p: Priority) => {
+    switch(p) {
+      case 'HIGH': return 'bg-red-50 text-red-700 border-red-200';
+      case 'MEDIUM': return 'bg-amber-50 text-amber-700 border-amber-200';
+      case 'LOW': return 'bg-blue-50 text-blue-700 border-blue-200';
+      default: return 'bg-slate-50 text-slate-700 border-slate-200';
+    }
+  };
+
+  return (
+    <div className="p-6 md:p-10 space-y-8 max-w-7xl mx-auto">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-bold text-slate-800">My Projects</h1>
+          <p className="text-slate-500 mt-1">Manage your construction portfolio across different sites.</p>
+        </div>
+        
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 px-3 py-2 bg-white border border-slate-200 rounded-lg text-sm font-medium">
+            <UserCircle className="w-5 h-5 text-slate-400" />
+            <span>{getRoleLabel(userRole)}</span>
+          </div>
+
+          {canCreateProject ? (
+            <button 
+              onClick={() => setIsModalOpen(true)}
+              className="flex items-center gap-2 bg-blue-600 text-white px-5 py-2.5 rounded-lg hover:bg-blue-700 transition-colors shadow-sm font-medium"
+            >
+              <PlusCircle className="w-5 h-5" />
+              Create New Project
+            </button>
+          ) : (
+            <div className="flex items-center gap-2 text-slate-400 bg-slate-100 px-4 py-2.5 rounded-lg text-sm font-medium">
+               <Lock className="w-4 h-4" />
+               Create Disabled
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {(() => {
+          const seen = new Set();
+          const duplicates = projects.filter(p => {
+            if (seen.has(p.id)) return true;
+            seen.add(p.id);
+            return false;
+          });
+          if (duplicates.length > 0) {
+            console.warn('Duplicate project IDs found:', duplicates.map(d => d.id));
+          }
+          return null;
+        })()}
+        {projects.map((project, index) => (
+          <div 
+            key={`${project.id}-${index}`}
+            onClick={() => onSelectProject(project.id)}
+            className="group bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-all cursor-pointer overflow-hidden relative"
+          >
+            <div className={`absolute top-0 left-0 w-1 h-full ${project.status === 'ACTIVE' ? 'bg-emerald-500' : 'bg-slate-300'}`}></div>
+            
+            <div className="p-6">
+              <div className="flex justify-between items-start mb-4">
+                <div className="p-3 bg-blue-50 text-blue-600 rounded-lg group-hover:bg-blue-600 group-hover:text-white transition-colors">
+                  <Building2 className="w-6 h-6" />
+                </div>
+                <div className="flex flex-col items-end gap-1.5">
+                  <div className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold border uppercase tracking-wider ${
+                    project.status === 'ACTIVE' 
+                      ? 'bg-emerald-50 text-emerald-700 border-emerald-200' 
+                      : 'bg-slate-100 text-slate-600 border-slate-200'
+                  }`}>
+                    {project.status}
+                  </div>
+                  <div className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold border uppercase tracking-wider flex items-center gap-1 ${getPriorityColor(project.priority)}`}>
+                    <Flag className="w-2.5 h-2.5" />
+                    {project.priority}
+                  </div>
+                </div>
+              </div>
+
+              <h3 className="text-lg font-bold text-slate-800 mb-2 line-clamp-2 min-h-[3.5rem]">
+                {project.name}
+              </h3>
+
+              <div className="space-y-3 text-sm text-slate-600">
+                <div className="flex items-center gap-2">
+                  <DollarSign className="w-4 h-4 text-slate-400" />
+                  <span>৳{(project.contractValue / 1000000).toFixed(2)} Million</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Calendar className="w-4 h-4 text-slate-400" />
+                  <span>{project.startDate} to {project.endDate}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Activity className="w-4 h-4 text-slate-400" />
+                  <span>{project.boq.length} BOQ Items</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="px-6 py-4 bg-slate-50 border-t border-slate-200 flex justify-between items-center group-hover:bg-blue-50 transition-colors">
+              <span className="text-sm font-medium text-slate-600 group-hover:text-blue-700">Open Dashboard</span>
+              <ArrowRight className="w-4 h-4 text-slate-400 group-hover:text-blue-700 transform group-hover:translate-x-1 transition-all" />
+            </div>
+          </div>
+        ))}
+
+        {projects.length === 0 && (
+          <div className="col-span-full py-20 text-center bg-slate-50 rounded-xl border-2 border-dashed border-slate-300">
+            <Building2 className="w-12 h-12 text-slate-400 mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-slate-700">No projects yet</h3>
+            <p className="text-slate-500 mb-6">Create your first construction project to get started.</p>
+            {canCreateProject && (
+              <button 
+                onClick={() => setIsModalOpen(true)}
+                className="text-blue-600 font-medium hover:underline"
+              >
+                Create Project
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden">
+            <div className="px-6 py-4 border-b border-slate-200">
+              <h3 className="font-semibold text-slate-800">New Project</h3>
+            </div>
+            <form onSubmit={handleCreate} className="p-6 space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1">Project Name</label>
+                <input 
+                  type="text" 
+                  required
+                  value={newProjectName}
+                  onChange={(e) => setNewProjectName(e.target.value)}
+                  placeholder="e.g., Bridge Construction at..."
+                  className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">Priority</label>
+                  <select 
+                    value={priority}
+                    onChange={(e) => setPriority(e.target.value as Priority)}
+                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-white text-sm"
+                  >
+                    <option value="LOW">Low</option>
+                    <option value="MEDIUM">Medium</option>
+                    <option value="HIGH">High</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-slate-700 mb-1">Contract Value (৳)</label>
+                  <input 
+                    type="number" 
+                    required
+                    value={contractValue}
+                    onChange={(e) => setContractValue(e.target.value)}
+                    placeholder="0"
+                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm"
+                  />
+                </div>
+              </div>
+              <div className="pt-4 flex justify-end gap-3">
+                <button 
+                  type="button" 
+                  onClick={() => setIsModalOpen(false)}
+                  className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
+                >
+                  Cancel
+                </button>
+                <button 
+                  type="submit"
+                  className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+                >
+                  Create Project
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProjectList;

components/QCSafety.tsx

@@ -0,0 +1,182 @@
+
+import React from 'react';
+import { QualityCheck, SafetyCheck, User } from '../types';
+import { 
+  ShieldCheck, 
+  CheckCircle2, 
+  XCircle, 
+  Clock, 
+  Plus, 
+  Search, 
+  Filter, 
+  AlertTriangle, 
+  Camera, 
+  User as UserIcon,
+  ChevronRight,
+  MoreVertical
+} from 'lucide-react';
+
+interface QCSafetyProps {
+  qualityChecks: QualityCheck[];
+  safetyChecks: SafetyCheck[];
+  users: User[];
+}
+
+const QCSafety: React.FC<QCSafetyProps> = ({ qualityChecks, safetyChecks, users }) => {
+  const [activeTab, setActiveTab] = React.useState<'QUALITY' | 'SAFETY'>('QUALITY');
+
+  const getInspectorName = (uid: string) => {
+    return users.find(u => u.uid === uid)?.name || 'Unknown Inspector';
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header & Tabs */}
+      <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-4">
+        <div className="flex bg-slate-100 p-1 rounded-xl">
+          <button 
+            onClick={() => setActiveTab('QUALITY')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg font-bold text-sm transition-all ${activeTab === 'QUALITY' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
+          >
+            <CheckCircle2 className="w-4 h-4" />
+            Quality Checks
+          </button>
+          <button 
+            onClick={() => setActiveTab('SAFETY')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg font-bold text-sm transition-all ${activeTab === 'SAFETY' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
+          >
+            <ShieldCheck className="w-4 h-4" />
+            Safety Audits
+          </button>
+        </div>
+        
+        <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
+          <Plus className="w-4 h-4" />
+          {activeTab === 'QUALITY' ? 'New Inspection' : 'New Audit'}
+        </button>
+      </div>
+
+      {activeTab === 'QUALITY' ? (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {qualityChecks.map(check => (
+            <div key={check.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden hover:border-blue-300 transition-all group">
+              <div className="p-6 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
+                    check.status === 'PASSED' ? 'bg-emerald-50 text-emerald-600' : 
+                    check.status === 'FAILED' ? 'bg-red-50 text-red-600' : 'bg-amber-50 text-amber-600'
+                  }`}>
+                    {check.status === 'PASSED' ? <CheckCircle2 className="w-6 h-6" /> : 
+                     check.status === 'FAILED' ? <XCircle className="w-6 h-6" /> : <Clock className="w-6 h-6" />}
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-slate-800">{check.title}</h3>
+                    <p className="text-xs text-slate-500">{check.location} • {new Date(check.date).toLocaleDateString()}</p>
+                  </div>
+                </div>
+                <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-white rounded-lg transition-all">
+                  <MoreVertical className="w-4 h-4" />
+                </button>
+              </div>
+
+              <div className="p-6 space-y-4">
+                <div className="space-y-3">
+                  {check.items.map((item, idx) => (
+                    <div key={idx} className="flex items-start gap-3 p-3 bg-slate-50 rounded-xl">
+                      {item.isOk ? (
+                        <CheckCircle2 className="w-4 h-4 text-emerald-500 mt-0.5 shrink-0" />
+                      ) : (
+                        <XCircle className="w-4 h-4 text-red-500 mt-0.5 shrink-0" />
+                      )}
+                      <div>
+                        <p className="text-sm font-medium text-slate-700">{item.description}</p>
+                        {item.remarks && <p className="text-[10px] text-slate-500 mt-1 italic">{item.remarks}</p>}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="flex items-center justify-between pt-4 border-t border-slate-100">
+                  <div className="flex items-center gap-2">
+                    <div className="w-6 h-6 bg-slate-200 rounded-full flex items-center justify-center">
+                      <UserIcon className="w-3 h-3 text-slate-500" />
+                    </div>
+                    <span className="text-[10px] font-bold text-slate-500 uppercase">{getInspectorName(check.inspectorUid)}</span>
+                  </div>
+                  <div className="flex items-center gap-1 text-[10px] font-bold text-blue-600">
+                    <Camera className="w-3 h-3" />
+                    {check.photos?.length || 0} Photos
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {safetyChecks.map(audit => (
+            <div key={audit.id} className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:border-blue-300 transition-all group">
+              <div className="flex items-start justify-between mb-6">
+                <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                  audit.status === 'SAFE' ? 'bg-emerald-50 text-emerald-600' : 
+                  audit.status === 'CRITICAL' ? 'bg-red-50 text-red-600' : 'bg-amber-50 text-amber-600'
+                }`}>
+                  <ShieldCheck className="w-6 h-6" />
+                </div>
+                <div className="text-right">
+                  <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Safety Score</span>
+                  <p className={`text-2xl font-bold ${
+                    audit.score >= 90 ? 'text-emerald-600' : 
+                    audit.score >= 70 ? 'text-amber-600' : 'text-red-600'
+                  }`}>{audit.score}%</p>
+                </div>
+              </div>
+
+              <h3 className="font-bold text-slate-800 mb-4">Safety Audit - {new Date(audit.date).toLocaleDateString()}</h3>
+
+              <div className="space-y-4 mb-6">
+                <div>
+                  <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-2">Hazards Identified</span>
+                  <div className="flex flex-wrap gap-2">
+                    {audit.hazardsIdentified.map((hazard, idx) => (
+                      <span key={idx} className="px-2 py-1 bg-red-50 text-red-600 text-[10px] font-bold rounded-lg border border-red-100">
+                        {hazard}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                <div>
+                  <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-2">Corrective Actions</span>
+                  <div className="flex flex-wrap gap-2">
+                    {audit.correctiveActions.map((action, idx) => (
+                      <span key={idx} className="px-2 py-1 bg-blue-50 text-blue-600 text-[10px] font-bold rounded-lg border border-blue-100">
+                        {action}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between pt-4 border-t border-slate-100">
+                <div className="flex items-center gap-2">
+                  <div className="w-6 h-6 bg-slate-200 rounded-full flex items-center justify-center">
+                    <UserIcon className="w-3 h-3 text-slate-500" />
+                  </div>
+                  <span className="text-[10px] font-bold text-slate-500 uppercase">{getInspectorName(audit.inspectorUid)}</span>
+                </div>
+                <span className={`px-2 py-1 rounded-full text-[10px] font-bold border ${
+                  audit.status === 'SAFE' ? 'text-emerald-600 bg-emerald-50 border-emerald-100' : 
+                  audit.status === 'CRITICAL' ? 'text-red-600 bg-red-50 border-red-100' : 'text-amber-600 bg-amber-50 border-amber-100'
+                }`}>
+                  {audit.status}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default QCSafety;

components/Reporting.tsx

@@ -0,0 +1,115 @@
+
+import React from 'react';
+import { ProjectState, Bill, DPR, BOQItem } from '../types';
+import { 
+  FileBarChart, 
+  Download, 
+  FileText, 
+  Calendar, 
+  DollarSign, 
+  HardHat, 
+  CheckCircle2, 
+  ChevronRight, 
+  Mail, 
+  Share2,
+  Loader2
+} from 'lucide-react';
+
+interface ReportingProps {
+  project: ProjectState;
+}
+
+const Reporting: React.FC<ReportingProps> = ({ project }) => {
+  const [isGenerating, setIsGenerating] = React.useState<string | null>(null);
+
+  const reports = [
+    { id: 'DPR_SUMMARY', title: 'Daily Progress Summary', description: 'Consolidated report of all site activities and labor counts.', icon: HardHat, color: 'bg-blue-50 text-blue-600' },
+    { id: 'FINANCIAL_HEALTH', title: 'Financial Health Report', description: 'Budget vs Actual, cash flow, and pending liabilities.', icon: DollarSign, color: 'bg-emerald-50 text-emerald-600' },
+    { id: 'BOQ_RECONCILIATION', title: 'BOQ Reconciliation', description: 'Detailed comparison of planned vs executed quantities.', icon: FileText, color: 'bg-amber-50 text-amber-600' },
+    { id: 'QC_SAFETY_LOG', title: 'QC & Safety Log', description: 'History of all inspections and safety audits.', icon: CheckCircle2, color: 'bg-red-50 text-red-600' },
+    { id: 'STAKEHOLDER_UPDATE', title: 'Executive Stakeholder Update', description: 'High-level summary for directors and clients.', icon: FileBarChart, color: 'bg-purple-50 text-purple-600' },
+  ];
+
+  const handleGenerate = (reportId: string) => {
+    setIsGenerating(reportId);
+    setTimeout(() => setIsGenerating(null), 2000);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm">
+        <div className="flex items-start justify-between mb-8">
+          <div>
+            <h2 className="text-2xl font-bold text-slate-800">Automated Reporting</h2>
+            <p className="text-slate-500">Generate and export comprehensive project reports with one click.</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <button className="flex items-center gap-2 text-slate-600 font-bold text-sm hover:bg-slate-50 px-4 py-2 rounded-xl border border-slate-200 transition-all">
+              <Calendar className="w-4 h-4" />
+              Schedule Reports
+            </button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {reports.map(report => (
+            <div key={report.id} className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm hover:border-blue-300 transition-all group flex items-start gap-6">
+              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center shrink-0 ${report.color} group-hover:scale-110 transition-transform`}>
+                <report.icon className="w-7 h-7" />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-bold text-slate-800 text-lg mb-1">{report.title}</h3>
+                <p className="text-sm text-slate-500 mb-4">{report.description}</p>
+                
+                <div className="flex items-center gap-3">
+                  <button 
+                    onClick={() => handleGenerate(report.id)}
+                    disabled={isGenerating === report.id}
+                    className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-xl font-bold text-xs hover:bg-slate-800 transition-all disabled:opacity-50"
+                  >
+                    {isGenerating === report.id ? <Loader2 className="w-3 h-3 animate-spin" /> : <Download className="w-3 h-3" />}
+                    {isGenerating === report.id ? 'Generating...' : 'Download PDF'}
+                  </button>
+                  <button className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all">
+                    <Mail className="w-4 h-4" />
+                  </button>
+                  <button className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all">
+                    <Share2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Recent Reports History */}
+      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+        <div className="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
+          <h3 className="font-bold text-slate-800">Recent Reports History</h3>
+          <button className="text-xs font-bold text-blue-600 hover:underline">View All</button>
+        </div>
+        <div className="divide-y divide-slate-100">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="px-6 py-4 flex items-center justify-between hover:bg-slate-50/50 transition-colors">
+              <div className="flex items-center gap-4">
+                <div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
+                  <FileText className="w-5 h-5 text-slate-500" />
+                </div>
+                <div>
+                  <p className="font-bold text-slate-800 text-sm">Monthly_Financial_Summary_Mar_2026.pdf</p>
+                  <p className="text-[10px] text-slate-500 font-medium uppercase tracking-wider">Generated on Apr 01, 2026 • 2.4 MB</p>
+                </div>
+              </div>
+              <button className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all">
+                <Download className="w-4 h-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Reporting;

components/RiskAssessment.tsx

@@ -0,0 +1,117 @@
+
+import React from 'react';
+import { RiskAssessment } from '../types';
+import { AlertTriangle, ShieldCheck, TrendingUp, TrendingDown, Info, BrainCircuit, Zap } from 'lucide-react';
+
+interface RiskAssessmentProps {
+  assessment: RiskAssessment;
+}
+
+const RiskAssessmentComponent: React.FC<RiskAssessmentProps> = ({ assessment }) => {
+  const getImpactColor = (impact: string) => {
+    switch (impact) {
+      case 'HIGH': return 'text-red-600 bg-red-50 border-red-100';
+      case 'MEDIUM': return 'text-amber-600 bg-amber-50 border-amber-100';
+      case 'LOW': return 'text-emerald-600 bg-emerald-50 border-emerald-100';
+      default: return 'text-slate-600 bg-slate-50 border-slate-100';
+    }
+  };
+
+  const getScoreColor = (score: number) => {
+    if (score > 70) return 'text-red-600';
+    if (score > 40) return 'text-amber-600';
+    return 'text-emerald-600';
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-slate-900 rounded-2xl p-6 text-white relative overflow-hidden">
+        <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
+          <div className="flex items-center gap-4">
+            <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/20">
+              <BrainCircuit className="w-8 h-8" />
+            </div>
+            <div>
+              <div className="flex items-center gap-2 mb-1">
+                <span className="text-[10px] font-bold text-blue-400 uppercase tracking-widest">AI Risk Engine</span>
+                <div className="flex items-center gap-1 px-1.5 py-0.5 bg-blue-500/20 rounded text-[8px] font-bold text-blue-300 border border-blue-500/30">
+                  <Zap className="w-2 h-2" />
+                  LIVE
+                </div>
+              </div>
+              <h2 className="text-2xl font-bold">Project Risk Assessment</h2>
+              <p className="text-xs text-slate-400">Last updated: {assessment.lastUpdated}</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-6 bg-white/5 backdrop-blur-md p-4 rounded-2xl border border-white/10">
+            <div className="text-center">
+              <p className="text-[10px] font-bold text-slate-400 uppercase mb-1">Overall Score</p>
+              <p className={`text-3xl font-black ${getScoreColor(assessment.overallRiskScore)}`}>
+                {assessment.overallRiskScore}
+              </p>
+            </div>
+            <div className="w-px h-10 bg-white/10"></div>
+            <div className="space-y-1">
+              <div className="flex items-center gap-2 text-xs font-bold text-emerald-400">
+                <TrendingDown className="w-3 h-3" />
+                <span>-5% from last week</span>
+              </div>
+              <p className="text-[10px] text-slate-500">Improving stability</p>
+            </div>
+          </div>
+        </div>
+        <div className="absolute bottom-0 right-0 w-64 h-64 bg-blue-600/10 blur-[100px] rounded-full -mr-32 -mb-32"></div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4">
+        {assessment.risks.map((risk, idx) => (
+          <div key={idx} className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 hover:border-blue-300 transition-all group">
+            <div className="flex flex-col md:flex-row md:items-start justify-between gap-6">
+              <div className="flex-1">
+                <div className="flex items-center gap-3 mb-3">
+                  <span className={`px-2 py-1 rounded-full border text-[10px] font-bold uppercase tracking-wider ${getImpactColor(risk.impact)}`}>
+                    {risk.impact} IMPACT
+                  </span>
+                  <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{risk.category}</span>
+                </div>
+                <h3 className="font-bold text-slate-800 text-lg mb-2">{risk.description}</h3>
+                <div className="flex items-start gap-3 p-4 bg-slate-50 rounded-xl border border-slate-100">
+                  <ShieldCheck className="w-4 h-4 text-emerald-600 shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-[10px] font-bold text-slate-400 uppercase mb-1">AI Mitigation Strategy</p>
+                    <p className="text-sm text-slate-700 leading-relaxed font-medium">{risk.mitigation}</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="w-full md:w-48 space-y-4">
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-[10px] font-bold text-slate-400 uppercase">
+                    <span>Probability</span>
+                    <span>{(risk.probability * 100).toFixed(0)}%</span>
+                  </div>
+                  <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
+                    <div 
+                      className={`h-full transition-all duration-1000 ${
+                        risk.probability > 0.7 ? 'bg-red-500' : 
+                        risk.probability > 0.4 ? 'bg-amber-500' : 'bg-emerald-500'
+                      }`}
+                      style={{ width: `${risk.probability * 100}%` }}
+                    />
+                  </div>
+                </div>
+                <button className="w-full py-2 text-xs font-bold text-blue-600 border border-blue-200 rounded-xl hover:bg-blue-50 transition-all flex items-center justify-center gap-2">
+                  <Info className="w-3 h-3" />
+                  View History
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RiskAssessmentComponent;

components/SiteExecution.tsx

@@ -0,0 +1,1015 @@
+
+import React, { useState, useMemo } from 'react';
+import { ProjectState, ProjectDocument, DPR, UserRole, MaterialConsumption, Unit } from '../types';
+import DocumentManager from './DocumentManager';
+import { MapPin, Users, Calendar, PlusCircle, X, ClipboardCheck, Lock, Sparkles, Loader2, FileText, CheckCircle2, Package, ArrowDownLeft, ArrowUpRight, Edit2, Save, HardHat, BarChart3, AlertCircle, Mic } from 'lucide-react';
+import { extractDPRData } from '../services/localAnalysisService';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend, Cell } from 'recharts';
+
+interface SiteExecutionProps {
+  data: ProjectState;
+  onAddDocument: (doc: ProjectDocument) => void;
+  onAddDPR: (dpr: DPR) => void;
+  onReceiveMaterial: (materialId: string, qty: number, rate?: number) => void;
+  onUpdatePDRemarks: (type: 'MATERIAL' | 'SUBCONTRACTOR', id: string, remarks: string) => void;
+  userRole: UserRole;
+}
+
+const SiteExecution: React.FC<SiteExecutionProps> = ({ data, onAddDocument, onAddDPR, onReceiveMaterial, onUpdatePDRemarks, userRole }) => {
+  const [isDprModalOpen, setIsDprModalOpen] = useState(false);
+  const [isReceiveModalOpen, setIsReceiveModalOpen] = useState(false);
+  const [isAiLoading, setIsAiLoading] = useState(false);
+  const [aiPopulatedFields, setAiPopulatedFields] = useState<Set<string>>(new Set());
+  const [selectedReportId, setSelectedReportId] = useState<string>('');
+  const [editingRemarksId, setEditingRemarksId] = useState<string | null>(null);
+  const [tempRemarks, setTempRemarks] = useState('');
+  const [storeView, setStoreView] = useState<'INVENTORY' | 'HISTORY'>('INVENTORY');
+  
+  const canAddDPR = userRole === 'ENGINEER' || userRole === 'DIRECTOR';
+  const canUploadDoc = userRole === 'ENGINEER' || userRole === 'DIRECTOR';
+  const canManageStore = userRole === 'ENGINEER' || userRole === 'MANAGER' || userRole === 'DIRECTOR';
+  const isDirector = userRole === 'DIRECTOR';
+
+  // DPR Form State
+  const [activityDate, setActivityDate] = useState(new Date().toISOString().split('T')[0]);
+  const [activityDesc, setActivityDesc] = useState('');
+  const [location, setLocation] = useState('');
+  const [laborCount, setLaborCount] = useState(0);
+  const [remarks, setRemarks] = useState('');
+  const [linkedBoqId, setLinkedBoqId] = useState('');
+  const [subContractorId, setSubContractorId] = useState('');
+  const [workDoneQty, setWorkDoneQty] = useState(0);
+  const [materialsConsumed, setMaterialsConsumed] = useState<MaterialConsumption[]>([]);
+
+  // Receive Material Form State
+  const [receiveMatId, setReceiveMatId] = useState('');
+  const [receiveQty, setReceiveQty] = useState('');
+  const [receiveRate, setReceiveRate] = useState('');
+
+  const reportDocs = useMemo(() => 
+    data.documents
+      .filter(d => d.category === 'REPORT')
+      .sort((a, b) => new Date(b.uploadDate).getTime() - new Date(a.uploadDate).getTime()),
+    [data.documents]
+  );
+
+  // Prepare Data for Material Chart
+  const stockChartData = useMemo(() => {
+    return data.materials.map(m => ({
+      name: m.name.length > 12 ? m.name.substring(0, 10) + '..' : m.name,
+      fullName: m.name,
+      Received: m.totalReceived,
+      Consumed: m.totalConsumed,
+      unit: m.unit
+    }));
+  }, [data.materials]);
+
+  // Derive Consumption History Log
+  const consumptionHistory = useMemo(() => {
+    const history: { id: string; date: string; materialName: string; qty: number; unit: string; activity: string }[] = [];
+    data.dprs.forEach(dpr => {
+      if (dpr.materialsUsed) {
+        dpr.materialsUsed.forEach(usage => {
+          const mat = data.materials.find(m => m.id === usage.materialId);
+          if (mat) {
+            history.push({
+              id: `${dpr.id}-${mat.id}`,
+              date: dpr.date,
+              materialName: mat.name,
+              qty: usage.qty,
+              unit: mat.unit,
+              activity: dpr.activity
+            });
+          }
+        });
+      }
+    });
+    return history.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+  }, [data.dprs, data.materials]);
+
+  const handleCreateDPR = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Validate Material Stock
+    const invalidConsumption = materialsConsumed.find(c => {
+        const mat = data.materials.find(m => m.id === c.materialId);
+        return mat && c.qty > mat.currentStock;
+    });
+
+    if (invalidConsumption) {
+        const mat = data.materials.find(m => m.id === invalidConsumption.materialId);
+        alert(`Insufficient stock for ${mat?.name}. Available: ${mat?.currentStock} ${mat?.unit}, Requested: ${invalidConsumption.qty} ${mat?.unit}. Please receive material first.`);
+        return;
+    }
+
+    let finalDesc = activityDesc;
+    if (linkedBoqId && !finalDesc) {
+      const boqItem = data.boq.find(b => b.id === linkedBoqId);
+      if (boqItem) finalDesc = boqItem.description;
+    }
+
+    const newDPR: DPR = {
+      id: `DPR-${Date.now()}`,
+      date: activityDate,
+      activity: finalDesc || 'Site Activity',
+      location: location || 'Site',
+      laborCount: Number(laborCount),
+      remarks,
+      linkedBoqId: linkedBoqId || undefined,
+      subContractorId: subContractorId || undefined,
+      workDoneQty: Number(workDoneQty) > 0 ? Number(workDoneQty) : undefined,
+      materialsUsed: materialsConsumed.filter(m => m.qty > 0)
+    };
+
+    onAddDPR(newDPR);
+    setIsDprModalOpen(false);
+    resetForm();
+  };
+
+  const handleReceiveSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if(receiveMatId && receiveQty) {
+      onReceiveMaterial(receiveMatId, Number(receiveQty), receiveRate ? Number(receiveRate) : undefined);
+      setIsReceiveModalOpen(false);
+      setReceiveMatId('');
+      setReceiveQty('');
+      setReceiveRate('');
+    }
+  };
+
+  const resetForm = () => {
+    setActivityDesc('');
+    setLocation('');
+    setLaborCount(0);
+    setRemarks('');
+    setLinkedBoqId('');
+    setSubContractorId('');
+    setWorkDoneQty(0);
+    setAiPopulatedFields(new Set());
+    setSelectedReportId('');
+    setMaterialsConsumed([]);
+  };
+
+  // Speech Recognition State
+  const [isRecording, setIsRecording] = useState(false);
+  
+  const handleVoiceRecord = () => {
+    const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+      alert("Voice recognition is not supported in this browser.");
+      return;
+    }
+
+    const recognition = new SpeechRecognition();
+    recognition.continuous = false;
+    recognition.interimResults = false;
+    recognition.lang = 'en-US';
+
+    recognition.onstart = () => {
+      setIsRecording(true);
+    };
+
+    recognition.onresult = async (event: any) => {
+      setIsRecording(false);
+      const transcript = event.results[0][0].transcript;
+      if (transcript) {
+        setIsAiLoading(true);
+        // Extract DPR data locally from the voice transcript.
+        const extracted = await extractDPRData("Voice Note", data.boq, transcript, 'text/plain');
+        handleExtractionResult(extracted);
+      }
+    };
+
+    recognition.onerror = (event: any) => {
+      console.error("Speech recognition error", event.error);
+      setIsRecording(false);
+      if (event.error === 'not-allowed') {
+         alert("Please grant microphone permissions to use voice dictation.");
+      } else {
+         // Fallback simulation for preview environment without mic access
+         alert(`Microphone error: ${event.error}. Note: If inside an iframe without mic access, please open in a new tab.`);
+      }
+    };
+
+    recognition.start();
+  };
+
+  const handleExtractionResult = (extracted: any) => {
+    setIsAiLoading(false);
+    if (extracted) {
+      const newPopulated = new Set<string>();
+      if (extracted.date) { setActivityDate(extracted.date); newPopulated.add('date'); }
+      if (extracted.activity) { setActivityDesc(extracted.activity); newPopulated.add('activity'); }
+      if (extracted.location) { setLocation(extracted.location); newPopulated.add('location'); }
+      if (extracted.laborCount) { setLaborCount(extracted.laborCount); newPopulated.add('labor'); }
+      if (extracted.remarks) { setRemarks(extracted.remarks); newPopulated.add('remarks'); }
+      if (extracted.linkedBoqId) { setLinkedBoqId(extracted.linkedBoqId); newPopulated.add('boq'); }
+      if (extracted.workDoneQty) { setWorkDoneQty(extracted.workDoneQty); newPopulated.add('qty'); }
+      
+      if (extracted.subContractorName) {
+         const match = data.subContractors?.find(s => 
+           s.name.toLowerCase().includes(extracted.subContractorName!.toLowerCase()) || 
+           extracted.subContractorName!.toLowerCase().includes(s.name.toLowerCase())
+         );
+         if (match) {
+            setSubContractorId(match.id);
+            newPopulated.add('subcontractor');
+         }
+      }
+
+      if (extracted.materials && extracted.materials.length > 0) {
+        const mappedMaterials = extracted.materials.map((m: any) => {
+          const match = data.materials.find(ex => ex.name.toLowerCase().includes(m.name.toLowerCase()));
+          return match ? { materialId: match.id, qty: m.qty } : null;
+        }).filter(Boolean) as MaterialConsumption[];
+        
+        if (mappedMaterials.length > 0) {
+          setMaterialsConsumed(mappedMaterials);
+          newPopulated.add('materials');
+        }
+      }
+      
+      setAiPopulatedFields(newPopulated);
+    }
+  };
+
+  const handleAiAutoFill = async () => {
+    const reportToAnalyze = selectedReportId 
+      ? reportDocs.find(d => d.id === selectedReportId)
+      : reportDocs[0];
+
+    if (!reportToAnalyze) {
+      alert("Please upload or select a site report to analyze.");
+      return;
+    }
+
+    setIsAiLoading(true);
+    const extracted = await extractDPRData(reportToAnalyze.name, data.boq);
+    handleExtractionResult(extracted);
+  };
+
+  const addConsumptionRow = () => {
+    if (data.materials.length > 0) {
+      setMaterialsConsumed([...materialsConsumed, { materialId: data.materials[0].id, qty: 0 }]);
+    }
+  };
+
+  const updateConsumption = (index: number, field: keyof MaterialConsumption, value: any) => {
+    const updated = [...materialsConsumed];
+    updated[index] = { ...updated[index], [field]: value };
+    setMaterialsConsumed(updated);
+  };
+
+  const removeConsumptionRow = (index: number) => {
+    setMaterialsConsumed(materialsConsumed.filter((_, i) => i !== index));
+  };
+
+  const saveRemarks = (type: 'MATERIAL' | 'SUBCONTRACTOR', id: string) => {
+    onUpdatePDRemarks(type, id, tempRemarks);
+    setEditingRemarksId(null);
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-800">Site Execution</h1>
+          <p className="text-slate-500">Track Progress, Remaining Works & Daily Reports</p>
+        </div>
+        {canAddDPR ? (
+          <button 
+            onClick={() => setIsDprModalOpen(true)}
+            className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors shadow-sm text-sm font-medium"
+          >
+            <ClipboardCheck className="w-4 h-4" />
+            Add Daily Progress
+          </button>
+        ) : (
+           <div className="flex items-center gap-2 text-slate-400 bg-slate-100 px-3 py-1.5 rounded-lg text-sm">
+             <Lock className="w-3 h-3" />
+             <span>Read Only (Role: {userRole})</span>
+           </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Site Store Section */}
+        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden h-full flex flex-col">
+            <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-indigo-50/50">
+              <div className="flex items-center gap-2">
+                  <Package className="w-5 h-5 text-indigo-600" />
+                  <h3 className="font-semibold text-slate-800">Site Store</h3>
+              </div>
+              
+              <div className="flex items-center gap-3">
+                 <div className="flex bg-slate-200/50 p-1 rounded-lg">
+                    <button 
+                      onClick={() => setStoreView('INVENTORY')}
+                      className={`px-3 py-1 text-[10px] font-bold rounded-md transition-all ${storeView === 'INVENTORY' ? 'bg-white shadow text-indigo-600' : 'text-slate-500 hover:text-slate-700'}`}
+                    >
+                      Stock
+                    </button>
+                    <button 
+                      onClick={() => setStoreView('HISTORY')}
+                      className={`px-3 py-1 text-[10px] font-bold rounded-md transition-all ${storeView === 'HISTORY' ? 'bg-white shadow text-indigo-600' : 'text-slate-500 hover:text-slate-700'}`}
+                    >
+                      Log
+                    </button>
+                  </div>
+
+                  {canManageStore && (
+                      <button 
+                      onClick={() => setIsReceiveModalOpen(true)}
+                      className="flex items-center gap-2 bg-white border border-indigo-200 text-indigo-600 px-3 py-1.5 rounded-lg hover:bg-indigo-50 transition-colors shadow-sm text-xs font-bold"
+                      >
+                      <ArrowDownLeft className="w-3.5 h-3.5" />
+                      Inward
+                      </button>
+                  )}
+              </div>
+            </div>
+
+            {storeView === 'INVENTORY' ? (
+                <>
+                    {/* Material Chart */}
+                    {stockChartData.length > 0 && (
+                    <div className="px-6 py-4 border-b border-slate-100 bg-slate-50/30">
+                        <div className="h-48 w-full">
+                            <ResponsiveContainer width="100%" height="100%">
+                            <BarChart data={stockChartData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
+                                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+                                <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: '#64748b' }} interval={0} />
+                                <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: '#64748b' }} />
+                                <Tooltip 
+                                contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
+                                cursor={{ fill: '#f1f5f9' }}
+                                formatter={(value: number, name: string, props: any) => [`${value.toLocaleString()} ${props.payload.unit}`, name]}
+                                labelFormatter={(label) => {
+                                    const item = stockChartData.find(d => d.name === label);
+                                    return item ? item.fullName : label;
+                                }}
+                                />
+                                <Legend wrapperStyle={{ fontSize: '10px' }} />
+                                <Bar dataKey="Received" fill="#6366f1" radius={[4, 4, 0, 0]} barSize={20} />
+                                <Bar dataKey="Consumed" fill="#f59e0b" radius={[4, 4, 0, 0]} barSize={20} />
+                            </BarChart>
+                            </ResponsiveContainer>
+                        </div>
+                    </div>
+                    )}
+
+                    <div className="p-4 space-y-3 flex-1 overflow-y-auto max-h-[400px]">
+                    {data.materials.map(mat => (
+                        <div key={mat.id} className="border border-slate-200 rounded-lg p-3 hover:shadow-sm transition-shadow">
+                            <div className="flex justify-between items-start mb-1">
+                            <h4 className="font-bold text-slate-700 text-sm">{mat.name}</h4>
+                            <span className="text-[10px] font-bold bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded">{mat.unit}</span>
+                            </div>
+                            <div className="grid grid-cols-3 gap-2 text-xs mb-2">
+                                <div>
+                                    <span className="text-slate-400 block">Total Recv</span>
+                                    <span className="text-slate-600 font-medium">{mat.totalReceived.toLocaleString()}</span>
+                                </div>
+                                <div>
+                                    <span className="text-slate-400 block">Consumed</span>
+                                    <span className="text-slate-600 font-medium">{mat.totalConsumed.toLocaleString()}</span>
+                                </div>
+                                <div>
+                                    <span className="text-slate-400 block">Stock</span>
+                                    <span className="font-bold text-indigo-600">{mat.currentStock.toLocaleString()}</span>
+                                </div>
+                            </div>
+                            <div className="w-full h-1 bg-slate-100 rounded-full overflow-hidden">
+                                <div className="h-full bg-indigo-500" style={{ width: `${Math.min(100, (mat.currentStock / (mat.totalReceived || 1)) * 100)}%` }}></div>
+                            </div>
+                            {/* Director Remarks */}
+                            <div className="mt-2 pt-2 border-t border-slate-100">
+                                {editingRemarksId === mat.id ? (
+                                    <div className="flex items-center gap-1">
+                                        <input 
+                                            type="text" 
+                                            value={tempRemarks} 
+                                            onChange={(e) => setTempRemarks(e.target.value)} 
+                                            className="w-full text-[10px] border border-indigo-300 rounded px-1 py-0.5 outline-none"
+                                            autoFocus
+                                        />
+                                        <button onClick={() => saveRemarks('MATERIAL', mat.id)} className="text-emerald-600"><Save className="w-3 h-3"/></button>
+                                        <button onClick={() => setEditingRemarksId(null)} className="text-red-500"><X className="w-3 h-3"/></button>
+                                    </div>
+                                ) : (
+                                    <div className="flex items-start gap-1 group/remark">
+                                        <p className="text-[10px] text-slate-400 italic flex-1 truncate">
+                                            {mat.pdRemarks ? `Note: ${mat.pdRemarks}` : (isDirector ? "Add PD Note..." : "")}
+                                        </p>
+                                        {isDirector && (
+                                            <button 
+                                            onClick={() => { setEditingRemarksId(mat.id); setTempRemarks(mat.pdRemarks || ''); }}
+                                            className="opacity-0 group-hover/remark:opacity-100 text-slate-400 hover:text-indigo-600 transition-opacity"
+                                            >
+                                            <Edit2 className="w-2.5 h-2.5" />
+                                            </button>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                    {data.materials.length === 0 && (
+                        <div className="text-center py-8 text-slate-400 text-sm">No materials tracked.</div>
+                    )}
+                    </div>
+                </>
+            ) : (
+                <div className="flex-1 overflow-y-auto max-h-[600px] p-0">
+                    <table className="w-full text-left text-xs">
+                       <thead className="bg-slate-50 text-slate-500 font-semibold border-b border-slate-100 sticky top-0">
+                          <tr>
+                             <th className="px-4 py-2">Date</th>
+                             <th className="px-4 py-2">Material</th>
+                             <th className="px-4 py-2 text-right">Qty</th>
+                             <th className="px-4 py-2">Activity</th>
+                          </tr>
+                       </thead>
+                       <tbody className="divide-y divide-slate-50">
+                          {consumptionHistory.map(row => (
+                             <tr key={row.id} className="hover:bg-slate-50">
+                                <td className="px-4 py-2 text-slate-500 whitespace-nowrap">{row.date}</td>
+                                <td className="px-4 py-2 font-medium text-slate-700">{row.materialName}</td>
+                                <td className="px-4 py-2 text-right font-mono text-indigo-600">{row.qty} {row.unit}</td>
+                                <td className="px-4 py-2 text-slate-500 truncate max-w-[150px]" title={row.activity}>{row.activity}</td>
+                             </tr>
+                          ))}
+                          {consumptionHistory.length === 0 && (
+                            <tr>
+                               <td colSpan={4} className="p-8 text-center text-slate-400">No consumption records found in DPRs.</td>
+                            </tr>
+                          )}
+                       </tbody>
+                    </table>
+                </div>
+            )}
+        </div>
+
+        {/* Engaged Sub-Contractors Section */}
+        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden h-full">
+            <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-orange-50/50">
+                <div className="flex items-center gap-2">
+                    <HardHat className="w-5 h-5 text-orange-600" />
+                    <h3 className="font-semibold text-slate-800">Engaged Sub-Contractors</h3>
+                </div>
+                <span className="text-[10px] bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full font-bold uppercase">Automated from Progress</span>
+            </div>
+            <div className="p-4 space-y-3">
+                {data.subContractors && data.subContractors.map(sc => (
+                    <div key={sc.id} className="border border-slate-200 rounded-lg p-3 hover:shadow-sm transition-shadow">
+                        <div className="flex justify-between items-start mb-1">
+                            <div>
+                                <h4 className="font-bold text-slate-700 text-sm">{sc.name}</h4>
+                                <p className="text-[10px] text-slate-500">{sc.specialization}</p>
+                            </div>
+                            <span className="text-[10px] font-bold bg-orange-50 text-orange-600 px-1.5 py-0.5 rounded border border-orange-100">
+                                Due: ৳{sc.currentLiability.toLocaleString()}
+                            </span>
+                        </div>
+                        <div className="grid grid-cols-2 gap-2 text-xs mt-2 mb-1">
+                            <div className="bg-slate-50 p-1.5 rounded border border-slate-100">
+                                <span className="text-slate-400 block text-[10px] uppercase">Work Done Value</span>
+                                <span className="text-slate-700 font-bold">৳{sc.totalWorkValue.toLocaleString()}</span>
+                            </div>
+                            <div className="bg-slate-50 p-1.5 rounded border border-slate-100">
+                                <span className="text-slate-400 block text-[10px] uppercase">Paid / Billed</span>
+                                <span className="text-slate-700 font-bold">৳{sc.totalBilled.toLocaleString()}</span>
+                            </div>
+                        </div>
+                         {/* Director Remarks */}
+                        <div className="mt-1 pt-1 border-t border-slate-100">
+                            {editingRemarksId === sc.id ? (
+                                <div className="flex items-center gap-1">
+                                    <input 
+                                        type="text" 
+                                        value={tempRemarks} 
+                                        onChange={(e) => setTempRemarks(e.target.value)} 
+                                        className="w-full text-[10px] border border-orange-300 rounded px-1 py-0.5 outline-none"
+                                        autoFocus
+                                    />
+                                    <button onClick={() => saveRemarks('SUBCONTRACTOR', sc.id)} className="text-emerald-600"><Save className="w-3 h-3"/></button>
+                                    <button onClick={() => setEditingRemarksId(null)} className="text-red-500"><X className="w-3 h-3"/></button>
+                                </div>
+                            ) : (
+                                <div className="flex items-start gap-1 group/remark">
+                                    <p className="text-[10px] text-slate-400 italic flex-1 truncate">
+                                        {sc.pdRemarks ? `Note: ${sc.pdRemarks}` : (isDirector ? "Add PD Note..." : "")}
+                                    </p>
+                                    {isDirector && (
+                                        <button 
+                                        onClick={() => { setEditingRemarksId(sc.id); setTempRemarks(sc.pdRemarks || ''); }}
+                                        className="opacity-0 group-hover/remark:opacity-100 text-slate-400 hover:text-orange-600 transition-opacity"
+                                        >
+                                        <Edit2 className="w-2.5 h-2.5" />
+                                        </button>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                ))}
+                {(!data.subContractors || data.subContractors.length === 0) && (
+                     <div className="text-center py-8 text-slate-400 text-sm">No sub-contractors engaged.</div>
+                )}
+            </div>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden mb-8">
+        <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-slate-50">
+          <h3 className="font-semibold text-slate-800">Physical Progress & Remaining Works</h3>
+          <span className="text-xs font-medium text-slate-500 bg-white border border-slate-200 px-3 py-1 rounded-full">
+            Live from Site
+          </span>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full text-left text-sm">
+            <thead className="bg-slate-50 text-slate-600 font-medium border-b border-slate-200">
+              <tr>
+                <th className="px-6 py-4 w-1/3">Item Description</th>
+                <th className="px-6 py-4 text-right">Planned Qty</th>
+                <th className="px-6 py-4 text-right">Executed Qty</th>
+                <th className="px-6 py-4 text-right font-semibold text-blue-700 bg-blue-50/50">Remaining Qty</th>
+                <th className="px-6 py-4 text-right">Progress %</th>
+                <th className="px-6 py-4 text-center">Status</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {data.boq.map((item) => {
+                const percent = Math.min(100, Math.round((item.executedQty / item.plannedQty) * 100));
+                const remaining = Math.max(0, item.plannedQty - item.executedQty);
+                return (
+                  <tr key={item.id} className="hover:bg-slate-50 transition-colors">
+                    <td className="px-6 py-4 font-medium text-slate-700">
+                      {item.description}
+                      <div className="text-xs text-slate-400 font-normal mt-0.5">ID: {item.id}</div>
+                    </td>
+                    <td className="px-6 py-4 text-right text-slate-500">{item.plannedQty.toLocaleString()} <span className="text-xs">{item.unit}</span></td>
+                    <td className="px-6 py-4 text-right text-slate-900 font-medium">{item.executedQty.toLocaleString()} <span className="text-xs">{item.unit}</span></td>
+                    <td className="px-6 py-4 text-right font-bold text-blue-600 bg-blue-50/30">
+                      {remaining.toLocaleString()} <span className="text-xs font-normal text-blue-400">{item.unit}</span>
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                       <div className="flex flex-col items-end gap-1">
+                         <span className="text-xs font-bold text-slate-700">{percent}%</span>
+                         <div className="w-24 bg-slate-200 h-1.5 rounded-full overflow-hidden">
+                           <div className={`h-full rounded-full ${percent >= 100 ? 'bg-emerald-500' : 'bg-blue-600'}`} style={{ width: `${percent}%` }}></div>
+                         </div>
+                       </div>
+                    </td>
+                    <td className="px-6 py-4 text-center">
+                      {percent >= 100 ? (
+                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800 border border-emerald-200">
+                          Completed
+                        </span>
+                      ) : percent > 0 ? (
+                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200">
+                          In Progress
+                        </span>
+                      ) : (
+                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600 border border-slate-200">
+                          Pending
+                        </span>
+                      )}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* DPRs */}
+        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden h-fit">
+          <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-slate-50">
+            <h3 className="font-semibold text-slate-800">Daily Progress Reports (DPR) Log</h3>
+          </div>
+          <div className="divide-y divide-slate-100 max-h-[400px] overflow-y-auto">
+            {data.dprs.map((dpr) => (
+              <div key={dpr.id} className="p-5 hover:bg-slate-50 transition-colors group">
+                <div className="flex justify-between items-start mb-2">
+                  <div className="flex items-center gap-2">
+                    <span className="w-2 h-2 rounded-full bg-blue-500"></span>
+                    <h4 className="font-medium text-slate-900 text-sm group-hover:text-blue-600 transition-colors">{dpr.activity}</h4>
+                  </div>
+                  <span className="text-xs font-mono text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded">#{dpr.id}</span>
+                </div>
+                
+                <div className="flex items-center gap-4 mt-2 text-xs text-slate-500">
+                  <div className="flex items-center gap-1.5 bg-slate-50 px-2 py-1 rounded">
+                    <Calendar className="w-3.5 h-3.5 text-slate-400" />
+                    <span>{dpr.date}</span>
+                  </div>
+                  <div className="flex items-center gap-1.5 bg-slate-50 px-2 py-1 rounded">
+                    <MapPin className="w-3.5 h-3.5 text-slate-400" />
+                    <span>{dpr.location}</span>
+                  </div>
+                  <div className="flex items-center gap-1.5 bg-slate-50 px-2 py-1 rounded">
+                    <Users className="w-3.5 h-3.5 text-slate-400" />
+                    <span>{dpr.laborCount} Workers</span>
+                  </div>
+                </div>
+                
+                {dpr.workDoneQty && dpr.linkedBoqId && (
+                  <div className="mt-2 text-xs font-medium text-emerald-600 bg-emerald-50 w-fit px-2 py-0.5 rounded">
+                    + {dpr.workDoneQty} Work Done Added
+                  </div>
+                )}
+
+                {dpr.subContractorId && (
+                   <div className="mt-1 text-[10px] font-bold text-orange-600 bg-orange-50 w-fit px-2 py-0.5 rounded border border-orange-100">
+                     Engaged: {data.subContractors?.find(s => s.id === dpr.subContractorId)?.name}
+                   </div>
+                )}
+
+                {dpr.materialsUsed && dpr.materialsUsed.length > 0 && (
+                   <div className="mt-2 flex flex-wrap gap-2">
+                     {dpr.materialsUsed.map((usage, idx) => {
+                       const matName = data.materials.find(m => m.id === usage.materialId)?.name || usage.materialId;
+                       return (
+                         <span key={idx} className="text-[10px] bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded border border-indigo-100">
+                           Consumed: {usage.qty} {data.materials.find(m => m.id === usage.materialId)?.unit} of {matName}
+                         </span>
+                       );
+                     })}
+                   </div>
+                )}
+                
+                {dpr.remarks && (
+                  <div className="mt-3 text-xs text-slate-600 italic border-l-2 border-slate-200 pl-3">
+                    "{dpr.remarks}"
+                  </div>
+                )}
+              </div>
+            ))}
+            {data.dprs.length === 0 && (
+                <div className="p-8 text-center text-slate-400 text-sm">No daily reports logged yet.</div>
+            )}
+          </div>
+        </div>
+
+        {/* Documents */}
+        <DocumentManager 
+          documents={data.documents} 
+          onAddDocument={onAddDocument} 
+          filterModule="SITE" 
+          compact={true}
+          allowUpload={canUploadDoc}
+        />
+      </div>
+
+       {/* Receive Material Modal */}
+       {isReceiveModalOpen && (
+         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+            <div className="bg-white rounded-xl shadow-xl w-full max-w-sm overflow-hidden">
+               <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-indigo-50/50">
+                  <h3 className="font-semibold text-slate-800">Receive Material (Inward)</h3>
+                  <button onClick={() => setIsReceiveModalOpen(false)}><X className="w-5 h-5 text-slate-400" /></button>
+               </div>
+               <form onSubmit={handleReceiveSubmit} className="p-6 space-y-4">
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700 mb-1">Select Material</label>
+                    <select 
+                      required 
+                      value={receiveMatId} 
+                      onChange={(e) => setReceiveMatId(e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm outline-none"
+                    >
+                      <option value="">-- Choose --</option>
+                      {data.materials.map(m => <option key={m.id} value={m.id}>{m.name} ({m.unit})</option>)}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700 mb-1">Quantity Received</label>
+                    <input 
+                      type="number" 
+                      required 
+                      min="0"
+                      step="0.01"
+                      value={receiveQty} 
+                      onChange={(e) => setReceiveQty(e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm outline-none"
+                      placeholder="e.g. 500"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700 mb-1">Buying Rate (Optional)</label>
+                    <input 
+                      type="number" 
+                      min="0"
+                      step="0.01"
+                      value={receiveRate} 
+                      onChange={(e) => setReceiveRate(e.target.value)}
+                      className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm outline-none"
+                      placeholder="Update Unit Price"
+                    />
+                  </div>
+                  <button type="submit" className="w-full bg-indigo-600 text-white py-2 rounded-lg font-bold hover:bg-indigo-700">Add to Stock</button>
+               </form>
+            </div>
+         </div>
+       )}
+
+       {/* DPR Modal */}
+       {isDprModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden flex flex-col max-h-[90vh]">
+            <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-slate-50/30">
+              <h3 className="font-semibold text-slate-800">Add Daily Progress Report</h3>
+              <button onClick={() => setIsDprModalOpen(false)} className="text-slate-400 hover:text-slate-600">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            
+            <div className="p-4 bg-indigo-50/50 border-b border-indigo-100 flex flex-col gap-3">
+               <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-indigo-700 font-bold text-xs uppercase tracking-wider">
+                     <Sparkles className="w-3.5 h-3.5" />
+                     AI Smart Auto-Fill
+                  </div>
+                  {isAiLoading && (
+                    <div className="flex items-center gap-1.5 text-indigo-600 text-[10px] font-bold animate-pulse">
+                       <Loader2 className="w-3 h-3 animate-spin" /> Analyzing Report...
+                    </div>
+                  )}
+               </div>
+               <div className="flex items-center gap-2">
+                  <div className="relative flex-1">
+                    <FileText className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+                    <select 
+                      value={selectedReportId}
+                      onChange={(e) => setSelectedReportId(e.target.value)}
+                      className="w-full pl-9 pr-4 py-2 bg-white border border-indigo-200 rounded-lg text-xs outline-none focus:ring-2 focus:ring-indigo-400 transition-all"
+                    >
+                       <option value="">{reportDocs.length > 0 ? '-- Use Latest Report --' : 'No reports available'}</option>
+                       {reportDocs.map(doc => (
+                         <option key={doc.id} value={doc.id}>{doc.name} ({doc.uploadDate})</option>
+                       ))}
+                    </select>
+                  </div>
+                  <button 
+                    onClick={handleAiAutoFill}
+                    disabled={isAiLoading || reportDocs.length === 0}
+                    className="bg-indigo-600 text-white px-4 py-2 rounded-lg text-xs font-bold shadow-sm hover:bg-indigo-700 transition-all disabled:opacity-50 flex items-center gap-1.5"
+                  >
+                    Auto-Fill
+                  </button>
+                  <button 
+                    onClick={(e) => { e.preventDefault(); handleVoiceRecord(); }}
+                    disabled={isRecording || isAiLoading}
+                    className={`px-4 py-2 rounded-lg text-xs font-bold shadow-sm transition-all disabled:opacity-50 flex items-center gap-1.5 ${isRecording ? 'bg-red-500 text-white animate-pulse' : 'bg-white text-indigo-600 border border-indigo-200 hover:bg-indigo-50'}`}
+                    title="Dictate Daily Progress"
+                  >
+                    <Mic className="w-3.5 h-3.5" />
+                    {isRecording ? 'Listening...' : 'Dictate'}
+                  </button>
+               </div>
+               {aiPopulatedFields.size > 0 && (
+                 <div className="text-[10px] text-indigo-600 font-medium flex items-center gap-1.5">
+                    <CheckCircle2 className="w-3 h-3" />
+                    Successfully updated {aiPopulatedFields.size} fields
+                 </div>
+               )}
+            </div>
+
+            <form onSubmit={handleCreateDPR} className="p-6 space-y-4 overflow-y-auto">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="relative">
+                  <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-1">
+                    Date
+                    {aiPopulatedFields.has('date') && <Sparkles className="w-2.5 h-2.5 text-indigo-500" />}
+                  </label>
+                  <input 
+                    type="date" 
+                    required
+                    value={activityDate}
+                    onChange={(e) => {
+                      setActivityDate(e.target.value);
+                      const next = new Set(aiPopulatedFields); next.delete('date'); setAiPopulatedFields(next);
+                    }}
+                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all ${aiPopulatedFields.has('date') ? 'border-indigo-300 bg-indigo-50/30' : 'border-slate-300'}`}
+                  />
+                </div>
+                <div>
+                   <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-1">
+                    Labor Count
+                    {aiPopulatedFields.has('labor') && <Sparkles className="w-2.5 h-2.5 text-indigo-500" />}
+                   </label>
+                   <input 
+                    type="number"
+                    min="0"
+                    value={laborCount}
+                    onChange={(e) => {
+                      setLaborCount(Number(e.target.value));
+                      const next = new Set(aiPopulatedFields); next.delete('labor'); setAiPopulatedFields(next);
+                    }}
+                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all ${aiPopulatedFields.has('labor') ? 'border-indigo-300 bg-indigo-50/30' : 'border-slate-300'}`}
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-1">
+                  Link to BOQ Item (Activity Type)
+                  {aiPopulatedFields.has('boq') && <Sparkles className="w-2.5 h-2.5 text-indigo-500" />}
+                </label>
+                <select 
+                  value={linkedBoqId}
+                  onChange={(e) => {
+                    setLinkedBoqId(e.target.value);
+                    const next = new Set(aiPopulatedFields); next.delete('boq'); setAiPopulatedFields(next);
+                  }}
+                  className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm bg-white transition-all ${aiPopulatedFields.has('boq') ? 'border-indigo-300 bg-indigo-50/30' : 'border-slate-300'}`}
+                >
+                  <option value="">-- General Activity (No BOQ Update) --</option>
+                  {data.boq.map(item => (
+                    <option key={item.id} value={item.id}>
+                      {item.id} - {item.description.substring(0, 50)}...
+                    </option>
+                  ))}
+                </select>
+              </div>
+              
+              {(linkedBoqId || aiPopulatedFields.has('qty')) && (
+                 <div className={`p-4 rounded-lg border transition-all space-y-3 ${aiPopulatedFields.has('qty') ? 'bg-indigo-50 border-indigo-200' : 'bg-blue-50 border-blue-100'}`}>
+                    <div>
+                        <label className="block text-sm font-medium text-blue-800 mb-1 flex items-center gap-1">
+                            Work Done Today (Quantity)
+                            {aiPopulatedFields.has('qty') && <Sparkles className="w-2.5 h-2.5 text-indigo-500" />}
+                        </label>
+                        <div className="flex items-center gap-2">
+                            <input 
+                            type="number"
+                            min="0"
+                            step="0.01"
+                            required
+                            value={workDoneQty}
+                            onChange={(e) => {
+                              setWorkDoneQty(Number(e.target.value));
+                              const next = new Set(aiPopulatedFields); next.delete('qty'); setAiPopulatedFields(next);
+                            }}
+                            className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all ${aiPopulatedFields.has('qty') ? 'border-indigo-300 bg-white' : 'border-blue-200 bg-white'}`}
+                            />
+                            <span className="text-sm font-medium text-blue-600">
+                                {data.boq.find(b => b.id === linkedBoqId)?.unit}
+                            </span>
+                        </div>
+                    </div>
+
+                    <div>
+                      <label className="block text-xs font-bold text-slate-500 uppercase mb-1 flex items-center gap-1">
+                         Engaged Sub-Contractor
+                         {aiPopulatedFields.has('subcontractor') && <Sparkles className="w-2.5 h-2.5 text-indigo-500" />}
+                      </label>
+                      <select 
+                         value={subContractorId}
+                         onChange={(e) => {
+                           setSubContractorId(e.target.value);
+                           const next = new Set(aiPopulatedFields); next.delete('subcontractor'); setAiPopulatedFields(next);
+                         }}
+                         className={`w-full px-3 py-2 border rounded-lg text-sm outline-none transition-all ${aiPopulatedFields.has('subcontractor') ? 'border-indigo-300 bg-white' : 'border-slate-300 bg-white'}`}
+                      >
+                         <option value="">-- No Sub-Contractor (Direct Labor) --</option>
+                         {data.subContractors?.map(sc => (
+                           <option key={sc.id} value={sc.id}>
+                             {sc.name} - (Rate: ৳{sc.agreedRates.find(r => r.boqId === linkedBoqId)?.rate || 0})
+                           </option>
+                         ))}
+                      </select>
+                      {subContractorId && linkedBoqId && (
+                         <div className="text-[10px] text-orange-600 mt-1">
+                            * Liability will be automatically created: ৳{(Number(workDoneQty) * (data.subContractors?.find(s => s.id === subContractorId)?.agreedRates.find(r => r.boqId === linkedBoqId)?.rate || 0)).toLocaleString()}
+                         </div>
+                      )}
+                    </div>
+                 </div>
+              )}
+              
+              {/* Material Consumption Section */}
+              <div className="bg-slate-50 p-4 rounded-lg border border-slate-200">
+                 <div className="flex justify-between items-center mb-2">
+                   <div className="flex items-center gap-2">
+                      <label className="text-xs font-bold text-slate-600 uppercase">Materials Consumed Today</label>
+                      {aiPopulatedFields.has('materials') && <Sparkles className="w-2.5 h-2.5 text-indigo-500" />}
+                   </div>
+                   <button type="button" onClick={addConsumptionRow} className="text-indigo-600 text-xs font-bold flex items-center gap-1">
+                     <PlusCircle className="w-3 h-3" /> Add Material
+                   </button>
+                 </div>
+                 <div className="space-y-2">
+                    {materialsConsumed.map((row, idx) => {
+                        const mat = data.materials.find(m => m.id === row.materialId);
+                        const isError = mat ? row.qty > mat.currentStock : false;
+
+                        return (
+                            <div key={idx} className="flex gap-2 items-center">
+                                <div className="flex-1 flex flex-col">
+                                    <select 
+                                        value={row.materialId}
+                                        onChange={(e) => updateConsumption(idx, 'materialId', e.target.value)}
+                                        className={`text-xs border rounded px-2 py-1.5 ${aiPopulatedFields.has('materials') ? 'border-indigo-200 bg-indigo-50/20' : 'border-slate-300'}`}
+                                    >
+                                        {data.materials.map(m => <option key={m.id} value={m.id}>{m.name} (Stock: {m.currentStock})</option>)}
+                                    </select>
+                                </div>
+                                <div className="w-24 relative">
+                                    <input 
+                                        type="number" 
+                                        value={row.qty} 
+                                        onChange={(e) => updateConsumption(idx, 'qty', Number(e.target.value))}
+                                        className={`w-full text-xs border rounded px-2 py-1.5 ${isError ? 'border-red-500 bg-red-50' : (aiPopulatedFields.has('materials') ? 'border-indigo-200 bg-indigo-50/20' : 'border-slate-300')}`}
+                                        placeholder="Qty"
+                                    />
+                                    {isError && <span className="absolute -bottom-3 left-0 text-[9px] text-red-500 font-bold flex items-center gap-0.5"><AlertCircle className="w-2 h-2"/> Over Limit</span>}
+                                </div>
+                                <span className="text-xs text-slate-500 w-8">{mat?.unit}</span>
+                                <button type="button" onClick={() => removeConsumptionRow(idx)} className="text-red-500 hover:bg-red-50 p-1 rounded"><X className="w-3 h-3"/></button>
+                            </div>
+                        );
+                    })}
+                   {materialsConsumed.length === 0 && <p className="text-xs text-slate-400 italic">No materials added.</p>}
+                 </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-1">
+                  Activity Description
+                  {aiPopulatedFields.has('activity') && <Sparkles className="w-2.5 h-2.5 text-indigo-500" />}
+                </label>
+                <input 
+                  type="text" 
+                  value={activityDesc}
+                  onChange={(e) => {
+                    setActivityDesc(e.target.value);
+                    const next = new Set(aiPopulatedFields); next.delete('activity'); setAiPopulatedFields(next);
+                  }}
+                  placeholder={linkedBoqId ? "Auto-filled from BOQ if empty" : "e.g., Site Clearing, Mobilization"}
+                  className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all ${aiPopulatedFields.has('activity') ? 'border-indigo-300 bg-indigo-50/30' : 'border-slate-300'}`}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-1">
+                  Location
+                  {aiPopulatedFields.has('location') && <Sparkles className="w-2.5 h-2.5 text-indigo-500" />}
+                </label>
+                <input 
+                  type="text" 
+                  value={location}
+                  onChange={(e) => {
+                    setLocation(e.target.value);
+                    const next = new Set(aiPopulatedFields); next.delete('location'); setAiPopulatedFields(next);
+                  }}
+                  placeholder="e.g., Chainage 10+500"
+                  className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all ${aiPopulatedFields.has('location') ? 'border-indigo-300 bg-indigo-50/30' : 'border-slate-300'}`}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-1 flex items-center gap-1">
+                  Remarks / Issues
+                  {aiPopulatedFields.has('remarks') && <Sparkles className="w-2.5 h-2.5 text-indigo-500" />}
+                </label>
+                <textarea 
+                  rows={3}
+                  value={remarks}
+                  onChange={(e) => {
+                    setRemarks(e.target.value);
+                    const next = new Set(aiPopulatedFields); next.delete('remarks'); setAiPopulatedFields(next);
+                  }}
+                  className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all ${aiPopulatedFields.has('remarks') ? 'border-indigo-300 bg-indigo-50/30' : 'border-slate-300'}`}
+                  placeholder="Any notes..."
+                />
+              </div>
+
+              <div className="pt-2 flex justify-end gap-3 border-t border-slate-100 mt-2 pt-4">
+                <button 
+                  type="button" 
+                  onClick={() => { setIsDprModalOpen(false); resetForm(); }}
+                  className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors"
+                >
+                  Cancel
+                </button>
+                <button 
+                  type="submit"
+                  className="px-6 py-2 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shadow-md active:scale-95"
+                >
+                  Save Progress
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SiteExecution;

components/SubcontractorPortal.tsx

@@ -0,0 +1,138 @@
+
+import React from 'react';
+import { SubContractor, DPR } from '../types';
+import { 
+  Users, 
+  Search, 
+  Filter, 
+  Plus, 
+  MoreVertical, 
+  DollarSign, 
+  HardHat, 
+  ChevronRight, 
+  TrendingUp, 
+  TrendingDown,
+  AlertCircle
+} from 'lucide-react';
+
+interface SubcontractorPortalProps {
+  subContractors: SubContractor[];
+  dprs: DPR[];
+}
+
+const SubcontractorPortal: React.FC<SubcontractorPortalProps> = ({ subContractors, dprs }) => {
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const filteredSubContractors = subContractors.filter(s => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const getWorkDoneBySubcontractor = (subId: string) => {
+    return dprs.filter(d => d.subContractorId === subId);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header & Filters */}
+      <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-4 flex-1 max-w-md">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search sub-contractors..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+            />
+          </div>
+          <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
+            <Filter className="w-5 h-5" />
+          </button>
+        </div>
+        <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
+          <Plus className="w-4 h-4" />
+          Add Sub-contractor
+        </button>
+      </div>
+
+      {/* Subcontractor Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredSubContractors.map(sub => {
+          const workDone = getWorkDoneBySubcontractor(sub.id);
+          const liabilityPercent = (sub.currentLiability / sub.totalWorkValue) * 100;
+
+          return (
+            <div key={sub.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden hover:border-blue-300 transition-all group">
+              <div className="p-6 border-b border-slate-100 bg-slate-50/50">
+                <div className="flex items-start justify-between mb-4">
+                  <div className="w-12 h-12 bg-white rounded-xl border border-slate-200 flex items-center justify-center shadow-sm group-hover:bg-blue-600 group-hover:text-white transition-all">
+                    <Users className="w-6 h-6" />
+                  </div>
+                  <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-white rounded-lg transition-all">
+                    <MoreVertical className="w-4 h-4" />
+                  </button>
+                </div>
+                <h3 className="font-bold text-slate-800 text-lg mb-1">{sub.name}</h3>
+                <span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-full border border-blue-100 uppercase tracking-wider">
+                  {sub.specialization}
+                </span>
+              </div>
+
+              <div className="p-6 space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="p-3 bg-slate-50 rounded-xl">
+                    <span className="text-[10px] font-bold text-slate-400 uppercase">Work Value</span>
+                    <p className="text-lg font-bold text-slate-800">৳{(sub.totalWorkValue / 100000).toFixed(1)}L</p>
+                  </div>
+                  <div className="p-3 bg-slate-50 rounded-xl">
+                    <span className="text-[10px] font-bold text-slate-400 uppercase">Liability</span>
+                    <p className={`text-lg font-bold ${sub.currentLiability > 0 ? 'text-amber-600' : 'text-emerald-600'}`}>
+                      ৳{(sub.currentLiability / 100000).toFixed(1)}L
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-[10px] font-bold text-slate-400 uppercase">
+                    <span>Payment Progress</span>
+                    <span>{((sub.totalBilled / sub.totalWorkValue) * 100).toFixed(0)}%</span>
+                  </div>
+                  <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
+                    <div 
+                      className="h-full bg-blue-500 transition-all"
+                      style={{ width: `${(sub.totalBilled / sub.totalWorkValue) * 100}%` }}
+                    />
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3 text-xs text-slate-500 font-medium">
+                  <div className="flex items-center gap-1">
+                    <HardHat className="w-3 h-3" />
+                    {workDone.length} DPRs
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <DollarSign className="w-3 h-3" />
+                    {sub.agreedRates.length} Rates
+                  </div>
+                </div>
+
+                {sub.currentLiability > (sub.totalWorkValue * 0.5) && (
+                  <div className="flex items-center gap-2 text-[10px] font-bold text-amber-600 bg-amber-50 p-2 rounded-lg border border-amber-100">
+                    <AlertCircle className="w-3 h-3" />
+                    HIGH PENDING LIABILITY
+                  </div>
+                )}
+
+                <button className="w-full py-2.5 bg-slate-900 text-white font-bold text-xs rounded-xl hover:bg-slate-800 transition-all flex items-center justify-center gap-2">
+                  View Portal
+                  <ChevronRight className="w-3 h-3" />
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default SubcontractorPortal;

components/SustainabilityTracker.tsx

@@ -0,0 +1,159 @@
+
+import React from 'react';
+import { SustainabilityMetrics, Unit } from '../types';
+import { Leaf, Recycle, Droplets, Wind, TrendingDown, AlertCircle, BarChart3 } from 'lucide-react';
+
+interface SustainabilityTrackerProps {
+  metrics: SustainabilityMetrics;
+}
+
+const SustainabilityTracker: React.FC<SustainabilityTrackerProps> = ({ metrics }) => {
+  const totalWaste = metrics.wasteGenerated.reduce((acc, curr) => acc + curr.qty, 0);
+  const totalRecycled = metrics.wasteGenerated.reduce((acc, curr) => acc + curr.recycledQty, 0);
+  const recycleRate = (totalRecycled / (totalWaste || 1)) * 100;
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Carbon Footprint */}
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm relative overflow-hidden">
+          <div className="relative z-10">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 bg-slate-100 text-slate-800 rounded-xl flex items-center justify-center">
+                <Wind className="w-5 h-5" />
+              </div>
+              <div>
+                <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Carbon Footprint</p>
+                <p className="text-2xl font-black text-slate-800">{metrics.carbonFootprint.toLocaleString()} kg CO₂</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2 text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-lg w-fit">
+              <TrendingDown className="w-3 h-3" />
+              <span>12% lower than benchmark</span>
+            </div>
+          </div>
+          <div className="absolute top-0 right-0 w-32 h-32 bg-slate-100/50 blur-[50px] rounded-full -mr-16 -mt-16"></div>
+        </div>
+
+        {/* Water Usage */}
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm relative overflow-hidden">
+          <div className="relative z-10">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center">
+                <Droplets className="w-5 h-5" />
+              </div>
+              <div>
+                <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Water Usage</p>
+                <p className="text-2xl font-black text-slate-800">{metrics.waterUsage.toLocaleString()} L</p>
+              </div>
+            </div>
+            <p className="text-xs text-slate-500 font-medium">Site curing & dust suppression</p>
+          </div>
+          <div className="absolute top-0 right-0 w-32 h-32 bg-blue-50/50 blur-[50px] rounded-full -mr-16 -mt-16"></div>
+        </div>
+
+        {/* Waste Recycle Rate */}
+        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm relative overflow-hidden">
+          <div className="relative z-10">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-10 h-10 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center">
+                <Recycle className="w-5 h-5" />
+              </div>
+              <div>
+                <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Recycle Rate</p>
+                <p className="text-2xl font-black text-slate-800">{recycleRate.toFixed(0)}%</p>
+              </div>
+            </div>
+            <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
+              <div className="h-full bg-emerald-500" style={{ width: `${recycleRate}%` }} />
+            </div>
+          </div>
+          <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-50/50 blur-[50px] rounded-full -mr-16 -mt-16"></div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Waste Breakdown */}
+        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+          <div className="p-6 border-b border-slate-100 flex items-center justify-between">
+            <h3 className="font-bold text-slate-800 flex items-center gap-2">
+              <BarChart3 className="w-5 h-5 text-blue-600" />
+              Waste Breakdown
+            </h3>
+          </div>
+          <div className="p-6 space-y-6">
+            {metrics.wasteGenerated.map((waste, idx) => (
+              <div key={idx} className="space-y-2">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="font-bold text-slate-700">{waste.type}</span>
+                  <span className="text-slate-500 font-medium">{waste.qty} {waste.unit}</span>
+                </div>
+                <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden flex">
+                  <div 
+                    className="h-full bg-emerald-500" 
+                    style={{ width: `${(waste.recycledQty / waste.qty) * 100}%` }}
+                    title="Recycled"
+                  />
+                  <div 
+                    className="h-full bg-slate-300" 
+                    style={{ width: `${((waste.qty - waste.recycledQty) / waste.qty) * 100}%` }}
+                    title="Landfill"
+                  />
+                </div>
+                <div className="flex items-center justify-between text-[10px] font-bold uppercase tracking-widest">
+                  <span className="text-emerald-600">Recycled: {waste.recycledQty} {waste.unit}</span>
+                  <span className="text-slate-400">Landfill: {waste.qty - waste.recycledQty} {waste.unit}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Sustainability Tips */}
+        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
+          <h3 className="font-bold text-slate-800 mb-6 flex items-center gap-2">
+            <Leaf className="w-5 h-5 text-emerald-600" />
+            Green Site Recommendations
+          </h3>
+          <div className="space-y-4">
+            <div className="flex gap-4 p-4 bg-emerald-50 rounded-2xl border border-emerald-100">
+              <div className="w-8 h-8 bg-white rounded-xl flex items-center justify-center shrink-0 shadow-sm">
+                <AlertCircle className="w-4 h-4 text-emerald-600" />
+              </div>
+              <div>
+                <h4 className="text-sm font-bold text-emerald-900 mb-1">Optimize Concrete Curing</h4>
+                <p className="text-xs text-emerald-700 leading-relaxed">
+                  Use curing compounds instead of continuous water spraying to reduce water consumption by up to 30%.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-4 p-4 bg-blue-50 rounded-2xl border border-blue-100">
+              <div className="w-8 h-8 bg-white rounded-xl flex items-center justify-center shrink-0 shadow-sm">
+                <AlertCircle className="w-4 h-4 text-blue-600" />
+              </div>
+              <div>
+                <h4 className="text-sm font-bold text-blue-900 mb-1">Steel Scrap Segregation</h4>
+                <p className="text-xs text-blue-700 leading-relaxed">
+                  Implement a dedicated scrap yard for rebar off-cuts to ensure 100% recyclability and potential resale value.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-4 p-4 bg-amber-50 rounded-2xl border border-amber-100">
+              <div className="w-8 h-8 bg-white rounded-xl flex items-center justify-center shrink-0 shadow-sm">
+                <AlertCircle className="w-4 h-4 text-amber-600" />
+              </div>
+              <div>
+                <h4 className="text-sm font-bold text-amber-900 mb-1">Solar Lighting for Site Office</h4>
+                <p className="text-xs text-amber-700 leading-relaxed">
+                  Switching to solar-powered site lighting can reduce operational carbon footprint by 500kg CO₂ per month.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SustainabilityTracker;

components/TaskManager.tsx

@@ -0,0 +1,361 @@
+import React, { useState, useEffect } from 'react';
+import { Task, User } from '../types';
+import { 
+  Plus, 
+  Search, 
+  Calendar, 
+  User as UserIcon, 
+  CheckCircle2, 
+  Clock, 
+  AlertCircle,
+  Trash2,
+  CheckCircle,
+  MessageSquare,
+  X
+} from 'lucide-react';
+import { CommentSection } from './Collaboration';
+import { useLocalCollection } from '../hooks/useLocalCollection';
+
+interface TaskManagerProps {
+  projectId: string;
+  currentUser: User;
+}
+
+const TaskManager: React.FC<TaskManagerProps> = ({ projectId, currentUser }) => {
+  const { data: tasks, add: addTask, update: updateTask, remove: removeTask } = useLocalCollection<Task & { id: string }>(`tasks_${projectId}`);
+  const [users, setUsers] = useState<User[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('ALL');
+
+  const [newTask, setNewTask] = useState({
+    title: '',
+    description: '',
+    assignedTo: '',
+    dueDate: new Date().toISOString().split('T')[0],
+    priority: 'MEDIUM' as 'LOW' | 'MEDIUM' | 'HIGH'
+  });
+
+  useEffect(() => {
+    // In local mode, fetch from generic API
+    fetch('/api/collections/users')
+      .then(res => res.json())
+      .then(data => setUsers(data && data.length > 0 ? data : [currentUser]))
+      .catch(e => {
+        console.error(e);
+        setUsers([currentUser]);
+      });
+  }, [currentUser]);
+
+  const handleCreateTask = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const taskId = `TASK-${Date.now()}`;
+    const taskData: Task & { id: string } = {
+      id: taskId,
+      ...newTask,
+      projectId,
+      status: 'PENDING',
+      createdAt: new Date().toISOString()
+    };
+    
+    await addTask(taskData);
+
+    // Create a local notification via API
+    if (newTask.assignedTo) {
+      await fetch(`/api/collections/notifications_${newTask.assignedTo}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: `NOTIF-${Date.now()}`,
+          recipientUid: newTask.assignedTo,
+          type: 'TASK_ASSIGNED',
+          title: 'New Task Assigned',
+          message: `You have been assigned a new task: ${newTask.title}`,
+          targetId: taskId,
+          isRead: false,
+          createdAt: new Date().toISOString()
+        })
+      });
+    }
+
+    setIsModalOpen(false);
+    setNewTask({
+      title: '',
+      description: '',
+      assignedTo: '',
+      dueDate: new Date().toISOString().split('T')[0],
+      priority: 'MEDIUM'
+    });
+  };
+
+  const handleUpdateStatus = async (taskId: string, newStatus: string) => {
+    updateTask(taskId, { status: newStatus as any });
+  };
+
+  const handleDeleteTask = async (taskId: string) => {
+    removeTask(taskId);
+    if (selectedTaskId === taskId) setSelectedTaskId(null);
+  };
+
+  const filteredTasks = tasks.filter(t => {
+    const matchesSearch = t.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                         t.description.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesStatus = statusFilter === 'ALL' || t.status === statusFilter;
+    return matchesSearch && matchesStatus;
+  });
+
+  const getPriorityColor = (priority: string) => {
+    switch(priority) {
+      case 'HIGH': return 'text-red-600 bg-red-50 border-red-100';
+      case 'MEDIUM': return 'text-amber-600 bg-amber-50 border-amber-100';
+      case 'LOW': return 'text-blue-600 bg-blue-50 border-blue-100';
+      default: return 'text-slate-600 bg-slate-50 border-slate-100';
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch(status) {
+      case 'COMPLETED': return <CheckCircle2 className="w-4 h-4 text-emerald-500" />;
+      case 'IN_PROGRESS': return <Clock className="w-4 h-4 text-blue-500" />;
+      default: return <AlertCircle className="w-4 h-4 text-slate-400" />;
+    }
+  };
+
+  return (
+    <div className="flex h-full gap-6">
+      <div className="flex-1 flex flex-col gap-6">
+        {/* Header & Filters */}
+        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-4">
+          <div className="flex items-center gap-4 flex-1">
+            <div className="relative flex-1 max-w-md">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+              <input
+                type="text"
+                placeholder="Search tasks..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+              />
+            </div>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="ALL">All Status</option>
+              <option value="PENDING">To Do</option>
+              <option value="IN_PROGRESS">In Progress</option>
+              <option value="COMPLETED">Completed</option>
+            </select>
+          </div>
+          <button
+            onClick={() => setIsModalOpen(true)}
+            className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg font-bold text-sm hover:bg-blue-700 transition-all shadow-lg shadow-blue-200"
+          >
+            <Plus className="w-4 h-4" />
+            New Task
+          </button>
+        </div>
+
+        {/* Task List */}
+        <div className="grid grid-cols-1 gap-4 overflow-y-auto pr-2">
+          {filteredTasks.length > 0 ? (
+            filteredTasks.map((task) => (
+              <div 
+                key={task.id}
+                onClick={() => setSelectedTaskId(task.id)}
+                className={`bg-white p-4 rounded-xl border transition-all cursor-pointer group ${
+                  selectedTaskId === task.id ? 'border-blue-500 shadow-md ring-1 ring-blue-500' : 'border-slate-200 hover:border-blue-300 hover:shadow-sm'
+                }`}
+              >
+                <div className="flex items-start justify-between mb-3">
+                  <div className="flex items-center gap-3">
+                    <button 
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleUpdateStatus(task.id, task.status === 'COMPLETED' ? 'PENDING' : 'COMPLETED');
+                      }}
+                      className="transition-transform hover:scale-110"
+                    >
+                      {task.status === 'COMPLETED' ? (
+                        <CheckCircle className="w-5 h-5 text-emerald-500" />
+                      ) : (
+                        <div className="w-5 h-5 rounded-full border-2 border-slate-300 group-hover:border-blue-400" />
+                      )}
+                    </button>
+                    <div>
+                      <h5 className={`font-bold text-slate-800 ${task.status === 'COMPLETED' ? 'line-through text-slate-400' : ''}`}>
+                        {task.title}
+                      </h5>
+                      <div className="flex items-center gap-3 mt-1">
+                        <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${getPriorityColor(task.priority)}`}>
+                          {task.priority}
+                        </span>
+                        <div className="flex items-center gap-1 text-[10px] text-slate-500 font-medium">
+                          <Calendar className="w-3 h-3" />
+                          {new Date(task.dueDate).toLocaleDateString()}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <button 
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDeleteTask(task.id);
+                    }}
+                    className="p-1.5 text-slate-300 hover:text-red-500 hover:bg-red-50 rounded-lg opacity-0 group-hover:opacity-100 transition-all"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+                <p className="text-xs text-slate-600 line-clamp-2 mb-4 pl-8">
+                  {task.description}
+                </p>
+                <div className="flex items-center justify-between pl-8">
+                  <div className="flex items-center gap-2">
+                    {task.assignedTo ? (
+                      <div className="flex items-center gap-1.5 bg-slate-100 px-2 py-1 rounded-lg">
+                        <UserIcon className="w-3 h-3 text-slate-500" />
+                        <span className="text-[10px] font-bold text-slate-700">
+                          {users.find(u => u.uid === task.assignedTo)?.name || 'Assigned'}
+                        </span>
+                      </div>
+                    ) : (
+                      <span className="text-[10px] font-medium text-slate-400 italic">Unassigned</span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1 text-[10px] font-bold text-slate-500">
+                      <MessageSquare className="w-3 h-3" />
+                      Comments
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="bg-white p-12 rounded-xl border border-dashed border-slate-300 text-center">
+              <CheckCircle2 className="w-12 h-12 text-slate-200 mx-auto mb-4" />
+              <p className="text-slate-500 font-medium">No tasks found matching your criteria.</p>
+              <button 
+                onClick={() => setIsModalOpen(true)}
+                className="text-blue-600 text-sm font-bold mt-2 hover:underline"
+              >
+                Create your first task
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Task Details / Comments Sidebar */}
+      {selectedTaskId && (
+        <div className="w-80 h-full flex flex-col animate-in slide-in-from-right duration-300">
+          <CommentSection 
+            projectId={projectId}
+            targetId={selectedTaskId}
+            targetType="TASK"
+            currentUser={currentUser}
+          />
+        </div>
+      )}
+
+      {/* New Task Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm">
+          <div className="bg-white rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in zoom-in duration-200">
+            <div className="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
+              <h3 className="font-bold text-slate-800">Create New Task</h3>
+              <button onClick={() => setIsModalOpen(false)} className="p-2 hover:bg-slate-200 rounded-full transition-colors">
+                <X className="w-5 h-5 text-slate-500" />
+              </button>
+            </div>
+            <form onSubmit={handleCreateTask} className="p-6 space-y-4">
+              <div>
+                <label className="block text-xs font-bold text-slate-500 uppercase mb-1.5">Task Title</label>
+                <input
+                  required
+                  type="text"
+                  value={newTask.title}
+                  onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
+                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+                  placeholder="e.g. Complete foundation concrete"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-bold text-slate-500 uppercase mb-1.5">Description</label>
+                <textarea
+                  value={newTask.description}
+                  onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
+                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all h-24 resize-none"
+                  placeholder="Add more details about the task..."
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-bold text-slate-500 uppercase mb-1.5">Assign To</label>
+                  <select
+                    value={newTask.assignedTo}
+                    onChange={(e) => setNewTask({ ...newTask, assignedTo: e.target.value })}
+                    className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+                  >
+                    <option value="">Select Member</option>
+                    {users.map(u => (
+                      <option key={u.uid} value={u.uid}>{u.name} ({u.role})</option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs font-bold text-slate-500 uppercase mb-1.5">Due Date</label>
+                  <input
+                    type="date"
+                    value={newTask.dueDate}
+                    onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}
+                    className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-xs font-bold text-slate-500 uppercase mb-1.5">Priority</label>
+                <div className="flex gap-2">
+                  {(['LOW', 'MEDIUM', 'HIGH'] as const).map(p => (
+                    <button
+                      key={p}
+                      type="button"
+                      onClick={() => setNewTask({ ...newTask, priority: p })}
+                      className={`flex-1 py-2 rounded-xl text-xs font-bold border transition-all ${
+                        newTask.priority === p 
+                          ? getPriorityColor(p) + ' ring-2 ring-offset-1 ring-blue-500'
+                          : 'bg-slate-50 border-slate-200 text-slate-500 hover:bg-slate-100'
+                      }`}
+                    >
+                      {p}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div className="pt-4 flex gap-3">
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="flex-1 px-4 py-2.5 bg-slate-100 text-slate-600 rounded-xl font-bold text-sm hover:bg-slate-200 transition-all"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="flex-1 px-4 py-2.5 bg-blue-600 text-white rounded-xl font-bold text-sm hover:bg-blue-700 transition-all shadow-lg shadow-blue-200"
+                >
+                  Create Task
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskManager;

components/VendorAnalytics.tsx

@@ -0,0 +1,117 @@
+
+import React from 'react';
+import { Vendor } from '../types';
+import { ShoppingCart, Star, TrendingUp, TrendingDown, Package, Clock, ShieldCheck, Search, Filter, MoreVertical } from 'lucide-react';
+
+interface VendorAnalyticsProps {
+  vendors: Vendor[];
+}
+
+const VendorAnalytics: React.FC<VendorAnalyticsProps> = ({ vendors }) => {
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const filteredVendors = vendors.filter(v => 
+    v.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
+    v.category.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const getRatingColor = (rating: number) => {
+    if (rating >= 4.5) return 'text-emerald-600 bg-emerald-50 border-emerald-100';
+    if (rating >= 3.5) return 'text-blue-600 bg-blue-50 border-blue-100';
+    if (rating >= 2.5) return 'text-amber-600 bg-amber-50 border-amber-100';
+    return 'text-red-600 bg-red-50 border-red-100';
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-4 flex-1 max-w-md">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <input
+              type="text"
+              placeholder="Search vendors..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm transition-all"
+            />
+          </div>
+          <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-lg transition-all">
+            <Filter className="w-5 h-5" />
+          </button>
+        </div>
+        <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">
+          <ShoppingCart className="w-4 h-4" />
+          New Purchase Order
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredVendors.length === 0 ? (
+          <div className="col-span-full py-20 text-center bg-white rounded-2xl border border-dashed border-slate-300">
+            <Package className="w-12 h-12 text-slate-300 mx-auto mb-4" />
+            <p className="text-slate-500 font-medium">No vendors found</p>
+          </div>
+        ) : (
+          filteredVendors.map(vendor => (
+            <div key={vendor.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm hover:border-blue-300 transition-all group overflow-hidden">
+              <div className="p-6 border-b border-slate-100 bg-slate-50/50">
+                <div className="flex items-start justify-between mb-4">
+                  <div className="w-12 h-12 bg-white rounded-xl border border-slate-200 flex items-center justify-center shadow-sm group-hover:bg-blue-600 group-hover:text-white transition-all">
+                    <Package className="w-6 h-6" />
+                  </div>
+                  <div className={`flex items-center gap-1 px-2 py-1 rounded-full border text-[10px] font-bold ${getRatingColor(vendor.rating)}`}>
+                    <Star className="w-3 h-3 fill-current" />
+                    {vendor.rating.toFixed(1)}
+                  </div>
+                </div>
+                <h3 className="font-bold text-slate-800 text-lg mb-1">{vendor.name}</h3>
+                <span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-full border border-blue-100 uppercase tracking-wider">
+                  {vendor.category}
+                </span>
+              </div>
+
+              <div className="p-6 space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="p-3 bg-slate-50 rounded-xl">
+                    <span className="text-[10px] font-bold text-slate-400 uppercase">Total Orders</span>
+                    <p className="text-lg font-bold text-slate-800">{vendor.totalOrders}</p>
+                  </div>
+                  <div className="p-3 bg-slate-50 rounded-xl">
+                    <span className="text-[10px] font-bold text-slate-400 uppercase">On-Time Rate</span>
+                    <p className={`text-lg font-bold ${vendor.onTimeDeliveryRate > 90 ? 'text-emerald-600' : 'text-amber-600'}`}>
+                      {vendor.onTimeDeliveryRate}%
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-[10px] font-bold text-slate-400 uppercase">
+                    <span>Quality Score</span>
+                    <span>{vendor.qualityScore}%</span>
+                  </div>
+                  <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
+                    <div 
+                      className="h-full bg-blue-500 transition-all"
+                      style={{ width: `${vendor.qualityScore}%` }}
+                    />
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between pt-2">
+                  <div className="flex items-center gap-2 text-xs text-slate-500 font-medium">
+                    <Clock className="w-3 h-3" />
+                    Avg. 4 days delivery
+                  </div>
+                  <button className="text-xs font-bold text-blue-600 hover:text-blue-700">View History</button>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default VendorAnalytics;

components/WeatherWidget.tsx

@@ -0,0 +1,99 @@
+
+import React from 'react';
+import { WeatherForecast } from '../types';
+import { Cloud, Sun, CloudRain, Wind, Thermometer, AlertCircle, TrendingUp, TrendingDown } from 'lucide-react';
+
+interface WeatherWidgetProps {
+  forecast: WeatherForecast[];
+}
+
+const WeatherWidget: React.FC<WeatherWidgetProps> = ({ forecast }) => {
+  const today = forecast[0];
+
+  const getConditionIcon = (condition: string) => {
+    switch (condition.toLowerCase()) {
+      case 'sunny': return <Sun className="w-8 h-8 text-amber-500" />;
+      case 'rainy': return <CloudRain className="w-8 h-8 text-blue-500" />;
+      case 'cloudy': return <Cloud className="w-8 h-8 text-slate-400" />;
+      default: return <Sun className="w-8 h-8 text-amber-500" />;
+    }
+  };
+
+  const getImpactColor = (impact: string) => {
+    switch (impact) {
+      case 'STOP_WORK': return 'text-red-600 bg-red-50 border-red-100';
+      case 'CAUTION': return 'text-amber-600 bg-amber-50 border-amber-100';
+      case 'NONE': return 'text-emerald-600 bg-emerald-50 border-emerald-100';
+      default: return 'text-slate-600 bg-slate-50 border-slate-100';
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+      <div className="p-6 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
+        <h3 className="font-bold text-slate-800 flex items-center gap-2">
+          <Sun className="w-5 h-5 text-amber-500" />
+          Site Weather Forecast
+        </h3>
+        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Dhaka, BD</span>
+      </div>
+
+      <div className="p-6">
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-8">
+          <div className="flex items-center gap-6">
+            <div className="w-20 h-20 bg-slate-50 rounded-3xl flex items-center justify-center shadow-inner">
+              {getConditionIcon(today?.condition || 'Sunny')}
+            </div>
+            <div>
+              <div className="flex items-baseline gap-1">
+                <span className="text-4xl font-black text-slate-800">{today?.temp || 32}°</span>
+                <span className="text-lg font-bold text-slate-400">C</span>
+              </div>
+              <p className="text-sm font-bold text-slate-600">{today?.condition || 'Sunny'}</p>
+              <div className="flex items-center gap-3 mt-1">
+                <div className="flex items-center gap-1 text-[10px] font-bold text-slate-400">
+                  <Thermometer className="w-3 h-3" />
+                  <span>Feels like 35°</span>
+                </div>
+                <div className="flex items-center gap-1 text-[10px] font-bold text-slate-400">
+                  <Wind className="w-3 h-3" />
+                  <span>12 km/h</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className={`p-4 rounded-2xl border flex items-start gap-3 max-w-xs ${getImpactColor(today?.impactOnSite || 'NONE')}`}>
+            <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
+            <div>
+              <p className="text-[10px] font-bold uppercase tracking-widest mb-1">Site Impact Analysis</p>
+              <p className="text-xs font-bold leading-relaxed">
+                {today?.impactOnSite === 'STOP_WORK' ? 'Critical weather alert. All outdoor activities must be suspended.' : 
+                 today?.impactOnSite === 'CAUTION' ? 'Moderate rain expected. Secure materials and monitor drainage.' : 
+                 'Ideal conditions for all site activities. No weather-related delays expected.'}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4">
+          {forecast.slice(1, 7).map((day, idx) => (
+            <div key={idx} className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col items-center text-center group hover:bg-white hover:border-blue-200 transition-all">
+              <span className="text-[10px] font-bold text-slate-400 uppercase mb-3">{day.date}</span>
+              <div className="mb-3 transform group-hover:scale-110 transition-transform">
+                {getConditionIcon(day.condition)}
+              </div>
+              <p className="text-sm font-bold text-slate-800">{day.temp}°</p>
+              <div className="flex items-center gap-1 mt-1">
+                <CloudRain className="w-2.5 h-2.5 text-blue-400" />
+                <span className="text-[10px] font-bold text-slate-400">{day.precipitationProbability}%</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WeatherWidget;

constants.ts

@@ -0,0 +1,271 @@
+
+import { ProjectState, Unit } from './types';
+
+const localPhoto = (title: string, color: string) =>
+  `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><rect width="800" height="600" fill="${color}"/><rect x="64" y="380" width="672" height="80" rx="12" fill="rgba(255,255,255,0.24)"/><text x="50%" y="52%" text-anchor="middle" font-family="Arial, sans-serif" font-size="42" font-weight="700" fill="#fff">${title}</text><text x="50%" y="68%" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" fill="#e5e7eb">Local project photo placeholder</text></svg>`)}`;
+
+export const MOCK_PROJECTS: ProjectState[] = [
+  {
+    id: 'P001',
+    name: "Bank Protective Work at Munshirhat, Gaibandha (BWDB)",
+    ownerUid: 'system',
+    memberUids: ['system'],
+    status: 'ACTIVE',
+    priority: 'HIGH',
+    contractValue: 181592188,
+    startDate: "2023-09-25",
+    endDate: "2026-03-28",
+    materials: [
+      { id: 'MAT-01', name: 'Portland Composite Cement', unit: Unit.BAG, totalReceived: 5000, totalConsumed: 4200, currentStock: 800, averageRate: 540, pdRemarks: 'Ensure Holcim brand for casting' },
+      { id: 'MAT-02', name: 'Sylhet Sand (FM 2.5)', unit: Unit.CFT, totalReceived: 20000, totalConsumed: 15000, currentStock: 5000, averageRate: 45 },
+      { id: 'MAT-03', name: 'Stone Chips (3/4")', unit: Unit.CFT, totalReceived: 35000, totalConsumed: 28000, currentStock: 7000, averageRate: 185 },
+      { id: 'MAT-04', name: 'Geo-Textile Bags', unit: Unit.NOS, totalReceived: 50000, totalConsumed: 20404, currentStock: 29596, averageRate: 28 }
+    ],
+    subContractors: [
+      { 
+        id: 'SC-01', 
+        name: 'Sweet Chairman', 
+        specialization: 'Earth Work & Geo-Bag', 
+        totalWorkValue: 450000, 
+        totalBilled: 155762, 
+        currentLiability: 294238, 
+        agreedRates: [
+          { boqId: '40-370-20', rate: 45.00 }, // Dumping Geo-bag labor rate
+          { boqId: '40-920', rate: 30.00 } // Earth work labor rate
+        ],
+        pdRemarks: 'Hold 10% retention from next bill.'
+      },
+      { 
+        id: 'SC-02', 
+        name: 'M/S Rahman Enterprise', 
+        specialization: 'CC Block Casting', 
+        totalWorkValue: 1200000, 
+        totalBilled: 1000000, 
+        currentLiability: 200000, 
+        agreedRates: [
+          { boqId: '40-190-35', rate: 65.00 }, // Block casting labor rate
+        ]
+      }
+    ],
+    boq: [
+      { 
+        id: '40-920', 
+        description: 'Earth work in cutting and filling of eroded bank', 
+        unit: Unit.CUM, 
+        rate: 123.59, 
+        plannedUnitCost: 105.00,
+        plannedBreakdown: { material: 50, labor: 30, equipment: 20, overhead: 5 },
+        plannedQty: 27977, 
+        executedQty: 27977,
+        billedAmount: 3000000, // Partial billing
+        priority: 'MEDIUM',
+        costAnalysis: {
+          unitCost: 115.00,
+          breakdown: { material: 80, labor: 25, equipment: 10, overhead: 0 }
+        }
+      },
+      { 
+        id: '40-370-20', 
+        description: 'Supply, Filling and Dumping of Geo-bag', 
+        unit: Unit.NOS, 
+        rate: 295.00, 
+        plannedUnitCost: 250.00,
+        plannedBreakdown: { material: 200, labor: 30, equipment: 15, overhead: 5 },
+        plannedQty: 20404, 
+        executedQty: 20404,
+        billedAmount: 6019180, // Fully billed
+        priority: 'HIGH',
+        costAnalysis: {
+          unitCost: 280.00,
+          breakdown: { material: 220, labor: 40, equipment: 10, overhead: 10 }
+        }
+      },
+      { 
+        id: '40-190-35', 
+        description: 'CC blocks(1:2.5:5): 40cm x 40cm x 40cm', 
+        unit: Unit.NOS, 
+        rate: 852.00, 
+        plannedUnitCost: 800.00,
+        plannedBreakdown: { material: 550, labor: 150, equipment: 70, overhead: 30 },
+        plannedQty: 47000, 
+        executedQty: 18896,
+        billedAmount: 12000000,
+        priority: 'HIGH',
+        costAnalysis: {
+          unitCost: 910.00,
+          breakdown: { material: 600, labor: 200, equipment: 80, overhead: 30 }
+        }
+      },
+      { 
+        id: '40-190-50', 
+        description: 'CC blocks(1:2.5:5): 30cm x 30cm x 30cm', 
+        unit: Unit.NOS, 
+        rate: 362.00, 
+        plannedUnitCost: 310.00,
+        plannedBreakdown: { material: 180, labor: 100, equipment: 20, overhead: 10 },
+        plannedQty: 70370, 
+        executedQty: 32049,
+        billedAmount: 11000000,
+        priority: 'MEDIUM',
+        costAnalysis: {
+          unitCost: 330.00, 
+          breakdown: { material: 200, labor: 100, equipment: 20, overhead: 10 }
+        }
+      },
+      { 
+        id: '40-190-40', 
+        description: 'CC blocks(1:2.5:5): 40cm x 40cm x 20cm', 
+        unit: Unit.NOS, 
+        rate: 432.00, 
+        plannedUnitCost: 380.00,
+        plannedBreakdown: { material: 250, labor: 100, equipment: 20, overhead: 10 },
+        plannedQty: 118260, 
+        executedQty: 15344,
+        billedAmount: 0,
+        priority: 'LOW',
+        costAnalysis: {
+          unitCost: 400.00,
+          breakdown: { material: 280, labor: 100, equipment: 10, overhead: 10 }
+        }
+      },
+      { 
+        id: '40-290-10', 
+        description: 'Dumping of stone/boulders/blocks by boat: Within 200m', 
+        unit: Unit.CUM, 
+        rate: 1638.00, 
+        plannedUnitCost: 1450.00,
+        plannedBreakdown: { material: 1100, labor: 250, equipment: 100, overhead: 0 },
+        plannedQty: 3926.39, 
+        executedQty: 981.60,
+        billedAmount: 0,
+        priority: 'MEDIUM',
+        costAnalysis: {
+          unitCost: 1400.00,
+          breakdown: { material: 1000, labor: 300, equipment: 100, overhead: 0 }
+        }
+      },
+      { 
+        id: '40-500-40', 
+        description: 'Supply and laying geotex filter', 
+        unit: Unit.SQM, 
+        rate: 202.00, 
+        plannedUnitCost: 175.00,
+        plannedBreakdown: { material: 140, labor: 35, equipment: 0, overhead: 0 },
+        plannedQty: 24187.50, 
+        executedQty: 12500,
+        billedAmount: 2000000,
+        priority: 'LOW',
+        costAnalysis: {
+          unitCost: 180.00,
+          breakdown: { material: 150, labor: 30, equipment: 0, overhead: 0 }
+        }
+      },
+    ],
+    dprs: [
+      { id: '105', date: '2024-11-19', activity: 'CC Block Manufacturing (Package-Munshirhat 01)', location: 'Casting Yard', laborCount: 30, remarks: 'Produced 97 nos 50x50x50 and 246 nos 40x40x40 blocks.', linkedBoqId: '40-190-35', subContractorId: 'SC-02', workDoneQty: 97, materialsUsed: [{ materialId: 'MAT-01', qty: 138 }, { materialId: 'MAT-02', qty: 250 }] },
+      { id: '106', date: '2024-11-19', activity: 'Geo-Bag Dumping by Boat', location: 'River Bank', laborCount: 19, remarks: 'Cumulative dumping progress 46.87%', linkedBoqId: '40-370-20', subContractorId: 'SC-01', workDoneQty: 150 },
+      { id: '107', date: '2024-12-30', activity: 'Monthly Reconciliation', location: 'Site Office', laborCount: 4, remarks: 'Gaibandha Munshirhat Block Casting Work Done Vol: 103385 cft' },
+    ],
+    bills: [
+      { id: 'RA-08', type: 'CLIENT_RA', entityName: 'BWDB Gaibandha O&M Division', amount: 12500000, date: '2024-10-15', status: 'PAID' },
+      { id: 'RA-09', type: 'CLIENT_RA', entityName: 'BWDB Gaibandha O&M Division', amount: 8599950, date: '2025-04-07', status: 'PENDING' },
+      { id: 'SUP-01', type: 'MATERIAL_EXPENSE', entityName: 'Hassan & Brothers Ltd (Supplier)', amount: 450000, date: '2024-11-20', status: 'PAID' },
+      { id: 'SUP-02', type: 'SUB_CONTRACTOR', entityName: 'Sweet Chairman (Sub-contractor)', amount: 155762, date: '2024-11-19', status: 'PENDING' },
+    ],
+    liabilities: [
+      { id: 'L001', description: 'Security Deposit (Retention 10%)', type: 'RETENTION', amount: 1250000, dueDate: '2026-03-28' },
+      { id: 'L002', description: 'Pending PO - Stone Chips (Sylhet)', type: 'PENDING_PO', amount: 867802, dueDate: '2024-12-01' },
+      { id: 'L003', description: 'Unbilled Labor (Nov)', type: 'UNBILLED_WORK', amount: 45000, dueDate: '2024-12-05' },
+    ],
+    milestones: [
+      { id: 'M1', title: 'Site Mobilization', date: '2023-10-01', status: 'COMPLETED', description: 'Site office setup and initial equipment deployment' },
+      { id: 'M2', title: 'Geo-Bag Dumping Completion', date: '2024-12-30', status: 'COMPLETED', description: 'Primary river bank protection layer' },
+      { id: 'M3', title: 'CC Block Casting (50%)', date: '2025-06-01', status: 'AT_RISK', description: 'Target 50% of total block volume cast' },
+      { id: 'M4', title: 'Pre-Monsoon Protection', date: '2025-05-15', status: 'PENDING', description: 'Critical protection works before water level rise' }
+    ],
+    documents: [
+      { id: 'D001', name: 'Running Bill RA-09.pdf', type: 'PDF', category: 'BILL', module: 'FINANCE', uploadDate: '2025-04-07', size: '1.4 MB' },
+      { id: 'D002', name: 'Daily Progress Report_19.11.25.pdf', type: 'PDF', category: 'REPORT', module: 'SITE', uploadDate: '2024-11-19', size: '2.1 MB' },
+      { id: 'D003', name: 'Profit_Loss_Summary_30.12.2024.xlsx', type: 'XLSX', category: 'REPORT', module: 'FINANCE', uploadDate: '2024-12-30', size: '0.5 MB' },
+      { id: 'D004', name: 'BOQ_Schedule.pdf', type: 'PDF', category: 'CONTRACT', module: 'MASTER', uploadDate: '2023-09-01', size: '3.8 MB' },
+    ],
+    aiSuggestions: [],
+    purchaseOrders: [
+      { id: 'PO-001', materialId: 'MAT-01', vendorName: 'Holcim Cement Ltd.', qty: 2000, rate: 540, totalAmount: 1080000, status: 'DELIVERED', orderDate: '2025-03-10', actualDeliveryDate: '2025-03-15' },
+      { id: 'PO-002', materialId: 'MAT-04', vendorName: 'Geo-Tech Solutions', qty: 10000, rate: 28, totalAmount: 280000, status: 'SENT', orderDate: '2025-04-01', expectedDeliveryDate: '2025-04-10' }
+    ],
+    qualityChecks: [
+      { id: 'QC-01', title: 'Concrete Slump Test', location: 'Block A Casting', inspectorUid: 'system', date: '2025-04-05', status: 'PASSED', items: [{ description: 'Slump value within 75-100mm', isOk: true }, { description: 'Correct water-cement ratio', isOk: true }] },
+      { id: 'QC-02', title: 'Rebar Inspection', location: 'Section 4 Foundation', inspectorUid: 'system', date: '2025-04-06', status: 'PENDING', items: [{ description: 'Correct spacing as per drawing', isOk: true }, { description: 'Rust-free rebar', isOk: false, remarks: 'Minor rust on top layer' }] }
+    ],
+    safetyChecks: [
+      { id: 'S-01', date: '2025-04-01', inspectorUid: 'system', score: 92, hazardsIdentified: ['Loose scaffolding'], correctiveActions: ['Tightened all joints'], status: 'SAFE' },
+      { id: 'S-02', date: '2025-04-06', inspectorUid: 'system', score: 65, hazardsIdentified: ['Missing PPE', 'Open excavation'], correctiveActions: ['Issued warnings', 'Fencing required'], status: 'ACTION_REQUIRED' }
+    ],
+    photoLogs: [
+      { id: 'PH-01', url: localPhoto('Foundation Pouring', '#1d4ed8'), caption: 'Foundation pouring at Section A', location: 'Section A', uploadedBy: 'system', createdAt: '2025-04-01T10:00:00Z', tags: ['foundation', 'concrete'] },
+      { id: 'PH-02', url: localPhoto('Material Delivery', '#047857'), caption: 'Material delivery - Cement', location: 'Main Store', uploadedBy: 'system', createdAt: '2025-04-05T14:30:00Z', tags: ['delivery', 'cement'] }
+    ],
+    equipment: [
+      { id: 'EQ-01', name: 'Excavator CAT 320', type: 'Heavy Machinery', status: 'OPERATIONAL', lastMaintenance: '2025-03-01', nextMaintenance: '2025-06-01', assignedOperator: 'Rahim Uddin', hourlyRate: 2500 },
+      { id: 'EQ-02', name: 'Concrete Mixer 10/7', type: 'Mixing Equipment', status: 'MAINTENANCE', lastMaintenance: '2025-04-01', nextMaintenance: '2025-04-10', assignedOperator: 'Karim Mia', hourlyRate: 800 }
+    ],
+    attendance: [
+      { id: 'ATT-01', date: '2025-04-07', workerName: 'Abul Kashem', category: 'SKILLED', checkIn: '08:00', status: 'PRESENT' },
+      { id: 'ATT-02', date: '2025-04-07', workerName: 'Sujon Ahmed', category: 'UNSKILLED', checkIn: '08:15', status: 'PRESENT' },
+      { id: 'ATT-03', date: '2025-04-07', workerName: 'Mofizul Islam', category: 'UNSKILLED', checkIn: '', status: 'ABSENT' }
+    ],
+    changeOrders: [
+      { id: 'CO-01', title: 'Additional Retaining Wall', description: 'Request for extra 50m retaining wall due to soil instability at Section B.', requestedBy: 'Site Engineer', status: 'PENDING', estimatedCost: 1500000, date: '2025-04-05' }
+    ],
+    vendors: [
+      { id: 'VEN-01', name: 'Holcim Cement Ltd.', category: 'Cement', rating: 4.8, totalOrders: 15, onTimeDeliveryRate: 95, qualityScore: 98 },
+      { id: 'VEN-02', name: 'BSRM Steels', category: 'Rebar', rating: 4.5, totalOrders: 8, onTimeDeliveryRate: 90, qualityScore: 96 }
+    ],
+    riskAssessment: {
+      lastUpdated: '2025-04-07',
+      overallRiskScore: 42,
+      risks: [
+        { category: 'Weather', description: 'Upcoming monsoon season may delay river bank protection.', impact: 'HIGH', probability: 0.8, mitigation: 'Accelerate geo-bag dumping and complete primary layer before May 15th.' },
+        { category: 'Supply Chain', description: 'Potential shortage of Sylhet sand due to transport strike.', impact: 'MEDIUM', probability: 0.3, mitigation: 'Pre-order and stockpile 5000 CFT additional sand.' }
+      ]
+    },
+    weatherForecast: [
+      { date: '2025-04-07', temp: 32, condition: 'Sunny', precipitationProbability: 10, impactOnSite: 'NONE' },
+      { date: '2025-04-08', temp: 31, condition: 'Cloudy', precipitationProbability: 20, impactOnSite: 'NONE' },
+      { date: '2025-04-09', temp: 28, condition: 'Rainy', precipitationProbability: 80, impactOnSite: 'CAUTION' }
+    ],
+    sustainabilityMetrics: {
+      carbonFootprint: 125400,
+      waterUsage: 450000,
+      wasteGenerated: [
+        { type: 'Concrete Waste', qty: 50, unit: Unit.CUM, recycledQty: 35 },
+        { type: 'Steel Scrap', qty: 5, unit: Unit.TON, recycledQty: 5 }
+      ]
+    },
+    bimModels: [
+      { id: 'BIM-01', name: 'Main Structure - Architectural', url: '#', version: '2.1', uploadedAt: '2025-03-15' },
+      { id: 'BIM-02', name: 'MEP Layout - Section A', url: '#', version: '1.0', uploadedAt: '2025-04-01' }
+    ]
+  },
+  {
+    id: 'P002',
+    name: "New Construction Project",
+    ownerUid: 'system',
+    memberUids: ['system'],
+    status: 'ACTIVE',
+    priority: 'MEDIUM',
+    contractValue: 0,
+    startDate: "2025-01-01",
+    endDate: "2025-12-31",
+    materials: [],
+    subContractors: [],
+    boq: [],
+    dprs: [],
+    bills: [],
+    liabilities: [],
+    milestones: [],
+    documents: [],
+    aiSuggestions: []
+  }
+];

contexts/NotificationContext.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+
+type ToastType = 'success' | 'error' | 'info';
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+}
+
+interface NotificationContextType {
+  showToast: (message: string, type: ToastType) => void;
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
+
+export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = useCallback((message: string, type: ToastType) => {
+    const id = Math.random().toString(36).substring(7);
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 5000);
+  }, []);
+
+  return (
+    <NotificationContext.Provider value={{ showToast }}>
+      {children}
+      <div className="fixed top-4 right-4 z-50 space-y-2">
+        {toasts.map((toast) => (
+          <div key={toast.id} className={`p-4 rounded-lg shadow-lg text-white font-medium ${toast.type === 'success' ? 'bg-emerald-600' : toast.type === 'error' ? 'bg-red-600' : 'bg-blue-600'}`}>
+            {toast.message}
+          </div>
+        ))}
+      </div>
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotification = () => {
+    const context = useContext(NotificationContext);
+    if (!context) throw new Error('useNotification must be used within NotificationProvider');
+    return context;
+};

hooks/useLocalCollection.ts

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Helper to dynamically grab auth token if available.
+ */
+const getAuthHeaders = () => {
+    const token = localStorage.getItem('auth_token');
+    return {
+        'Content-Type': 'application/json',
+        ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+    };
+};
+
+/**
+ * A hook to manage a generic collection via our Express MongoDB API.
+ * Uses optimistic updates for a snappy UX without websockets.
+ */
+export function useLocalCollection<T extends { id: string }>(collectionName: string, refreshKey = '') {
+    const [data, setData] = useState<T[]>([]);
+
+    useEffect(() => {
+        let mounted = true;
+        const token = localStorage.getItem('auth_token');
+        fetch(`/api/collections/${collectionName}`, {
+            headers: token ? { 'Authorization': `Bearer ${token}` } : {}
+        })
+            .then(res => {
+                if (res.status === 401 || res.status === 403) return []; // Not logged in
+                if (!res.ok) throw new Error("Fetch failed");
+                return res.json();
+            })
+            .then(result => {
+                if (mounted) {
+                    setData(Array.isArray(result) ? result : []);
+                    if (!Array.isArray(result)) {
+                        console.error(`Expected array for ${collectionName}, got:`, result);
+                    }
+                }
+            })
+            .catch(err => console.error(`Error fetching ${collectionName}:`, err));
+        
+        return () => { mounted = false; };
+    }, [collectionName, refreshKey]);
+
+    const add = async (item: T) => {
+        setData(prev => [...prev, item]); // Optimistic
+        try {
+            await fetch(`/api/collections/${collectionName}`, {
+                method: 'POST',
+                headers: getAuthHeaders(),
+                body: JSON.stringify(item)
+            });
+        } catch (e) {
+            console.error(`Error adding to ${collectionName}:`, e);
+        }
+    };
+
+    const update = async (id: string, updates: Partial<T>) => {
+        setData(prev => prev.map(d => d.id === id ? { ...d, ...updates } : d)); // Optimistic
+        try {
+            await fetch(`/api/collections/${collectionName}/${id}`, {
+                method: 'PUT',
+                headers: getAuthHeaders(),
+                body: JSON.stringify(updates)
+            });
+        } catch (e) {
+            console.error(`Error updating ${collectionName}:`, e);
+        }
+    };
+
+    const remove = async (id: string) => {
+        setData(prev => prev.filter(d => d.id !== id)); // Optimistic
+        try {
+            const token = localStorage.getItem('auth_token');
+            await fetch(`/api/collections/${collectionName}/${id}`, {
+                method: 'DELETE',
+                headers: token ? { 'Authorization': `Bearer ${token}` } : {}
+            });
+        } catch (e) {
+            console.error(`Error deleting from ${collectionName}:`, e);
+        }
+    };
+
+    return { data, add, update, remove };
+}

index.css

@@ -0,0 +1,89 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import "tailwindcss";
+
+@theme {
+  --color-background: #f8fafc;
+  --color-foreground: #0f172a;
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-heading: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
+  
+  --radius-xl: 0.5rem;
+  --radius-2xl: 0.75rem;
+  --radius-3xl: 1rem;
+}
+
+@layer base {
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-heading font-bold tracking-tight text-slate-900;
+  }
+}
+
+@layer components {
+  .card {
+    @apply bg-white border border-slate-200/80 rounded-xl shadow-[0_1px_3px_0_rgba(0,0,0,0.05)] transition-all duration-300;
+  }
+  
+  .card-hover {
+    @apply hover:shadow-md hover:border-slate-300;
+  }
+
+  .btn-primary {
+    @apply bg-slate-900 text-white px-4 py-2 rounded-md font-semibold text-sm transition-all active:scale-95 hover:bg-slate-800 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm;
+  }
+
+  .btn-secondary {
+    @apply bg-white text-slate-700 border border-slate-200 px-4 py-2 rounded-md font-semibold text-sm transition-all active:scale-95 hover:bg-slate-50 shadow-sm;
+  }
+
+  .sidebar-item {
+    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 font-medium text-sm;
+  }
+
+  .sidebar-item-active {
+    @apply bg-slate-900 text-white shadow-sm;
+  }
+
+  .sidebar-item-inactive {
+    @apply text-slate-500 hover:bg-slate-100/50 hover:text-slate-900;
+  }
+}
+
+/* Custom scrollbar for desktop */
+@media (min-width: 1024px) {
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-slate-200 rounded-full hover:bg-slate-300;
+  }
+}
+
+.markdown-body {
+  @apply leading-relaxed;
+}
+
+.markdown-body h1, .markdown-body h2, .markdown-body h3 {
+  @apply mt-6 mb-4 font-heading font-bold text-slate-900;
+}
+
+.markdown-body p {
+  @apply mb-4 text-slate-600;
+}
+
+.markdown-body ul {
+  @apply list-disc pl-5 mb-4 space-y-2;
+}
+
+.markdown-body li {
+  @apply text-slate-600;
+}

index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Construction project management - AI</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+      body {
+        font-family: 'Inter', sans-serif;
+        background-color: #f8fafc;
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react-markdown": "https://aistudiocdn.com/react-markdown@^10.1.0",
+    "recharts": "https://aistudiocdn.com/recharts@^3.5.0",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body>
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Construction project management - AI",
+  "description": "A comprehensive construction project management system tracking master controls, site execution, financials, and liabilities with AI-powered insights.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "buildtrack-local---construction-management-system",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "tsx server.ts",
+    "build": "vite build",
+    "start": "tsx server.ts",
+    "preview": "vite preview",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "bcryptjs": "^3.0.3",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "express": "^5.2.1",
+    "express-session": "^1.19.0",
+    "framer-motion": "^12.38.0",
+    "jsonwebtoken": "^9.0.3",
+    "jspdf": "^4.2.1",
+    "jspdf-autotable": "^5.0.7",
+    "lucide-react": "^0.555.0",
+    "mongoose": "^9.4.1",
+    "passport": "^0.7.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "recharts": "^3.5.0",
+    "tailwind-merge": "^3.5.0",
+    "tsx": "^4.21.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "@types/bcryptjs": "^2.4.6",
+    "@types/express": "^5.0.6",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

server.ts

@@ -0,0 +1,237 @@
+import express from 'express';
+import mongoose from 'mongoose';
+import path from 'path';
+import jwt from 'jsonwebtoken';
+import bcrypt from 'bcryptjs';
+
+async function startServer() {
+  const app = express();
+  const PORT = Number(process.env.PORT || 7860);
+
+  app.use(express.json({ limit: '50mb' }));
+
+  // Connect to MongoDB
+  const mongoURI = process.env.MONGODB_URI || 'mongodb://localhost:27017/buildtrack_db';
+  let isMongoConnected = false;
+  try {
+    await mongoose.connect(mongoURI, { serverSelectionTimeoutMS: 2000 });
+    isMongoConnected = true;
+    console.log('Connected to MongoDB');
+  } catch (error) {
+    console.error('Failed to connect to MongoDB, falling back to in-memory store', error.message);
+  }
+
+  // --- GENERIC NOSQL API ROUTES ---
+  // To smoothly transition from offline localStorage, we expose a generic collection API
+  const inMemoryDB: Record<string, any[]> = {};
+
+  app.get('/api/health', (req, res) => {
+    res.json({ status: 'ok', db: isMongoConnected ? mongoose.connection.readyState : 'in-memory' });
+  });
+
+  // --- AUTH ROUTES ---
+  const JWT_SECRET = process.env.JWT_SECRET || '5aeb6c98c7622543d05e89904d09aed7b33f45a616204b31d4a18de8397c3e7d';
+  const createLocalAvatar = (name: string) => {
+    const initials = name
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map(part => part[0]?.toUpperCase() || '')
+      .join('') || 'U';
+    return `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><rect width="96" height="96" rx="24" fill="#2563eb"/><text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-size="34" font-weight="700" fill="#fff">${initials}</text></svg>`)}`;
+  };
+
+  app.post('/api/auth/signup', async (req, res) => {
+    const { name, email, password, role } = req.body;
+    if (!email || !password || !name) return res.status(400).json({ error: "Missing fields" });
+
+    try {
+      const passwordHash = await bcrypt.hash(password, 10);
+      let user;
+
+      if (!isMongoConnected) {
+        if (!inMemoryDB['users']) inMemoryDB['users'] = [];
+        if (inMemoryDB['users'].find(u => u.email === email)) return res.status(400).json({ error: "User exists" });
+        user = { id: `user-${Date.now()}`, uid: `user-${Date.now()}`, name, email, passwordHash, role, avatar: createLocalAvatar(name), createdAt: new Date().toISOString() };
+        inMemoryDB['users'].push(user);
+      } else {
+        if (await mongoose.connection.db.collection('users').findOne({ email })) return res.status(400).json({ error: "User exists" });
+        user = { id: `user-${Date.now()}`, uid: `user-${Date.now()}`, name, email, passwordHash, role, avatar: createLocalAvatar(name), createdAt: new Date().toISOString() };
+        await mongoose.connection.db.collection('users').insertOne(user);
+      }
+
+      res.status(201).json({ message: "User created" });
+    } catch (e) {
+      res.status(500).json({ error: "Signup failed" });
+    }
+  });
+
+  app.post('/api/auth/login', async (req, res) => {
+    const { email, password } = req.body;
+    if (!email || !password) return res.status(400).json({ error: "Email and password required" });
+
+    try {
+      let user;
+      if (!isMongoConnected) {
+        user = (inMemoryDB['users'] || []).find(u => u.email === email);
+      } else {
+        user = await mongoose.connection.db.collection('users').findOne({ email });
+      }
+
+      if (!user || !(await bcrypt.compare(password, user.passwordHash))) {
+        return res.status(401).json({ error: "Invalid credentials" });
+      }
+
+      const token = jwt.sign({ uid: user.uid, email: user.email, role: user.role }, JWT_SECRET, { expiresIn: '7d' });
+      res.json({ token, user });
+    } catch (e) {
+      res.status(500).json({ error: "Login failed" });
+    }
+  });
+
+  app.get('/api/auth/me', async (req, res) => {
+    const authHeader = req.headers['authorization'];
+    const token = authHeader && authHeader.split(' ')[1];
+    if (!token) return res.status(401).json({ error: "Missing token" });
+
+    jwt.verify(token, JWT_SECRET, async (err: any, decoded: any) => {
+      if (err) return res.status(403).json({ error: "Invalid token" });
+      try {
+          let user;
+          if (!isMongoConnected) {
+             user = (inMemoryDB['users'] || []).find(u => u.uid === decoded.uid);
+          } else {
+             user = await mongoose.connection.db.collection('users').findOne({ uid: decoded.uid });
+          }
+          if (!user) return res.status(404).json({ error: "User not found" });
+          res.json({ user });
+      } catch (e) {
+          res.status(500).json({ error: "Server error" });
+      }
+    });
+  });
+
+  // --- JWT MIDDLEWARE ---
+  const authenticateToken = (req: express.Request, res: express.Response, next: express.NextFunction) => {
+    const authHeader = req.headers['authorization'];
+    const token = authHeader && authHeader.split(' ')[1];
+    if (token == null) return res.status(401).json({ error: "Unauthorized" });
+
+    jwt.verify(token, JWT_SECRET, (err: any, user: any) => {
+      if (err) return res.status(403).json({ error: "Forbidden" });
+      (req as any).user = user;
+      next();
+    });
+  };
+
+  // Protect all API routes under /api/collections
+  app.use('/api/collections', authenticateToken);
+
+  app.get('/api/collections/:name', async (req, res) => {
+    try {
+      if (!isMongoConnected) {
+         return res.json(inMemoryDB[req.params.name] || []);
+      }
+      const docs = await mongoose.connection.db.collection(req.params.name).find().toArray();
+      res.json(docs);
+    } catch (e) {
+      res.status(500).json({ error: 'Failed to fetch collection' });
+    }
+  });
+
+  app.post('/api/collections/:name', async (req, res) => {
+    try {
+      if (!isMongoConnected) {
+         if (!inMemoryDB[req.params.name]) inMemoryDB[req.params.name] = [];
+         const doc = { ...req.body };
+         if (!doc.id) doc.id = Date.now().toString() + Math.random().toString();
+         inMemoryDB[req.params.name].push(doc);
+         return res.json(doc);
+      }
+      const doc = { ...req.body };
+      if (!doc.id) doc.id = new mongoose.Types.ObjectId().toString(); // Ensure string ID
+      await mongoose.connection.db.collection(req.params.name).insertOne(doc);
+      res.json(doc);
+    } catch (e) {
+      res.status(500).json({ error: 'Failed to insert document' });
+    }
+  });
+
+  app.put('/api/collections/:name/:id', async (req, res) => {
+    try {
+      if (!isMongoConnected) {
+          if (!inMemoryDB[req.params.name]) inMemoryDB[req.params.name] = [];
+          const idx = inMemoryDB[req.params.name].findIndex(d => d.id === req.params.id);
+          const updateData = { ...req.body };
+          if (idx >= 0) {
+             inMemoryDB[req.params.name][idx] = { ...inMemoryDB[req.params.name][idx], ...updateData };
+          } else {
+             inMemoryDB[req.params.name].push({ id: req.params.id, ...updateData });
+          }
+          return res.json({ id: req.params.id, ...updateData });
+      }
+      const updateData = { ...req.body };
+      delete updateData._id; // Prevent updating immutable _id if it sneaks in
+      
+      await mongoose.connection.db.collection(req.params.name).updateOne(
+        { id: req.params.id }, 
+        { $set: updateData },
+        { upsert: true }
+      );
+      res.json({ id: req.params.id, ...updateData });
+    } catch (e) {
+      res.status(500).json({ error: 'Failed to update document' });
+    }
+  });
+
+  app.delete('/api/collections/:name/:id', async (req, res) => {
+    try {
+      if (!isMongoConnected) {
+          if (inMemoryDB[req.params.name]) {
+              inMemoryDB[req.params.name] = inMemoryDB[req.params.name].filter(d => d.id !== req.params.id);
+          }
+          return res.json({ success: true });
+      }
+      await mongoose.connection.db.collection(req.params.name).deleteOne({ id: req.params.id });
+      res.json({ success: true });
+    } catch (e) {
+      res.status(500).json({ error: 'Failed to delete document' });
+    }
+  });
+
+  // Vite integration 
+  if (process.env.NODE_ENV !== 'production') {
+    const { createServer: createViteServer } = await import('vite');
+    const vite = await createViteServer({
+      server: { middlewareMode: true },
+      appType: 'custom',
+    });
+
+    app.get('/', async (req, res, next) => {
+      try {
+        const indexHtmlPath = path.join(process.cwd(), 'index.html');
+        const { readFile } = await import('node:fs/promises');
+        const template = await readFile(indexHtmlPath, 'utf-8');
+        const html = await vite.transformIndexHtml(req.originalUrl, template);
+        res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
+      } catch (error) {
+        vite.ssrFixStacktrace(error as Error);
+        next(error);
+      }
+    });
+
+    app.use(vite.middlewares);
+  } else {
+    const distPath = path.join(process.cwd(), 'dist');
+    app.use(express.static(distPath));
+    app.get(/.*/, (req, res) => {
+      res.sendFile(path.join(distPath, 'index.html'));
+    });
+  }
+
+  app.listen(PORT, '0.0.0.0', () => {
+    console.log(`Server running on http://localhost:${PORT}`);
+  });
+}
+
+startServer();