team management feature in Owners Box

src/pages/owner/OwnerSnapshot.jsx

@@ -6,18 +6,23 @@ import FinancialKPICards from '../../components/owner/FinancialKPICards';
 import UrgentItemsPanel from '../../components/owner/UrgentItemsPanel';
 import FinancialDetailsModal from '../../components/owner/FinancialDetailsModal';
 import ActionCenterModal from '../../components/owner/ActionCenterModal';
+import TeamManagementPanel from '../../components/owner/TeamManagementPanel';
 import { SpotlightCard } from '../../components/SpotlightCard';
 import {
     BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend
 } from 'recharts';
 import {
-    Briefcase, TrendingUp, AlertTriangle, Shield, ChevronRight, ArrowUpRight
+    Briefcase, TrendingUp, AlertTriangle, Shield, ChevronRight, ArrowUpRight, Users, ChevronDown
 } from 'lucide-react';
 
 const OwnerSnapshot = () => {
     const { user } = useAuth();
     const navigate = useNavigate();
-    const { owners, projects } = useMockStore();
+    const {
+        owners, projects, users, personnel,
+        orgCommissionDefaults, userCommissionOverrides,
+        addJobTeamMember, removeJobTeamMember, updateJobTeamMember,
+    } = useMockStore();
 
     // Find the current owner profile
     const owner = useMemo(() =>
@@ -33,6 +38,23 @@ const OwnerSnapshot = () => {
     const [financialModal, setFinancialModal] = useState({ isOpen: false, type: 'revenue' });
     const [actionModal, setActionModal] = useState({ isOpen: false, filter: 'all' });
 
+    // ── Team Management (Owner's Box) ──────────────────────────────────────
+    const [selectedProjectId, setSelectedProjectId] = useState(null);
+    const selectedProject = useMemo(() => {
+        const id = selectedProjectId || ownerProjects.find(p => p.status === 'active')?.id;
+        return ownerProjects.find(p => p.id === id) || ownerProjects[0] || null;
+    }, [selectedProjectId, ownerProjects]);
+
+    const teamFinancials = useMemo(() => {
+        if (!selectedProject) return { totalReceived: 0, grossProfit: 0 };
+        const paid = (selectedProject.paymentSchedule || [])
+            .filter(ps => ps.status === 'paid')
+            .reduce((s, ps) => s + (ps.amount || 0), 0);
+        const totalReceived = paid || (selectedProject.budget || 0);
+        const totalCosts = Number(selectedProject.actualCost ?? selectedProject.spent) || 0;
+        return { totalReceived, grossProfit: totalReceived - totalCosts };
+    }, [selectedProject]);
+
     const handleFinancialClick = (type) => {
         setFinancialModal({ isOpen: true, type });
     };
@@ -317,6 +339,48 @@ const OwnerSnapshot = () => {
                     </SpotlightCard>
 
                 </div>
+
+                {/* ── Owner's Box — Team Management ── */}
+                {selectedProject && (
+                    <section>
+                        <div className="flex items-center justify-between mb-4 flex-wrap gap-3">
+                            <h2 className="text-xl font-bold text-zinc-900 dark:text-white/90 flex items-center">
+                                <span className="w-2 h-8 bg-violet-500 rounded-full mr-3"></span>
+                               Team Management
+                            </h2>
+                            <div className="relative">
+                                <select
+                                    value={selectedProject.id}
+                                    onChange={e => setSelectedProjectId(e.target.value)}
+                                    className="appearance-none pl-3 pr-8 py-2 text-sm font-semibold rounded-xl bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white outline-none focus:border-violet-500 transition-colors cursor-pointer"
+                                >
+                                    {ownerProjects.map(p => (
+                                        <option key={p.id} value={p.id}>
+                                            {p.projectType} — {p.address?.split(',')[0] || p.id}
+                                        </option>
+                                    ))}
+                                </select>
+                                <ChevronDown size={14} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none" />
+                            </div>
+                        </div>
+                        <SpotlightCard className="p-5 lg:p-6" spotlightColor="rgba(139, 92, 246, 0.06)">
+                            <TeamManagementPanel
+                                project={selectedProject}
+                                teamMembers={selectedProject.teamMembers || []}
+                                allUsers={users}
+                                personnel={personnel}
+                                userRole={user?.role}
+                                orgCommissionDefaults={orgCommissionDefaults}
+                                userCommissionOverrides={userCommissionOverrides}
+                                totalReceived={teamFinancials.totalReceived}
+                                grossProfit={teamFinancials.grossProfit}
+                                onAddMember={addJobTeamMember}
+                                onRemoveMember={removeJobTeamMember}
+                                onUpdateMember={updateJobTeamMember}
+                            />
+                        </SpotlightCard>
+                    </section>
+                )}
             </div>
 
             {/* Interactive Modals */}