Release

apps/web/app/[locale]/page-component.tsx

@@ -2,7 +2,7 @@
 
 'use client';
 import React, { useEffect, useState } from 'react';
-import { useOrganizationTeams } from '@app/hooks';
+import { useOrganizationTeams, useTimerView } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import NoTeam from '@components/pages/main/no-team';
 import { withAuthentication } from 'lib/app/authenticator';
@@ -34,6 +34,8 @@ function MainPage() {
 	const t = useTranslations();
 	const [headerSize] = useState(10);
 	const { isTeamMember, isTrackingEnabled, activeTeam } = useOrganizationTeams();
+	const { timerStatus } = useTimerView();
+
 	const [fullWidth, setFullWidth] = useAtom(fullWidthState);
 	const [view, setView] = useAtom(headerTabs);
 	const path = usePathname();
@@ -56,7 +58,7 @@ function MainPage() {
 	}, [setFullWidth]);
 
 	if (!online) {
-		return <Offline />;
+		return <Offline showTimer={timerStatus?.running} />;
 	}
 	return (
 		<>

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

@@ -188,7 +188,6 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         className='w-full font-medium dark:text-white'
                         options={activeTeam?.members || []}
                         onChange={(value) => {
-                            console.log(value)
                             updateFormState('employeeId', value)
                         }}
                         renderOption={(option) => (

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

@@ -171,7 +171,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 			closeModal={closeModal}
 			isOpen={isOpen}
 			showCloseIcon
-			title={'Edit Task'}
+			title={t('common.EDIT_TASK')}
 			className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[32rem] justify-start h-[auto]"
 			titleClass="font-bold flex justify-start w-full">
 			<form onSubmit={handleUpdateSubmit} className="flex flex-col w-full">

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

@@ -1,3 +1,4 @@
+import { useTimesheet } from '@/app/hooks/features/useTimesheet';
 import { clsxm } from '@/app/utils';
 import { Modal } from '@/lib/components';
 import { useTranslations } from 'next-intl';
@@ -8,23 +9,44 @@ export interface IRejectSelectedModalProps {
 	onReject: (reason: string) => void;
 	minReasonLength?: number;
 	maxReasonLength?: number;
+	selectTimesheetId?: string[];
 }
+/**
+ * A modal for rejecting selected timesheet entries.
+ *
+ * @param isOpen - If true, show the modal. Otherwise, hide the modal.
+ * @param closeModal - A function to close the modal.
+ * @param maxReasonLength - The maximum length of the rejection reason.
+ * @param onReject - A function to call when the user rejects the selected entries.
+ * @param minReasonLength - The minimum length of the rejection reason.
+ * @param selectTimesheetId - The IDs of the timesheet entries to be rejected.
+ *
+ * @returns A modal component.
+ */
 export function RejectSelectedModal({
 	isOpen,
 	closeModal,
 	maxReasonLength,
 	onReject,
-	minReasonLength
+	minReasonLength,
+	selectTimesheetId
 }: IRejectSelectedModalProps) {
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [reason, setReason] = useState('');
+	const { updateTimesheetStatus, setSelectTimesheetId } = useTimesheet({});
+
 	const t = useTranslations();
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
 		setIsSubmitting(true);
 		try {
-			await onReject(reason);
-			closeModal();
+			updateTimesheetStatus({
+				status: 'DENIED',
+				ids: selectTimesheetId || [],
+			}).then(() => {
+				closeModal();
+				setSelectTimesheetId([])
+			}).catch((error) => console.error(error));
 		} finally {
 			setIsSubmitting(false);
 		}

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

@@ -157,3 +157,24 @@ export const PlusIcon = () => <svg width="16" height="16" viewBox="0 0 16 16" fi
     <path d="M3.99609 8H11.9961" stroke="#282048" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
     <path d="M7.99609 12V4" stroke="#282048" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
 </svg>
+
+
+/**
+ * ArrowLeftIcon
+ *
+ * Renders an arrow pointing left using SVG.
+ *
+ * @returns {React.ReactElement} - The rendered arrow left icon component.
+ */
+export const ArrowLeftIcon = () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.95345 8.02279L6.95346 8.02278C6.96648 8.00977 6.96648 7.98868 6.95346 7.97566L6.95345 7.97566L2.68679 3.70899L2.68678 3.70898C2.67376 3.69597 2.65267 3.69597 2.63966 3.70898L2.63964 3.709C2.62663 3.72201 2.62663 3.7431 2.63964 3.75611L2.63965 3.75612L6.52919 7.64567L6.88274 7.99922L6.52919 8.35278L2.63968 12.2422C2.63967 12.2423 2.63966 12.2423 2.63965 12.2423M6.95345 8.02279L2.2861 12.6431C2.07781 12.4347 2.07781 12.097 2.2861 11.8887L2.63965 12.2423M6.95345 8.02279L2.68684 12.2895M6.95345 8.02279L2.6396 12.2895M2.63965 12.2423C2.62664 12.2553 2.62663 12.2764 2.6396 12.2895M2.63965 12.2423L2.6396 12.2895M2.6396 12.2895C2.65263 12.3025 2.67381 12.3025 2.68684 12.2895M2.68684 12.2895L2.68678 12.2895L3.04034 12.6431L2.68684 12.2895ZM9.08679 3.70899L9.08678 3.70898C9.07376 3.69597 9.05267 3.69597 9.03966 3.70898L9.03964 3.709C9.02663 3.72201 9.02663 3.7431 9.03964 3.75611L9.03965 3.75612L12.9292 7.64567L13.2828 7.99922L12.9292 8.35278L9.03968 12.2422C9.02662 12.2553 9.02662 12.2765 9.03968 12.2895C9.0527 12.3025 9.07378 12.3025 9.08679 12.2895L9.08679 3.70899ZM9.08679 3.70899L13.3535 7.9756M9.08679 3.70899L13.3535 7.9756M13.3535 7.9756L13.3535 7.97566C13.3665 7.98867 13.3665 8.00977 13.3535 8.02279L13.3535 7.9756ZM13.3535 8.02284L9.08684 12.2895L13.3535 8.02284Z" fill="#09090B" stroke="#18181B" />
+</svg>
+
+
+
+
+
+
+export const ArrowRightIcon = () => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.95345 8.02279L6.95346 8.02278C6.96648 8.00977 6.96648 7.98868 6.95346 7.97566L6.95345 7.97566L2.68679 3.70899L2.68678 3.70898C2.67376 3.69597 2.65267 3.69597 2.63966 3.70898L2.63964 3.709C2.62663 3.72201 2.62663 3.7431 2.63964 3.75611L2.63965 3.75612L6.52919 7.64567L6.88274 7.99922L6.52919 8.35278L2.63968 12.2422C2.63967 12.2423 2.63966 12.2423 2.63965 12.2423M6.95345 8.02279L2.2861 12.6431C2.07781 12.4347 2.07781 12.097 2.2861 11.8887L2.63965 12.2423M6.95345 8.02279L2.68684 12.2895M6.95345 8.02279L2.6396 12.2895M2.63965 12.2423C2.62664 12.2553 2.62663 12.2764 2.6396 12.2895M2.63965 12.2423L2.6396 12.2895M2.6396 12.2895C2.65263 12.3025 2.67381 12.3025 2.68684 12.2895M2.68684 12.2895L2.68678 12.2895L3.04034 12.6431L2.68684 12.2895ZM9.08679 3.70899L9.08678 3.70898C9.07376 3.69597 9.05267 3.69597 9.03966 3.70898L9.03964 3.709C9.02663 3.72201 9.02663 3.7431 9.03964 3.75611L9.03965 3.75612L12.9292 7.64567L13.2828 7.99922L12.9292 8.35278L9.03968 12.2422C9.02662 12.2553 9.02662 12.2765 9.03968 12.2895C9.0527 12.3025 9.07378 12.3025 9.08679 12.2895L9.08679 3.70899ZM9.08679 3.70899L13.3535 7.9756M9.08679 3.70899L13.3535 7.9756M13.3535 7.9756L13.3535 7.97566C13.3665 7.98867 13.3665 8.00977 13.3535 8.02279L13.3535 7.9756ZM13.3535 8.02284L9.08684 12.2895L13.3535 8.02284Z" fill="#09090B" stroke="#18181B" />
+</svg>

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

@@ -0,0 +1,85 @@
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink } from '@components/ui/pagination'
+import React from 'react'
+import { MdKeyboardDoubleArrowLeft, MdKeyboardDoubleArrowRight } from 'react-icons/md';
+interface TimesheetPaginationProps {
+    totalPages?: number;
+    onPageChange?: (page: number) => void;
+    nextPage?: () => void;
+    previousPage?: () => void;
+    goToPage: (page: number) => void;
+    currentPage?: number;
+    getPageNumbers: () => (number | string)[];
+    dates?: string[];
+    totalGroups?: number
+
+}
+
+/**
+ * A component for paginating timesheet data.
+ *
+ * @param {TimesheetPaginationProps} props - The props for the component.
+ * @param {number} [props.totalPages] - The total number of pages.
+ * @param {(page: number) => void} [props.onPageChange] - A function to call when the page is changed.
+ * @param {(page: number) => void} props.goToPage - A function to call when the user navigates to a specific page.
+ * @param {() => void} props.nextPage - A function to call when the user navigates to the next page.
+ * @param {() => void} props.previousPage - A function to call when the user navigates to the previous page.
+ * @param {number} [props.currentPage] - The current page number.
+ * @param {() => (number | string)[]} props.getPageNumbers - A function to get an array of page numbers.
+ *
+ * @returns {React.ReactElement} - The component element.
+ */
+function TimesheetPagination({ totalPages, onPageChange, goToPage, nextPage, previousPage, currentPage, getPageNumbers, dates, totalGroups }: TimesheetPaginationProps) {
+    return (
+        // totalPages > 1
+        <>
+            {totalPages && totalPages > 1 && (
+
+                <Pagination className='flex flex-row justify-between items-center  gap-[327px] w-full h-[64px] rounded-b-[6px] p-1'>
+                    <div className='text-[#7E7991] font-medium w-full'>
+                        Page {currentPage} of {totalPages} ({dates?.length} items of {totalGroups})
+                    </div>
+                    <PaginationContent className='flex w-full justify-end'>
+
+                        <PaginationItem>
+                            <button
+                                className='box-border flex flex-row justify-center items-center p-2 gap-2 w-8 h-8 bg-white dark:bg-dark--theme-light border border-gray-200 dark:border-gray-800 shadow-sm rounded-[6px]'
+                                onClick={previousPage}
+                                disabled={currentPage === 1} >
+                                <MdKeyboardDoubleArrowLeft />
+
+                            </button>
+                        </PaginationItem>
+                        {getPageNumbers().map((pageNumber, index) => (
+                            <PaginationItem key={index}>
+                                {pageNumber === '...' ? (
+                                    <PaginationEllipsis
+                                        className='box-border cursor-pointer flex flex-row justify-center items-center p-2 gap-2 w-8 h-8 dark:bg-dark--theme-light border border-gray-200 dark:border-gray-800  shadow-sm rounded-[6px]'
+                                    />
+                                ) : (
+                                    <PaginationLink
+                                        className='box-border cursor-pointer flex flex-row justify-center items-center p-2 gap-2 w-8 h-8 dark:bg-dark--theme-light border border-gray-200 dark:border-gray-800 shadow-sm rounded-[6px]'
+                                        isActive={currentPage === pageNumber}
+                                        onClick={() => goToPage(pageNumber as number)}>
+                                        {pageNumber}
+                                    </PaginationLink>
+                                )}
+                            </PaginationItem>
+                        ))}
+                        <PaginationItem>
+                            <button
+                                disabled={currentPage === totalPages}
+                                className='box-border flex flex-row justify-center items-center p-2 gap-2 w-8 h-8 dark:bg-dark--theme-light border border-gray-200 dark:border-gray-800 shadow-sm rounded-[6px]'
+                                onClick={nextPage}>
+                                <MdKeyboardDoubleArrowRight />
+                            </button>
+                        </PaginationItem>
+                    </PaginationContent>
+                </Pagination>
+            )
+            }
+        </>
+    )
+
+}
+
+export default TimesheetPagination

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

@@ -21,9 +21,12 @@ import { differenceBetweenHours, getGreeting, secondsToTime } from '@/app/helper
 import { useTimesheet } from '@/app/hooks/features/useTimesheet';
 import { endOfMonth, startOfMonth } from 'date-fns';
 import TimesheetDetailModal from './components/TimesheetDetailModal';
+import { useTimesheetPagination } from '@/app/hooks/features/useTimesheetPagination';
+import TimesheetPagination from './components/TimesheetPagination';
 
 type TimesheetViewMode = 'ListView' | 'CalendarView';
 export type TimesheetDetailMode = 'Pending' | 'MenHours' | 'MemberWork';
+const TIMESHEET_PAGE_SIZE = 10;
 
 type ViewToggleButtonProps = {
 	mode: TimesheetViewMode;
@@ -52,34 +55,35 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 		to: endOfMonth(new Date()),
 	});
 
-	const { timesheet, statusTimesheet, loadingTimesheet, isManage } = useTimesheet({
+	const { timesheet: filterDataTimesheet, statusTimesheet, loadingTimesheet, isManage, timesheetGroupByDays } = useTimesheet({
 		startDate: dateRange.from!,
 		endDate: dateRange.to!,
-		timesheetViewMode: timesheetNavigator
+		timesheetViewMode: timesheetNavigator,
+		inputSearch: search
 	});
 
+	const {
+		paginatedGroups,
+		currentPage,
+		totalPages,
+		goToPage,
+		nextPage,
+		previousPage,
+		getPageNumbers,
+		totalGroups,
+		dates
+	} = useTimesheetPagination({
+		data: filterDataTimesheet,
+		pageSize: TIMESHEET_PAGE_SIZE
+	});;
+
+
+
 	React.useEffect(() => {
 		getOrganizationProjects();
 	}, [getOrganizationProjects])
 
-	const lowerCaseSearch = useMemo(() => search?.toLowerCase() ?? '', [search]);
-	const filterDataTimesheet = useMemo(() => {
-		const filteredTimesheet =
-			timesheet
-				.filter((v) =>
-					v.tasks.some(
-						(task) =>
-							task.task?.title?.toLowerCase()?.includes(lowerCaseSearch) ||
-							task.employee?.fullName?.toLowerCase()?.includes(lowerCaseSearch) ||
-							task.project?.name?.toLowerCase()?.includes(lowerCaseSearch)
-					)
-				);
 
-		return filteredTimesheet;
-	}, [
-		timesheet,
-		lowerCaseSearch,
-	]);
 	const {
 		isOpen: isManualTimeModalOpen,
 		openModal: openManualTimeModal,
@@ -119,6 +123,10 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 		],
 		[activeTeam?.name, currentLocale, t]
 	);
+	const shouldRenderPagination =
+		timesheetNavigator === 'ListView' ||
+		(timesheetGroupByDays === 'Daily' && timesheetNavigator === 'CalendarView');
+
 	return (
 		<>
 			{isTimesheetDetailOpen
@@ -246,16 +254,33 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 							{timesheetNavigator === 'ListView' ? (
 								<TimesheetView
 									user={user}
-									data={filterDataTimesheet}
+									data={paginatedGroups}
 									loading={loadingTimesheet}
 								/>
 							) : (
 								<CalendarView
 									user={user}
-									data={filterDataTimesheet}
+									data={
+										shouldRenderPagination ?
+											paginatedGroups :
+											filterDataTimesheet
+									}
 									loading={loadingTimesheet}
 								/>
 							)}
+							{shouldRenderPagination && (
+								<TimesheetPagination
+									currentPage={currentPage}
+									totalPages={totalPages}
+									onPageChange={goToPage}
+									getPageNumbers={getPageNumbers}
+									goToPage={goToPage}
+									nextPage={nextPage}
+									previousPage={previousPage}
+									dates={dates}
+									totalGroups={totalGroups}
+								/>
+							)}
 						</div>
 
 					</Container>

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

@@ -13,7 +13,7 @@ export function useTimelogFilterOptions() {
     const [timesheetGroupByDays, setTimesheetGroupByDays] = useAtom(timesheetGroupByDayState);
     const [puTimesheetStatus, setPuTimesheetStatus] = useAtom(timesheetUpdateStatus)
     const [selectedItems, setSelectedItems] = React.useState<{ status: string; date: string }[]>([]);
-    const [selectTimesheetId, setSelectTimesheetId] = React.useState<string[]>([])
+    const [selectTimesheetId, setSelectTimesheetId] = React.useState<TimesheetLog[]>([])
 
     const employee = employeeState;
     const project = projectState;
@@ -27,6 +27,14 @@ export function useTimelogFilterOptions() {
         ];
         return user?.role.name ? allowedRoles.includes(user.role.name as RoleNameEnum) : false;
     };
+    const normalizeText = (text: string | undefined | null): string => {
+        if (!text) return '';
+        return text
+            .toLowerCase()
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .trim();
+    };
 
     const generateTimeOptions = (interval = 15) => {
         const totalSlots = (24 * 60) / interval; // Total intervals in a day
@@ -40,23 +48,22 @@ export function useTimelogFilterOptions() {
         });
     };
 
-    const handleSelectRowTimesheet = (items: string) => {
+    const handleSelectRowTimesheet = (items: TimesheetLog) => {
         setSelectTimesheetId((prev) => prev.includes(items) ? prev.filter((filter) => filter !== items) : [...prev, items])
     }
 
     const handleSelectRowByStatusAndDate = (logs: TimesheetLog[], isChecked: boolean) => {
-        setSelectTimesheetId((prev) => {
-            const logIds = logs.map((item) => item.id);
+        setSelectTimesheetId((prev: TimesheetLog[]) => {
+            const isLogIncluded = (log: TimesheetLog, list: TimesheetLog[]) =>
+                list.some((item) => item.id === log.id);
 
-            if (isChecked) {
-                return [...new Set([...prev, ...logIds])];
-            } else {
-                return prev.filter((id) => !logIds.includes(id));
+            if (!isChecked) {
+                return prev.filter((prevLog) => !logs.some((log) => log.id === prevLog.id));
             }
+            const newLogs = logs.filter((log) => !isLogIncluded(log, prev));
+            return [...prev, ...newLogs];
         });
-    }
-
-
+    };
 
     React.useEffect(() => {
         return () => setSelectTimesheetId([]);
@@ -84,6 +91,7 @@ export function useTimelogFilterOptions() {
         generateTimeOptions,
         setPuTimesheetStatus,
         puTimesheetStatus,
-        isUserAllowedToAccess
+        isUserAllowedToAccess,
+        normalizeText
     };
 }