
	{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 [refreshKey, setRefreshKey] = useState(0); const refresh = useCallback(() => setRefreshKey(k => k + 1), []); useRefetchOnFocus(refresh); useRealtimeSubscription(['tasks', 'projects', 'submissions', 'activity_log', 'profiles'], refresh); 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 loadDashboard() { try { const cutoff = new Date(); cutoff.setMonth(cutoff.getMonth() - CUTOFF_MONTHS); const cutoffStr = cutoff.toISOString(); let scopedTaskIds = null; let scopedProjectIds = null; let scopedCompanyIds = null; if (!isTeam && isClient) { const companyIds = [...new Set([...(currentUser?.companies?.map(c => c.company?.id || c.id) || []), ...(currentUser?.company_id ? [currentUser.company_id] : [])])].filter(Boolean); scopedCompanyIds = companyIds; if (companyIds.length > 0) { const { data: projRows } = await supabase.from('projects').select('id, tasks(id)').in('company_id', companyIds); scopedProjectIds = (projRows || []).map(p => p.id).filter(Boolean); scopedTaskIds = (projRows || []).flatMap(p => (p.tasks || []).map(t => t.id)).filter(Boolean); } else { scopedProjectIds = []; scopedTaskIds = []; } } if (!isTeam && isExternal) { const uid = currentUser?.id; const { data: memberData } = await supabase.from('project_members').select('project_id').eq('profile_id', uid); scopedProjectIds = (memberData || []).map(m => m.project_id).filter(Boolean); if ((scopedProjectIds || []).length > 0) { const { data: projectTasks } = await supabase.from('tasks').select('id').in('project_id', scopedProjectIds); scopedTaskIds = (projectTasks || []).map(row => row.id).filter(Boolean); } else { scopedTaskIds = []; } } const tasksQuery = supabase.from('tasks') .select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at, assignee:profiles!assigned_to(avatar_url)') .gte('submitted_at', cutoffStr) .order('submitted_at', { ascending: false }); if (isClient) { if ((scopedProjectIds || []).length > 0) tasksQuery.in('project_id', scopedProjectIds); else tasksQuery.eq('id', '__none__'); } if (isExternal) { if ((scopedProjectIds || []).length > 0) tasksQuery.in('project_id', scopedProjectIds); else tasksQuery.eq('id', '__none__'); } const projectsQuery = supabase.from('projects').select('id, name, status, company_id'); if (isClient) { if ((scopedCompanyIds || []).length > 0) projectsQuery.in('company_id', scopedCompanyIds); else projectsQuery.eq('id', '__none__'); } if (isExternal) { if ((scopedProjectIds || []).length > 0) projectsQuery.in('id', scopedProjectIds); else projectsQuery.eq('id', '__none__'); } const submissionsQuery = 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 }); if (isClient) { if ((scopedTaskIds || []).length > 0) submissionsQuery.in('task_id', scopedTaskIds); else submissionsQuery.eq('task_id', '__none__'); } if (isExternal) { if ((scopedTaskIds || []).length > 0) submissionsQuery.in('task_id', scopedTaskIds); else submissionsQuery.eq('task_id', '__none__'); } const invoicesPromise = isTeam ? supabase.from('invoices').select('total, status, company_id, created_at').in('status', ['sent', 'paid']) : isClient ? ((scopedCompanyIds || []).length > 0 ? supabase.from('invoices').select('total, status, company_id, created_at').in('company_id', scopedCompanyIds).in('status', ['sent', 'paid']) : Promise.resolve({ data: [] })) : supabase.from('subcontractor_invoices').select('total, status').eq('profile_id', currentUser?.id).in('status', ['submitted', 'approved', 'paid']); const expensesPromise = isTeam ? supabase.from('expenses').select('amount') : Promise.resolve({ data: [] }); const [{ data: t }, { data: p }, { data: subs }, { data: profiles }, { data: activity }, { data: cos }, { data: memRows }, { data: invs }, { data: exps }] = await withTimeout(Promise.all([ tasksQuery, projectsQuery, submissionsQuery, 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(isTeam ? 20 : 50), supabase.from('companies').select('id, name').order('name'), supabase.from('company_members').select('company_id, profile_id'), invoicesPromise, expensesPromise, ]), 30000, 'Dashboard load'); if (cancelled) return; const projectIds = new Set((p || []).map(proj => proj.id)); const taskIds = new Set((t || []).map(task => task.id)); 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 || []); const scopedActivity = isTeam ? (activity || []) : (activity || []).filter((entry) => { if (entry.project_id && projectIds.has(entry.project_id)) return true; if (entry.task_id && taskIds.has(entry.task_id)) return true; return false; }); setActivityLog(scopedActivity.slice(0, 20)); setTeamInvoices(isTeam ? (invs || []) : []); setMyInvoices(!isTeam ? (invs || []) : []); setTeamExpenses(exps || []); if (isTeam) { writePageCache(CACHE_KEY, { tasks: tasksWithDeadlines, projects: p || [], submissions: subsWithRole, clientProfiles: (profiles || []).filter(pr => pr.role === 'client'), companies: cos || [], companyMemberships: memRows || [], activityLog: activity || [], teamInvoices: invs || [], allProfiles: profiles || [], }); } } catch (err) { console.error('Dashboard load failed:', err); } finally { if (!cancelled) setLoading(false); } } loadDashboard(); return () => { cancelled = true; }; }, [isTeam, isClient, isExternal, currentUser?.id, currentUser?.company_id, currentUser?.companies, refreshKey]); // 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 && (

)} ); }