
	{t.assigned_to ? : (t.assigned_name \|\| '—')}

{t.assigned_to ? : (t.assigned_name || '—')}

Task Requested By Due By
{s.task.status === 'client_approved' ? ( ) : ( )}		{s.submitted_by ? ( ) : (s.submitted_by_name \|\| '—')}	{s.deadline ? new Date(s.deadline).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '—'}

Task Requested By Due By

{s.task.status === 'client_approved' ? ( ) : ( )}

{s.submitted_by ? ( ) : (s.submitted_by_name || '—')}

{s.deadline ? new Date(s.deadline).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '—'}

Company Contact Projects Open Tasks Outstanding Paid
		{primaryContact?.id ? ( ) : (primaryContact?.name \|\| '—')}	{projectCount}	{openTaskCount \|\| 0}	{fmt(outstandingTotal)}	{fmt(paidTotal)}

Company Contact Projects Open Tasks Outstanding Paid

{primaryContact?.id ? ( ) : (primaryContact?.name || '—')}

{projectCount}

{openTaskCount || 0}

{fmt(outstandingTotal)}

{fmt(paidTotal)}

Team Performance

{people.slice(0, 5).length === 0 ? (

No completed tasks this month

) : (

{people.slice(0, 5).map((p, i) => { const pct = totalDone > 0 ? Math.round((p.done / totalDone) * 100) : 0; const tone = iconTone(p.name); return (

0 ? 10 : 0 }}> {(() => { const prof = p.id ? profileMap.get(p.id) : null; const tone = iconTone(p.name); return prof?.avatar_url ?

: ; })()}

{p.id ? : {p.name}} {p.newCount} new · {p.revCount} revision

{pct}%

); })}

)}

); } // ─── Page ────────────────────────────────────────────────────────────────── const CACHE_KEY = 'team_dashboard_v2'; const CUTOFF_MONTHS = 6; export default function TeamDashboard() { const { currentUser } = useAuth(); const isTeam = currentUser?.role === 'team'; const isClient = currentUser?.role === 'client'; const isExternal = currentUser?.role === 'external'; const cached = isTeam ? readPageCache(CACHE_KEY, 5 * 60_000) : null; const [tasks, setTasks] = useState(() => cached?.tasks || []); const [projects, setProjects] = useState(() => cached?.projects || []); const [submissions, setSubmissions] = useState(() => cached?.submissions || []); const [allCompanies, setAllCompanies] = useState(() => cached?.companies || []); const [clientProfiles, setClientProfiles] = useState(() => cached?.clientProfiles || []); const [companyMemberships, setCompanyMemberships] = useState(() => cached?.companyMemberships || []); const [activityLog, setActivityLog] = useState(() => cached?.activityLog || []); const [allProfiles, setAllProfiles] = useState(() => cached?.allProfiles || []); const [teamInvoices, setTeamInvoices] = useState(() => cached?.teamInvoices || []); const [teamExpenses, setTeamExpenses] = useState([]); const [myInvoices, setMyInvoices] = useState([]); const [loading, setLoading] = useState(!cached); useEffect(() => { let cancelled = false; async function loadTeam() { try { const cutoff = new Date(); cutoff.setMonth(cutoff.getMonth() - CUTOFF_MONTHS); const cutoffStr = cutoff.toISOString(); const [{ data: t }, { data: p }, { data: subs }, { data: profiles }, { data: activity }, { data: cos }, { data: memRows }] = await withTimeout(Promise.all([ supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at').gte('submitted_at', cutoffStr).order('submitted_at', { ascending: false }), supabase.from('projects').select('id, name, status, company_id'), supabase.from('submissions').select('task_id, version_number, deadline, type, submitted_by, submitted_by_name, is_hot, delivery:deliveries(sent_by, sent_at)').gte('submitted_at', cutoffStr).order('version_number', { ascending: false }), supabase.from('profiles').select('id, role, name, email, company_id, brand_book_rate, avatar_url'), supabase.from('activity_log').select('id, created_at, actor_id, actor_name, action, task_id, task_title, project_name, project_id').order('created_at', { ascending: false }).limit(20), supabase.from('companies').select('id, name').order('name'), supabase.from('company_members').select('company_id, profile_id'), ]), 30000, 'TeamDashboard load'); if (cancelled) return; const roleById = new Map((profiles || []).map(pr => [pr.id, pr.role])); const roleByName = new Map((profiles || []).map(pr => [pr.name, pr.role])); const tasksWithDeadlines = (t || []).map(task => ({ ...task, deadline: getDeadlineSourceSubmission(task, subs)?.deadline || null, assignee_role: roleById.get(task.assigned_to) || null })); const subsWithRole = (subs || []).map(sub => ({ ...sub, submitter_role: roleById.get(sub.submitted_by) || null, delivery_sender_role: roleByName.get(sub.delivery?.sent_by) || null })); setTasks(tasksWithDeadlines); setProjects(p || []); setSubmissions(subsWithRole); setClientProfiles((profiles || []).filter(pr => pr.role === 'client')); setAllProfiles(profiles || []); setAllCompanies(cos || []); setCompanyMemberships(memRows || []); setActivityLog(activity || []); writePageCache(CACHE_KEY, { tasks: tasksWithDeadlines, projects: p || [], submissions: subsWithRole, clientProfiles: (profiles || []).filter(pr => pr.role === 'client'), companies: cos || [], companyMemberships: memRows || [], activityLog: activity || [], teamInvoices: [] }); supabase.from('invoices').select('total, status, company_id, created_at').in('status', ['sent', 'paid']).then(({ data: invs }) => { if (invs && !cancelled) setTeamInvoices(invs); }); supabase.from('expenses').select('amount').then(({ data: exps }) => { if (exps && !cancelled) setTeamExpenses(exps); }); } catch (err) { console.error('TeamDashboard load failed:', err); } finally { if (!cancelled) setLoading(false); } } async function loadClient() { const uid = currentUser?.id; const companyIds = [...new Set([...(currentUser?.companies?.map(c => c.company?.id || c.id) || []), ...(currentUser?.company_id ? [currentUser.company_id] : [])])].filter(Boolean); try { const { data: mySubData } = await supabase.from('submissions').select('task_id').eq('submitted_by', uid).eq('type', 'initial'); const myTaskIds = (mySubData || []).map(s => s.task_id); const [{ data: t }, { data: p }, { data: subs }, { data: activity }, { data: invs }, { data: profiles }] = await withTimeout(Promise.all([ myTaskIds.length ? supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at').in('id', myTaskIds) : Promise.resolve({ data: [] }), companyIds.length ? supabase.from('projects').select('id, name, status, company_id').in('company_id', companyIds) : Promise.resolve({ data: [] }), myTaskIds.length ? supabase.from('submissions').select('task_id, version_number, deadline, type, submitted_by, submitted_by_name, is_hot').in('task_id', myTaskIds) : Promise.resolve({ data: [] }), supabase.from('activity_log').select('id, created_at, actor_id, actor_name, action, task_id, task_title, project_name, project_id').order('created_at', { ascending: false }).limit(50), companyIds.length ? supabase.from('invoices').select('total, status').in('company_id', companyIds).in('status', ['sent', 'paid']) : Promise.resolve({ data: [] }), supabase.from('profiles').select('id, name, avatar_url'), ]), 20000, 'ClientDashboard load'); if (cancelled) return; const projectIds = new Set((p || []).map(proj => proj.id)); setTasks((t || []).map(task => ({ ...task, deadline: getDeadlineSourceSubmission(task, subs)?.deadline || null }))); setProjects(p || []); setSubmissions(subs || []); setAllProfiles(profiles || []); setActivityLog((activity || []).filter(e => !e.project_id || projectIds.has(e.project_id)).slice(0, 20)); setMyInvoices(invs || []); } catch (err) { console.error('ClientDashboard load failed:', err); } finally { if (!cancelled) setLoading(false); } } async function loadExternal() { const uid = currentUser?.id; try { const { data: memberData } = await supabase.from('project_members').select('project_id').eq('profile_id', uid); const myProjectIds = (memberData || []).map(m => m.project_id); const [{ data: t }, { data: p }, { data: subs }, { data: activity }, { data: subInvs }, { data: profiles }] = await withTimeout(Promise.all([ supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at').eq('assigned_to', uid), myProjectIds.length ? supabase.from('projects').select('id, name, status, company_id').in('id', myProjectIds) : Promise.resolve({ data: [] }), supabase.from('submissions').select('task_id, version_number, deadline, type, submitted_by, submitted_by_name, is_hot').eq('submitted_by', uid), supabase.from('activity_log').select('id, created_at, actor_id, actor_name, action, task_id, task_title, project_name, project_id').order('created_at', { ascending: false }).limit(50), supabase.from('subcontractor_invoices').select('total, status').eq('profile_id', uid).in('status', ['submitted', 'approved', 'paid']), supabase.from('profiles').select('id, name, avatar_url'), ]), 20000, 'ExternalDashboard load'); if (cancelled) return; const projectIdSet = new Set(myProjectIds); setTasks((t || []).map(task => ({ ...task, deadline: getDeadlineSourceSubmission(task, subs)?.deadline || null }))); setProjects(p || []); setSubmissions(subs || []); setAllProfiles(profiles || []); setActivityLog((activity || []).filter(e => !e.project_id || projectIdSet.has(e.project_id)).slice(0, 20)); setMyInvoices(subInvs || []); } catch (err) { console.error('ExternalDashboard load failed:', err); } finally { if (!cancelled) setLoading(false); } } if (isTeam) loadTeam(); else if (isClient) loadClient(); else if (isExternal) loadExternal(); return () => { cancelled = true; }; }, [isTeam, isClient, isExternal, currentUser?.id]); // eslint-disable-line react-hooks/exhaustive-deps const teamHighlights = useMemo(() => isTeam ? buildClientHighlights(allCompanies, projects, tasks, clientProfiles, companyMemberships, teamInvoices) .sort((a, b) => b.openTaskCount - a.openTaskCount || b.projectCount - a.projectCount || a.company.name.localeCompare(b.company.name)) .slice(0, 5) : [], [isTeam, allCompanies, projects, tasks, clientProfiles, companyMemberships, teamInvoices]); const activityEvents = useMemo(() => (activityLog || []).map(e => ({ time: new Date(e.created_at), name: e.actor_name || 'Fourge', actorId: e.actor_id || null, actionKey: e.action, action: ACTION_LABEL[e.action] || e.action, task: e.task_title || null, taskId: e.task_id || null, project: e.project_name || null, projectId: e.project_id || null, })).filter(e => !isNaN(e.time)).slice(0, 10), [activityLog]); if (loading) return

; const doneStatuses = ['client_approved', 'invoiced', 'paid']; const inProgressTasks = tasks.filter(t => t.status === 'in_progress'); const activeTasks = tasks.filter(t => !doneStatuses.includes(t.status)); const activeProjects = projects.filter(p => p.status !== 'completed' && p.status !== 'cancelled'); const hotTaskIds = new Set((submissions || []).filter(s => s.is_hot).map(s => s.task_id)); const calendarItems = tasks .filter(t => t.deadline) .map(t => { const deadlineKey = getDateKey(t.deadline); return { id: t.id, title: t.title, deadline: t.deadline, isHot: hotTaskIds.has(t.id), isDone: doneStatuses.includes(t.status), isOverdue: deadlineKey && deadlineKey < getDateKey(new Date()) && !doneStatuses.includes(t.status), }; }); const dashRevenue = teamInvoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total || 0), 0); const dashOutstanding = teamInvoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total || 0), 0); const dashExpensesTotal = teamExpenses.reduce((s, e) => s + Number(e.amount || 0), 0); const revenueByMonth = Array.from({ length: 4 }, (_, i) => { const now = new Date(); const start = new Date(now.getFullYear(), now.getMonth() - (3 - i), 1); const end = new Date(now.getFullYear(), now.getMonth() - (3 - i) + 1, 1); return teamInvoices.filter(inv => inv.status === 'paid' && inv.created_at && new Date(inv.created_at) >= start && new Date(inv.created_at) < end).reduce((s, inv) => s + Number(inv.total || 0), 0); }); const myPaid = myInvoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total || 0), 0); const myOutstanding = myInvoices.filter(i => i.status !== 'paid').reduce((s, i) => s + Number(i.total || 0), 0); const card3 = isTeam ? { label: 'Net Profit', value: fmtMoney(dashRevenue - dashExpensesTotal), sub: `${fmtMoney(dashExpensesTotal)} expenses`, iconBg: 'rgba(74,222,128,0.15)', iconColor: '#4ade80', iconPath: DASH_ICONS.profit } : isClient ? { label: 'Outstanding', value: fmtMoney(myOutstanding), sub: 'invoices due', iconBg: 'rgba(245,165,35,0.15)', iconColor: '#F5A523', iconPath: DASH_ICONS.revenue } : { label: 'Pending', value: fmtMoney(myOutstanding), sub: 'awaiting payment', iconBg: 'rgba(245,165,35,0.15)', iconColor: '#F5A523', iconPath: DASH_ICONS.revenue }; const card4 = isTeam ? { label: 'Revenue', value: fmtMoney(dashRevenue), sub: `${fmtMoney(dashOutstanding)} outstanding`, iconBg: 'rgba(245,165,35,0.15)', iconColor: '#F5A523', iconPath: DASH_ICONS.revenue, chartData: revenueByMonth } : isClient ? { label: 'Paid', value: fmtMoney(myPaid), sub: 'total paid to Fourge', iconBg: 'rgba(74,222,128,0.15)', iconColor: '#4ade80', iconPath: DASH_ICONS.profit } : { label: 'Paid', value: fmtMoney(myPaid), sub: 'total paid by Fourge', iconBg: 'rgba(74,222,128,0.15)', iconColor: '#4ade80', iconPath: DASH_ICONS.profit }; return (

{isTeam && (

)} ); }