Merge pull request #3266 from ever-co/feat/grouped-timesheet-display

Feat: Add grouped display for timesheet data by date

apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx

@@ -9,9 +9,9 @@ interface ITimesheetFilter {
     openModal: () => void,
     closeModal: () => void,
     t: TranslationHooks,
-    initDate?: TimesheetFilterDateProps
+    initDate?: Pick<TimesheetFilterDateProps, 'initialRange' | 'onChange' | 'maxDate' | 'minDate'>
 }
-    
+
 export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate }: ITimesheetFilter,) {
     return (
         <>

apps/web/app/[locale]/timesheet/[memberId]/page.tsx

@@ -8,7 +8,7 @@ import { withAuthentication } from 'lib/app/authenticator';
 import { Breadcrumb, Container } from 'lib/components';
 import { MainLayout } from 'lib/layout';
 
-import { useAuthenticateUser, useDailyPlan, useLocalStorageState, useModal, useOrganizationTeams } from '@app/hooks';
+import { useAuthenticateUser, useLocalStorageState, useModal, useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { useAtomValue } from 'jotai';
@@ -42,11 +42,12 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
         to: endOfDay(new Date()),
     });
 
-    const { sortedPlans } = useDailyPlan();
     const { timesheet } = useTimesheet({
         startDate: dateRange.from ?? "",
         endDate: dateRange.to ?? ""
     });
+
+
     const {
         isOpen: isManualTimeModalOpen,
         openModal: openManualTimeModal,
@@ -162,7 +163,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
                             />
                             <div className='h-[calc(100vh-_291px)] mt-3 overflow-y-auto border border-gray-200 rounded-lg dark:border-gray-800'>
                                 {timesheetNavigator === 'ListView' ?
-                                    <TimesheetView data={sortedPlans} />
+                                    <TimesheetView data={timesheet} />
                                     : <CalendarView />
                                 }
                             </div>

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

@@ -5,12 +5,15 @@ import { useQuery } from '../useQuery';
 import { useCallback, useEffect } from 'react';
 import { getTaskTimesheetLogsApi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
+import { ITimeSheet } from '@/app/interfaces';
 
 interface TimesheetParams {
     startDate: Date | string;
     endDate: Date | string;
 }
 
+
+
 export function useTimesheet({
     startDate,
     endDate,
@@ -42,9 +45,26 @@ export function useTimesheet({
     useEffect(() => {
         getTaskTimesheet({ startDate, endDate });
     }, [getTaskTimesheet, startDate, endDate]);
+
+
+    const groupByDate = (items: ITimeSheet[]) => {
+        const groupedByDate = items.reduce((acc: Record<string, ITimeSheet[]>, item) => {
+            const date = new Date(item.createdAt).toISOString().split('T')[0];
+            if (!acc[date]) {
+                acc[date] = [];
+            }
+            acc[date].push(item);
+            return acc;
+        }, {});
+        return Object.keys(groupedByDate).map((date) => ({
+            date,
+            tasks: groupedByDate[date]
+        })) as [];
+    }
+
     return {
         loadingTimesheet,
-        timesheet,
+        timesheet: groupByDate(timesheet),
         getTaskTimesheet,
     };
 }

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

@@ -225,7 +225,6 @@ export function DataTableTimeSheet({ data }: { data?: IDailyPlan[] }) {
                 console.error(`Unsupported action: ${action}`);
         }
     };
-    console.log("================>", data)
 
     return (
         <div className="w-full dark:bg-dark--theme">