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}
+
+ )}