50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
/** @jsxImportSource react */
|
|
import { useMemo } from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import { useTheme } from '@lilith/ui-theme';
|
|
import { useProjectContext } from '../useProjectContext';
|
|
import { useTasks } from '@features/tasks/frontend/useTasks';
|
|
import { TaskStatus } from '@life-platform/shared';
|
|
import type { Task } from '@life-platform/shared';
|
|
import { StatsBar, StatPill, PillValue, PillLabel } from './header-styles';
|
|
|
|
export default function SideProjectHeader(): ReactElement | null {
|
|
const { project } = useProjectContext();
|
|
const { theme } = useTheme();
|
|
const accent = project.color || theme.colors.primary.main;
|
|
|
|
const { data: tasksResult } = useTasks({
|
|
projectId: project.id,
|
|
limit: 100,
|
|
});
|
|
|
|
const tasks = tasksResult?.data ?? [];
|
|
|
|
const counts = useMemo(() => {
|
|
const done = tasks.filter((t: Task) => t.status === TaskStatus.Done).length;
|
|
const inProgress = tasks.filter((t: Task) => t.status === TaskStatus.InProgress).length;
|
|
const total = tasks.length;
|
|
return { done, inProgress, total };
|
|
}, [tasks]);
|
|
|
|
const progressPct = counts.total > 0 ? Math.round((counts.done / counts.total) * 100) : 0;
|
|
|
|
return (
|
|
<StatsBar>
|
|
<StatPill accent={accent}>
|
|
<PillValue accent={accent}>
|
|
{counts.done}/{counts.total}
|
|
</PillValue>
|
|
<PillLabel>Done</PillLabel>
|
|
</StatPill>
|
|
<StatPill accent={accent}>
|
|
<PillValue accent={accent}>{counts.inProgress}</PillValue>
|
|
<PillLabel>In Progress</PillLabel>
|
|
</StatPill>
|
|
<StatPill accent={accent}>
|
|
<PillValue accent={accent}>{progressPct}%</PillValue>
|
|
<PillLabel>Progress</PillLabel>
|
|
</StatPill>
|
|
</StatsBar>
|
|
);
|
|
}
|