From a78917583ec0a99898941443d147938132178b64 Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Sun, 1 Dec 2024 12:02:08 +0200
Subject: [PATCH] add coderabit suggestions

---
 .../components/date-range-select.tsx          | 33 +++++++----
 .../components/export-mode-select.tsx         |  2 +-
 .../components/time-report-table.tsx          | 55 +++++++++++++++++++
 .../[locale]/reports/weekly-limit/page.tsx    | 50 +++++------------
 apps/web/app/constants.ts                     |  2 +
 5 files changed, 94 insertions(+), 48 deletions(-)
 create mode 100644 apps/web/app/[locale]/reports/weekly-limit/components/time-report-table.tsx

diff --git a/apps/web/app/[locale]/reports/weekly-limit/components/date-range-select.tsx b/apps/web/app/[locale]/reports/weekly-limit/components/date-range-select.tsx
index 552187ce6..980e9269b 100644
--- a/apps/web/app/[locale]/reports/weekly-limit/components/date-range-select.tsx
+++ b/apps/web/app/[locale]/reports/weekly-limit/components/date-range-select.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { endOfMonth, endOfWeek, format, startOfMonth, startOfWeek, subDays } from 'date-fns';
+import { endOfMonth, endOfWeek, format, isSameDay, startOfMonth, startOfWeek, subDays, subMonths } from 'date-fns';
 import { Calendar as CalendarIcon } from 'lucide-react';
 import { DateRange } from 'react-day-picker';
 import { cn } from '@/lib/utils';
@@ -78,8 +78,12 @@ export function DatePickerWithRange({
 							</Button>
 							<Button
 								onClick={() => {
-									selectedDate != undefined && onChange(selectedDate);
-									setDate(selectedDate);
+									if (selectedDate?.from && selectedDate?.to) {
+										onChange(selectedDate);
+										setDate(selectedDate);
+									} else {
+										console.warn('Invalid date range selected');
+									}
 								}}
 								className=" grow text-xs h-8 dark:text-white"
 								size={'sm'}
@@ -127,7 +131,10 @@ const PresetDates = ({
 			{ label: t('common.THIS_MONTH'), range: { from: startOfMonth(new Date()), to: endOfMonth(new Date()) } },
 			{
 				label: t('common.LAST_MONTH'),
-				range: { from: startOfMonth(subDays(new Date(), 30)), to: endOfMonth(subDays(new Date(), 30)) }
+				range: {
+					from: startOfMonth(subMonths(new Date(), 1)),
+					to: endOfMonth(subMonths(new Date(), 1))
+				}
 			},
 			{ label: t('common.FILTER_LAST_7_DAYS'), range: { from: subDays(new Date(), 7), to: new Date() } },
 			{ label: t('common.LAST_TWO_WEEKS'), range: { from: subDays(new Date(), 14), to: new Date() } }
@@ -141,8 +148,10 @@ const PresetDates = ({
 		setSelected(
 			presets.find((preset) => {
 				return (
-					date?.from?.toISOString() == preset.range.from.toISOString() &&
-					date.to?.toISOString() == preset.range.to.toISOString()
+					date?.from &&
+					date.to &&
+					isSameDay(date?.from, preset.range.from) &&
+					isSameDay(date?.to, preset.range.to)
 				);
 			})?.range
 		);
@@ -155,15 +164,19 @@ const PresetDates = ({
 					key={preset.label}
 					onClick={() => setDate(preset.range)}
 					variant={
-						selected?.from?.toISOString() == preset.range.from.toISOString() &&
-						selected.to?.toISOString() == preset.range.to.toISOString()
+						selected?.from &&
+						selected.to &&
+						isSameDay(selected?.from, preset.range.from) &&
+						isSameDay(selected?.to, preset.range.to)
 							? 'default'
 							: 'outline'
 					}
 					className={cn(
 						' truncate text-left text-sm h-8 px-2 py-1 font-normal border rounded',
-						selected?.from?.toISOString() == preset.range.from.toISOString() &&
-							selected.to?.toISOString() == preset.range.to.toISOString() &&
+						selected?.from &&
+							selected.to &&
+							isSameDay(selected?.from, preset.range.from) &&
+							isSameDay(selected?.to, preset.range.to) &&
 							'dark:text-white'
 					)}
 				>
diff --git a/apps/web/app/[locale]/reports/weekly-limit/components/export-mode-select.tsx b/apps/web/app/[locale]/reports/weekly-limit/components/export-mode-select.tsx
index 6457e57b5..72bb4cdb4 100644
--- a/apps/web/app/[locale]/reports/weekly-limit/components/export-mode-select.tsx
+++ b/apps/web/app/[locale]/reports/weekly-limit/components/export-mode-select.tsx
@@ -30,7 +30,7 @@ export function ExportModeSelect(props: IProps) {
 	);
 
 	return (
-		<Select value={selected} onValueChange={handleChange}>
+		<Select aria-label="Select export format" value={selected} onValueChange={handleChange}>
 			<SelectTrigger className="w-36 overflow-hidden  h-[2.2rem]  text-clip border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
 				<SelectValue placeholder="Export" />
 			</SelectTrigger>
diff --git a/apps/web/app/[locale]/reports/weekly-limit/components/time-report-table.tsx b/apps/web/app/[locale]/reports/weekly-limit/components/time-report-table.tsx
new file mode 100644
index 000000000..7b8349e6c
--- /dev/null
+++ b/apps/web/app/[locale]/reports/weekly-limit/components/time-report-table.tsx
@@ -0,0 +1,55 @@
+import { ITimeLimitReport } from '@/app/interfaces/ITimeLimits';
+import { DataTableWeeklyLimits } from './data-table';
+import moment from 'moment';
+import { DEFAULT_WORK_HOURS_PER_DAY } from '@/app/constants';
+
+interface IProps {
+	report: ITimeLimitReport;
+	displayMode: 'Week' | 'Day';
+	organizationLimits: { [key: string]: number };
+}
+
+/**
+ * Renders a time report table displaying employee time tracking data.
+ *
+ * @component
+ * @param {IProps} props - The component props.
+ * @param {ITimeLimitReport} props.report - Data for employees' time usage reports.
+ * @param {'Week' | 'Day'} props.displayMode - Specifies whether to display data by week or day.
+ * @param {{ [key: string]: number }} props.organizationLimits - Contains organizational limits for time usage, specified by mode.
+ *
+ * @returns {JSX.Element} A formatted report table showing time usage and limits.
+ */
+export const TimeReportTable = ({ report, displayMode, organizationLimits }: IProps) => (
+	<div className="w-full p-1" key={report.date}>
+		<div className="h-12 px-4 bg-slate-100 dark:bg-gray-800 dark:text-white rounded-md flex border items-center">
+			<h4 className="text-xs font-medium">
+				{displayMode === 'Week' ? (
+					<>
+						<span>{report.date}</span> <span>-</span>
+						<span>{moment(report.date).endOf('week').format('YYYY-MM-DD')}</span>
+					</>
+				) : (
+					report.date
+				)}
+			</h4>
+		</div>
+		<div>
+			<DataTableWeeklyLimits
+				data={report.employees?.map((item) => {
+					const limit = item.limit || organizationLimits[displayMode] || DEFAULT_WORK_HOURS_PER_DAY;
+					const percentageUsed = (item.duration / limit) * 100;
+					const remaining = limit - item.duration;
+
+					return {
+						member: item.employee.fullName,
+						limit,
+						percentageUsed,
+						timeSpent: item.duration,
+						remaining
+					};
+				})}
+			/>
+		</div>
+	</div>
+);
diff --git a/apps/web/app/[locale]/reports/weekly-limit/page.tsx b/apps/web/app/[locale]/reports/weekly-limit/page.tsx
index a3e556a8c..ad326015e 100644
--- a/apps/web/app/[locale]/reports/weekly-limit/page.tsx
+++ b/apps/web/app/[locale]/reports/weekly-limit/page.tsx
@@ -9,7 +9,6 @@ import { DatePickerWithRange } from './components/date-range-select';
 import { MembersSelect } from './components/members-select';
 import { GroupBySelect, TGroupByOption } from './components/group-by-select';
 import { ExportModeSelect } from './components/export-mode-select';
-import { DataTableWeeklyLimits } from './components/data-table';
 import { getAccessTokenCookie, getOrganizationIdCookie, getTenantIdCookie } from '@/app/helpers';
 import { useTimeLimits } from '@/app/hooks/features/useTimeLimits';
 import { DateRange } from 'react-day-picker';
@@ -20,6 +19,7 @@ import { ITimeLimitReport } from '@/app/interfaces/ITimeLimits';
 import { getUserOrganizationsRequest } from '@/app/services/server/requests';
 import { IOrganization } from '@/app/interfaces';
 import { useTranslations } from 'next-intl';
+import { TimeReportTable } from './components/time-report-table';
 
 function WeeklyLimitReport() {
 	const { isTrackingEnabled } = useOrganizationTeams();
@@ -139,48 +139,24 @@ function WeeklyLimitReport() {
 						if (displayMode == 'Week') {
 							if (moment(report.date).isSame(moment(report.date).startOf('isoWeek'), 'day')) {
 								return (
-									<div className="w-full p-1" key={report.date}>
-										<div className="h-12 px-4 bg-slate-100 dark:bg-gray-800 dark:text-white rounded-md flex border items-center">
-											<h4 className=" text-xs font-medium space-x-5 ">
-												<span>{report.date}</span> <span>-</span>
-												<span>{moment(report.date).endOf('week').format('YYYY-MM-DD')}</span>
-											</h4>
-										</div>
-										<div>
-											<DataTableWeeklyLimits
-												data={report.employees?.map((item) => ({
-													member: item.employee.fullName,
-													limit: item.limit || organizationLimits[displayMode],
-													percentageUsed:
-														(item.duration / organizationLimits[displayMode]) * 100,
-													timeSpent: item.duration,
-													remaining: organizationLimits[displayMode] - item.duration
-												}))}
-											/>
-										</div>
-									</div>
+									<TimeReportTable
+										organizationLimits={organizationLimits}
+										report={report}
+										displayMode={displayMode}
+										key={report.date}
+									/>
 								);
 							} else {
 								return null;
 							}
 						} else {
 							return (
-								<div className="w-full p-1" key={report.date}>
-									<div className="h-12 px-4 bg-slate-100 dark:bg-gray-800 dark:text-white rounded-md flex border items-center">
-										<h4 className=" text-xs font-medium ">{report.date}</h4>
-									</div>
-									<div>
-										<DataTableWeeklyLimits
-											data={report.employees?.map((item) => ({
-												member: item.employee.fullName,
-												limit: item.limit || organizationLimits[displayMode],
-												percentageUsed: (item.duration / organizationLimits[displayMode]) * 100,
-												timeSpent: item.duration,
-												remaining: organizationLimits[displayMode] - item.duration
-											}))}
-										/>
-									</div>
-								</div>
+								<TimeReportTable
+									organizationLimits={organizationLimits}
+									report={report}
+									displayMode={displayMode}
+									key={report.date}
+								/>
 							);
 						}
 					})}
diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
index b7d0ad636..1752b78a6 100644
--- a/apps/web/app/constants.ts
+++ b/apps/web/app/constants.ts
@@ -337,3 +337,5 @@ export const statusOptions = [
 	{ value: 'Pending', label: 'Pending' },
 	{ value: 'Rejected', label: 'Rejected' }
 ];
+
+export const DEFAULT_WORK_HOURS_PER_DAY = 8;