From 6eba693f2827ddcdc12cc4ce61bb656e5d81b6e3 Mon Sep 17 00:00:00 2001 From: Innocent-akim Date: Wed, 20 Nov 2024 08:54:01 +0200 Subject: [PATCH 1/5] feat: add DisplayTimeForTimesheet and TotalTimeDisplay components for formatted timesheet duration --- .../hooks/features/useTimelogFilterOptions.ts | 2 +- apps/web/lib/features/task/task-displays.tsx | 37 ++++++++++++++++++- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts index ca39217a3..c246038a8 100644 --- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts +++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts @@ -31,6 +31,6 @@ export function useTimelogFilterOptions() { setStatusState, handleSelectRowTimesheet, selectTimesheet, - setSelectTimesheet + setSelectTimesheet, }; } diff --git a/apps/web/lib/features/task/task-displays.tsx b/apps/web/lib/features/task/task-displays.tsx index 1f37c924a..2e21763de 100644 --- a/apps/web/lib/features/task/task-displays.tsx +++ b/apps/web/lib/features/task/task-displays.tsx @@ -1,7 +1,9 @@ -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 { secondsToTime } from '@/app/helpers'; +import { ClockIcon } from "@radix-ui/react-icons" type Props = { task: Nullable; @@ -61,3 +63,36 @@ export function TaskNameInfoDisplay({ ); } + +export const DisplayTimeForTimesheet = ({ duration }: number | any) => { + const { h: hours, m: minute } = secondsToTime(duration || 0); + const formattedHours = String(hours).padStart(2, '0'); + const formattedMinutes = String(minute).padStart(2, '0'); + return ( +
+ +
+ {formattedHours} + : + {formattedMinutes} +
+
+ ) + +} + +export const TotalTimeDisplay = ({ timesheetLog }: { timesheetLog: TimesheetLog[] }) => { + const totalDuration = Array.isArray(timesheetLog) + ? timesheetLog.reduce((acc, curr) => acc + curr.timesheet.duration, 0) + : 0; + const { h: hours, m: minute } = secondsToTime(totalDuration || 0); + + const formattedHours = String(hours).padStart(2, '0'); + const formattedMinutes = String(minute).padStart(2, '0'); + return ( +
+ {formattedHours} + : + {formattedMinutes} +
) +}; From ece56b9c4e1e3d638c1a22cd009e2ce294dcf683 Mon Sep 17 00:00:00 2001 From: Innocent-akim Date: Wed, 20 Nov 2024 09:09:55 +0200 Subject: [PATCH 2/5] fix: coderabbitai --- apps/web/lib/features/task/task-displays.tsx | 37 +++++++++++--------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/apps/web/lib/features/task/task-displays.tsx b/apps/web/lib/features/task/task-displays.tsx index 2e21763de..613ffed6b 100644 --- a/apps/web/lib/features/task/task-displays.tsx +++ b/apps/web/lib/features/task/task-displays.tsx @@ -4,6 +4,7 @@ import { Tooltip } from 'lib/components'; import { TaskIssueStatus } from './task-issue'; import { secondsToTime } from '@/app/helpers'; import { ClockIcon } from "@radix-ui/react-icons" +import React from 'react'; type Props = { task: Nullable; @@ -64,35 +65,39 @@ export function TaskNameInfoDisplay({ ); } -export const DisplayTimeForTimesheet = ({ duration }: number | any) => { +const formatTime = (hours: number, minutes: number) => ( +
+ {String(hours).padStart(2, '0')} + : + {String(minutes).padStart(2, '0')} +
+); + +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); - const formattedHours = String(hours).padStart(2, '0'); - const formattedMinutes = String(minute).padStart(2, '0'); return (
- {formattedHours} - : - {formattedMinutes} + {formatTime(hours, minute)}
) } -export const TotalTimeDisplay = ({ timesheetLog }: { timesheetLog: TimesheetLog[] }) => { +export const TotalTimeDisplay = React.memo(({ timesheetLog }: { timesheetLog: TimesheetLog[] }) => { const totalDuration = Array.isArray(timesheetLog) - ? timesheetLog.reduce((acc, curr) => acc + curr.timesheet.duration, 0) + ? timesheetLog.reduce((acc, curr) => acc + (curr.timesheet?.duration || 0), 0) : 0; const { h: hours, m: minute } = secondsToTime(totalDuration || 0); - - const formattedHours = String(hours).padStart(2, '0'); - const formattedMinutes = String(minute).padStart(2, '0'); return ( -
- {formattedHours} - : - {formattedMinutes} +
+ {formatTime(hours, minute)}
) -}; +}); +TotalTimeDisplay.displayName = 'TotalTimeDisplay'; From c1ccd9c213dc62b3afbf3e4330068b3fbb4f7e66 Mon Sep 17 00:00:00 2001 From: Innocent-akim Date: Wed, 20 Nov 2024 09:57:36 +0200 Subject: [PATCH 3/5] feat: total duration by date --- apps/web/lib/features/task/task-displays.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/apps/web/lib/features/task/task-displays.tsx b/apps/web/lib/features/task/task-displays.tsx index 613ffed6b..0bca22f27 100644 --- a/apps/web/lib/features/task/task-displays.tsx +++ b/apps/web/lib/features/task/task-displays.tsx @@ -2,7 +2,7 @@ import { ITeamTask, Nullable, TimesheetLog } from '@app/interfaces'; import { clsxm } from '@app/utils'; import { Tooltip } from 'lib/components'; import { TaskIssueStatus } from './task-issue'; -import { secondsToTime } from '@/app/helpers'; +import { formatDate, secondsToTime } from '@/app/helpers'; import { ClockIcon } from "@radix-ui/react-icons" import React from 'react'; @@ -101,3 +101,21 @@ export const TotalTimeDisplay = React.memo(({ timesheetLog }: { timesheetLog: Ti
) }); 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 ( +
+ {formatTime(hours, minutes)} +
+ ); + } +); +TotalDurationByDate.displayName = 'TotalDurationByDate'; From fc23dca668bb487f6ea19ef30bbd319aa77b9e2c Mon Sep 17 00:00:00 2001 From: Innocent-akim Date: Thu, 21 Nov 2024 12:22:14 +0200 Subject: [PATCH 4/5] fix: conflit and display date time --- .../calendar/table-time-sheet.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx index 52fb005b5..b0c4bace3 100644 --- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx +++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx @@ -57,7 +57,7 @@ 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'; @@ -249,10 +249,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' - )} - > + )}> {formatDate(plan.date)} - 64:30h + @@ -283,8 +284,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" > - Total - 24:30h + {t('timer.TOTAL_HOURS')} +
@@ -339,10 +340,11 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) { {task.timesheet.status}
- - {dayjs(task.timesheet.createdAt).format('HH:mm:ss')} - - + + ))} From 375f14e4d97ed7c80fdb618b64bf5a200c457270 Mon Sep 17 00:00:00 2001 From: Innocent-akim Date: Thu, 21 Nov 2024 12:27:29 +0200 Subject: [PATCH 5/5] fix: deepscan --- apps/web/lib/features/integrations/calendar/table-time-sheet.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx index b0c4bace3..592c24c89 100644 --- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx +++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx @@ -59,7 +59,6 @@ import { formatDate } from '@/app/helpers'; import { GroupedTimesheet, useTimesheet } from '@/app/hooks/features/useTimesheet'; import { DisplayTimeForTimesheet, TaskNameInfoDisplay, TotalDurationByDate, TotalTimeDisplay } from '../../task/task-displays'; import { TimesheetStatus } from '@/app/interfaces'; -import dayjs from 'dayjs'; export const columns: ColumnDef[] = [ {