diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx index f93bc0b05..8eb858acc 100644 --- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx +++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx @@ -8,6 +8,7 @@ import { SettingFilterIcon } from '@/assets/svg'; import { useTranslations } from 'next-intl'; import { clsxm } from '@/app/utils'; import { useTimelogFilterOptions } from '@/app/hooks'; +import { useTimesheet } from '@/app/hooks/features/useTimesheet'; export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover() { const [shouldRemoveItems, setShouldRemoveItems] = React.useState(false); @@ -16,12 +17,17 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover const t = useTranslations(); const { setEmployeeState, setProjectState, setStatusState, setTaskState, employee, project, statusState, task } = useTimelogFilterOptions(); + const { timesheet, statusTimesheet } = useTimesheet({}) React.useEffect(() => { if (shouldRemoveItems) { setShouldRemoveItems(false); } }, [shouldRemoveItems]); + const totalItems = React.useMemo(() => { + if (!statusTimesheet) return 0; + return Object.values(statusTimesheet).reduce((sum, status) => sum + status.length, 0); + }, [statusTimesheet]); return ( <> @@ -33,6 +39,15 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover > {t('common.FILTER')} + {timesheet && timesheet.length > 0 && ( + + {totalItems > 100 ? "100+" : totalItems} + + )}