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

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


	{task.project?.name \|\| '—'}	{String(task.status \|\| '').replace(/_/g, ' ') \|\| '—'}	{task.deadline ? new Date(task.deadline).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '—'}
{s.task.status === 'client_approved' ? ( ) : ( )}		{s.submitted_by ? ( ) : (getSubmissionDisplayName(s) \|\| '—')}	{s.deadline ? new Date(s.deadline).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '—'}

{task.project?.name || '—'}

{String(task.status || '').replace(/_/g, ' ') || '—'}

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

Task Requested By Due By

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

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

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

Team Performance

{people.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; return (

0 ? 10 : 0 }}>

{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 } = useLiveRefresh(['tasks', 'projects', 'submissions', 'activity_log', 'profiles']); 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 [activityLog, setActivityLog] = useState(() => cached?.activityLog || []); const [allProfiles, setAllProfiles] = useState(() => cached?.allProfiles || []); const [teamInvoices, setTeamInvoices] = useState(() => cached?.teamInvoices || []); const [teamExpenses, setTeamExpenses] = useState([]); const [teamSubcontractorPOs, setTeamSubcontractorPOs] = useState([]); const [teamSubInvoices, setTeamSubInvoices] = useState([]); const [myInvoices, setMyInvoices] = useState([]); const [perfDeliveries, setPerfDeliveries] = useState([]); const [loading, setLoading] = useState(!cached); const bottomCardsRowRef = useRef(null); const [bottomCardsHeight, setBottomCardsHeight] = useState(null); useEffect(() => { function updateBottomCardsHeight() { const row = bottomCardsRowRef.current; if (!row) return; const rect = row.getBoundingClientRect(); const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0; const available = Math.floor(viewportHeight - rect.top - 24); const nextHeight = available > 0 ? `${available}px` : null; setBottomCardsHeight(prev => (prev === nextHeight ? prev : nextHeight)); } updateBottomCardsHeight(); window.addEventListener('resize', updateBottomCardsHeight); return () => window.removeEventListener('resize', updateBottomCardsHeight); }, [loading, isTeam, isClient, isExternal]); useEffect(() => { let cancelled = false; async function loadDashboard() { try { const cutoff = new Date(); cutoff.setMonth(cutoff.getMonth() - CUTOFF_MONTHS); const cutoffStr = cutoff.toISOString(); const { scopedTaskIds, scopedProjectIds, scopedCompanyIds, } = isTeam ? { scopedTaskIds: null, scopedProjectIds: null, scopedCompanyIds: null } : await resolveScopedWorkIds(currentUser, { isClient, isExternal }); const tasksQuery = supabase.from('tasks') .select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at, project:projects(name), 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, stripe_fee, status, company_id, created_at').in('status', ['sent', 'paid']) : isClient ? ((scopedCompanyIds || []).length > 0 ? supabase.from('invoices').select('total, stripe_fee, 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 subcontractorPOsPromise = isTeam ? supabase.from('subcontractor_payments').select('amount, status, paid_at, date') : Promise.resolve({ data: [] }); const subcontractorInvoicesPromise = isTeam ? supabase.from('subcontractor_invoices').select('status, paid_at, items:subcontractor_invoice_items(unit_price, quantity)') : Promise.resolve({ data: [] }); const [{ data: t }, { data: p }, { data: subs }, { data: profiles }, { data: activity }, { data: invs }, { data: exps }, { data: subcontractorPOs }, { data: subcontractorInvoices }, { data: delivs }] = 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), invoicesPromise, expensesPromise, subcontractorPOsPromise, subcontractorInvoicesPromise, supabase.from('deliveries').select('sent_by, sent_at, version_number, submission:submissions!inner(task_id, task:tasks!inner(assigned_to, assigned_name))').gte('sent_at', cutoffStr), ]), 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 = mergeSubmissionDisplayNames( (subs || []).map(sub => ({ ...sub, submitter_role: roleById.get(sub.submitted_by) || null, delivery_sender_role: roleByName.get(sub.delivery?.sent_by) || null })), profiles || [] ); setTasks(tasksWithDeadlines); setProjects(p || []); setSubmissions(subsWithRole); setAllProfiles(profiles || []); 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 || []); setTeamSubcontractorPOs(subcontractorPOs || []); setTeamSubInvoices(subcontractorInvoices || []); const scopedDeliveryTaskIds = new Set(scopedTaskIds || []); const scopedDeliveries = isTeam ? (delivs || []) : (delivs || []).filter(delivery => scopedDeliveryTaskIds.has(delivery.submission?.task_id)); setPerfDeliveries(scopedDeliveries); if (isTeam) { writePageCache(CACHE_KEY, { tasks: tasksWithDeadlines, projects: p || [], submissions: subsWithRole, 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 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 dashOpsExpensesTotal = teamExpenses.reduce((s, e) => s + Number(e.amount || 0), 0); const dashNetReceived = teamInvoices .filter(i => i.status === 'paid') .reduce((s, i) => s + Number(i.total || 0) - Number(i.stripe_fee || 0), 0); const dashPaidSubcontractorPOsTotal = teamSubcontractorPOs .filter(po => po.status === 'paid') .reduce((s, po) => s + Number(po.amount || 0), 0); const dashPaidSubInvoicesTotal = teamSubInvoices .filter(inv => inv.status === 'paid') .reduce((s, inv) => s + (inv.items || []).reduce((a, item) => a + Number(item.unit_price || 0) * Number(item.quantity || 1), 0), 0); const dashSubcontractorExpensesTotal = dashPaidSubcontractorPOsTotal + dashPaidSubInvoicesTotal; const dashExpensesTotal = dashOpsExpensesTotal + dashSubcontractorExpensesTotal; 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(dashNetReceived - dashExpensesTotal), sub: `${fmtMoney(dashExpensesTotal)} expenses + sub costs`, 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 (

); }