From 05bd6ad55aee2d37f5fa5e9cc52c1d237486b6e2 Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Tue, 20 Aug 2024 01:36:42 +0200
Subject: [PATCH 1/8] feat: redirect to 'unassigned' if no oustanding /
 assigned (SOFT FLOW)

---
 apps/web/lib/features/task/task-filters.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
index a519e2c17..afa7f4908 100644
--- a/apps/web/lib/features/task/task-filters.tsx
+++ b/apps/web/lib/features/task/task-filters.tsx
@@ -121,7 +121,7 @@ export function useTaskFilter(profile: I_UserProfilePage) {
 	if (activeTeam?.shareProfileView || canSeeActivity) {
 		tabs.push({
 			tab: 'dailyplan',
-			name: t('common.DAILYPLAN'as DottedLanguageObjectStringPaths) ,
+			name: t('common.DAILYPLAN' as DottedLanguageObjectStringPaths),
 			description: t('task.tabFilter.DAILYPLAN_DESCRIPTION' as DottedLanguageObjectStringPaths),
 			count: profile.tasksGrouped.planned
 		});
@@ -174,8 +174,10 @@ export function useTaskFilter(profile: I_UserProfilePage) {
 			if (!getTotalTasks(todayPlan)) {
 				if (estimatedTotalTime(outstandingPlans).totalTasks) {
 					setTab('dailyplan');
-				} else {
+				} else if (profile.tasksGrouped.assignedTasks.length) {
 					setTab('assigned');
+				} else {
+					setTab('unassigned');
 				}
 			}
 		}
@@ -377,11 +379,7 @@ function InputFilters({ hook, profile }: Props) {
 					</Button>
 				</Tooltip>
 			</TaskUnOrAssignPopover>
-			<AddManualTimeModal
-				closeModal={closeManualTimeModal}
-				isOpen={isManualTimeModalOpen}
-				params='AddTime'
-			/>
+			<AddManualTimeModal closeModal={closeManualTimeModal} isOpen={isManualTimeModalOpen} params="AddTime" />
 		</div>
 	);
 }

From c1bd454af8af1a43f13f08a70b4e80acf7d6620f Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Wed, 21 Aug 2024 22:23:24 +0200
Subject: [PATCH 2/8] fixbug: SOFT FLOW, popups logic when user added the today
 plan yesterday :ok_hand: (#2941)

---
 apps/web/app/hooks/features/useStartStopTimerHandler.ts    | 6 +++++-
 .../daily-plan/add-daily-plan-work-hours-modal.tsx         | 6 +++---
 .../daily-plan/add-task-estimation-hours-modal.tsx         | 7 ++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/hooks/features/useStartStopTimerHandler.ts b/apps/web/app/hooks/features/useStartStopTimerHandler.ts
index 9760a68c0..48c5d74f8 100644
--- a/apps/web/app/hooks/features/useStartStopTimerHandler.ts
+++ b/apps/web/app/hooks/features/useStartStopTimerHandler.ts
@@ -88,7 +88,11 @@ export function useStartStopTimerHandler() {
 						startTimer();
 					}
 				} else {
-					openAddTasksEstimationHoursModal();
+					if (tasksEstimateHoursModalDate != currentDate) {
+						openAddTasksEstimationHoursModal();
+					} else {
+						startTimer();
+					}
 				}
 			} else {
 				startTimer();
diff --git a/apps/web/lib/features/daily-plan/add-daily-plan-work-hours-modal.tsx b/apps/web/lib/features/daily-plan/add-daily-plan-work-hours-modal.tsx
index 115b7c694..aa66a0d35 100644
--- a/apps/web/lib/features/daily-plan/add-daily-plan-work-hours-modal.tsx
+++ b/apps/web/lib/features/daily-plan/add-daily-plan-work-hours-modal.tsx
@@ -28,13 +28,13 @@ export function AddDailyPlanWorkHourModal(props: IAddDailyPlanWorkHoursModalProp
 	const handleCloseModal = useCallback(() => {
 		localStorage.setItem(DAILY_PLAN_ESTIMATE_HOURS_MODAL_DATE, currentDate);
 		closeModal();
-	}, [closeModal, currentDate]);
+		startTimer();
+	}, [closeModal, currentDate, startTimer]);
 
 	const handleSubmit = useCallback(() => {
 		updateDailyPlan({ workTimePlanned }, plan.id ?? '');
-		startTimer();
 		handleCloseModal();
-	}, [handleCloseModal, plan.id, startTimer, updateDailyPlan, workTimePlanned]);
+	}, [handleCloseModal, plan.id, updateDailyPlan, workTimePlanned]);
 
 	return (
 		<Modal isOpen={isOpen} closeModal={handleCloseModal} showCloseIcon={requirePlan ? false : true}>
diff --git a/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx b/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
index f415c0413..dda0385bb 100644
--- a/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
+++ b/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
@@ -31,13 +31,14 @@ export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModa
 	const handleCloseModal = useCallback(() => {
 		localStorage.setItem(TASKS_ESTIMATE_HOURS_MODAL_DATE, currentDate);
 		closeModal();
-	}, [closeModal, currentDate]);
+		startTimer();
+	}, [closeModal, currentDate, startTimer]);
 
 	const handleSubmit = useCallback(() => {
 		updateDailyPlan({ workTimePlanned }, plan.id ?? '');
-		startTimer();
+
 		handleCloseModal();
-	}, [handleCloseModal, plan.id, startTimer, updateDailyPlan, workTimePlanned]);
+	}, [handleCloseModal, plan.id, updateDailyPlan, workTimePlanned]);
 
 	return (
 		<Modal isOpen={isOpen} closeModal={handleCloseModal} showCloseIcon={requirePlan ? false : true}>

From b3c01385861b59773692c4d581a8b0e132489152 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Thu, 22 Aug 2024 07:52:01 +0200
Subject: [PATCH 3/8] Feat: refact timesheet (#2940)

* feat: refact timesheet

* fix: cspell

* fix: setCalendarTimeSheet is defined but never used.

* improv: timesheet
---
 .cspell.json                                  |   1 +
 apps/web/app/[locale]/calendar/component.tsx  | 103 +++++----
 apps/web/app/[locale]/calendar/page.tsx       |  17 +-
 apps/web/components/ui/badge.tsx              |  36 +++
 .../calendar/calendar-component.tsx           |  17 +-
 .../integrations/calendar/helper-calendar.ts  |  91 ++++++++
 .../calendar/setup-full-calendar.tsx          |  21 +-
 .../calendar/setup-time-sheet.tsx             |  13 +-
 .../calendar/table-time-sheet.tsx             | 214 +++++++++---------
 .../calendar/time-sheet-filter-popover.tsx    |  13 +-
 apps/web/lib/features/task/task-filters.tsx   |  26 ++-
 11 files changed, 365 insertions(+), 187 deletions(-)
 create mode 100644 apps/web/components/ui/badge.tsx

diff --git a/.cspell.json b/.cspell.json
index 0da70ed82..7d564cd35 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -33,6 +33,7 @@
 		"Bowser",
 		"Btns",
 		"Konviser",
+		"Ruslan",
 		"Bugsnag",
 		"buildjet",
 		"cacheable",
diff --git a/apps/web/app/[locale]/calendar/component.tsx b/apps/web/app/[locale]/calendar/component.tsx
index 3a44ef27e..4be0c2305 100644
--- a/apps/web/app/[locale]/calendar/component.tsx
+++ b/apps/web/app/[locale]/calendar/component.tsx
@@ -17,6 +17,7 @@ import { CalendarDays } from "lucide-react";
 import React from "react";
 import { DateRange } from "react-day-picker";
 import { LuCalendarDays } from "react-icons/lu";
+import { Input } from "@components/ui/input";
 
 export function HeadCalendar({
     openModal,
@@ -65,54 +66,65 @@ export function HeadTimeSheet({ timesheet }: { timesheet?: timesheetCalendar })
         from: new Date(2022, 0, 20),
         to: addDays(new Date(2022, 0, 20), 20)
     });
-    console.log(timesheet);
     return (
         <div>
             <div className='flex items-center justify-between w-full  dark:!bg-dark--theme h-28'>
                 {timesheet === 'TimeSheet' && (
-                    <div className='flex items-center space-x-5 dark:!bg-dark--theme '>
-                        <div>
-                            <CustomSelect />
-                        </div>
-                        <DatePicker
-                            buttonVariant={'link'}
-                            className="dark:bg-dark--theme-light rounded-lg"
-                            buttonClassName={'decoration-transparent flex items-center w-full  border-gray-300 justify-start text-left font-normal text-black  h-10 border  dark:border-slate-600 rounded-md"'}
-                            customInput={
-                                <>
-                                    <CalendarDays className="h-5 w-5 dark:text-gray-500" />
-                                    <Button
-                                        variant={"outline"}
-                                        className={cn(
-                                            "w-[230px] justify-start text-left font-normal text-black  h-10 border border-transparent dark:border-transparent",
-                                            !date && "text-muted-foreground"
-                                        )}>
-                                        {date?.from ? (
-                                            date.to ? (
-                                                <>
-                                                    {format(date.from, "LLL dd, y")} -{" "}
-                                                    {format(date.to, "LLL dd, y")}
-                                                </>
-                                            ) : (
-                                                format(date.from, "LLL dd, y")
-                                            )
-                                        ) : (
-                                            <span>Pick a date</span>
-                                        )}
-                                    </Button>
-                                </>
-                            }
-                            mode={'range'}
-                            numberOfMonths={2}
-                            initialFocus
-                            defaultMonth={date?.from}
-                            selected={date}
-                            onSelect={(value) => {
-                                value && setDate(value);
-                            }}
+                    <div className="flex justify-between items-center w-full p-2  gap-x-3">
+                        <Input
+                            className="border w-1/4 dark:border-gray-700"
+                            placeholder="Filter time logs"
+                            required
+                            value=""
+                            name="filter"
                         />
-                        <div>
-                            <TimeSheetFilter />
+
+                        <div className='flex items-center justify-end space-x-5 dark:!bg-dark--theme  w-full p-2 '>
+                            <div>
+                                <CustomSelect />
+                            </div>
+                            <div className="">
+                                <DatePicker
+                                    buttonVariant={'link'}
+                                    className="dark:bg-dark--theme-light rounded-lg"
+                                    buttonClassName={'decoration-transparent flex items-center w-full bg-white dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black  h-10 border  dark:border-slate-600 rounded-md"'}
+                                    customInput={
+                                        <>
+                                            <CalendarDays className="h-5 w-5 dark:text-gray-500" />
+                                            <Button
+                                                variant={"outline"}
+                                                className={cn(
+                                                    "w-[260px] justify-start text-left font-normal text-black  h-10 border border-transparent dark:border-transparent ",
+                                                    !date && "text-muted-foreground"
+                                                )}>
+                                                {date?.from ? (
+                                                    date.to ? (
+                                                        <>
+                                                            {format(date.from, "LLL dd, y")} -{" "}
+                                                            {format(date.to, "LLL dd, y")}
+                                                        </>
+                                                    ) : (
+                                                        format(date.from, "LLL dd, y")
+                                                    )
+                                                ) : (
+                                                    <span>Pick a date</span>
+                                                )}
+                                            </Button>
+                                        </>
+                                    }
+                                    mode={'range'}
+                                    numberOfMonths={2}
+                                    initialFocus
+                                    defaultMonth={date?.from}
+                                    selected={date}
+                                    onSelect={(value) => {
+                                        value && setDate(value);
+                                    }}
+                                />
+                            </div>
+                            <div>
+                                <TimeSheetFilter />
+                            </div>
                         </div>
                     </div>
                 )}
@@ -133,9 +145,8 @@ export function CustomSelect() {
     return (
         <Select
             value={selectedValue}
-            onValueChange={handleSelectChange}
-        >
-            <SelectTrigger className="w-[180px] border border-gray-200 dark:border-gray-700  bg-transparent">
+            onValueChange={handleSelectChange}>
+            <SelectTrigger className="w-[180px] border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light">
                 <SelectValue placeholder="Select a daily" />
             </SelectTrigger>
             <SelectContent>
diff --git a/apps/web/app/[locale]/calendar/page.tsx b/apps/web/app/[locale]/calendar/page.tsx
index 1d1472623..4b44f4b62 100644
--- a/apps/web/app/[locale]/calendar/page.tsx
+++ b/apps/web/app/[locale]/calendar/page.tsx
@@ -13,7 +13,7 @@ import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import React, { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
-import { HeadCalendar, HeadTimeSheet } from './component';
+import { HeadCalendar } from './component';
 import { AddManualTimeModal } from 'lib/features/manual-time/add-manual-time-modal';
 import { SetupTimeSheet, timesheetCalendar } from 'lib/features/integrations/calendar';
 
@@ -44,7 +44,7 @@ const CalendarPage = () => {
             case 'Calendar':
                 return <SetupFullCalendar />;
             case 'TimeSheet':
-                return <SetupTimeSheet />;
+                return <SetupTimeSheet timesheet={calendarTimeSheet} />
             default:
                 return null;
         }
@@ -55,15 +55,13 @@ const CalendarPage = () => {
             <MainLayout
                 showTimer={isTrackingEnabled}
                 footerClassName="hidden"
-                className="h-[calc(100vh-22px)] shadow-xl"
+                className="h-full shadow-xl"
             >
                 <AddManualTimeModal
                     closeModal={closeManualTimeModal}
                     isOpen={isManualTimeModalOpen}
                     params='AddManuelTime'
                 />
-
-
                 <div
                     className='fixed top-20 flex flex-col border-b-[1px] dark:border-[#26272C] z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-lg shadow-gray-100 dark:shadow-gray-700 '
                 >
@@ -81,15 +79,14 @@ const CalendarPage = () => {
                             <HeadCalendar
                                 openModal={openManualTimeModal}
                                 timesheet={calendarTimeSheet}
-                                setCalendarTimeSheet={setCalendarTimeSheet} />
-                            <div className='border border-gray-100 dark:border-gray-700 w-full'></div>
-                            <HeadTimeSheet timesheet={calendarTimeSheet} />
+                                setCalendarTimeSheet={setCalendarTimeSheet}
 
+                            />
+                            <div className='border border-gray-100 dark:border-gray-700 w-full'></div>
                         </div>
                     </Container>
                 </div>
-
-                <div className='mt-[325px] mb-40'>
+                <div className='mt-[15vh] mb-32'>
                     <Container fullWidth={fullWidth}>
                         {renderComponent()}
                     </Container>
diff --git a/apps/web/components/ui/badge.tsx b/apps/web/components/ui/badge.tsx
new file mode 100644
index 000000000..304da38fa
--- /dev/null
+++ b/apps/web/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/apps/web/lib/features/integrations/calendar/calendar-component.tsx b/apps/web/lib/features/integrations/calendar/calendar-component.tsx
index 09ae54355..9adbf35d6 100644
--- a/apps/web/lib/features/integrations/calendar/calendar-component.tsx
+++ b/apps/web/lib/features/integrations/calendar/calendar-component.tsx
@@ -62,7 +62,22 @@ const CalendarComponent: React.FC<CalendarComponentProps> = ({
                 dateClick={handleDateClick}
                 eventDrop={handleEventDrop}
                 eventContent={renderEventContent}
-                editable
+                editable={true}
+                dragScroll={true}
+                locale={"pt-br"}
+                timeZone={"UTF"}
+                allDaySlot={false}
+                nowIndicator={true}
+                themeSystem='bootstrap'
+                contentHeight='auto'
+                select={(selected) => {
+                    console.log(selected.start)
+                }}
+                eventResize={(resize) => {
+                    console.log(resize.el.COMMENT_NODE)
+                }}
+
+            // dayPopoverFormat={}
             />
             <style jsx global>{`
                 .fc .fc-daygrid-day.fc-day-today {
diff --git a/apps/web/lib/features/integrations/calendar/helper-calendar.ts b/apps/web/lib/features/integrations/calendar/helper-calendar.ts
index 376cd135b..697efb5e1 100644
--- a/apps/web/lib/features/integrations/calendar/helper-calendar.ts
+++ b/apps/web/lib/features/integrations/calendar/helper-calendar.ts
@@ -1 +1,92 @@
 export type timesheetCalendar = 'TimeSheet' | 'Calendar';
+
+export const statusOptions = [
+    { value: "Approved", label: "Approved" },
+    { value: "Pending", label: "Pending" },
+    { value: "Rejected", label: "Rejected" },
+];
+
+export type TimeSheet = {
+    id: number,
+    task: string,
+    name: string,
+    description: string,
+    employee: string,
+    status: "Approved" | "Pending" | "Rejected",
+    time: string
+}
+
+export const dataSourceTimeSheet: TimeSheet[] = [
+    {
+        id: 1,
+        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+        name: "Gauzy Platform SaaS",
+        description: "Members count 11",
+        employee: "Ruslan Konviser",
+        status: "Approved",
+        time: '08:00h'
+    },
+    {
+        id: 2,
+        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+        name: "Gauzy Platform SaaS",
+        description: "Members count 11",
+        employee: "Ruslan Konviser",
+        status: "Pending",
+        time: '08:00h'
+    },
+    {
+        id: 3,
+        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+        name: "Gauzy Platform SaaS",
+        description: "Members count 11",
+        employee: "Ruslan Konviser",
+        status: "Approved",
+        time: '08:00h'
+    },
+    {
+        id: 4,
+        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+        name: "Gauzy Platform SaaS",
+        description: "Members count 11",
+        employee: "Ruslan Konviser",
+        status: "Pending",
+        time: '08:00h'
+    },
+    {
+        id: 5,
+        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+        name: "Gauzy Platform SaaS",
+        description: "Members count 11",
+        employee: "Ruslan Konviser",
+        status: "Rejected",
+        time: '06:00h'
+    },
+    {
+        id: 6,
+        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+        name: "Gauzy Platform SaaS",
+        description: "Members count 11",
+        employee: "Ruslan Konviser",
+        status: "Pending",
+        time: '06:00h'
+    },
+    {
+        id: 7,
+        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+        name: "Gauzy Platform SaaS",
+        description: "Members count 11",
+        employee: "Ruslan Konviser",
+        status: "Approved",
+        time: '06:00h'
+    },
+    {
+        id: 8,
+        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
+        name: "Gauzy Platform SaaS",
+        description: "Members count 11",
+        employee: "Ruslan Konviser",
+        status: "Approved",
+        time: '06:00h'
+    },
+]
diff --git a/apps/web/lib/features/integrations/calendar/setup-full-calendar.tsx b/apps/web/lib/features/integrations/calendar/setup-full-calendar.tsx
index b7f6ec39b..53029d319 100644
--- a/apps/web/lib/features/integrations/calendar/setup-full-calendar.tsx
+++ b/apps/web/lib/features/integrations/calendar/setup-full-calendar.tsx
@@ -12,6 +12,7 @@ import { YearDateFilter } from './year-picker-filter';
 import CalendarComponent from './calendar-component';
 import { PiTimerBold } from "react-icons/pi";
 import { formatWithSuffix } from 'lib/utils';
+import { useLocalStorageState } from '@app/hooks';
 
 // import { IOrganizationTeamList } from '@app/interfaces';
 
@@ -29,8 +30,10 @@ interface Event {
 
 }
 
+type openDetails = 'open' | 'close';
+
 export function SetupFullCalendar() {
-    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [isDialogOpen, setIsDialogOpen] = useLocalStorageState<openDetails>('calendar_details_persistance', 'close');
     // const [newEventTitle, setNewEventTitle] = useState('');
     const calendarRef = useRef<FullCalendar | null>(null);
     const [selectedDate, setSelectedDate] = useState('');
@@ -82,7 +85,7 @@ export function SetupFullCalendar() {
 
     const handleDateClick = (info: { dateStr: string }) => {
         setSelectedDate(info?.dateStr);
-        setIsDialogOpen((prev) => !prev);
+        setIsDialogOpen('open');
     };
 
     const renderEventContent = (eventInfo: any) => {
@@ -133,7 +136,7 @@ export function SetupFullCalendar() {
                     </div>
                     <div>
                         <Button
-                            className='flex items-center justify-center h-10 rounded-lg'
+                            className='flex items-center justify-center h-10 rounded-lg dark:bg-primary-light'
                             variant='primary'>
                             <SettingFilterIcon className="dark:text-white w-3.5" strokeWidth="1.8" />
                             <span>Filter</span>
@@ -149,7 +152,7 @@ export function SetupFullCalendar() {
                         handleEventDrop={handleEventDrop}
                         renderEventContent={renderEventContent}
                     />
-                    {isDialogOpen && (
+                    {isDialogOpen === 'open' && (
                         <div className={`py-10 w-1/5 m-5 h-full`}>
                             <CardItems selectedDate={selectedDate as any} />
                         </div>
@@ -167,8 +170,8 @@ export function SetupFullCalendar() {
 
 export const CardItems = ({ selectedDate }: { selectedDate: Date }) => {
     return (
-        <div className='flex flex-col w-full h-[90vh] sticky'>
-            <div className='h-full  w-full  border  border-gray-200 dark:border-gray-700 rounded-xl py-4 bg-white flex-grow'>
+        <div className='flex flex-col w-full bg-red-400 md:h-[50vh] lg:h-[90vh] xl:h-[95vh] sticky top-0'>
+            <div className='h-full  w-full  border  border-gray-200 dark:border-gray-700 rounded-xl py-4 bg-white dark:!bg-dark--theme-light flex-grow'>
                 <span className='p-2 text-[16px] text-gray-500 font-bold'>
                     {formatWithSuffix(new Date(selectedDate))}
                 </span>
@@ -186,8 +189,8 @@ export const CardItems = ({ selectedDate }: { selectedDate: Date }) => {
 
 export const CardItemsMember = ({ imageUrl, name, time }: { imageUrl?: string, name?: string, time?: string }) => {
     return (
-        <div className='w-full  flex items-center'>
-            <div className='w-full flex items-center space-x-2 p-1 cursor-pointer hover:bg-gray-100 rounded'>
+        <div className='w-full flex items-center'>
+            <div className='w-full flex items-center space-x-2 p-1 cursor-pointer hover:bg-gray-100 rounded dark:hover:bg-gray-700'>
                 <Image className='text-white p-1 rounded-full flex items-center justify-center h-8 w-8' src={imageUrl!} alt='' width={90} height={90} />
                 <div className='flex items-center space-x-1 w-full'>
                     <span className='text-[14px] font-normal'>{name}</span>
@@ -207,7 +210,7 @@ export const CardItemsProjects = ({ logo, title, totalHours }: { logo?: string,
             <div className='flex items-center w-full'>
                 <Image src={logo!} alt='logos' width={100} height={100} className='h-8 w-8 bg-cover rounded-lg flex items-center justify-center' />
                 <div className='flex items-start flex-col justify-center p-1'>
-                    <span className='font-bold text-[16px] overflow-hidden leading-4'>{title}</span>
+                    <span className='font-bold text-[14px] sm:text-[16px] overflow-hidden leading-4'>{title}</span>
                     <span className='text-gray-400 text-[12px] leading-4'>{totalHours}</span>
                 </div>
             </div>
diff --git a/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
index bbf761212..c2143d44a 100644
--- a/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
@@ -2,13 +2,22 @@
 
 import React from 'react'
 import { DataTableTimeSheet } from './table-time-sheet'
+import { HeadTimeSheet } from '@app/[locale]/calendar/component'
+import { timesheetCalendar } from './helper-calendar'
 
-export function SetupTimeSheet() {
+interface ISetupTimeSheetProps {
+    timesheet?: timesheetCalendar
+}
 
+export function SetupTimeSheet({ timesheet }: ISetupTimeSheetProps) {
 
     return (
         <div className='flex flex-col overflow-hidden py-[32px]'>
-            <div className='flex h-[750px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-dark--theme-light p-4 shadow-lg shadow-gray-100  dark:shadow-gray-700'>
+            <div className='flex flex-col w-full'>
+                <div className='border border-gray-100 dark:border-gray-700 w-full'></div>
+                <HeadTimeSheet timesheet={timesheet} />
+            </div>
+            <div className='flex h-[780px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-dark--theme-light p-4 shadow-lg shadow-gray-100  dark:shadow-gray-700'>
                 <DataTableTimeSheet />
             </div>
         </div>
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 a7316ec29..0a38b4f55 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -13,14 +13,17 @@ import {
     getSortedRowModel,
     useReactTable,
 } from "@tanstack/react-table"
-import { ArrowUpDownIcon, MoreHorizontal } from "lucide-react"
+import { ArrowUpDownIcon, MoreHorizontal, } from "lucide-react"
 import { Button } from "@components/ui/button"
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
-    DropdownMenuLabel,
+    DropdownMenuPortal,
     DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from "@components/ui/dropdown-menu"
 import {
@@ -46,74 +49,17 @@ import {
     MdKeyboardArrowLeft,
     MdKeyboardArrowRight
 } from "react-icons/md";
-import { ConfirmStatusChange } from "."
+import { ConfirmStatusChange, TimeSheet, dataSourceTimeSheet, statusOptions } from "."
 import { useModal } from "@app/hooks"
+import { Checkbox } from "@components/ui/checkbox";
+import { Badge } from "@components/ui/badge"
+
+
+
 
 
 
-const data: TimeSheet[] = [
-    {
-        id: 1,
-        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
-        name: "Gauzy Platform SaaS",
-        description: "Members count 11",
-        employee: "Ruslan Konviser",
-        status: "Approved",
-        time: '08:00h'
-    },
-    {
-        id: 2,
-        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
-        name: "Gauzy Platform SaaS",
-        description: "Members count 11",
-        employee: "Ruslan Konviser",
-        status: "Pending",
-        time: '08:00h'
-    },
-    {
-        id: 3,
-        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
-        name: "Gauzy Platform SaaS",
-        description: "Members count 11",
-        employee: "Ruslan Konviser",
-        status: "Approved",
-        time: '08:00h'
-    },
-    {
-        id: 4,
-        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
-        name: "Gauzy Platform SaaS",
-        description: "Members count 11",
-        employee: "Ruslan Konviser",
-        status: "Pending",
-        time: '08:00h'
-    },
-    {
-        id: 5,
-        task: "chore(deps-dev): bump karma from 5.2.3 to 6.3.16chore",
-        name: "Gauzy Platform SaaS",
-        description: "Members count 11",
-        employee: "Ruslan Konviser",
-        status: "Rejected",
-        time: '06:00h'
-    },
-]
-
-export type TimeSheet = {
-    id: number,
-    task: string,
-    name: string,
-    description: string,
-    employee: string,
-    status: "Approved" | "Pending" | "Rejected",
-    time: string
-}
 
-const statusOptions = [
-    { value: "Approved", label: "Approved" },
-    { value: "Pending", label: "Pending" },
-    { value: "Rejected", label: "Rejected" },
-];
 
 function getStatusColor(status: string) {
     switch (status) {
@@ -131,10 +77,32 @@ function getStatusColor(status: string) {
 
 export const columns: ColumnDef<TimeSheet>[] = [
     {
-        accessorKey: "task",
-        header: "Task",
+        enableHiding: false,
+        id: "select",
+        size: 50,
+        header: ({ table }) => (
+            <div className="gap-x-4 flex items-center" >
+                <Checkbox
+                    checked={
+                        table.getIsAllPageRowsSelected() ||
+                        (table.getIsSomePageRowsSelected() && "indeterminate")
+                    }
+                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                    aria-label="Select all"
+                />
+                <span>Task</span>
+            </div>
+        ),
         cell: ({ row }) => (
-            <div className="capitalize break-words whitespace-break-spaces text-sm sm:text-base">{row.getValue("task")}</div>
+
+            <div className="flex items-center  gap-x-4" >
+                <Checkbox
+                    checked={row.getIsSelected()}
+                    onCheckedChange={(value) => row.toggleSelected(!!value)}
+                    aria-label="Select row"
+                />
+                <span className="capitalize !text-sm break-words whitespace-break-spaces sm:text-base">{row.original.task}</span>
+            </div>
         ),
     },
     {
@@ -162,15 +130,14 @@ export const columns: ColumnDef<TimeSheet>[] = [
             <Button
                 variant="ghost"
                 onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-                className="text-center w-full sm:w-auto text-sm sm:text-base"
-            >
-                Employee
+                className="text-center flex items-center justify-center font-medium w-full sm:w-96 text-sm sm:text-base">
+                <span>Employee</span>
                 <ArrowUpDownIcon className="ml-2 h-4 w-4" />
             </Button>
         ),
         cell: ({ row }) => (
             <div className="text-center font-medium w-full sm:w-96 text-sm sm:text-base">
-                {row.original.employee}
+                <span>  {row.original.employee}</span>
             </div>
         ),
     },
@@ -180,16 +147,15 @@ export const columns: ColumnDef<TimeSheet>[] = [
             <Button
                 variant="ghost"
                 onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-                className="text-center w-full sm:w-auto text-sm sm:text-base"
+                className=" flex items-center justify-center text-center w-full sm:w-auto text-sm sm:text-base"
             >
-                Status
+                <span>Status</span>
                 <ArrowUpDownIcon className="ml-2 h-4 w-4" />
             </Button>
 
         ),
         cell: ({ row }) => {
-
-            return <SelectFilter
+            return <StatusBadge
                 selectedStatus={row.original.status} />
         }
     },
@@ -220,15 +186,12 @@ export const columns: ColumnDef<TimeSheet>[] = [
 
 export function DataTableTimeSheet() {
     const [sorting, setSorting] = React.useState<SortingState>([])
-    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-        []
-    )
-    const [columnVisibility, setColumnVisibility] =
-        React.useState<VisibilityState>({})
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
     const [rowSelection, setRowSelection] = React.useState({})
 
     const table = useReactTable({
-        data,
+        data: dataSourceTimeSheet,
         columns,
         onSortingChange: setSorting,
         onColumnFiltersChange: setColumnFilters,
@@ -251,7 +214,7 @@ export function DataTableTimeSheet() {
 
 
             <div className="w-full">
-                <div className="rounded-md  w-full ">
+                <div className="rounded-md">
                     <Table className=" border dark:border-gray-700">
                         <TableHeader className="w-full border dark:border-gray-700">
                             {table.getHeaderGroups().map((headerGroup) => (
@@ -275,13 +238,14 @@ export function DataTableTimeSheet() {
                             {table.getRowModel().rows?.length ? (
                                 table.getRowModel().rows.map((row) => (
                                     <TableRow
-                                        className=" cursor-pointer border dark:border-gray-700"
+                                        className="cursor-pointer border dark:border-gray-700 font-normal"
                                         key={row.id}
                                         data-state={row.getIsSelected() && "selected"}
                                     >
                                         {row.getVisibleCells().map((cell) => (
-                                            <TableCell key={cell.id}>
+                                            <TableCell aria-checked key={cell.id}>
                                                 {flexRender(
+
                                                     cell.column.columnDef.cell,
                                                     cell.getContext()
                                                 )}
@@ -307,7 +271,8 @@ export function DataTableTimeSheet() {
                         {table.getFilteredSelectedRowModel().rows.length} of{" "}
                         {table.getFilteredRowModel().rows.length} row(s) selected.
                     </div>
-                    <div className="space-x-2 flex items-center">
+                    <div className="gap-x-3 flex items-center">
+                        <span className="text-sm font-medium">Page 1 of 10</span>
                         <Button
                             className="border dark:border-gray-700 text-xl flex items-center justify-center cursor-pointer"
                             variant="outline"
@@ -351,7 +316,36 @@ export function DataTableTimeSheet() {
     )
 }
 
-function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
+
+
+function StatusBadge({ selectedStatus }: { selectedStatus?: string }) {
+
+    const [selected] = React.useState(selectedStatus);
+
+    const getColorClass = () => {
+        switch (selected) {
+            case "Rejected":
+                return "text-red-500 border-red-500 ";
+            case "Approved":
+                return "text-green-500 border-green-500";
+            case "Pending":
+                return "text-orange-500 border-orange-500";
+            default:
+                return "text-gray-500 border-gray-200";
+        }
+
+
+    };
+
+
+    return (
+        <Badge className={`${getColorClass()} bg-transparent rounded-md py-1 px-2 text-center hover:bg-transparent`}
+        >{selected}</Badge>
+    );
+}
+
+
+export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
 
     const { isOpen, closeModal, openModal } = useModal();
     const [selected] = React.useState(selectedStatus);
@@ -424,19 +418,18 @@ const TaskActionMenu = ({ idTasks }: { idTasks: any }) => {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="h-8 w-8 p-0 border text-sm sm:text-base">
+                <Button variant="ghost" className="h-8 w-8 p-0  text-sm sm:text-base">
                     <span className="sr-only">Open menu</span>
                     <MoreHorizontal className="h-4 w-4" />
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-                <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                <DropdownMenuItem onClick={handleCopyPaymentId}>
-                    Copy payment ID
+                <DropdownMenuItem className="cursor-pointer" onClick={handleCopyPaymentId}>
+                    Edit
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem>View customer</DropdownMenuItem>
-                <DropdownMenuItem>View payment details</DropdownMenuItem>
+                <StatusTask />
+                <DropdownMenuItem className="text-red-600 hover:!text-red-600 cursor-pointer">Delete</DropdownMenuItem>
             </DropdownMenuContent>
         </DropdownMenu>
     );
@@ -444,18 +437,35 @@ const TaskActionMenu = ({ idTasks }: { idTasks: any }) => {
 
 const TaskDetails = ({ description, name }: { description: string; name: string }) => {
     return (
-        <div className="flex items-start w-full">
+        <div className="flex items-center gap-x-2 w-full">
             <div className="flex items-center justify-center h-10 w-10 rounded-lg bg-primary dark:bg-primary-light text-white shadow p-2">
                 <span className="lowercase font-medium">ever</span>
             </div>
-            <div className="flex flex-col items-start w-full sm:w-1/2 ml-4">
-                <span className="capitalize font-bold text-sm sm:text-base text-gray-800 dark:text-white leading-4 whitespace-nowrap">
-                    {name}
-                </span>
-                <span className="capitalize font-normal text-sm sm:text-base text-gray-400 leading-4 whitespace-nowrap">
-                    {description}
-                </span>
-            </div>
+            <span className="capitalize font-bold !text-sm sm:text-base text-gray-800 dark:text-white leading-4 whitespace-nowrap">
+                {name}
+            </span>
         </div>
     );
 };
+
+export const StatusTask = () => {
+    return (
+        <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+                <span>Status</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                    {statusOptions?.map((status, index) => (
+                        <DropdownMenuItem key={index} textValue={status.value} className="cursor-pointer">
+                            <div className="flex items-center gap-3">
+                                <div className="h-1 w-1 rounded-full bg-black dark:bg-white"></div>
+                                <span>{status.label}</span>
+                            </div>
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+        </DropdownMenuSub>
+    )
+}
diff --git a/apps/web/lib/features/integrations/calendar/time-sheet-filter-popover.tsx b/apps/web/lib/features/integrations/calendar/time-sheet-filter-popover.tsx
index 253535e39..5c6d8f5da 100644
--- a/apps/web/lib/features/integrations/calendar/time-sheet-filter-popover.tsx
+++ b/apps/web/lib/features/integrations/calendar/time-sheet-filter-popover.tsx
@@ -13,9 +13,7 @@ import { statusOptions } from "@app/constants";
 
 export function TimeSheetFilter() {
 
-
     const { teams, activeTeam } = useOrganizationTeams();
-
     const { activeTeamTask, tasks } = useTeamTasks();
     const [status, setStatus] = useState('');
     const [taskId, setTaskId] = useState<string>('');
@@ -27,9 +25,14 @@ export function TimeSheetFilter() {
         <Popover>
             <PopoverTrigger asChild>
                 <Button
-                    className='flex items-center justify-center h-10 rounded-lg bg-primary dark:bg-primary-light gap-x-3' >
-                    <SettingFilterIcon className="dark:text-white w-3.5" strokeWidth="1.8" />
-                    <span className="dark:text-white">Filter</span>
+                    className='flex items-center justify-center h-10 rounded-lg bg-white dark:bg-dark--theme-light gap-x-3 border dark:border-gray-700 hover:bg-white' >
+                    <SettingFilterIcon className="text-gray-700 dark:text-white w-3.5" strokeWidth="1.8" />
+                    <div className="gap-x-2 flex items-center w-full">
+                        <span className="text-gray-700 dark:text-white">Filter</span>
+                        <div className="bg-gray-700 dark:bg-white h-6 w-6 rounded-full flex items-center  justify-center text-whiten dark:text-gray-700">
+                            <span>6</span>
+                        </div>
+                    </div>
                 </Button>
             </PopoverTrigger>
             <PopoverContent className="w-[430px] shadow">
diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
index afa7f4908..c28d67e1f 100644
--- a/apps/web/lib/features/task/task-filters.tsx
+++ b/apps/web/lib/features/task/task-filters.tsx
@@ -7,7 +7,8 @@ import {
 	useDailyPlan,
 	useOrganizationTeams,
 	useOutsideClick,
-	useModal
+	useModal,
+	useLocalStorageState
 } from '@app/hooks';
 import { IClassName, ITeamTask } from '@app/interfaces';
 import { clsxm } from '@app/utils';
@@ -51,10 +52,10 @@ type StatusFilter = { [x in IStatusType]: string[] };
  */
 export function useTaskFilter(profile: I_UserProfilePage) {
 	const t = useTranslations();
-	const defaultValue = useMemo(
-		() => (typeof window !== 'undefined' ? (window.localStorage.getItem('task-tab') as ITab) || null : 'worked'),
-		[]
-	);
+	// const defaultValue = useMemo(
+	// 	() => (typeof window !== 'undefined' ? (window.localStorage.getItem('task-tab') as ITab) || null : 'worked'),
+	// 	[]
+	// );
 	const { activeTeamManagers, activeTeam } = useOrganizationTeams();
 	const { user } = useAuthenticateUser();
 	const { profileDailyPlans, outstandingPlans, todayPlan } = useDailyPlan();
@@ -68,7 +69,8 @@ export function useTaskFilter(profile: I_UserProfilePage) {
 		[isManagerConnectedUser, profile.userProfile?.id, user?.id]
 	);
 
-	const [tab, setTab] = useState<ITab>(defaultValue || 'worked');
+	// const [tab, setTab] = useState<ITab>(defaultValue || 'worked');
+	const [tab, setTab] = useLocalStorageState<ITab>('task-tab', 'worked')
 	const [filterType, setFilterType] = useState<FilterType>(undefined);
 
 	const [statusFilter, setStatusFilter] = useState<StatusFilter>({} as StatusFilter);
@@ -139,9 +141,9 @@ export function useTaskFilter(profile: I_UserProfilePage) {
 		});
 	}
 
-	useEffect(() => {
-		window.localStorage.setItem('task-tab', tab);
-	}, [tab]);
+	// useEffect(() => {
+	// 	window.localStorage.setItem('task-tab', tab);
+	// }, [tab]);
 
 	useEffect(() => {
 		setTaskName('');
@@ -220,9 +222,9 @@ export function useTaskFilter(profile: I_UserProfilePage) {
 					.every((k) => {
 						return k === 'label'
 							? intersection(
-									statusFilters[k],
-									task['tags'].map((item) => item.name)
-								).length === statusFilters[k].length
+								statusFilters[k],
+								task['tags'].map((item) => item.name)
+							).length === statusFilters[k].length
 							: statusFilters[k].includes(task[k]);
 					});
 			});

From a13141651c31283a629b00849b50458ccdecddb4 Mon Sep 17 00:00:00 2001
From: samuel mbabhazi <111171386+samuelmbabhazi@users.noreply.github.com>
Date: Sat, 24 Aug 2024 00:06:39 +0200
Subject: [PATCH 4/8] remplace hardcodelink in footer componnent (#2946)

* remplace hardcodelink in footer componnent

* fix Cspell error

* Update .env

* Update .env.sample

* Update footer.tsx

* Update footer.tsx

---------

Co-authored-by: Ruslan Konviser <evereq@gmail.com>
---
 apps/web/.env                                |  7 +++++++
 apps/web/.env.sample                         |  6 ++++++
 apps/web/components/layout/footer/footer.tsx |  8 ++++----
 apps/web/lib/layout/footer.tsx               | 11 ++++++++---
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/apps/web/.env b/apps/web/.env
index 184d39de3..947339c52 100644
--- a/apps/web/.env
+++ b/apps/web/.env
@@ -88,6 +88,13 @@ APP_NAME="Ever Teams"
 APP_SIGNATURE="Ever Teams"
 APP_LOGO_URL="https://app.ever.team/assets/ever-teams.png"
 
+
+#Footer links
+NEXT_PUBLIC_EVER_TEAMS_LINK="https://ever.team"
+NEXT_PUBLIC_EVER_PLATFORM_LINK="https://ever.co"
+NEXT_PUBLIC_EVER_LEGAL_TERM="https://demo.gauzy.co/#/pages/legal/terms"
+NEXT_PUBLIC_EVER_LEGAL_PRIVACY="https://demo.gauzy.co/#/pages/legal/privacy"
+
 # Cookies
 NEXT_PUBLIC_COOKIE_DOMAINS=ever.team
 
diff --git a/apps/web/.env.sample b/apps/web/.env.sample
index 6f9f7dfb9..8074779ff 100644
--- a/apps/web/.env.sample
+++ b/apps/web/.env.sample
@@ -50,6 +50,12 @@ APP_NAME='Ever Teams'
 APP_SIGNATURE='Ever Teams'
 APP_LOGO_URL='https://app.ever.team/assets/ever-teams.png'
 
+#Footer links
+NEXT_PUBLIC_EVER_TEAMS_LINK="https://ever.team"
+NEXT_PUBLIC_EVER_PLATFORM_LINK="https://ever.co"
+NEXT_PUBLIC_EVER_LEGAL_TERM="https://demo.gauzy.co/#/pages/legal/terms"
+NEXT_PUBLIC_EVER_LEGAL_PRIVACY="https://demo.gauzy.co/#/pages/legal/privacy"
+
 # Cookies
 NEXT_PUBLIC_COOKIE_DOMAINS=ever.team
 
diff --git a/apps/web/components/layout/footer/footer.tsx b/apps/web/components/layout/footer/footer.tsx
index a7875ce7e..ad7a71a13 100644
--- a/apps/web/components/layout/footer/footer.tsx
+++ b/apps/web/components/layout/footer/footer.tsx
@@ -9,7 +9,7 @@ const Footer = () => {
 				<div className="flex items-center justify-between space-x-1 sm:justify-start sm:space-x-2">
 					<span className="px-1">{t('layout.footer.COPY_RIGHT1', { date: new Date().getFullYear() })}</span>
 					<a
-						href="https://gauzy.team"
+						href={process.env.NEXT_PUBLIC_EVER_TEAMS_LINK || 'https://ever.team'}
 						target="_blank"
 						className="text-primary dark:text-gray-300"
 						rel="noreferrer"
@@ -18,7 +18,7 @@ const Footer = () => {
 					</a>
 					<div>by</div>
 					<a
-						href="https://ever.co"
+						href={process.env.NEXT_PUBLIC_EVER_PLATFORM_LINK || 'https://ever.co'}
 						target="_blank"
 						className="text-primary dark:text-gray-300"
 						rel="noreferrer"
@@ -38,7 +38,7 @@ const Footer = () => {
 			<div className="flex flex-col items-center xs:flex-row sm:flex-col md:flex-row">
 				<div className="flex justify-center w-full space-x-4 text-center">
 					<a
-						href="https://demo.gauzy.co/#/pages/legal/terms"
+						href={process.env.NEXT_PUBLIC_EVER_LEGAL_TERM}
 						target="_blank"
 						className="text-primary dark:text-gray-300"
 						rel="noreferrer"
@@ -46,7 +46,7 @@ const Footer = () => {
 						{t('layout.footer.TERMS')}
 					</a>
 					<a
-						href="https://demo.gauzy.co/#/pages/legal/privacy"
+						href={process.env.NEXT_PUBLIC_EVER_LEGAL_PRIVACY}
 						target="_blank"
 						className="text-primary dark:text-gray-300"
 						rel="noreferrer"
diff --git a/apps/web/lib/layout/footer.tsx b/apps/web/lib/layout/footer.tsx
index 4f9a9f7c7..637fc8762 100644
--- a/apps/web/lib/layout/footer.tsx
+++ b/apps/web/lib/layout/footer.tsx
@@ -24,12 +24,17 @@ export function Footer({ className }: IClassName) {
 		<footer className={clsxm('flex flex-col xs:flex-row justify-around items-center w-full py-6 px-3', className)}>
 			<p className="text-neutral text-xs font-normal leading-4 -tracking-[-0.02em] text-center md:mb-2 mb-7">
 				{t('layout.footer.COPY_RIGHT1', { date: new Date().getFullYear() })}{' '}
-				<Text.Link href="https://ever.team">{t('TITLE')}</Text.Link> {t('layout.footer.BY')}{' '}
-				<Text.Link href="https://ever.co/">{t('layout.footer.COPY_RIGHT4')}</Text.Link>{' '}
+				<Text.Link href={process.env.NEXT_PUBLIC_EVER_TEAMS_LINK || 'https://ever.team'}>
+					{t('TITLE')}
+				</Text.Link>{' '}
+				{t('layout.footer.BY')}{' '}
+				<Text.Link href={process.env.NEXT_PUBLIC_EVER_PLATFORM_LINK || 'https://ever.co'}>
+					{t('layout.footer.COPY_RIGHT4')}
+				</Text.Link>{' '}
 				{t('layout.footer.RIGHTS_RESERVED')}
 			</p>
 			<div className="flex" style={{ marginRight: fullWidth && showChatwoot ? '66px' : 0 }}>
-        <LanguageDropDownWithFlags />
+				<LanguageDropDownWithFlags />
 				<ThemeToggler />
 			</div>
 		</footer>

From dd32864f90ff46dc1f6afedf8352d87954dc7beb Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Tue, 27 Aug 2024 08:51:23 +0200
Subject: [PATCH 5/8] [Feat]: Add Badget Status, Select Filter status, Button
 delete (#2954)

* feat: add badget status, select filter, button delete

* fix: cspell
---
 apps/web/app/[locale]/calendar/page.tsx       |  4 +-
 .../calendar/confirm-change-status.tsx        | 25 ++++++++++++-
 .../calendar/setup-time-sheet.tsx             | 26 +++++++++++--
 .../calendar/table-time-sheet.tsx             | 37 +++----------------
 4 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/apps/web/app/[locale]/calendar/page.tsx b/apps/web/app/[locale]/calendar/page.tsx
index 4b44f4b62..dadeaf474 100644
--- a/apps/web/app/[locale]/calendar/page.tsx
+++ b/apps/web/app/[locale]/calendar/page.tsx
@@ -63,7 +63,7 @@ const CalendarPage = () => {
                     params='AddManuelTime'
                 />
                 <div
-                    className='fixed top-20 flex flex-col border-b-[1px] dark:border-[#26272C] z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-lg shadow-gray-100 dark:shadow-gray-700 '
+                    className='fixed top-20 flex flex-col border-b-[1px] dark:border-gray-800 z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-lg shadow-gray-100 dark:shadow-gray-700 '
                 >
                     <Container fullWidth={fullWidth}>
                         <div className="flex bg-white dark:bg-dark-high flex-row items-start justify-between mt-12">
@@ -82,7 +82,7 @@ const CalendarPage = () => {
                                 setCalendarTimeSheet={setCalendarTimeSheet}
 
                             />
-                            <div className='border border-gray-100 dark:border-gray-700 w-full'></div>
+                            <div className='border border-gray-100 dark:border-gray-800 w-full'></div>
                         </div>
                     </Container>
                 </div>
diff --git a/apps/web/lib/features/integrations/calendar/confirm-change-status.tsx b/apps/web/lib/features/integrations/calendar/confirm-change-status.tsx
index a9b7c914f..4f7b6bbc1 100644
--- a/apps/web/lib/features/integrations/calendar/confirm-change-status.tsx
+++ b/apps/web/lib/features/integrations/calendar/confirm-change-status.tsx
@@ -1,4 +1,5 @@
 import { clsxm } from '@app/utils';
+import { Badge } from '@components/ui/badge';
 import { Button } from '@components/ui/button';
 import { Modal } from 'lib/components'
 import React from 'react'
@@ -49,7 +50,7 @@ export function ConfirmStatusChange({ closeModal, isOpen, newStatus, oldStatus }
 
 const StatusTransition = ({ previousStatus, currentStatus, currentStatusClass, previousStatusClass }: { previousStatus: string; currentStatus: string; currentStatusClass: string; previousStatusClass: string }) => (
     <div className="flex items-center gap-x-2 font-medium">
-        <span className={clsxm(previousStatusClass)}>{previousStatus}</span>
+        <span className={clsxm(previousStatusClass, 'line-through font-normal')}>{previousStatus}</span>
         <span>to</span>
         <span className={clsxm(currentStatusClass)}>{currentStatus}</span>
     </div>
@@ -78,3 +79,25 @@ const CommentInputArea = () => (
         </div>
     </>
 );
+
+
+export function StatusBadge({ selectedStatus, filterNumber }: { selectedStatus?: string, filterNumber?: string }) {
+    const [selected] = React.useState(selectedStatus);
+    const getColorClass = () => {
+        switch (selected) {
+            case "Rejected":
+                return `text-red-500 ${filterNumber ? "border-gray-200 dark:border-gray-700" : " border-red-500"} `;
+            case "Approved":
+                return `text-green-500 ${filterNumber ? "border-gray-200 dark:border-gray-700" : "border-green-500"}`;
+            case "Pending":
+                return `text-orange-500 ${filterNumber ? "border-gray-200 dark:border-gray-700" : "border-orange-500"} `;
+            default:
+                return `text-gray-500 dark:text-gray-200 border-gray-200 dark:border-gray-700 !py-0 font-normal`;
+        }
+    };
+
+    return (
+        <Badge className={`${getColorClass()} bg-transparent rounded-md ${filterNumber ? "font-normal" : 'py-1'}   px-2 text-center hover:bg-transparent`}
+        >{filterNumber}{" "}{selected}</Badge>
+    );
+}
diff --git a/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
index c2143d44a..0d31fde8a 100644
--- a/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/setup-time-sheet.tsx
@@ -1,9 +1,12 @@
 "use client"
 
 import React from 'react'
-import { DataTableTimeSheet } from './table-time-sheet'
+import { DataTableTimeSheet, SelectFilter } from './table-time-sheet'
 import { HeadTimeSheet } from '@app/[locale]/calendar/component'
-import { timesheetCalendar } from './helper-calendar'
+import { statusOptions, timesheetCalendar } from './helper-calendar'
+import { StatusBadge } from './confirm-change-status'
+import { RiDeleteBinLine } from "react-icons/ri";
+
 
 interface ISetupTimeSheetProps {
     timesheet?: timesheetCalendar
@@ -17,7 +20,24 @@ export function SetupTimeSheet({ timesheet }: ISetupTimeSheetProps) {
                 <div className='border border-gray-100 dark:border-gray-700 w-full'></div>
                 <HeadTimeSheet timesheet={timesheet} />
             </div>
-            <div className='flex h-[780px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-dark--theme-light p-4 shadow-lg shadow-gray-100  dark:shadow-gray-700'>
+            <div className='flex flex-col h-[780px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-dark--theme-light p-4 shadow-lg shadow-gray-100  dark:shadow-gray-700'>
+                <div className='w-full pb-3 flex items-center gap-x-4 justify-between'>
+                    <div className='flex gap-x-4'>
+                        <span className='font-medium'>123 Logs Selected</span>
+                        <SelectFilter selectedStatus='Rejected' />
+                        <button className='border flex items-center gap-2 border-gray-200 dark:border-gray-700 text-red-500 h-8 px-2 rounded-md' >
+                            <RiDeleteBinLine />
+                            <span className='!font-normal text-sm'>Delete</span>
+                        </button>
+                    </div>
+                    <div className='flex gap-x-2 h-6'>
+                        <StatusBadge selectedStatus='77:00h' />
+                        {statusOptions.map((items, index) => (
+                            <StatusBadge key={index} selectedStatus={items.value} filterNumber={`${index + 2}`} />
+
+                        ))}
+                    </div>
+                </div>
                 <DataTableTimeSheet />
             </div>
         </div>
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 0a38b4f55..e6c533f9d 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -49,10 +49,9 @@ import {
     MdKeyboardArrowLeft,
     MdKeyboardArrowRight
 } from "react-icons/md";
-import { ConfirmStatusChange, TimeSheet, dataSourceTimeSheet, statusOptions } from "."
+import { ConfirmStatusChange, StatusBadge, TimeSheet, dataSourceTimeSheet, statusOptions } from "."
 import { useModal } from "@app/hooks"
 import { Checkbox } from "@components/ui/checkbox";
-import { Badge } from "@components/ui/badge"
 
 
 
@@ -318,32 +317,6 @@ export function DataTableTimeSheet() {
 
 
 
-function StatusBadge({ selectedStatus }: { selectedStatus?: string }) {
-
-    const [selected] = React.useState(selectedStatus);
-
-    const getColorClass = () => {
-        switch (selected) {
-            case "Rejected":
-                return "text-red-500 border-red-500 ";
-            case "Approved":
-                return "text-green-500 border-green-500";
-            case "Pending":
-                return "text-orange-500 border-orange-500";
-            default:
-                return "text-gray-500 border-gray-200";
-        }
-
-
-    };
-
-
-    return (
-        <Badge className={`${getColorClass()} bg-transparent rounded-md py-1 px-2 text-center hover:bg-transparent`}
-        >{selected}</Badge>
-    );
-}
-
 
 export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
 
@@ -354,11 +327,11 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
     const getColorClass = () => {
         switch (selected) {
             case "Rejected":
-                return "text-red-500 border-red-500 rou";
+                return "text-red-500 border-gray-200";
             case "Approved":
-                return "text-green-500 border-green-500";
+                return "text-green-500 border-gray-200";
             case "Pending":
-                return "text-orange-500 border-orange-500";
+                return "text-orange-500 border-gray-200";
             default:
                 return "text-gray-500 border-gray-200";
         }
@@ -387,7 +360,7 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
                 onValueChange={(value) => onValueChanges(value)}
             >
                 <SelectTrigger
-                    className={`min-w-[120px] w-fit border border-gray-200 dark:border-gray-700 bg-transparent font-medium rounded-xl ${getColorClass()}`}
+                    className={`min-w-[120px] w-fit border border-gray-200 h-8 dark:border-gray-700 bg-transparent font-normal rounded-md ${getColorClass()}`}
                 >
                     <SelectValue
                         placeholder="Select a daily"

From 1de7728b7b0b01d5d431404a653387e96f3cf1e8 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Tue, 27 Aug 2024 08:52:09 +0200
Subject: [PATCH 6/8] feat: ask the user to add selected task if it is not
 included in the today's plan (#2934)

* feat: ask the user to add selected task if it is not included in the today's plan

* feat: user should track planned task

* feat: user should track planned task
---
 .../features/useStartStopTimerHandler.ts      | 41 +++++++++++++++++-
 .../components/shared/timer/timer-card.tsx    | 31 ++++++++++++-
 .../daily-plan/enforce-planed-task-modal.tsx  | 17 ++++----
 apps/web/lib/features/task/task-card.tsx      | 21 +++++++++
 apps/web/lib/features/timer/timer.tsx         | 43 ++++++++++++++++++-
 5 files changed, 138 insertions(+), 15 deletions(-)

diff --git a/apps/web/app/hooks/features/useStartStopTimerHandler.ts b/apps/web/app/hooks/features/useStartStopTimerHandler.ts
index 48c5d74f8..449f888fb 100644
--- a/apps/web/app/hooks/features/useStartStopTimerHandler.ts
+++ b/apps/web/app/hooks/features/useStartStopTimerHandler.ts
@@ -15,6 +15,12 @@ export function useStartStopTimerHandler() {
 		openModal: openEnforcePlannedTaskModal
 	} = useModal();
 
+	const {
+		isOpen: isEnforceTaskSoftModalOpen,
+		closeModal: _enforceTaskSoftCloseModal,
+		openModal: openEnforcePlannedTaskSoftModal
+	} = useModal();
+
 	const {
 		isOpen: isDailyPlanWorkHoursModalOpen,
 		closeModal: dailyPlanWorkHoursCloseModal,
@@ -54,6 +60,11 @@ export function useStartStopTimerHandler() {
 		[activeTeamTask?.id, hasPlan?.tasks]
 	);
 
+	const enforceTaskSoftCloseModal = () => {
+		_enforceTaskSoftCloseModal();
+		openAddTasksEstimationHoursModal();
+	};
+
 	const startStopTimerHandler = useCallback(() => {
 		const currentDate = new Date().toISOString().split('T')[0];
 		const dailyPlanSuggestionModalDate = window && window?.localStorage.getItem(DAILY_PLAN_SUGGESTION_MODAL_DATE);
@@ -61,6 +72,26 @@ export function useStartStopTimerHandler() {
 		const dailyPlanEstimateHoursModalDate =
 			window && window?.localStorage.getItem(DAILY_PLAN_ESTIMATE_HOURS_MODAL_DATE);
 
+		/**
+		 * Check if the active task is planned
+		 * If not, ask the user to add it to the today plan
+		 */
+		const handleCheckSelectedTaskOnTodayPlan = () => {
+			if (hasPlan) {
+				if (isActiveTaskPlaned) {
+					if (tasksEstimateHoursModalDate != currentDate) {
+						openAddTasksEstimationHoursModal();
+					} else {
+						startTimer();
+					}
+				} else {
+					openEnforcePlannedTaskSoftModal();
+				}
+			} else {
+				startTimer();
+			}
+		};
+
 		/**
 		 * Handle missing working hour for a daily plan
 		 */
@@ -81,7 +112,9 @@ export function useStartStopTimerHandler() {
 		 */
 		const handleMissingTasksEstimationHours = () => {
 			if (hasPlan) {
-				if (areAllTasksEstimated) {
+				if (tasksEstimateHoursModalDate != currentDate) {
+					handleCheckSelectedTaskOnTodayPlan();
+				} else if (areAllTasksEstimated) {
 					if (dailyPlanEstimateHoursModalDate != currentDate) {
 						handleMissingDailyPlanWorkHour();
 					} else {
@@ -149,6 +182,7 @@ export function useStartStopTimerHandler() {
 		openAddDailyPlanWorkHoursModal,
 		openAddTasksEstimationHoursModal,
 		openEnforcePlannedTaskModal,
+		openEnforcePlannedTaskSoftModal,
 		openSuggestDailyPlanModal,
 		requirePlan,
 		startTimer,
@@ -170,7 +204,10 @@ export function useStartStopTimerHandler() {
 			openAddTasksEstimationHoursModal,
 			isSuggestDailyPlanModalOpen,
 			suggestDailyPlanCloseModal,
-			openSuggestDailyPlanModal
+			openSuggestDailyPlanModal,
+			isEnforceTaskSoftModalOpen,
+			enforceTaskSoftCloseModal,
+			openEnforcePlannedTaskSoftModal
 		},
 		startStopTimerHandler
 	};
diff --git a/apps/web/components/shared/timer/timer-card.tsx b/apps/web/components/shared/timer/timer-card.tsx
index 985053ddb..797408b31 100644
--- a/apps/web/components/shared/timer/timer-card.tsx
+++ b/apps/web/components/shared/timer/timer-card.tsx
@@ -9,7 +9,8 @@ import { PlayIcon } from '@components/ui/svgs/play-icon';
 import {
 	AddTasksEstimationHoursModal,
 	AddDailyPlanWorkHourModal,
-	EnforcePlanedTaskModal
+	EnforcePlanedTaskModal,
+	SuggestDailyPlanModal
 } from 'lib/features/daily-plan';
 import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
@@ -22,7 +23,8 @@ const Timer = () => {
 		timerStatusFetching,
 		canRunTimer,
 		hasPlan,
-		timerSeconds
+		timerSeconds,
+		startTimer
 	} = useTimer();
 
 	const { activeTaskEstimation } = useTaskStatistics(timerSeconds);
@@ -49,6 +51,25 @@ const Timer = () => {
 			>
 				{timerStatus?.running ? <PauseIcon width={68} height={68} /> : <PlayIcon width={68} height={68} />}
 			</div>
+
+			<SuggestDailyPlanModal
+				isOpen={modals.isSuggestDailyPlanModalOpen}
+				closeModal={modals.suggestDailyPlanCloseModal}
+			/>
+
+			{/**
+			 * Track time on planned task (SOFT FLOW)
+			 */}
+			{hasPlan && activeTeamTask && (
+				<EnforcePlanedTaskModal
+					content={`Would you like to add the task "${activeTeamTask.taskNumber}" to Today's plan?`}
+					closeModal={modals.enforceTaskSoftCloseModal}
+					plan={hasPlan}
+					open={modals.isEnforceTaskSoftModalOpen}
+					task={activeTeamTask}
+				/>
+			)}
+
 			{hasPlan && hasPlan.tasks && (
 				<AddTasksEstimationHoursModal
 					isOpen={modals.isTasksEstimationHoursModalOpen}
@@ -66,8 +87,14 @@ const Timer = () => {
 				/>
 			)}
 
+			{/**
+			 * Track time on planned task (REQUIRE PLAN)
+			 */}
+
 			{requirePlan && hasPlan && activeTeamTask && (
 				<EnforcePlanedTaskModal
+					onOK={startTimer}
+					content={t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
 					closeModal={modals.enforceTaskCloseModal}
 					plan={hasPlan}
 					open={modals.isEnforceTaskModalOpen}
diff --git a/apps/web/lib/features/daily-plan/enforce-planed-task-modal.tsx b/apps/web/lib/features/daily-plan/enforce-planed-task-modal.tsx
index ca3ec01bf..1fabef8df 100644
--- a/apps/web/lib/features/daily-plan/enforce-planed-task-modal.tsx
+++ b/apps/web/lib/features/daily-plan/enforce-planed-task-modal.tsx
@@ -1,38 +1,37 @@
-import { useAuthenticateUser, useDailyPlan, useTimerView } from '@app/hooks';
+import { useAuthenticateUser, useDailyPlan } from '@app/hooks';
 import { IDailyPlan, ITeamTask } from '@app/interfaces';
 import { Button, Card, Modal, Text } from 'lib/components';
-import { useTranslations } from 'next-intl';
-import { useCallback } from 'react';
+import { ReactNode, useCallback } from 'react';
 
 interface IEnforcePlannedTaskModalProps {
 	open: boolean;
 	closeModal: () => void;
 	task: ITeamTask;
 	plan: IDailyPlan;
+	content: ReactNode;
+	onOK?: () => void;
 }
 
 export function EnforcePlanedTaskModal(props: IEnforcePlannedTaskModalProps) {
-	const { closeModal, task, open, plan } = props;
-	const t = useTranslations();
+	const { closeModal, task, open, plan, content, onOK } = props;
 	const { addTaskToPlan, addTaskToPlanLoading } = useDailyPlan();
-	const { startTimer } = useTimerView();
 	const { user } = useAuthenticateUser();
 
 	const handleAddTaskToPlan = useCallback(() => {
 		if (user?.employee && task && plan.id) {
 			addTaskToPlan({ employeeId: user.employee.id, taskId: task.id }, plan.id).then(() => {
 				closeModal();
-				startTimer();
+				onOK?.();
 			});
 		}
-	}, [addTaskToPlan, closeModal, plan.id, startTimer, task, user?.employee]);
+	}, [addTaskToPlan, closeModal, onOK, plan.id, task, user?.employee]);
 
 	return (
 		<Modal isOpen={open} closeModal={closeModal} className="w-[98%] md:w-[530px] relative" showCloseIcon={false}>
 			<Card className="w-full" shadow="custom">
 				<div className="w-full flex flex-col justify-between gap-6">
 					<Text.Heading as="h5" className="mb-3 text-center">
-						{t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
+						{content}
 					</Text.Heading>
 					<div className="w-full flex items-center justify-evenly">
 						<Button
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 2b0709a57..e59d802d9 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -371,6 +371,7 @@ function TimerButtonCall({
 	);
 
 	const requirePlan = useMemo(() => activeTeam?.requirePlanToTrack, [activeTeam?.requirePlanToTrack]);
+	const t = useTranslations();
 
 	/* It's a function that is called when the timer button is clicked. */
 	const startTimerWithTask = useCallback(async () => {
@@ -420,11 +421,25 @@ function TimerButtonCall({
 				disabled={activeTaskStatus ? disabled : task.status === 'closed' || !canTrack}
 				className={clsxm('h-14 w-14', className)}
 			/>
+
 			<SuggestDailyPlanModal
 				isOpen={modals.isSuggestDailyPlanModalOpen}
 				closeModal={modals.suggestDailyPlanCloseModal}
 			/>
 
+			{/**
+			 * Track time on planned task (SOFT FLOW)
+			 */}
+			{hasPlan && activeTeamTask && (
+				<EnforcePlanedTaskModal
+					content={`Would you like to add the task "${activeTeamTask.taskNumber}" to Today's plan?`}
+					closeModal={modals.enforceTaskSoftCloseModal}
+					plan={hasPlan}
+					open={modals.isEnforceTaskSoftModalOpen}
+					task={activeTeamTask}
+				/>
+			)}
+
 			{hasPlan && hasPlan.tasks && (
 				<AddTasksEstimationHoursModal
 					isOpen={modals.isTasksEstimationHoursModalOpen}
@@ -442,8 +457,14 @@ function TimerButtonCall({
 				/>
 			)}
 
+			{/**
+			 * Track time on planned task (REQUIRE PLAN)
+			 */}
+
 			{requirePlan && hasPlan && activeTeamTask && (
 				<EnforcePlanedTaskModal
+					onOK={startTimer}
+					content={t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
 					closeModal={modals.enforceTaskCloseModal}
 					plan={hasPlan}
 					open={modals.isEnforceTaskModalOpen}
diff --git a/apps/web/lib/features/timer/timer.tsx b/apps/web/lib/features/timer/timer.tsx
index c18505ade..7ec6e8c5b 100644
--- a/apps/web/lib/features/timer/timer.tsx
+++ b/apps/web/lib/features/timer/timer.tsx
@@ -36,7 +36,8 @@ export function Timer({ className }: IClassName) {
 		timerHanlder,
 		timerStatus,
 		disabled,
-		hasPlan
+		hasPlan,
+		startTimer
 	} = useTimerView();
 	const { modals, startStopTimerHandler } = useStartStopTimerHandler();
 	const { activeTeam, activeTeamTask } = useTeamTasks();
@@ -145,6 +146,18 @@ export function Timer({ className }: IClassName) {
 					isOpen={modals.isSuggestDailyPlanModalOpen}
 					closeModal={modals.suggestDailyPlanCloseModal}
 				/>
+				{/**
+				 * Track time on planned task (SOFT FLOW)
+				 */}
+				{hasPlan && activeTeamTask && (
+					<EnforcePlanedTaskModal
+						content={`Would you like to add the task "${activeTeamTask.taskNumber}" to Today's plan?`}
+						closeModal={modals.enforceTaskSoftCloseModal}
+						plan={hasPlan}
+						open={modals.isEnforceTaskSoftModalOpen}
+						task={activeTeamTask}
+					/>
+				)}
 
 				{hasPlan && hasPlan.tasks && (
 					<AddTasksEstimationHoursModal
@@ -163,8 +176,14 @@ export function Timer({ className }: IClassName) {
 					/>
 				)}
 
+				{/**
+				 * Track time on planned task (REQUIRE PLAN)
+				 */}
+
 				{requirePlan && hasPlan && activeTeamTask && (
 					<EnforcePlanedTaskModal
+						onOK={startTimer}
+						content={t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
 						closeModal={modals.enforceTaskCloseModal}
 						plan={hasPlan}
 						open={modals.isEnforceTaskModalOpen}
@@ -177,10 +196,11 @@ export function Timer({ className }: IClassName) {
 }
 
 export function MinTimerFrame({ className }: IClassName) {
-	const { hours, minutes, seconds, ms_p, timerStatus, disabled, hasPlan } = useTimerView();
+	const { hours, minutes, seconds, ms_p, timerStatus, disabled, hasPlan, startTimer } = useTimerView();
 	const { modals, startStopTimerHandler } = useStartStopTimerHandler();
 	const { activeTeam, activeTeamTask } = useTeamTasks();
 	const requirePlan = useMemo(() => activeTeam?.requirePlanToTrack, [activeTeam?.requirePlanToTrack]);
+	const t = useTranslations();
 
 	return (
 		<div
@@ -225,6 +245,19 @@ export function MinTimerFrame({ className }: IClassName) {
 				closeModal={modals.suggestDailyPlanCloseModal}
 			/>
 
+			{/**
+			 * Track time on planned task (SOFT FLOW)
+			 */}
+			{hasPlan && activeTeamTask && (
+				<EnforcePlanedTaskModal
+					content={`Would you like to add the task "${activeTeamTask.taskNumber}" to Today's plan?`}
+					closeModal={modals.enforceTaskSoftCloseModal}
+					plan={hasPlan}
+					open={modals.isEnforceTaskSoftModalOpen}
+					task={activeTeamTask}
+				/>
+			)}
+
 			{hasPlan && hasPlan.tasks && (
 				<AddTasksEstimationHoursModal
 					isOpen={modals.isTasksEstimationHoursModalOpen}
@@ -242,8 +275,14 @@ export function MinTimerFrame({ className }: IClassName) {
 				/>
 			)}
 
+			{/**
+			 * Track time on planned task (REQUIRE PLAN)
+			 */}
+
 			{requirePlan && hasPlan && activeTeamTask && (
 				<EnforcePlanedTaskModal
+					onOK={startTimer}
+					content={t('dailyPlan.SUGGESTS_TO_ADD_TASK_TO_TODAY_PLAN')}
 					closeModal={modals.enforceTaskCloseModal}
 					plan={hasPlan}
 					open={modals.isEnforceTaskModalOpen}

From c2014466c6f70137b5e5663222eea6d9ebd5789a Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Tue, 27 Aug 2024 08:53:05 +0200
Subject: [PATCH 7/8] feat:  Implement 'Default' selected task in the planned
 tasks popup (#2947)

* feat:  Implement 'Default' selected task in the planned tasks popup

* feat: add more elements to the 'Planned tasks' popup

---------

Co-authored-by: Ruslan Konviser <evereq@gmail.com>
---
 .../add-task-estimation-hours-modal.tsx       | 110 +++++++++++++-----
 apps/web/lib/features/task/task-displays.tsx  |   2 +-
 2 files changed, 83 insertions(+), 29 deletions(-)

diff --git a/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx b/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
index dda0385bb..dfcff9138 100644
--- a/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
+++ b/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
@@ -1,5 +1,5 @@
 import { TASKS_ESTIMATE_HOURS_MODAL_DATE } from '@app/constants';
-import { useMemo, useCallback, useState } from 'react';
+import { useMemo, useCallback, useState, useEffect } from 'react';
 import { PiWarningCircleFill } from 'react-icons/pi';
 import { Card, InputField, Modal, Text, VerticalSeparator } from 'lib/components';
 import { Button } from '@components/ui/button';
@@ -8,6 +8,8 @@ import { useDailyPlan, useTeamTasks, useTimerView } from '@app/hooks';
 import { TaskNameInfoDisplay } from '../task/task-displays';
 import { TaskEstimate } from '../task/task-estimate';
 import { IDailyPlan, ITeamTask } from '@app/interfaces';
+import clsx from 'clsx';
+import { AddIcon, ThreeCircleOutlineVerticalIcon } from 'assets/svg';
 
 interface IAddTasksEstimationHoursModalProps {
 	closeModal: () => void;
@@ -22,7 +24,7 @@ export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModa
 	const t = useTranslations();
 	const { updateDailyPlan } = useDailyPlan();
 	const { startTimer } = useTimerView();
-	const { activeTeam } = useTeamTasks();
+	const { activeTeam, activeTeamTask, setActiveTask } = useTeamTasks();
 
 	const [workTimePlanned, setworkTimePlanned] = useState<number | undefined>(plan.workTimePlanned);
 	const currentDate = useMemo(() => new Date().toISOString().split('T')[0], []);
@@ -40,6 +42,33 @@ export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModa
 		handleCloseModal();
 	}, [handleCloseModal, plan.id, updateDailyPlan, workTimePlanned]);
 
+	// Put tasks without estimates at the top of the list
+	const sortedTasks = useMemo(
+		() =>
+			[...tasks].sort((t1, t2) => {
+				if ((t1.estimate === null || t1.estimate <= 0) && t2.estimate !== null && t2.estimate > 0) {
+					return -1;
+				} else if (t1.estimate !== null && t1.estimate > 0 && (t2.estimate === null || t2.estimate <= 0)) {
+					return 1;
+				} else {
+					return 0;
+				}
+			}),
+		[tasks]
+	);
+
+	// Set the active task from the today's plan (preferable estimated task)
+	useEffect(() => {
+		if (!sortedTasks.find((task) => task.id == activeTeamTask?.id)) {
+			[...sortedTasks].forEach((task) => {
+				if (task.estimate !== null && task.estimate > 0) {
+					isOpen && setActiveTask(task);
+				}
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isOpen]);
+
 	return (
 		<Modal isOpen={isOpen} closeModal={handleCloseModal} showCloseIcon={requirePlan ? false : true}>
 			<Card className="w-full" shadow="custom">
@@ -52,18 +81,23 @@ export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModa
 							<span className="text-sm">
 								{t('timer.todayPlanSettings.WORK_TIME_PLANNED')} <span className="text-red-600">*</span>
 							</span>
-
-							<InputField
-								type="number"
-								placeholder={t('timer.todayPlanSettings.WORK_TIME_PLANNED_PLACEHOLDER')}
-								className="mb-0 min-w-[350px]"
-								wrapperClassName="mb-0 rounded-lg"
-								onChange={(e) => setworkTimePlanned(parseFloat(e.target.value))}
-								required
-								min={0}
-								value={workTimePlanned}
-								defaultValue={plan.workTimePlanned ?? 0}
-							/>
+							<div className="w-full flex gap-3 h-[3rem]">
+								<InputField
+									type="number"
+									placeholder={t('timer.todayPlanSettings.WORK_TIME_PLANNED_PLACEHOLDER')}
+									className="h-full"
+									wrapperClassName=" h-full"
+									onChange={(e) => setworkTimePlanned(parseFloat(e.target.value))}
+									required
+									noWrapper
+									min={0}
+									value={workTimePlanned}
+									defaultValue={plan.workTimePlanned ?? 0}
+								/>
+								<div className="h-full shrink-0 rounded-lg border w-10 flex items-center justify-center">
+									<AddIcon className="w-4 h-4 text-dark dark:text-white" />
+								</div>
+							</div>
 						</div>
 						<div className="text-sm flex flex-col gap-3">
 							<div className="text-sm flex flex-col gap-3">
@@ -72,20 +106,8 @@ export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModa
 									<span className="text-red-600">*</span>
 								</span>
 								<div className="flex flex-col gap-1">
-									{tasks.map((task, index) => (
-										<Card
-											key={index}
-											shadow="custom"
-											className={
-												'lg:flex items-center justify-between py-3 px-4 md:px-4 hidden min-h-[4.5rem] dark:bg-[#1E2025] border-[0.05rem] dark:border-[#FFFFFF0D] relative !text-xs'
-											}
-										>
-											<div className="min-w-[50%] max-w-[50%]">
-												<TaskNameInfoDisplay task={task} />
-											</div>
-											<VerticalSeparator />
-											<TaskEstimate _task={task} />
-										</Card>
+									{sortedTasks.map((task, index) => (
+										<TaskCard key={index} task={task} />
 									))}
 								</div>
 							</div>
@@ -118,3 +140,35 @@ export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModa
 		</Modal>
 	);
 }
+
+interface ITaskCardProps {
+	task: ITeamTask;
+}
+
+function TaskCard({ task }: ITaskCardProps) {
+	const { setActiveTask, activeTeamTask } = useTeamTasks();
+
+	return (
+		<Card
+			shadow="custom"
+			className={clsx(
+				'lg:flex  items-center justify-between py-3  md:px-4 hidden min-h-[4.5rem] w-[30rem] h-[4.5rem] dark:bg-[#1E2025] border-[0.05rem] dark:border-[#FFFFFF0D] relative !text-xs cursor-pointer',
+				task.id === activeTeamTask?.id && 'border-primary-light border-[0.15rem]'
+			)}
+			onClick={() => setActiveTask(task)}
+		>
+			<div className="min-w-[48%] flex items-center h-full max-w-[50%]">
+				<TaskNameInfoDisplay task={task} />
+			</div>
+			<VerticalSeparator />
+			<div className="h-full  grow flex items-center justify-end gap-2">
+				<div className="h-full flex items-center justify-center gap-1">
+					<span>Estimation :</span> <TaskEstimate _task={task} />
+				</div>
+				<span className="w-4 h-full flex items-center justify-center">
+					<ThreeCircleOutlineVerticalIcon className="  dark:text-[#B1AEBC]" />
+				</span>
+			</div>
+		</Card>
+	);
+}
diff --git a/apps/web/lib/features/task/task-displays.tsx b/apps/web/lib/features/task/task-displays.tsx
index 7813350f9..1f37c924a 100644
--- a/apps/web/lib/features/task/task-displays.tsx
+++ b/apps/web/lib/features/task/task-displays.tsx
@@ -39,7 +39,7 @@ export function TaskNameInfoDisplay({
 	const short: string = taskSizeColor[size].short;
 	return (
 		<Tooltip label={task?.title || ''} placement="top" enabled={(task?.title && task?.title.length > 60) || false}>
-			<span className="flex">
+			<span className="flex items-center">
 				{task && (
 					// Show task issue and task number
 					<div>

From 1e30f3ca761064ef18ea511724242a755291093f Mon Sep 17 00:00:00 2001
From: Paradoxe Ng <paradoxngwasi@gmail.com>
Date: Tue, 27 Aug 2024 08:54:45 +0200
Subject: [PATCH 8/8] Improve Tasks Rendering (#2956)

* Add user profile detail component and scroll pagination

* Improve task rendering performance with LazyRender

* Fix rendering issue with LazyRender component
---
 .../components/UserProfileDetail.tsx          |  77 +++++
 .../app/[locale]/profile/[memberId]/page.tsx  | 268 +++++++-----------
 apps/web/app/hooks/features/usePagination.ts  |  60 +++-
 .../components/pages/task/ChildIssueCard.tsx  |   2 +-
 apps/web/lib/components/lazy-render.tsx       |  56 ++++
 apps/web/lib/features/task/task-input.tsx     |  80 +++---
 apps/web/lib/features/user-profile-tasks.tsx  |  54 ++--
 7 files changed, 370 insertions(+), 227 deletions(-)
 create mode 100644 apps/web/app/[locale]/profile/[memberId]/components/UserProfileDetail.tsx
 create mode 100644 apps/web/lib/components/lazy-render.tsx

diff --git a/apps/web/app/[locale]/profile/[memberId]/components/UserProfileDetail.tsx b/apps/web/app/[locale]/profile/[memberId]/components/UserProfileDetail.tsx
new file mode 100644
index 000000000..527c004c4
--- /dev/null
+++ b/apps/web/app/[locale]/profile/[memberId]/components/UserProfileDetail.tsx
@@ -0,0 +1,77 @@
+import { useTimer } from '@app/hooks';
+import { ITimerStatusEnum, OT_Member } from '@app/interfaces';
+import { isValidUrl } from '@app/utils';
+import { getTimerStatusValue, TimerStatus } from 'lib/features';
+import { cn } from 'lib/utils';
+import { useMemo } from 'react';
+import stc from 'string-to-color';
+import { Avatar, Text } from 'lib/components';
+import { imgTitle } from '@app/helpers';
+import { TableActionPopover } from 'lib/settings/table-action-popover';
+
+export function UserProfileDetail({ member }: { member?: OT_Member }) {
+	const user = useMemo(() => member?.employee.user, [member?.employee.user]);
+
+	const userName = `${user?.firstName || ''} ${user?.lastName || ''}`;
+	const imgUrl = user?.image?.thumbUrl || user?.image?.fullUrl || user?.imageUrl;
+	const imageUrl = useMemo(() => imgUrl, [imgUrl]);
+	const size = 100;
+	const { timerStatus } = useTimer();
+	// const isManager = activeTeamManagers.find((member) => member.employee.user?.id === member?.employee.user?.id);
+	const timerStatusValue: ITimerStatusEnum = useMemo(() => {
+		return getTimerStatusValue(timerStatus, member, false);
+	}, [timerStatus, member]);
+	return (
+		<div className="flex items-center mb-4 space-x-4 md:mb-0">
+			<div
+				className={cn(
+					`w-[100px] h-[100px]`, // removed the size variable from width and height, as passing variables is not supported by tailwind
+					'flex justify-center items-center relative',
+					'rounded-full text-white',
+					'shadow-md text-7xl dark:text-6xl font-thin font-PlusJakartaSans ',
+					!imageUrl && 'dark:border-[0.375rem] dark:border-[#26272C]'
+				)}
+				style={{
+					backgroundColor: `${stc(userName)}80`
+				}}
+			>
+				{imageUrl && isValidUrl(imageUrl) ? (
+					<Avatar
+						size={size}
+						className="relative dark:border-[0.375rem] dark:border-[#26272C]"
+						imageUrl={imageUrl}
+						alt={userName}
+						imageTitle={userName.charAt(0)}
+					>
+						<TimerStatus
+							status={timerStatusValue}
+							className="absolute z-20 bottom-3 right-[10%] -mb-5 border-[0.2956rem] border-white dark:border-[#26272C]"
+							tooltipClassName="mt-24 dark:mt-20 mr-3"
+						/>
+					</Avatar>
+				) : (
+					<>
+						{imgTitle(userName).charAt(0)}
+
+						<TimerStatus
+							status={timerStatusValue}
+							className="absolute z-20 border-[0.2956rem] border-white dark:border-[#26272C]"
+							tooltipClassName="absolute -bottom-[0.625rem] dark:-bottom-[0.75rem] right-[10%] w-[1.875rem] h-[1.875rem] rounded-full"
+						/>
+					</>
+				)}
+			</div>
+			<div className="flex flex-col gap-3.5 w-full">
+				<div className="flex items-center gap-x-4">
+					<Text.Heading as="h3" className="text-2xl md:text-4xl">
+						{user?.firstName} {user?.lastName}
+					</Text.Heading>
+					<div className="h-8  w-8">
+						<TableActionPopover member={member!} status="profile" />
+					</div>
+				</div>
+				<Text className="text-lg text-gray-500">{user?.email}</Text>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/app/[locale]/profile/[memberId]/page.tsx b/apps/web/app/[locale]/profile/[memberId]/page.tsx
index cfe785764..3901d6dc4 100644
--- a/apps/web/app/[locale]/profile/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/profile/[memberId]/page.tsx
@@ -1,20 +1,15 @@
 'use client';
 
 /* eslint-disable no-mixed-spaces-and-tabs */
-import { imgTitle } from '@app/helpers';
-import { useAuthenticateUser, useDailyPlan, useOrganizationTeams, useTimer, useUserProfilePage } from '@app/hooks';
-import { ITimerStatusEnum, OT_Member } from '@app/interfaces';
-import { clsxm, isValidUrl } from '@app/utils';
-import clsx from 'clsx';
+import { useAuthenticateUser, useDailyPlan, useOrganizationTeams, useUserProfilePage } from '@app/hooks';
 import { withAuthentication } from 'lib/app/authenticator';
-import { Avatar, Breadcrumb, Button, Container, Text, VerticalSeparator } from 'lib/components';
+import { Breadcrumb, Button, Container, Text, VerticalSeparator } from 'lib/components';
 import { ArrowLeftIcon } from 'assets/svg';
-import { TaskFilter, Timer, TimerStatus, UserProfileTask, getTimerStatusValue, useTaskFilter } from 'lib/features';
+import { TaskFilter, Timer, UserProfileTask, useTaskFilter } from 'lib/features';
 import { MainHeader, MainLayout } from 'lib/layout';
 import Link from 'next/link';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
-import stc from 'string-to-color';
 
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { fullWidthState } from '@app/stores/fullWidth';
@@ -23,7 +18,8 @@ import { AppsTab } from 'lib/features/activity/apps';
 import { VisitedSitesTab } from 'lib/features/activity/visited-sites';
 import { activityTypeState } from '@app/stores/activity-type';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@components/ui/resizable';
-import { TableActionPopover } from 'lib/settings/table-action-popover';
+import { UserProfileDetail } from './components/UserProfileDetail';
+import { cn } from 'lib/utils';
 // import { ActivityCalendar } from 'lib/features/activity/calendar';
 
 export type FilterTab = 'Tasks' | 'Screenshots' | 'Apps' | 'Visited Sites';
@@ -90,179 +86,105 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 		getEmployeeDayPlans(profile.member?.employeeId ?? '');
 	}, [getEmployeeDayPlans, profile.member?.employeeId]);
 
-	return (
-		<>
-			{Array.isArray(members) && members.length && !profile.member ? (
-				<MainLayout>
-					<div
-						ref={profile.loadTaskStatsIObserverRef}
-						className="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2"
-					>
-						<div className="flex flex-col justify-center items-center gap-5">
-							<Text className="text-[40px] font-bold text-center text-[#282048] dark:text-light--theme">
-								{t('common.MEMBER')} {t('common.NOT_FOUND')}!
-							</Text>
-
-							<Text className=" font-light text-center text-gray-400">
-								{t('pages.profile.MEMBER_NOT_FOUND_MSG_1')}
-							</Text>
+	if (Array.isArray(members) && members.length && !profile.member) {
+		return (
+			<MainLayout>
+				<div
+					ref={profile.loadTaskStatsIObserverRef}
+					className="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2"
+				>
+					<div className="flex flex-col justify-center items-center gap-5">
+						<Text className="text-[40px] font-bold text-center text-[#282048] dark:text-light--theme">
+							{t('common.MEMBER')} {t('common.NOT_FOUND')}!
+						</Text>
+
+						<Text className=" font-light text-center text-gray-400">
+							{t('pages.profile.MEMBER_NOT_FOUND_MSG_1')}
+						</Text>
+
+						<Button className="m-auto font-normal rounded-lg ">
+							<Link href="/">{t('pages.profile.GO_TO_HOME')}</Link>
+						</Button>
+					</div>
+				</div>
+			</MainLayout>
+		);
+	}
 
-							<Button className="m-auto font-normal rounded-lg ">
-								<Link href="/">{t('pages.profile.GO_TO_HOME')}</Link>
-							</Button>
+	return (
+		<MainLayout showTimer={(headerSize <= 11.8 && isTrackingEnabled) || !profileIsAuthUser}>
+			<ResizablePanelGroup direction="vertical">
+				<ResizablePanel
+					defaultSize={30}
+					maxSize={48}
+					className={cn(headerSize < 20 ? '!overflow-hidden' : '!overflow-visible')}
+					onResize={(size) => setHeaderSize(size)}
+				>
+					<MainHeader fullWidth={fullWidth} className={cn(hookFilterType && ['pb-0'], 'pb-2')}>
+						{/* Breadcrumb */}
+						<div className="flex items-center gap-8">
+							<Link href="/">
+								<ArrowLeftIcon className="w-6 h-6" />
+							</Link>
+
+							<Breadcrumb paths={breadcrumb} className="text-sm" />
 						</div>
-					</div>
-				</MainLayout>
-			) : (
-				<MainLayout showTimer={(headerSize <= 11.8 && isTrackingEnabled) || !profileIsAuthUser}>
-					<ResizablePanelGroup direction="vertical">
-						<ResizablePanel
-							defaultSize={30}
-							maxSize={48}
-							className={clsxm(headerSize < 20 ? '!overflow-hidden' : '!overflow-visible')}
-							onResize={(size) => setHeaderSize(size)}
-						>
-							<MainHeader fullWidth={fullWidth} className={clsxm(hookFilterType && ['pb-0'], 'pb-2')}>
-								{/* Breadcrumb */}
-								<div className="flex items-center gap-8">
-									<Link href="/">
-										<ArrowLeftIcon className="w-6 h-6" />
-									</Link>
 
-									<Breadcrumb paths={breadcrumb} className="text-sm" />
-								</div>
+						{/* User Profile Detail */}
+						<div className="flex flex-col items-center justify-between py-5 md:py-10 md:flex-row">
+							<UserProfileDetail member={profile.member} />
 
-								{/* User Profile Detail */}
-								<div className="flex flex-col items-center justify-between py-5 md:py-10 md:flex-row">
-									<UserProfileDetail member={profile.member} />
-									{profileIsAuthUser && isTrackingEnabled && (
-										<Timer
-											className={clsxm(
-												'p-5 rounded-2xl shadow-xlcard',
-												'dark:border-[0.125rem] dark:border-[#28292F]',
-												'dark:bg-[#1B1D22]'
-											)}
-										/>
+							{profileIsAuthUser && isTrackingEnabled && (
+								<Timer
+									className={cn(
+										'p-5 rounded-2xl shadow-xlcard',
+										'dark:border-[0.125rem] dark:border-[#28292F]',
+										'dark:bg-[#1B1D22]'
 									)}
-								</div>
-								{/* TaskFilter */}
-								<TaskFilter profile={profile} hook={hook} />
-							</MainHeader>
-							{/* <div className="p-1">
+								/>
+							)}
+						</div>
+						{/* TaskFilter */}
+						<TaskFilter profile={profile} hook={hook} />
+					</MainHeader>
+					{/* <div className="p-1">
 								<ActivityCalendar />
 							</div> */}
-						</ResizablePanel>
-						<ResizableHandle withHandle />
-						<ResizablePanel defaultSize={65} maxSize={95} className="!overflow-y-scroll custom-scrollbar">
-							{hook.tab == 'worked' && canSeeActivity && (
-								<Container fullWidth={fullWidth} className="py-8">
-									<div className={clsxm('flex justify-start items-center gap-4 mt-3')}>
-										{Object.keys(activityScreens).map((filter, i) => (
-											<div
-												key={i}
-												className="flex cursor-pointer justify-start items-center gap-4"
-											>
-												{i !== 0 && <VerticalSeparator />}
-												<div
-													className={clsxm(
-														'text-gray-500',
-														activityFilter == filter && 'text-black dark:text-white'
-													)}
-													onClick={() => changeActivityFilter(filter as FilterTab)}
-												>
-													{filter}
-												</div>
-											</div>
-										))}
+				</ResizablePanel>
+				<ResizableHandle withHandle />
+				<ResizablePanel defaultSize={65} maxSize={95} className="!overflow-y-scroll custom-scrollbar">
+					{hook.tab == 'worked' && canSeeActivity && (
+						<Container fullWidth={fullWidth} className="py-8">
+							<div className={cn('flex justify-start items-center gap-4 mt-3')}>
+								{Object.keys(activityScreens).map((filter, i) => (
+									<div key={i} className="flex cursor-pointer justify-start items-center gap-4">
+										{i !== 0 && <VerticalSeparator />}
+										<div
+											className={cn(
+												'text-gray-500',
+												activityFilter == filter && 'text-black dark:text-white'
+											)}
+											onClick={() => changeActivityFilter(filter as FilterTab)}
+										>
+											{filter}
+										</div>
 									</div>
-								</Container>
-							)}
-
-							<Container fullWidth={fullWidth} className="mb-10">
-								{hook.tab !== 'worked' || activityFilter == 'Tasks' ? (
-									<UserProfileTask profile={profile} tabFiltered={hook} />
-								) : (
-									activityScreens[activityFilter] ?? null
-								)}
-							</Container>
-						</ResizablePanel>
-					</ResizablePanelGroup>
-				</MainLayout>
-			)}
-		</>
+								))}
+							</div>
+						</Container>
+					)}
+
+					<Container fullWidth={fullWidth} className="mb-10">
+						{hook.tab !== 'worked' || activityFilter == 'Tasks' ? (
+							<UserProfileTask profile={profile} tabFiltered={hook} paginateTasks={true} />
+						) : (
+							activityScreens[activityFilter] ?? null
+						)}
+					</Container>
+				</ResizablePanel>
+			</ResizablePanelGroup>
+		</MainLayout>
 	);
 });
 
-function UserProfileDetail({ member }: { member?: OT_Member }) {
-	const user = useMemo(() => member?.employee.user, [member?.employee.user]);
-
-	const userName = `${user?.firstName || ''} ${user?.lastName || ''}`;
-	const imgUrl = user?.image?.thumbUrl || user?.image?.fullUrl || user?.imageUrl;
-	const imageUrl = useMemo(() => imgUrl, [imgUrl]);
-	const size = 100;
-	const { timerStatus } = useTimer();
-	// const isManager = activeTeamManagers.find((member) => member.employee.user?.id === member?.employee.user?.id);
-	const timerStatusValue: ITimerStatusEnum = useMemo(() => {
-		return getTimerStatusValue(timerStatus, member, false);
-	}, [timerStatus, member]);
-	return (
-		<div className="flex items-center mb-4 space-x-4 md:mb-0">
-
-			<div
-				className={clsx(
-					`w-[100px] h-[100px]`, // removed the size variable from width and height, as passing variables is not supported by tailwind
-					'flex justify-center items-center relative',
-					'rounded-full text-white',
-					'shadow-md text-7xl dark:text-6xl font-thin font-PlusJakartaSans ',
-					!imageUrl && 'dark:border-[0.375rem] dark:border-[#26272C]'
-				)}
-				style={{
-					backgroundColor: `${stc(userName)}80`
-				}}
-			>
-
-				{imageUrl && isValidUrl(imageUrl) ? (
-					<Avatar
-						size={size}
-						className="relative dark:border-[0.375rem] dark:border-[#26272C]"
-						imageUrl={imageUrl}
-						alt={userName}
-						imageTitle={userName.charAt(0)}
-					>
-
-						<TimerStatus
-							status={timerStatusValue}
-							className="absolute z-20 bottom-3 right-[10%] -mb-5 border-[0.2956rem] border-white dark:border-[#26272C]"
-							tooltipClassName="mt-24 dark:mt-20 mr-3"
-						/>
-
-					</Avatar>
-				) : (
-					<>
-
-						{imgTitle(userName).charAt(0)}
-
-						<TimerStatus
-							status={timerStatusValue}
-							className="absolute z-20 border-[0.2956rem] border-white dark:border-[#26272C]"
-							tooltipClassName="absolute -bottom-[0.625rem] dark:-bottom-[0.75rem] right-[10%] w-[1.875rem] h-[1.875rem] rounded-full"
-						/>
-					</>
-				)}
-			</div>
-			<div className="flex flex-col gap-3.5 w-full">
-				<div className='flex items-center gap-x-4'>
-					<Text.Heading as="h3" className="text-2xl md:text-4xl">
-						{user?.firstName} {user?.lastName}
-					</Text.Heading>
-					<div className='h-8  w-8'>
-						<TableActionPopover member={member!} status='profile' />
-					</div>
-				</div>
-				<Text className="text-lg text-gray-500">{user?.email}</Text>
-			</div>
-		</div>
-	);
-}
-
 export default withAuthentication(Profile, { displayName: 'ProfilePage' });
diff --git a/apps/web/app/hooks/features/usePagination.ts b/apps/web/app/hooks/features/usePagination.ts
index 2d7e686f7..3b4630b7b 100644
--- a/apps/web/app/hooks/features/usePagination.ts
+++ b/apps/web/app/hooks/features/usePagination.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 export function usePagination<T>(items: T[], defaultItemsPerPage = 10) {
 	const [itemOffset, setItemOffset] = useState(0);
@@ -24,3 +24,61 @@ export function usePagination<T>(items: T[], defaultItemsPerPage = 10) {
 		currentItems
 	};
 }
+
+export function useScrollPagination<T>({
+	enabled,
+	defaultItemsPerPage = 10,
+	items,
+	scrollableElement
+}: {
+	items: T[];
+	enabled?: boolean;
+	defaultItemsPerPage?: number;
+	scrollableElement?: HTMLElement | null;
+}) {
+	const [slicedItems, setSlicedItems] = useState(items.slice(0, defaultItemsPerPage));
+	const [page, setPage] = useState(1);
+
+	const $scrollableElement = useRef<HTMLElement | null>(null);
+
+	$scrollableElement.current = scrollableElement || $scrollableElement.current;
+
+	useEffect(() => {
+		if (enabled) {
+			setPage(1);
+			setSlicedItems(items.slice(0, defaultItemsPerPage));
+		}
+	}, [enabled, items]);
+
+	useEffect(() => {
+		const container = $scrollableElement.current;
+		if (!container || !enabled) return;
+
+		const handleScroll = () => {
+			if (
+				container.scrollTop + container.clientHeight >=
+				container.scrollHeight - 100 // Adjust this value for how close to the bottom you want to trigger loading
+			) {
+				setPage((prevPage) => prevPage + 1);
+			}
+		};
+
+		container.addEventListener('scroll', handleScroll);
+
+		return () => {
+			container.removeEventListener('scroll', handleScroll);
+		};
+	}, [$scrollableElement.current, enabled]);
+
+	useEffect(() => {
+		const newItems = items.slice(0, defaultItemsPerPage * page);
+		if (items.length > newItems.length) {
+			setSlicedItems((prevItems) => (prevItems.length === newItems.length ? prevItems : newItems));
+		}
+	}, [page, items, defaultItemsPerPage]);
+
+	return {
+		slicedItems: enabled ? slicedItems : items,
+		scrollableElement: $scrollableElement
+	};
+}
diff --git a/apps/web/components/pages/task/ChildIssueCard.tsx b/apps/web/components/pages/task/ChildIssueCard.tsx
index 3b5999936..7f2614e2d 100644
--- a/apps/web/components/pages/task/ChildIssueCard.tsx
+++ b/apps/web/components/pages/task/ChildIssueCard.tsx
@@ -115,7 +115,7 @@ function CreateChildTask({ modal, task }: { modal: IHookModal; task: ITeamTask }
 
 	return (
 		<Modal isOpen={modal.isOpen} closeModal={modal.closeModal}>
-			<div className="w-[98%] md:w-[42rem]  relative">
+			<div className="w-[98%] md:w-[45rem]  relative">
 				{loading && (
 					<div className="absolute inset-0 bg-black/30 z-10 flex justify-center items-center">
 						<SpinnerLoader />
diff --git a/apps/web/lib/components/lazy-render.tsx b/apps/web/lib/components/lazy-render.tsx
new file mode 100644
index 000000000..a698459e6
--- /dev/null
+++ b/apps/web/lib/components/lazy-render.tsx
@@ -0,0 +1,56 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+
+type Props<T> = {
+	items: T[];
+	children?: (item: T, index: number) => ReactNode;
+	itemsPerPage?: number;
+};
+
+/**
+ * Lazy Render based on
+ * Queues the render function to be called during a browser's idle periods.
+ * @param param0
+ * @returns
+ */
+export function LazyRender<T extends object>({ items, children, itemsPerPage = 20 }: Props<T>) {
+	const [slicedItems, setSlicedItems] = useState<T[]>([]);
+	const [page, setPage] = useState(1);
+
+	useEffect(() => {
+		if (!('requestIdleCallback' in window)) {
+			setSlicedItems(items);
+			return;
+		}
+
+		let cancelableIdlCallback = requestIdleCallback(function callback(deadline) {
+			console.log('Called Lazy Render');
+			if (deadline.timeRemaining() < 1) {
+				cancelableIdlCallback = requestIdleCallback(callback);
+				return;
+			}
+
+			const newItems = items.slice(0, itemsPerPage * page);
+
+			if (items.length > newItems.length) {
+				setSlicedItems((prevItems) => (prevItems.length === newItems.length ? prevItems : newItems));
+
+				// Increment the page to trigger the next render
+				setPage((p) => p + 1);
+			}
+		});
+
+		return () => {
+			window.cancelIdleCallback(cancelableIdlCallback);
+		};
+	}, [page, items]);
+
+	return (
+		<>
+			{slicedItems.map((item, i) => {
+				const key = 'id' in item ? (item.id as any) : i;
+
+				return <React.Fragment key={key}>{children ? children(item, i) : undefined}</React.Fragment>;
+			})}
+		</>
+	);
+}
diff --git a/apps/web/lib/features/task/task-input.tsx b/apps/web/lib/features/task/task-input.tsx
index 0a320fb9a..fb68e6990 100644
--- a/apps/web/lib/features/task/task-input.tsx
+++ b/apps/web/lib/features/task/task-input.tsx
@@ -37,6 +37,7 @@ import { ActiveTaskPropertiesDropdown, ActiveTaskSizesDropdown, ActiveTaskStatus
 import { useTranslations } from 'next-intl';
 import { useInfinityScrolling } from '@app/hooks/useInfinityFetch';
 import { ObserverComponent } from '@components/shared/Observer';
+import { LazyRender } from 'lib/components/lazy-render';
 
 type Props = {
 	task?: Nullable<ITeamTask>;
@@ -613,43 +614,50 @@ function TaskCard({
 
 				<Divider className="mt-4" />
 				{/* Task list */}
-				<ul className={assignTaskPopup ? "py-6 max-h-[40vh] overflow-y-auto" : "py-6 max-h-56 overflow-y-auto"}>
-					{forParentChildRelationship &&
-						data?.map((task, i) => {
-							const last = (datas.filteredTasks?.length || 0) - 1 === i;
-							const active = datas.inputTask === task;
-
-							return (
-								<li key={task.id} ref={active ? activeTaskEl : undefined}>
-									<TaskItem
-										task={task}
-										selected={active}
-										onClick={onItemClick}
-										className="cursor-pointer"
-									/>
-									<ObserverComponent isLast={i === data.length - 1} getNextData={nextOffset} />
-									{!last && <Divider className="my-5" />}
-								</li>
-							);
-						})}
-					{!forParentChildRelationship &&
-						datas.filteredTasks?.map((task, i) => {
-							const last = (datas.filteredTasks?.length || 0) - 1 === i;
-							const active = datas.inputTask === task;
-
-							return (
-								<li key={task.id} ref={active ? activeTaskEl : undefined}>
-									<TaskItem
-										task={task}
-										selected={active}
-										onClick={onItemClick}
-										className="cursor-pointer"
-									/>
+				<ul className={assignTaskPopup ? 'py-6 max-h-[40vh] overflow-y-auto' : 'py-6 max-h-56 overflow-y-auto'}>
+					{forParentChildRelationship && (
+						<LazyRender items={data || []}>
+							{(task, i) => {
+								const last = (datas.filteredTasks?.length || 0) - 1 === i;
+								const active = datas.inputTask === task;
+
+								return (
+									<li key={task.id} ref={active ? activeTaskEl : undefined}>
+										<TaskItem
+											task={task}
+											selected={active}
+											onClick={onItemClick}
+											className="cursor-pointer"
+										/>
+										<ObserverComponent isLast={i === data.length - 1} getNextData={nextOffset} />
+										{!last && <Divider className="my-5" />}
+									</li>
+								);
+							}}
+						</LazyRender>
+					)}
 
-									{!last && <Divider className="my-5" />}
-								</li>
-							);
-						})}
+					{!forParentChildRelationship && (
+						<LazyRender items={datas.filteredTasks || []}>
+							{(task, i) => {
+								const last = (datas.filteredTasks?.length || 0) - 1 === i;
+								const active = datas.inputTask === task;
+
+								return (
+									<li key={task.id} ref={active ? activeTaskEl : undefined}>
+										<TaskItem
+											task={task}
+											selected={active}
+											onClick={onItemClick}
+											className="cursor-pointer"
+										/>
+
+										{!last && <Divider className="my-5" />}
+									</li>
+								);
+							}}
+						</LazyRender>
+					)}
 
 					{(forParentChildRelationship && updatedTaskList && updatedTaskList.length === 0) ||
 						(!forParentChildRelationship && datas.filteredTasks && datas.filteredTasks.length === 0 && (
diff --git a/apps/web/lib/features/user-profile-tasks.tsx b/apps/web/lib/features/user-profile-tasks.tsx
index fcd17d383..12c913b02 100644
--- a/apps/web/lib/features/user-profile-tasks.tsx
+++ b/apps/web/lib/features/user-profile-tasks.tsx
@@ -4,20 +4,25 @@ import { UserProfilePlans } from 'lib/features';
 import { TaskCard } from './task/task-card';
 import { I_TaskFilter } from './task/task-filters';
 import { useTranslations } from 'next-intl';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ScreenCalendar } from './activity/screen-calendar';
+import { cn } from 'lib/utils';
+import { useScrollPagination } from '@app/hooks/features/usePagination';
+
 type Props = {
 	tabFiltered: I_TaskFilter;
 	profile: I_UserProfilePage;
+	paginateTasks?: boolean;
 };
 
 /**
- * It renders a list of tasks, with the first task being the active task, and the rest being the last
- * 24 hours of tasks
+ * It displays a list of tasks, the first task being the active task and the rest being the last 24 hours of tasks
  * @param  - `profile` - The user profile page data.
  * @returns A component that displays a user's profile page.
  */
-export function UserProfileTask({ profile, tabFiltered }: Props) {
+export function UserProfileTask({ profile, paginateTasks, tabFiltered }: Props) {
+	const [scrollableContainer, setScrollableContainer] = useState<HTMLDivElement | null>(null);
+
 	const t = useTranslations();
 	// Get current timer seconds
 	const { time, timerStatus } = useLiveTimerStatus();
@@ -31,10 +36,22 @@ export function UserProfileTask({ profile, tabFiltered }: Props) {
 		() => tasks.filter((t) => (profile.member?.running == true ? t.id !== profile.activeUserTeamTask?.id : t)),
 		[profile.activeUserTeamTask?.id, profile.member?.running, tasks]
 	);
-	// const data = otherTasks.length < 10 ? otherTasks : data;
 
-	// const { total, onPageChange, itemsPerPage, itemOffset, endOffset, setItemsPerPage, currentItems } =
-	// 	usePagination(otherTasks);
+	const { slicedItems } = useScrollPagination({
+		enabled: !!paginateTasks,
+		items: otherTasks,
+		scrollableElement: scrollableContainer,
+		defaultItemsPerPage: 20
+	});
+
+	useEffect(() => {
+		// Use the native element query since the ResizablePanel
+		// does not forward any HTML reference
+		const scrollable = document.querySelector<HTMLDivElement>('div.custom-scrollbar');
+		if (scrollable) {
+			setScrollableContainer(scrollable);
+		}
+	}, []);
 
 	return (
 		<div className="mt-10">
@@ -66,10 +83,12 @@ export function UserProfileTask({ profile, tabFiltered }: Props) {
 						isAuthUser={profile.isAuthUser}
 						activeAuthTask={true}
 						profile={profile}
-						taskBadgeClassName={`	${profile.activeUserTeamTask?.issueType === 'Bug'
-							? '!px-[0.3312rem] py-[0.2875rem]'
-							: '!px-[0.375rem] py-[0.375rem]'
-							} rounded-sm`}
+						taskBadgeClassName={cn(
+							profile.activeUserTeamTask?.issueType === 'Bug'
+								? '!px-[0.3312rem] py-[0.2875rem]'
+								: '!px-[0.375rem] py-[0.375rem]',
+							'rounded-sm'
+						)}
 						taskTitleClassName="mt-[0.0625rem]"
 					/>
 				)}
@@ -87,19 +106,22 @@ export function UserProfileTask({ profile, tabFiltered }: Props) {
 
 			{tabFiltered.tab !== 'dailyplan' && (
 				<ul className="flex flex-col gap-4">
-					{otherTasks.map((task) => {
+					{slicedItems.map((task) => {
 						return (
 							<li key={task.id}>
 								<TaskCard
+									key={task.id}
 									task={task}
 									isAuthUser={profile.isAuthUser}
 									activeAuthTask={false}
 									viewType={tabFiltered.tab === 'unassigned' ? 'unassign' : 'default'}
 									profile={profile}
-									taskBadgeClassName={`${task.issueType === 'Bug'
-										? '!px-[0.3312rem] py-[0.2875rem]'
-										: '!px-[0.375rem] py-[0.375rem]'
-										} rounded-sm`}
+									taskBadgeClassName={cn(
+										task.issueType === 'Bug'
+											? '!px-[0.3312rem] py-[0.2875rem]'
+											: '!px-[0.375rem] py-[0.375rem]',
+										'rounded-sm'
+									)}
 									taskTitleClassName="mt-[0.0625rem]"
 								/>
 							</li>