Krao Hasanee
04e0911e9f
Bug fixes: - TeamInvoices: add useAuth import/currentUser (invoice-create crash) - TeamInvoices: setChartYear -> setExportYear (year-dropdown crash) - TeamDashboard: drop redundant setState-in-effect (cascading renders) - Companies: delete dead _UnusedClientCompanies (illegal hook calls) - annotate intentional empty PDF-fallback catches Load speed: - preconnect/dns-prefetch to Supabase origin - lazy-load heic-to in Converters: page chunk 2737KB -> 9KB - split recharts into its own 'charts' vendor chunk Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
869 lines
53 KiB
React
869 lines
53 KiB
React
import { useState, useEffect, useMemo, useRef } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import Layout from '../../components/Layout';
|
|
import PageLoader from '../../components/PageLoader';
|
|
import SortTh from '../../components/SortTh';
|
|
import ProfileAvatar from '../../components/ProfileAvatar';
|
|
import { supabase } from '../../lib/supabase';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
import { readPageCache, writePageCache } from '../../lib/pageCache';
|
|
import { withTimeout } from '../../lib/withTimeout';
|
|
import { getDeadlineSourceSubmission } from '../../lib/taskDeadlines';
|
|
import { useSortable } from '../../hooks/useSortable';
|
|
import { useLiveRefresh } from '../../hooks/useLiveRefresh';
|
|
import { resolveScopedWorkIds } from '../../lib/workScope';
|
|
import { getSubmissionDisplayName, mergeSubmissionDisplayNames } from '../../lib/submissionDisplay';
|
|
|
|
// ─── Helpers ──────────────────────────────────────────────────────────────
|
|
|
|
const ICON_TONES = [
|
|
{ bg: 'rgba(245,165,35,0.15)', color: '#F5A523' },
|
|
{ bg: 'rgba(74,222,128,0.15)', color: '#4ade80' },
|
|
{ bg: 'rgba(96,165,250,0.15)', color: '#60a5fa' },
|
|
{ bg: 'rgba(167,139,250,0.15)', color: '#a78bfa' },
|
|
];
|
|
|
|
function iconTone(key) {
|
|
let h = 0;
|
|
for (let i = 0; i < (key || '').length; i++) h = (h * 31 + key.charCodeAt(i)) % ICON_TONES.length;
|
|
return ICON_TONES[h];
|
|
}
|
|
|
|
function fmtMoney(n) {
|
|
if (Math.abs(n) >= 1000000) return `$${(n / 1000000).toFixed(2)}M`;
|
|
if (Math.abs(n) >= 10000) return `$${(n / 1000).toFixed(1)}k`;
|
|
return `$${Number(n).toFixed(2)}`;
|
|
}
|
|
|
|
const ACTION_ICON = {
|
|
task_started: { bg: 'rgba(96,165,250,0.15)', color: '#60a5fa', path: <polygon points="6,4 20,12 6,20" fill="currentColor"/> },
|
|
task_resumed: { bg: 'rgba(96,165,250,0.15)', color: '#60a5fa', path: <polygon points="6,4 20,12 6,20" fill="currentColor"/> },
|
|
task_submitted: { bg: 'rgba(74,222,128,0.15)', color: '#4ade80', path: <><line x1="12" y1="19" x2="12" y2="5" strokeWidth="2" strokeLinecap="round"/><polyline points="5,12 12,5 19,12" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></> },
|
|
task_approved: { bg: 'rgba(74,222,128,0.15)', color: '#4ade80', path: <polyline points="4,13 9,18 20,7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> },
|
|
task_on_hold: { bg: 'rgba(239,68,68,0.15)', color: '#ef4444', path: <><rect x="6" y="4" width="4" height="16" rx="1" fill="currentColor"/><rect x="14" y="4" width="4" height="16" rx="1" fill="currentColor"/></> },
|
|
task_created: { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa', path: <><line x1="12" y1="5" x2="12" y2="19" strokeWidth="2" strokeLinecap="round"/><line x1="5" y1="12" x2="19" y2="12" strokeWidth="2" strokeLinecap="round"/></> },
|
|
project_created: { bg: 'rgba(245,165,35,0.15)', color: '#F5A523', path: <><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" fill="none" strokeWidth="1.5"/></> },
|
|
request_submitted: { bg: 'rgba(167,139,250,0.15)', color: '#a78bfa', path: <><rect x="5" y="3" width="14" height="18" rx="2" fill="none" strokeWidth="1.5"/><line x1="9" y1="8" x2="15" y2="8" strokeWidth="1.5" strokeLinecap="round"/><line x1="9" y1="12" x2="15" y2="12" strokeWidth="1.5" strokeLinecap="round"/><line x1="9" y1="16" x2="12" y2="16" strokeWidth="1.5" strokeLinecap="round"/></> },
|
|
revision_requested: { bg: 'rgba(245,158,11,0.15)', color: '#f59e0b', path: <><path d="M4 12a8 8 0 018-8v0a8 8 0 018 8" fill="none" strokeWidth="1.5" strokeLinecap="round"/><polyline points="18,8 20,12 16,12" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/></> },
|
|
};
|
|
|
|
const ACTION_LABEL = {
|
|
task_created: 'created', task_started: 'started', task_on_hold: 'put on hold',
|
|
task_resumed: 'resumed', task_submitted: 'submitted', task_approved: 'approved',
|
|
project_created: 'created project', request_submitted: 'submitted', revision_requested: 'requested revision on',
|
|
};
|
|
|
|
function ActionIcon({ actionKey, size = 27 }) {
|
|
const cfg = ACTION_ICON[actionKey] || { bg: 'rgba(255,255,255,0.08)', color: 'var(--text-muted)', path: <circle cx="12" cy="12" r="3" fill="currentColor"/> };
|
|
return (
|
|
<div style={{ width: size, height: size, borderRadius: '50%', background: cfg.bg, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<svg width="13" height="13" viewBox="0 0 24 24" stroke={cfg.color} fill="none" style={{ color: cfg.color }}>{cfg.path}</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function smoothCurve(pts) {
|
|
if (pts.length < 2) return '';
|
|
let d = `M${pts[0][0].toFixed(1)},${pts[0][1].toFixed(1)}`;
|
|
for (let i = 1; i < pts.length; i++) {
|
|
const [x0, y0] = pts[i - 1];
|
|
const [x1, y1] = pts[i];
|
|
const cpX = (x0 + x1) / 2;
|
|
d += ` C${cpX.toFixed(1)},${y0.toFixed(1)} ${cpX.toFixed(1)},${y1.toFixed(1)} ${x1.toFixed(1)},${y1.toFixed(1)}`;
|
|
}
|
|
return d;
|
|
}
|
|
|
|
function MiniAreaChart({ data }) {
|
|
const W = 90, H = 42;
|
|
if (!data || data.length < 2) return null;
|
|
const max = Math.max(...data, 1);
|
|
const pts = data.map((v, i) => [(i / (data.length - 1)) * W, 4 + (1 - v / max) * (H - 8)]);
|
|
const line = smoothCurve(pts);
|
|
const lastPt = pts[pts.length - 1];
|
|
const firstPt = pts[0];
|
|
const area = `${line} L${lastPt[0].toFixed(1)},${H} L${firstPt[0].toFixed(1)},${H} Z`;
|
|
return (
|
|
<svg width="100%" height={H} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ display: 'block', overflow: 'hidden' }}>
|
|
<defs>
|
|
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#F5A523" stopOpacity="0.3" />
|
|
<stop offset="95%" stopColor="#F5A523" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d={area} fill="url(#areaGrad)" />
|
|
<path d={line} fill="none" stroke="#F5A523" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const DASH_ICONS = {
|
|
revenue: '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>',
|
|
projects: '<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>',
|
|
tasks: '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>',
|
|
profit: '<line x1="12" y1="20" x2="12" y2="4"/><polyline points="5 11 12 4 19 11"/>',
|
|
};
|
|
|
|
function DashStatCard({ label, value, sub, iconBg, iconColor, iconPath, chartData }) {
|
|
return (
|
|
<div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', alignItems: 'stretch', gap: 21, minHeight: 120 }}>
|
|
<div style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', ...(chartData ? {} : { flex: 1 }) }}>
|
|
<div style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 5 }}>{label}</div>
|
|
<div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
|
|
<div style={{ fontSize: 30, fontWeight: 400, color: 'var(--text-primary)', letterSpacing: -0.5, lineHeight: 1.1 }}>{value}</div>
|
|
</div>
|
|
{sub && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 5 }}>{sub}</div>}
|
|
</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', ...(chartData ? { flex: 1, minWidth: 0 } : { flexShrink: 0 }) }}>
|
|
<div style={{ width: 27, height: 27, borderRadius: '50%', background: iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: iconPath }} />
|
|
</div>
|
|
{chartData && <MiniAreaChart data={chartData} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ActivityFeed({ events }) {
|
|
const navigate = useNavigate();
|
|
const visible = events.slice(0, 5);
|
|
return (
|
|
<div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', flexShrink: 0 }}>
|
|
<div style={{ marginBottom: visible.length > 0 ? 14 : 0 }}>
|
|
<span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Recent Activity</span>
|
|
</div>
|
|
{visible.length === 0 ? (
|
|
<div style={{ minHeight: 120, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No recent activity</div>
|
|
) : visible.map((e, i) => (
|
|
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: i > 0 ? 10 : 0 }}>
|
|
<ActionIcon actionKey={e.actionKey} />
|
|
<div style={{ flex: 1, minWidth: 0, fontSize: 13, lineHeight: 1.4 }}>
|
|
{e.actorId
|
|
? <button type="button" className="dashboard-inline-link" onClick={() => navigate(`/profile/${e.actorId}`)}>{e.name}</button>
|
|
: <span style={{ color: 'var(--text-primary)' }}>{e.name}</span>
|
|
}
|
|
{e.action && <span style={{ color: 'var(--text-muted)' }}> {e.action}</span>}
|
|
{e.task && e.taskId
|
|
? <><span style={{ color: 'var(--text-muted)' }}> </span><button type="button" className="dashboard-inline-link" onClick={() => navigate(`/tasks/${e.taskId}`)}>{e.task}</button></>
|
|
: e.task && <span style={{ color: 'var(--text-primary)' }}> {e.task}</span>
|
|
}
|
|
</div>
|
|
<span style={{ fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>{e.time.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function getDateKey(date) {
|
|
const d = new Date(date);
|
|
if (Number.isNaN(d.getTime())) return null;
|
|
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
|
}
|
|
|
|
function profilePath(id) {
|
|
return `/profile/${id}`;
|
|
}
|
|
|
|
function MiniCalendar({ items = [] }) {
|
|
const navigate = useNavigate();
|
|
const today = new Date();
|
|
const [view, setView] = useState({ year: today.getFullYear(), month: today.getMonth() });
|
|
const [hoveredKey, setHoveredKey] = useState(null);
|
|
const hoverTimeout = useRef(null);
|
|
const clearHover = () => { hoverTimeout.current = setTimeout(() => setHoveredKey(null), 120); };
|
|
const keepHover = (k) => { clearTimeout(hoverTimeout.current); if (k) setHoveredKey(k); };
|
|
const { year, month } = view;
|
|
const firstDay = new Date(year, month, 1).getDay();
|
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
const cells = [];
|
|
for (let i = 0; i < firstDay; i++) cells.push(null);
|
|
for (let d = 1; d <= daysInMonth; d++) cells.push(d);
|
|
const isToday = (d) => d === today.getDate() && month === today.getMonth() && year === today.getFullYear();
|
|
const dayKey = (d) => `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
|
|
const itemsByDay = useMemo(() => {
|
|
const map = new Map();
|
|
(items || []).forEach(item => {
|
|
const key = getDateKey(item.deadline);
|
|
if (!key) return;
|
|
const list = map.get(key) || [];
|
|
list.push(item);
|
|
map.set(key, list);
|
|
});
|
|
return map;
|
|
}, [items]);
|
|
const activeKey = hoveredKey;
|
|
const activeItems = (itemsByDay.get(activeKey) || []).slice().sort((a, b) => {
|
|
if (a.isOverdue !== b.isOverdue) return a.isOverdue ? -1 : 1;
|
|
if (a.isHot !== b.isHot) return a.isHot ? -1 : 1;
|
|
return (a.title || '').localeCompare(b.title || '');
|
|
});
|
|
const monthLabel = new Date(year, month, 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
|
|
const prev = () => setView(v => v.month === 0 ? { year: v.year - 1, month: 11 } : { year: v.year, month: v.month - 1 });
|
|
const next = () => setView(v => v.month === 11 ? { year: v.year + 1, month: 0 } : { year: v.year, month: v.month + 1 });
|
|
const dotColor = (item) => {
|
|
if (item.isOverdue) return '#ef4444';
|
|
if (item.isHot) return '#F5A523';
|
|
if (item.isDone) return '#4ade80';
|
|
return '#60a5fa';
|
|
};
|
|
const activeLabel = activeKey
|
|
? new Date(`${activeKey}T12:00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
|
|
: 'Selected day';
|
|
return (
|
|
<div style={{ position: 'relative', zIndex: activeKey ? 1001 : 0, overflow: 'visible', background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', flexShrink: 0 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
|
|
<span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>{monthLabel}</span>
|
|
<div style={{ display: 'flex', gap: 6 }}>
|
|
<button onClick={prev} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', color: 'var(--text-muted)', display: 'flex', alignItems: 'center' }}>
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polyline points="15,18 9,12 15,6"/></svg>
|
|
</button>
|
|
<button onClick={next} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', color: 'var(--text-muted)', display: 'flex', alignItems: 'center' }}>
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polyline points="9,18 15,12 9,6"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2, textAlign: 'center' }}>
|
|
{['S','M','T','W','T','F','S'].map((d, i) => (
|
|
<div key={i} style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-muted)', letterSpacing: 0.5, paddingBottom: 6 }}>{d}</div>
|
|
))}
|
|
{cells.map((d, i) => {
|
|
const key = d ? dayKey(d) : null;
|
|
const dayItems = key ? itemsByDay.get(key) || [] : [];
|
|
const active = key && key === activeKey;
|
|
const hasItems = dayItems.length > 0;
|
|
return (
|
|
<div key={i} style={{ position: 'relative' }} onMouseEnter={() => keepHover(key)} onMouseLeave={clearHover}>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (dayItems.length === 1) navigate(`/tasks/${dayItems[0].id}`);
|
|
}}
|
|
disabled={!d}
|
|
style={{
|
|
position: 'relative',
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: '50%',
|
|
border: active && !isToday(d) && hasItems ? '1px solid rgba(245,165,35,0.5)' : '1px solid transparent',
|
|
color: d ? (isToday(d) ? '#0d0d0d' : 'var(--text-secondary)') : 'transparent',
|
|
background: d && isToday(d) ? '#F5A523' : hasItems ? 'rgba(255,255,255,0.035)' : 'transparent',
|
|
fontSize: 12,
|
|
lineHeight: 1,
|
|
fontWeight: isToday(d) ? 700 : 400,
|
|
cursor: d && hasItems ? 'pointer' : 'default',
|
|
fontFamily: 'inherit',
|
|
padding: 0,
|
|
}}
|
|
>
|
|
{d || ''}
|
|
{hasItems && (
|
|
<span style={{ position: 'absolute', left: '50%', bottom: 3, transform: 'translateX(-50%)', display: 'flex', gap: 2 }}>
|
|
{dayItems.slice(0, 3).map((item, idx) => (
|
|
<span key={`${item.id}-${idx}`} style={{ width: 3, height: 3, borderRadius: '50%', background: isToday(d) ? '#0d0d0d' : dotColor(item), display: 'block' }} />
|
|
))}
|
|
</span>
|
|
)}
|
|
</button>
|
|
{active && hasItems && (
|
|
<div onMouseEnter={() => keepHover(key)} onMouseLeave={clearHover} style={{ position: 'absolute', zIndex: 1002, right: 'calc(100% + 8px)', top: '50%', transform: 'translateY(-50%)', width: 210, padding: '10px 12px', background: 'var(--sidebar-bg)', border: '1px solid var(--border)', borderRadius: 8, boxShadow: '0 12px 32px rgba(0,0,0,0.45)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', pointerEvents: 'auto' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
|
|
<span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{activeLabel}</span>
|
|
<span style={{ fontSize: 11, color: '#F5A523' }}>{activeItems.length} due</span>
|
|
</div>
|
|
{activeItems.slice(0, 4).map(item => (
|
|
<button key={item.id} type="button" onClick={() => navigate(`/tasks/${item.id}`)} style={{ display: 'flex', alignItems: 'center', gap: 7, width: '100%', padding: '5px 0', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit' }}>
|
|
<span style={{ width: 6, height: 6, borderRadius: '50%', background: dotColor(item), flexShrink: 0 }} />
|
|
<span style={{ flex: 1, minWidth: 0, fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TasksInProgressCard({ tasks = [] }) {
|
|
const navigate = useNavigate();
|
|
const { sortKey, sortDir, toggle, sort } = useSortable('task');
|
|
const [showAll, setShowAll] = useState(false);
|
|
const rows = sort(tasks.slice(0, 10), (t, key) => {
|
|
if (key === 'task') return t.title || '';
|
|
if (key === 'assigned_to') return t.assigned_name || '';
|
|
return '';
|
|
});
|
|
const visibleRows = showAll ? rows : rows.slice(0, 5);
|
|
return (
|
|
<div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', flexDirection: 'column' }}>
|
|
<div style={{ marginBottom: rows.length > 0 ? 14 : 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
|
|
<span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Tasks In Progress</span>
|
|
{rows.length > 5 && (
|
|
<button type="button" className="dashboard-inline-link" style={{ fontSize: 11, fontWeight: 500, letterSpacing: 0.4, textTransform: 'uppercase' }} onClick={() => setShowAll((v) => !v)}>
|
|
{showAll ? 'Show less' : 'Show all'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{rows.length === 0 ? (
|
|
<div style={{ minHeight: 120, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>No tasks in progress</div>
|
|
) : (
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
|
|
<colgroup>
|
|
<col style={{ width: '55%' }} />
|
|
<col style={{ width: '45%' }} />
|
|
</colgroup>
|
|
<thead style={{ background: 'transparent' }}>
|
|
<tr style={{ background: 'transparent' }}>
|
|
<SortTh col="task" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'left', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 5px', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Task</SortTh>
|
|
<SortTh col="assigned_to" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'right', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 5px 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Assigned To</SortTh>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{visibleRows.map((t) => (
|
|
<tr key={t.id} style={{ background: 'transparent' }}>
|
|
<td style={{ fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: '5px', border: 'none', background: 'transparent', textAlign: 'left' }}>
|
|
<button type="button" className="dashboard-inline-link" onClick={() => navigate('/tasks/' + t.id)}>{t.title}</button>
|
|
</td>
|
|
<td style={{ fontSize: 12, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: '5px', border: 'none', background: 'transparent', textAlign: 'right' }}>
|
|
{t.assigned_to
|
|
? <button type="button" className="dashboard-inline-link" onClick={() => navigate(profilePath(t.assigned_to, t.assignee_role))}>{t.assigned_name || 'Profile'}</button>
|
|
: (t.assigned_name || '—')}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HotItemsCard({ submissions, tasks, isClient = false, isExternal = false, currentUserId = null, cardHeight = null }) {
|
|
const navigate = useNavigate();
|
|
const { sortKey, sortDir, toggle, sort } = useSortable('deadline');
|
|
const taskMap = new Map((tasks || []).map(t => [t.id, t]));
|
|
const seen = new Set();
|
|
const activeStatuses = ['not_started', 'in_progress', 'client_review', 'on_hold'];
|
|
const hotItems = isExternal
|
|
? (tasks || [])
|
|
.filter(task => task?.assigned_to === currentUserId && activeStatuses.includes(task?.status))
|
|
.sort((a, b) => {
|
|
if (!a.deadline && !b.deadline) return 0;
|
|
if (!a.deadline) return 1;
|
|
if (!b.deadline) return -1;
|
|
return new Date(a.deadline) - new Date(b.deadline);
|
|
})
|
|
.slice(0, 8)
|
|
: (submissions || [])
|
|
.filter(s => {
|
|
const task = taskMap.get(s.task_id);
|
|
if (isClient) return task?.status === 'client_review' && !seen.has(s.task_id) && seen.add(s.task_id);
|
|
return s.is_hot && activeStatuses.includes(task?.status) && !seen.has(s.task_id) && seen.add(s.task_id);
|
|
})
|
|
.map(s => ({ ...s, task: taskMap.get(s.task_id) }))
|
|
.filter(s => s.task)
|
|
.sort((a, b) => {
|
|
if (!a.deadline && !b.deadline) return 0;
|
|
if (!a.deadline) return 1;
|
|
if (!b.deadline) return -1;
|
|
return new Date(a.deadline) - new Date(b.deadline);
|
|
})
|
|
.slice(0, 7);
|
|
const sortedHotItems = sort(hotItems, (s, key) => {
|
|
if (isExternal) {
|
|
if (key === 'task') return s.title || '';
|
|
if (key === 'project') return s.project_name || '';
|
|
if (key === 'status') return s.status || '';
|
|
if (key === 'deadline') return s.deadline || '';
|
|
return '';
|
|
}
|
|
if (key === 'task') return s.task?.title || '';
|
|
if (key === 'requested_by') return getSubmissionDisplayName(s) || '';
|
|
if (key === 'deadline') return s.deadline || '';
|
|
return '';
|
|
});
|
|
return (
|
|
<div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', flexDirection: 'column', height: cardHeight || 'auto', minHeight: cardHeight ? 0 : 280 }}>
|
|
<div style={{ marginBottom: hotItems.length > 0 ? 14 : 0, flexShrink: 0 }}>
|
|
<span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>
|
|
{isClient ? 'Tasks Ready For Review' : isExternal ? 'My Tasks' : 'Hot Tasks'}
|
|
</span>
|
|
</div>
|
|
{hotItems.length === 0 ? (
|
|
<div style={{ flex: 1, minHeight: 120, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--text-muted)' }}>
|
|
{isClient ? 'No tasks ready for review' : isExternal ? 'No active tasks assigned to you' : 'No hot tasks'}
|
|
</div>
|
|
) : (
|
|
<div className="table-scroll-hidden" style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
|
|
{isExternal ? (
|
|
<>
|
|
<colgroup>
|
|
<col style={{ width: '42%' }} />
|
|
<col style={{ width: '24%' }} />
|
|
<col style={{ width: '19%' }} />
|
|
<col style={{ width: '15%' }} />
|
|
</colgroup>
|
|
<thead style={{ background: 'transparent' }}>
|
|
<tr style={{ background: 'transparent' }}>
|
|
<SortTh col="task" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'left', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 5px', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Task</SortTh>
|
|
<SortTh col="project" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'left', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Project</SortTh>
|
|
<SortTh col="status" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'center', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Status</SortTh>
|
|
<SortTh col="deadline" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'center', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Due By</SortTh>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sortedHotItems.map((task) => (
|
|
<tr key={task.id} style={{ verticalAlign: 'middle', background: 'transparent' }}>
|
|
<td style={{ fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: '5px', border: 'none', background: 'transparent', textAlign: 'left' }}>
|
|
<button type="button" className="dashboard-inline-link" onClick={() => navigate('/tasks/' + task.id)}>{task.title}</button>
|
|
</td>
|
|
<td style={{ fontSize: 12, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: '5px', border: 'none', background: 'transparent', textAlign: 'left' }}>{task.project?.name || '—'}</td>
|
|
<td style={{ fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', textAlign: 'center', padding: '5px', border: 'none', background: 'transparent', textTransform: 'capitalize' }}>{String(task.status || '').replace(/_/g, ' ') || '—'}</td>
|
|
<td style={{ fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', textAlign: 'center', padding: '5px', border: 'none', background: 'transparent' }}>{task.deadline ? new Date(task.deadline).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '—'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</>
|
|
) : (
|
|
<>
|
|
<colgroup>
|
|
<col style={{ width: '10%' }} />
|
|
<col style={{ width: '40%' }} />
|
|
<col style={{ width: '35%' }} />
|
|
<col style={{ width: '15%' }} />
|
|
</colgroup>
|
|
<thead style={{ background: 'transparent' }}>
|
|
<tr style={{ background: 'transparent' }}>
|
|
<th style={{ padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top', textAlign: 'center' }} />
|
|
<SortTh col="task" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'left', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 5px', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Task</SortTh>
|
|
<SortTh col="requested_by" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'center', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Requested By</SortTh>
|
|
<SortTh col="deadline" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)', textAlign: 'center', letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 0 12px 0', border: 'none', background: 'transparent', verticalAlign: 'top' }}>Due By</SortTh>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sortedHotItems.map(s => (
|
|
<tr key={s.task_id} style={{ verticalAlign: 'middle', background: 'transparent' }}>
|
|
<td style={{ padding: '3px 5px 7px', border: 'none', background: 'transparent', textAlign: 'center', verticalAlign: 'middle' }}>
|
|
{s.task.status === 'client_approved' ? (
|
|
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="rgba(74,222,128,0.8)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block', margin: '0 auto' }}>
|
|
<rect x="1.5" y="1.5" width="13" height="13" rx="2"/><polyline points="4,8 6.5,10.5 12,5.5"/>
|
|
</svg>
|
|
) : (
|
|
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--text-muted)" strokeWidth="1.5" strokeLinecap="round" style={{ display: 'block', margin: '0 auto' }}>
|
|
<rect x="1.5" y="1.5" width="13" height="13" rx="2"/>
|
|
</svg>
|
|
)}
|
|
</td>
|
|
<td style={{ fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', padding: '5px', border: 'none', background: 'transparent', textAlign: 'left' }}>
|
|
<button type="button" className="dashboard-inline-link" onClick={() => navigate('/tasks/' + s.task_id)}>{s.task.title}</button>
|
|
</td>
|
|
<td style={{ fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', border: 'none', background: 'transparent', textAlign: 'center' }}>
|
|
{s.submitted_by ? (
|
|
<button type="button" className="dashboard-inline-link" onClick={() => navigate(profilePath(s.submitted_by, s.submitter_role))}>{getSubmissionDisplayName(s) || 'Profile'}</button>
|
|
) : (getSubmissionDisplayName(s) || '—')}
|
|
</td>
|
|
<td style={{ fontSize: 12, color: 'var(--text-primary)', whiteSpace: 'nowrap', textAlign: 'center', padding: '5px', border: 'none', background: 'transparent' }}>{s.deadline ? new Date(s.deadline).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) : '—'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</>
|
|
)}
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TeamPerformanceCard({ tasks, profiles, deliveries, cardHeight = null }) {
|
|
const navigate = useNavigate();
|
|
const profileMap = useMemo(() => {
|
|
const m = new Map();
|
|
(profiles || []).forEach(p => m.set(p.id, p));
|
|
return m;
|
|
}, [profiles]);
|
|
const profileNameMap = useMemo(() => {
|
|
const m = new Map();
|
|
(profiles || []).forEach((profile) => {
|
|
const key = String(profile?.name || '').trim().toLowerCase();
|
|
if (key && !m.has(key)) m.set(key, profile);
|
|
});
|
|
return m;
|
|
}, [profiles]);
|
|
const doneStatuses = ['client_approved', 'invoiced', 'paid'];
|
|
const toEST = (dateStr) => new Date(new Date(dateStr).toLocaleString('en-US', { timeZone: 'America/New_York' }));
|
|
const monthsWithData = useMemo(() => new Set(
|
|
(deliveries || []).filter(d => d.submission?.task).map(d => {
|
|
const dt = toEST(d.sent_at);
|
|
return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}`;
|
|
})
|
|
), [deliveries]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
const allMonthOpts = useMemo(() => {
|
|
const opts = [];
|
|
const now = toEST(new Date().toISOString());
|
|
for (let i = 0; i < 6; i++) {
|
|
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
|
|
opts.push({ value: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`, label: i === 0 ? 'This Month' : d.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }) });
|
|
}
|
|
return opts;
|
|
}, []);
|
|
const monthOpts = allMonthOpts.filter(o => monthsWithData.has(o.value));
|
|
const [monthKey, setMonthKey] = useState(() => monthOpts[0]?.value || allMonthOpts[0].value);
|
|
const effectiveMonthKey = monthOpts.some(option => option.value === monthKey)
|
|
? monthKey
|
|
: (monthOpts[0]?.value || allMonthOpts[0]?.value || '');
|
|
|
|
const { people, totalDone } = useMemo(() => {
|
|
const [year, month] = effectiveMonthKey.split('-').map(Number);
|
|
const map = new Map();
|
|
(deliveries || []).forEach(d => {
|
|
const task = d.submission?.task;
|
|
if (!task) return;
|
|
const dt = toEST(d.sent_at);
|
|
if (dt.getFullYear() !== year || dt.getMonth() + 1 !== month) return;
|
|
const name = d.sent_by || task.assigned_name;
|
|
if (!name) return;
|
|
const matchedProfile = (task.assigned_to && profileMap.get(task.assigned_to)) || profileNameMap.get(String(name).trim().toLowerCase()) || null;
|
|
const entry = map.get(name) || {
|
|
name,
|
|
id: matchedProfile?.id || task.assigned_to || null,
|
|
avatar_url: matchedProfile?.avatar_url || '',
|
|
newCount: 0,
|
|
revCount: 0,
|
|
};
|
|
if ((d.version_number || 0) === 0) entry.newCount += 1;
|
|
else entry.revCount += 1;
|
|
map.set(name, entry);
|
|
});
|
|
const people = [...map.values()].map(p => ({ ...p, done: p.newCount + p.revCount })).sort((a, b) => b.done - a.done);
|
|
return { people, totalDone: people.reduce((s, p) => s + p.done, 0) };
|
|
}, [deliveries, effectiveMonthKey, profileMap, profileNameMap]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
return (
|
|
<div style={{ background: 'var(--card-bg)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid var(--border)', borderRadius: 8, padding: '18px 21px', display: 'flex', flexDirection: 'column', height: cardHeight || 'auto', minHeight: cardHeight ? 0 : 280 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, flexShrink: 0 }}>
|
|
<span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase' }}>Team Performance</span>
|
|
<div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}>
|
|
<select value={effectiveMonthKey} onChange={e => setMonthKey(e.target.value)} style={{ fontSize: 11, color: 'var(--text-muted)', background: 'transparent', border: 'none', boxShadow: 'none', cursor: 'pointer', outline: 'none', fontFamily: 'inherit', appearance: 'none', WebkitAppearance: 'none', MozAppearance: 'none', paddingRight: 14 }}>
|
|
{monthOpts.map(o => <option key={o.value} value={o.value} style={{ background: '#1a1a1a' }}>{o.label}</option>)}
|
|
</select>
|
|
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" style={{ position: 'absolute', right: 0, pointerEvents: 'none' }} stroke="rgba(255,255,255,0.5)" strokeWidth="1.5" strokeLinecap="round"><polyline points="1,2 4,6 7,2"/></svg>
|
|
</div>
|
|
</div>
|
|
{people.length === 0 ? (
|
|
<div className="card-empty-center" style={{ flex: 1 }}>No completed tasks this month</div>
|
|
) : (
|
|
<div className="table-scroll-hidden" style={{ flex: 1, minHeight: 0, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
|
|
{people.slice(0, 5).map((p, i) => {
|
|
const pct = totalDone > 0 ? Math.round((p.done / totalDone) * 100) : 0;
|
|
return (
|
|
<div key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: i > 0 ? 10 : 0 }}>
|
|
<ProfileAvatar
|
|
profileId={p.id}
|
|
name={p.name}
|
|
avatarUrl={p.avatar_url}
|
|
profilesById={profileMap}
|
|
profilesByName={profileNameMap}
|
|
size={27}
|
|
fontSize={12}
|
|
/>
|
|
<div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
{p.id ? <button type="button" className="dashboard-inline-link" style={{ fontSize: 13, fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} onClick={() => navigate(`/profile/${p.id}`)}>{p.name}</button> : <span style={{ fontSize: 13, color: 'var(--text-primary)', fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</span>}
|
|
<span style={{ fontSize: 11, color: 'var(--text-muted)', flexShrink: 0, marginLeft: 8 }}>{p.newCount} new · {p.revCount} revision</span>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<div style={{ flex: 1, height: 4, borderRadius: 2, background: 'rgba(245,165,35,0.15)', overflow: 'hidden' }}>
|
|
<div style={{ height: '100%', borderRadius: 2, background: 'var(--accent)', width: `${pct}%`, transition: 'width 0.3s ease' }} />
|
|
</div>
|
|
<span style={{ fontSize: 11, color: 'var(--text-muted)', minWidth: 28, textAlign: 'right' }}>{pct}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── 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 <Layout><PageLoader /></Layout>;
|
|
|
|
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 (
|
|
<Layout>
|
|
<div className="dash-stat-grid" style={{ gridTemplateColumns: '1fr 1fr 1fr 1.5fr', marginBottom: 0 }}>
|
|
<DashStatCard label="Open Tasks" value={activeTasks.length} sub="not complete" iconBg="rgba(167,139,250,0.15)" iconColor="#a78bfa" iconPath={DASH_ICONS.tasks} />
|
|
<DashStatCard label="Active Projects" value={activeProjects.length} sub={`${projects.length} total`} iconBg="rgba(96,165,250,0.15)" iconColor="#60a5fa" iconPath={DASH_ICONS.projects} />
|
|
<DashStatCard label={card3.label} value={card3.value} sub={card3.sub} iconBg={card3.iconBg} iconColor={card3.iconColor} iconPath={card3.iconPath} />
|
|
<DashStatCard label={card4.label} value={card4.value} sub={card4.sub} iconBg={card4.iconBg} iconColor={card4.iconColor} iconPath={card4.iconPath} chartData={card4.chartData} />
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 280px', gap: 24, marginTop: 24 }}>
|
|
<ActivityFeed events={activityEvents} />
|
|
<TasksInProgressCard tasks={inProgressTasks} />
|
|
<MiniCalendar items={calendarItems} />
|
|
</div>
|
|
<div ref={bottomCardsRowRef} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
|
|
<HotItemsCard submissions={submissions} tasks={tasks} isClient={isClient} isExternal={isExternal} currentUserId={currentUser?.id || null} cardHeight={bottomCardsHeight} />
|
|
<TeamPerformanceCard tasks={tasks} profiles={allProfiles} deliveries={perfDeliveries} cardHeight={bottomCardsHeight} />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|