43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
/** @jsxImportSource react */
|
|
import type { ReactElement } from 'react';
|
|
import { useTheme } from '@lilith/ui-theme';
|
|
import { useProjectContext } from '../useProjectContext';
|
|
import { useIncomeSummary } from '@features/income/frontend/useIncome';
|
|
import { useTasks } from '@features/tasks/frontend/useTasks';
|
|
import { DEFAULT_CURRENCY, TaskStatus } from '@life-platform/shared';
|
|
import { formatCurrency } from '@lilith/format';
|
|
import { StatsBar, StatPill, PillValue, PillLabel } from './header-styles';
|
|
|
|
export default function ClientWorkHeader(): ReactElement | null {
|
|
const { project } = useProjectContext();
|
|
const { theme } = useTheme();
|
|
const accent = project.color || theme.colors.primary.main;
|
|
|
|
const { data: monthSummary } = useIncomeSummary({
|
|
period: 'month',
|
|
projectId: project.id,
|
|
});
|
|
|
|
const { data: tasksResult } = useTasks({
|
|
projectId: project.id,
|
|
status: `${TaskStatus.Todo},${TaskStatus.InProgress}`,
|
|
limit: 100,
|
|
});
|
|
|
|
const tasks = tasksResult?.data ?? [];
|
|
const monthTotal = monthSummary?.total ?? '0';
|
|
const currency = monthSummary?.currency ?? DEFAULT_CURRENCY;
|
|
|
|
return (
|
|
<StatsBar>
|
|
<StatPill accent={accent}>
|
|
<PillValue accent={accent}>{formatCurrency(monthTotal, currency, { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</PillValue>
|
|
<PillLabel>MTD</PillLabel>
|
|
</StatPill>
|
|
<StatPill accent={accent}>
|
|
<PillValue accent={accent}>{tasks.length}</PillValue>
|
|
<PillLabel>Active</PillLabel>
|
|
</StatPill>
|
|
</StatsBar>
|
|
);
|
|
}
|