From c4b2324ae6e409be044b517acc066fdd90d4ae26 Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Fri, 29 Nov 2024 16:45:29 +0200
Subject: [PATCH 1/2] Add visibility condition for timesheet and limit counter
 to 100+

---
 .../[memberId]/components/TimeSheetFilterPopover.tsx   | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
index f93bc0b05..2e32a5add 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,6 +17,7 @@ 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) {
@@ -33,6 +35,14 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
 					>
 						<SettingFilterIcon className="text-gray-700 dark:text-white w-3.5" strokeWidth="1.8" />
 						<span className="text-gray-700 dark:text-white">{t('common.FILTER')}</span>
+						{timesheet && timesheet.length > 0 && (
+							<span className="rounded-full bg-primary dark:bg-primary-light h-7 w-7 flex items-center justify-center text-white text-center text-[12px]">
+								{(() => {
+									const total = Object.values(statusTimesheet).reduce((sum, status) => sum + status.length, 0);
+									return total > 100 ? "100+" : total;
+								})()}
+							</span>
+						)}
 					</Button>
 				</PopoverTrigger>
 				<PopoverContent className="w-96">

From 78de16e76e85248ba1c114456dc7c85ab8d672e1 Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Fri, 29 Nov 2024 17:06:16 +0200
Subject: [PATCH 2/2] fix: CodeRabbit

---
 .../components/TimeSheetFilterPopover.tsx         | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
index 2e32a5add..8eb858acc 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
@@ -24,6 +24,10 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
 			setShouldRemoveItems(false);
 		}
 	}, [shouldRemoveItems]);
+	const totalItems = React.useMemo(() => {
+		if (!statusTimesheet) return 0;
+		return Object.values(statusTimesheet).reduce((sum, status) => sum + status.length, 0);
+	}, [statusTimesheet]);
 
 	return (
 		<>
@@ -36,11 +40,12 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
 						<SettingFilterIcon className="text-gray-700 dark:text-white w-3.5" strokeWidth="1.8" />
 						<span className="text-gray-700 dark:text-white">{t('common.FILTER')}</span>
 						{timesheet && timesheet.length > 0 && (
-							<span className="rounded-full bg-primary dark:bg-primary-light h-7 w-7 flex items-center justify-center text-white text-center text-[12px]">
-								{(() => {
-									const total = Object.values(statusTimesheet).reduce((sum, status) => sum + status.length, 0);
-									return total > 100 ? "100+" : total;
-								})()}
+							<span
+								role="status"
+								aria-label={`${totalItems} items filtered`}
+								className="rounded-full bg-primary dark:bg-primary-light h-7 w-7 flex items-center justify-center text-white text-center text-[12px]"
+							>
+								{totalItems > 100 ? "100+" : totalItems}
 							</span>
 						)}
 					</Button>