Skip to content

Commit

Permalink
Merge pull request #3490 from ever-co/develop
Browse files Browse the repository at this point in the history
Release
  • Loading branch information
evereq authored Dec 28, 2024
2 parents f8efa83 + 2798295 commit 4c163c0
Show file tree
Hide file tree
Showing 28 changed files with 684 additions and 153 deletions.
6 changes: 4 additions & 2 deletions apps/web/app/[locale]/page-component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
Expand All @@ -56,7 +58,7 @@ function MainPage() {
}, [setFullWidth]);

if (!online) {
return <Offline />;
return <Offline showTimer={timerStatus?.running} />;
}
return (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
@@ -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
67 changes: 46 additions & 21 deletions apps/web/app/[locale]/timesheet/[memberId]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
32 changes: 20 additions & 12 deletions apps/web/app/hooks/features/useTimelogFilterOptions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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([]);
Expand Down Expand Up @@ -84,6 +91,7 @@ export function useTimelogFilterOptions() {
generateTimeOptions,
setPuTimesheetStatus,
puTimesheetStatus,
isUserAllowedToAccess
isUserAllowedToAccess,
normalizeText
};
}
Loading

0 comments on commit 4c163c0

Please sign in to comment.