import { useState, useEffect, useMemo } from 'react';
import {
Avatar,
Box,
Card,
Group,
Progress,
ScrollArea,
Select,
Stack,
Table,
Text,
ThemeIcon,
Tooltip,
UnstyledButton,
} from '@mantine/core';
import { useSelector, useDispatch } from 'react-redux';
import {
IconSelector,
IconLayoutList,
IconArrowUp,
IconArrowDown,
IconArrowsSort,
} from '@tabler/icons-react';
import { translate } from "../../utils/i18n";
import { fetchMembersTasksCounts } from "../Settings/store/taskSlice";
function LegendItem({ label, color, value }) {
return (
{label}
{value && (
: {value}
)}
)
}
const DashboardTaskProgress = ({ dragHandle }) => {
const dispatch = useDispatch();
const { membersTasksCounts } = useSelector((state) => state.settings.task);
const { loggedUserId } = useSelector((state) => state.auth.user);
const { loggedInUser, xWpNonce } = useSelector((state) => state.auth.session);
const [selectedProject, setSelectedProject] = useState(null);
const [projectInfo, setProjectInfo] = useState({});
const [memberTasks, setMemberTasks] = useState([]);
const [sortCol, setSortCol] = useState('name');
const [sortDir, setSortDir] = useState('asc');
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}
);
};
const sortedMemberTasks = useMemo(() => {
const dir = sortDir === 'asc' ? 1 : -1;
return [...memberTasks].sort((a, b) => {
if (sortCol === 'name') return (a.name || '').localeCompare(b.name || '') * dir;
const aTotal = (a.active_tasks || 0) + (a.completed_tasks || 0) + (a.overdue_tasks || 0);
const bTotal = (b.active_tasks || 0) + (b.completed_tasks || 0) + (b.overdue_tasks || 0);
return (aTotal - bTotal) * dir;
});
}, [memberTasks, sortCol, sortDir]);
const userId = loggedInUser?.loggedUserId ?? loggedUserId;
const isAdmin = loggedInUser?.is_superadmin || loggedInUser?.llc_roles?.some(role => role.slug === 'admin');
const isWpAdmin = loggedInUser?.roles?.includes('administrator');
useEffect(() => {
if (!xWpNonce) return;
if (!membersTasksCounts || Object.keys(membersTasksCounts).length === 0) {
dispatch(fetchMembersTasksCounts({ id: isAdmin || isWpAdmin ? null : userId }));
}
}, [
dispatch,
loggedInUser,
xWpNonce
]);
useEffect(() => {
if (membersTasksCounts && membersTasksCounts.length > 0) {
setSelectedProject(membersTasksCounts[0]?.id.toString());
setProjectInfo(membersTasksCounts[0] || {});
setMemberTasks(membersTasksCounts[0]?.members || []);
}
}, [membersTasksCounts]);
useEffect(() => {
if (selectedProject && membersTasksCounts && membersTasksCounts.length > 0) {
const project = membersTasksCounts.find(p => p.id.toString() === selectedProject);
setMemberTasks(project?.members || []);
setProjectInfo(project || {});
}
}, [selectedProject, membersTasksCounts]);
return (
{dragHandle}
{translate('Task Distribution Matrix (By Project)')}
{ if (dragHandle) e.stopPropagation(); }}
style={{ background: '#fff', borderRadius: 6, paddingLeft: 8 }}
>
{translate('Workload')}
{sortedMemberTasks.map((member) => {
const getVisiblePercent = (percent) => {
if (percent === 0) return 0;
if (percent > 0 && percent < 1) return 0;
if (percent < 5) return 5;
return percent;
};
const active = member.active_tasks || 0;
const completed = member.completed_tasks || 0;
const overdue = member.overdue_tasks || 0;
const memberTotal = active + completed + overdue;
const total = projectInfo.total_assigned_tasks || 0;
const activePercent = total > 0 ? (active / total) * 100 : 0;
const overduePercent = total > 0 ? (overdue / total) * 100 : 0;
const activeVisible = getVisiblePercent(activePercent);
const overdueVisible = getVisiblePercent(overduePercent);
return (
{member.name}
{active > 0 ? (
{activePercent.toFixed(0)}%
) : null}
{overdue > 0 ? (
{overduePercent.toFixed(0)}%
) : null}
{memberTotal}
);
})}
{translate('Total Tasks')}:
{projectInfo && projectInfo.total_tasks}
{translate('Total Assigned Tasks')}:
{projectInfo && projectInfo.total_assigned_tasks}
);
};
export default DashboardTaskProgress;