import { useMemo, useState } from 'react';
import { Card, Group, Text, ThemeIcon, Flex, Table, Avatar, UnstyledButton } from '@mantine/core';
import { IconUsers, IconArrowUp, IconArrowDown, IconArrowsSort } from '@tabler/icons-react';
import { translate } from '../../../../utils/i18n';
import { isTaskComplete, isTaskOverdue } from './reportUtils';
const getAssigneeId = (task) => {
if (task.assigned_to && task.assigned_to.id != null) return String(task.assigned_to.id);
if (task.assignedTo_id != null) return String(task.assignedTo_id);
return null;
};
const TeamWorkloadTable = ({ tasks = [], members = [], statuses = [], sections = [] }) => {
const [sortCol, setSortCol] = useState('name');
const [sortDir, setSortDir] = useState('asc');
const rows = useMemo(() => {
const byMember = new Map();
for (const m of members) {
if (!m || m.id == null) continue;
byMember.set(String(m.id), {
id: String(m.id),
name: m.name || translate('Unknown'),
avatar: m.avatar || null,
total: 0,
open: 0,
overdue: 0,
completed: 0,
});
}
for (const t of tasks) {
const id = getAssigneeId(t);
if (!id) continue;
let row = byMember.get(id);
if (!row) {
const name = t.assigned_to?.name || translate('Unknown');
row = { id, name, avatar: t.assigned_to?.avatar || null, total: 0, open: 0, overdue: 0, completed: 0 };
byMember.set(id, row);
}
row.total += 1;
const done = isTaskComplete(t, statuses, sections);
if (done) row.completed += 1;
else row.open += 1;
if (isTaskOverdue(t, statuses, sections)) row.overdue += 1;
}
const list = Array.from(byMember.values());
const dir = sortDir === 'asc' ? 1 : -1;
list.sort((a, b) => {
if (sortCol === 'name') return a.name.localeCompare(b.name) * dir;
return (a[sortCol] - b[sortCol]) * dir;
});
return list;
}, [tasks, members, statuses, sections, sortCol, sortDir]);
const toggleSort = (col) => {
if (sortCol === col) {
setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
} else {
setSortCol(col);
setSortDir(col === 'name' ? 'asc' : 'desc');
}
};
const SortHeader = ({ col, label, align = 'left' }) => {
const active = sortCol === col;
const Icon = !active ? IconArrowsSort : sortDir === 'asc' ? IconArrowUp : IconArrowDown;
return (
toggleSort(col)}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
gap: 4,
width: '100%',
fontSize: 11,
fontWeight: 700,
color: active ? '#39758D' : '#64748B',
textTransform: 'uppercase',
letterSpacing: '0.4px',
}}
>
{label}
);
};
return (
{translate('Team Workload')}
{rows.length === 0 ? (
{translate('No members assigned to tasks yet')}
) : (
{rows.map((r) => (
{(r.name || '?').slice(0, 2).toUpperCase()}
{r.name}
{r.total}
{r.open}
0 ? '#EF4444' : 'dimmed'}>{r.overdue}
{r.completed}
))}
)}
);
};
export default TeamWorkloadTable;