[Feat]: Timesheet-Duration-Display

apps/web/app/hooks/features/useTimelogFilterOptions.ts

@@ -31,6 +31,6 @@ export function useTimelogFilterOptions() {
         setStatusState,
         handleSelectRowTimesheet,
         selectTimesheet,
-        setSelectTimesheet
+        setSelectTimesheet,
     };
 }

apps/web/lib/features/integrations/calendar/table-time-sheet.tsx

@@ -57,9 +57,8 @@ import {
 import { useTranslations } from 'next-intl';
 import { formatDate } from '@/app/helpers';
 import { GroupedTimesheet, useTimesheet } from '@/app/hooks/features/useTimesheet';
-import { TaskNameInfoDisplay } from '../../task/task-displays';
+import { DisplayTimeForTimesheet, TaskNameInfoDisplay, TotalDurationByDate, TotalTimeDisplay } from '../../task/task-displays';
 import { TimesheetStatus } from '@/app/interfaces';
-import dayjs from 'dayjs';
 
 export const columns: ColumnDef<TimeSheet>[] = [
 	{
@@ -249,10 +248,11 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 								'h-[48px] flex justify-between items-center w-full',
 								'bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1',
 								'border-gray-400 px-5 text-[#71717A] font-medium'
-							)}
-						>
+							)}>
 							<span>{formatDate(plan.date)}</span>
-							<span>64:30h</span>
+							<TotalDurationByDate
+								timesheetLog={plan.tasks}
+								createdAt={formatDate(plan.date)} />
 						</div>
 
 						<Accordion type="single" collapsible>
@@ -283,8 +283,8 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 													variant={'outline'}
 													className="flex items-center gap-x-2 h-[25px] rounded-md bg-[#E4E4E7] dark:bg-gray-800"
 												>
-													<span className="text-[#5f5f61]">Total</span>
-													<span className="text-[#868688]">24:30h</span>
+													<span className="text-[#5f5f61]">{t('timer.TOTAL_HOURS')}</span>
+													<TotalTimeDisplay timesheetLog={rows} />
 												</Badge>
 											</div>
 											<div className={clsxm('flex items-center gap-2 p-x-1 capitalize')}>
@@ -339,10 +339,11 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 														{task.timesheet.status}
 													</Badge>
 												</div>
-												<span className="flex-1 font-medium">
-													{dayjs(task.timesheet.createdAt).format('HH:mm:ss')}
-												</span>
-												<TaskActionMenu idTasks={task.id} />
+												<DisplayTimeForTimesheet
+													duration={task.timesheet.duration}
+												/>
+												<TaskActionMenu
+													idTasks={task.id} />
 											</div>
 										))}
 									</AccordionContent>

apps/web/lib/features/task/task-displays.tsx

@@ -1,7 +1,10 @@
-import { ITeamTask, Nullable } from '@app/interfaces';
+import { ITeamTask, Nullable, TimesheetLog } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { Tooltip } from 'lib/components';
 import { TaskIssueStatus } from './task-issue';
+import { formatDate, secondsToTime } from '@/app/helpers';
+import { ClockIcon } from "@radix-ui/react-icons"
+import React from 'react';
 
 type Props = {
 	task: Nullable<ITeamTask>;
@@ -61,3 +64,58 @@ export function TaskNameInfoDisplay({
 		</Tooltip>
 	);
 }
+
+const formatTime = (hours: number, minutes: number) => (
+	<div className="flex items-center">
+		<span>{String(hours).padStart(2, '0')}</span>
+		<span>:</span>
+		<span>{String(minutes).padStart(2, '0')}</span>
+	</div>
+);
+
+export const DisplayTimeForTimesheet = ({ duration }: { duration: number }) => {
+	if (duration < 0) {
+		console.warn('Negative duration provided to DisplayTimeForTimesheet');
+		duration = 0;
+	}
+	const { h: hours, m: minute } = secondsToTime(duration || 0);
+	return (
+		<div className='flex items-center font-medium gap-x-1'>
+			<ClockIcon className='text-green-400 text-[14px] h-4 w-4' />
+			<div className='flex items-center'>
+				{formatTime(hours, minute)}
+			</div>
+		</div>
+	)
+
+}
+
+export const TotalTimeDisplay = React.memo(({ timesheetLog }: { timesheetLog: TimesheetLog[] }) => {
+	const totalDuration = Array.isArray(timesheetLog)
+		? timesheetLog.reduce((acc, curr) => acc + (curr.timesheet?.duration || 0), 0)
+		: 0;
+	const { h: hours, m: minute } = secondsToTime(totalDuration || 0);
+	return (
+		<div className="flex items-center text-[#868688]">
+			{formatTime(hours, minute)}
+		</div>)
+});
+TotalTimeDisplay.displayName = 'TotalTimeDisplay';
+
+
+export const TotalDurationByDate = React.memo(
+	({ timesheetLog, createdAt }: { timesheetLog: TimesheetLog[]; createdAt: Date | string }) => {
+		const targetDateISO = new Date(createdAt).toISOString();
+		const filteredLogs = timesheetLog.filter(
+			(item) => formatDate(item.timesheet.createdAt) === formatDate(targetDateISO));
+		const totalDurationInSeconds = filteredLogs.reduce(
+			(total, log) => total + (log.timesheet?.duration || 0), 0);
+		const { h: hours, m: minutes } = secondsToTime(totalDurationInSeconds);
+		return (
+			<div className="flex items-center text-[#868688]">
+				{formatTime(hours, minutes)}
+			</div>
+		);
+	}
+);
+TotalDurationByDate.displayName = 'TotalDurationByDate';