From 1a1d0c677377db3c1f3aa57501465ab7fb85c248 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Mon, 11 Nov 2024 23:37:52 +0200
Subject: [PATCH 01/13] [Feat]: Timesheet Filter Calendar (#3305)

* refactor: Add FilterCalendar component for improved timesheet  selection in calendar view

* feat: add clear filter button to reset selected items

* fix:coderabbitai[bot]

* fix: deepscan-disable-line

* fix: logic

* fix: logic
---
 .../components/TimeSheetFilterPopover.tsx     |  29 +++--
 .../[memberId]/components/TimesheetCard.tsx   |   2 +-
 .../[memberId]/components/TimesheetFilter.tsx |  14 +--
 .../components/TimesheetFilterDate.tsx        | 107 ++++++++++++++++--
 .../[memberId]/components/TimesheetView.tsx   |   4 +-
 .../[locale]/timesheet/[memberId]/page.tsx    |  29 +++--
 apps/web/app/hooks/features/useTimesheet.ts   |  39 ++++---
 apps/web/app/interfaces/IProject.ts           |   1 +
 apps/web/app/interfaces/ITask.ts              |   2 +-
 apps/web/app/interfaces/timer/ITimerLog.ts    |   3 +
 .../services/client/api/timer/timer-log.ts    |   3 +-
 .../components/custom-select/multi-select.tsx |  24 ++++
 .../calendar/table-time-sheet.tsx             |  15 ++-
 apps/web/lib/features/task/task-issue.tsx     |  18 ++-
 14 files changed, 229 insertions(+), 61 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
index 364542878..743a0e4ab 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
@@ -1,7 +1,8 @@
 import { useOrganizationTeams, useTeamTasks } from "@app/hooks";
 import { Button } from "@components/ui/button";
 import { statusOptions } from "@app/constants";
-import { MultiSelect } from "lib/components/custom-select/multi-select";
+import { MultiSelect } from "lib/components/custom-select";
+import React, { useEffect } from "react";
 import {
     Popover,
     PopoverContent,
@@ -9,13 +10,22 @@ import {
 } from "@components/ui/popover";
 import { SettingFilterIcon } from "@/assets/svg";
 import { useTranslations } from "next-intl";
+import { clsxm } from "@/app/utils";
 
 
 
 export function TimeSheetFilterPopover() {
+    const [shouldRemoveItems, setShouldRemoveItems] = React.useState(false);
     const { activeTeam } = useOrganizationTeams();
     const { tasks } = useTeamTasks();
     const t = useTranslations();
+
+    useEffect(() => {
+        if (shouldRemoveItems) {
+            setShouldRemoveItems(false);
+        }
+    }, [shouldRemoveItems]);
+
     return (
         <>
             <Popover>
@@ -36,9 +46,10 @@ export function TimeSheetFilterPopover() {
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('manualTime.EMPLOYEE')}</span>
-                                    <span className="text-primary/10">Clear</span>
+                                    <span className={clsxm("text-primary/10")}>Clear</span>
                                 </label>
                                 <MultiSelect
+                                    removeItems={shouldRemoveItems}
                                     items={activeTeam?.members ?? []}
                                     itemToString={(members) => (members ? members.employee.fullName : '')}
                                     itemId={(item) => item.id}
@@ -50,11 +61,12 @@ export function TimeSheetFilterPopover() {
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('sidebar.PROJECTS')}</span>
-                                    <span className="text-primary/10">Clear</span>
+                                    <span className={clsxm("text-primary/10")}>Clear</span>
                                 </label>
                                 <MultiSelect
-                                    items={activeTeam?.members ?? []}
-                                    itemToString={(members) => (members ? members.employee.fullName : '')}
+                                    removeItems={shouldRemoveItems}
+                                    items={activeTeam?.projects ?? []}
+                                    itemToString={(project) => (activeTeam?.projects ? project.name! : '')}
                                     itemId={(item) => item.id}
                                     onValueChange={(selectedItems) => console.log(selectedItems)}
                                     multiSelect={true}
@@ -64,9 +76,10 @@ export function TimeSheetFilterPopover() {
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('hotkeys.TASK')}</span>
-                                    <span className="text-primary/10">Clear</span>
+                                    <span className={clsxm("text-primary/10")}>Clear</span>
                                 </label>
                                 <MultiSelect
+                                    removeItems={shouldRemoveItems}
                                     items={tasks}
                                     onValueChange={(task) => task}
                                     itemId={(task) => (task ? task.id : '')}
@@ -78,9 +91,10 @@ export function TimeSheetFilterPopover() {
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('common.STATUS')}</span>
-                                    <span className="text-primary/10">Clear</span>
+                                    <span className={clsxm("text-primary/10")}>Clear</span>
                                 </label>
                                 <MultiSelect
+                                    removeItems={shouldRemoveItems}
                                     items={statusOptions}
                                     itemToString={(status) => (status ? status.value : '')}
                                     itemId={(item) => item.value}
@@ -91,6 +105,7 @@ export function TimeSheetFilterPopover() {
                             </div>
                             <div className="flex items-center justify-end gap-x-4 w-full">
                                 <Button
+                                    onClick={() => setShouldRemoveItems(true)}
                                     variant={'outline'}
                                     className='flex items-center text-sm justify-center h-10   rounded-lg  dark:text-gray-300' >
                                     <span className="text-sm">Clear Filter</span>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx
index 8c6039ec3..131b88f61 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx
@@ -39,7 +39,7 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
                         'border border-gray-200 ',
                         'text-[#282048] text-sm',
                         'flex items-center',
-                        'hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:border-gray-600'
+                        'hover:bg-gray-50 hover:dark:bg-primary-light/40 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:border-gray-600'
                     )}
                     aria-label="View timesheet details"
                     onClick={onClick}>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
index b669fa3b7..a1e3c9de2 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
@@ -1,4 +1,4 @@
-import { FilterWithStatus } from './FilterWithStatus';
+import { FilterStatus, FilterWithStatus } from './FilterWithStatus';
 import { FrequencySelect, TimeSheetFilterPopover, TimesheetFilterDate, TimesheetFilterDateProps } from '.';
 import { Button } from 'lib/components';
 import { AddManualTimeModal } from '@/lib/features/manual-time/add-manual-time-modal';
@@ -9,10 +9,12 @@ interface ITimesheetFilter {
     openModal: () => void,
     closeModal: () => void,
     t: TranslationHooks,
-    initDate?: Pick<TimesheetFilterDateProps, 'initialRange' | 'onChange' | 'maxDate' | 'minDate'>
+    initDate?: Pick<TimesheetFilterDateProps, 'initialRange' | 'onChange' | 'maxDate' | 'minDate'>,
+    onChangeStatus?: (status: FilterStatus) => void;
+    filterStatus?: FilterStatus
 }
 
-export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate }: ITimesheetFilter,) {
+export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate, filterStatus, onChangeStatus }: ITimesheetFilter,) {
     return (
         <>
             {
@@ -25,10 +27,8 @@ export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate }:
             <div className="flex w-full justify-between items-center">
                 <div>
                     <FilterWithStatus
-                        activeStatus="Rejected"
-                        onToggle={(label) => {
-                            // If logging is needed, use proper logging service
-                        }}
+                        activeStatus={filterStatus || "All Tasks"}
+                        onToggle={(label) => onChangeStatus?.(label)}
                     />
                 </div>
 
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
index 5c0229e8e..db5d266a8 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
@@ -1,4 +1,5 @@
-import { cn } from "@/lib/utils"
+import { clsxm } from "@/app/utils"
+import { checkPastDate, cn } from "@/lib/utils"
 import { DatePicker } from "@components/ui/DatePicker"
 import { Button } from "@components/ui/button"
 import {
@@ -12,6 +13,8 @@ import { TranslationHooks } from "next-intl"
 import React, { useEffect, useState } from "react"
 import { MdKeyboardArrowRight } from "react-icons/md"
 import { PiCalendarDotsThin } from "react-icons/pi"
+import { Dispatch, SetStateAction, useCallback, useMemo, memo } from 'react';
+import moment from 'moment';
 
 interface DatePickerInputProps {
     date: Date | null;
@@ -37,9 +40,9 @@ export function TimesheetFilterDate({
         from: initialRange?.from ?? new Date(),
         to: initialRange?.to ?? new Date(),
     });
-  
+
     const [isVisible, setIsVisible] = useState(false);
-    
+
     const handleFromChange = (fromDate: Date | null) => {
         if (maxDate && fromDate && fromDate > maxDate) {
             return;
@@ -86,7 +89,7 @@ export function TimesheetFilterDate({
                 break;
         }
     };
-  
+
     useEffect(() => {
         if (dateRange.from && dateRange.to) {
             onChange?.(dateRange);
@@ -204,19 +207,19 @@ const DatePickerInput: React.FC<DatePickerInputProps> = ({ date, label }) => (
     </>
 );
 
+
 export function DatePickerFilter({
     label,
     date,
     setDate,
     minDate,
-    maxDate
+    maxDate,
 }: {
     label: string;
     date: Date | null;
     setDate: (date: Date | null) => void;
     minDate?: Date | null;
-    maxDate?: Date | null
-
+    maxDate?: Date | null;
 }) {
     const isDateDisabled = React.useCallback((date: Date) => {
         if (minDate && date < minDate) return true;
@@ -227,9 +230,10 @@ export function DatePickerFilter({
     return (
         <div>
             <DatePicker
+                captionLayout="dropdown"
                 buttonVariant={'link'}
-                className="dark:bg-dark--theme-light rounded-lg bg-white dark:text-gray-200"
-                buttonClassName={'decoration-transparent flex items-center w-full h-[2.2em] bg-white dark:text-gray-200 dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black  h-[2.2rem] border dark:border-slate-600 rounded-md'}
+                className="dark:bg-dark--theme-light rounded-lg bg-white dark:text-gray-200 "
+                buttonClassName={'decoration-transparent flex items-center w-full h-[2.2em] bg-white dark:text-gray-200 dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black  h-[2.2rem] border dark:border-slate-600 rounded-md hover:border-primary'}
                 customInput={<DatePickerInput date={date} label={label} />}
                 mode="single"
                 numberOfMonths={1}
@@ -242,15 +246,94 @@ export function DatePickerFilter({
                     }
                 }}
                 modifiersClassNames={{
-                    disabled: 'text-[#6989AA] cursor-not-allowed',
-                    selected: '!rounded-full bg-primary text-white',
-                    today: '!rounded-full bg-[#BCCAD9] text-white'
+                    booked: clsxm(
+                        'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-primary after:rounded-full'
+                    ),
+                    selected: clsxm('bg-primary after:hidden text-white !rounded-full'),
+                    pastDay: clsxm(
+                        'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-yellow-600 after:rounded-full'
+                    ),
+                    today: clsxm('border-2 !border-yellow-700 rounded')
                 }}
                 disabled={[
                     ...(minDate ? [{ before: minDate }] : []),
                     ...(maxDate ? [{ after: maxDate }] : [])
                 ]}
+
             />
         </div>
     );
 }
+
+
+
+interface ICalendarProps<T extends { date: string | Date }> {
+    setSelectedPlan: Dispatch<SetStateAction<Date>>;
+    selectedPlan: Date | undefined;
+    plans: T[];
+    pastPlans: T[];
+    handleCalendarSelect: () => void;
+    createEmptyPlan: () => Promise<void>;
+    bookedDayClassName?: string;
+    selectedDayClassName?: string;
+    pastDayClassName?: string;
+    currentDayClassName?: string;
+    clickDebounceInterval?: number;
+    startYear?: number;
+    endYear?: number;
+}
+
+export const FilterCalendar = memo(function FuturePlansCalendar<T extends { date: string | Date }>({
+    setSelectedPlan,
+    selectedPlan,
+    plans,
+    pastPlans,
+    bookedDayClassName = 'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-primary after:rounded-full',
+    selectedDayClassName = 'bg-primary after:hidden text-white !rounded-full',
+    pastDayClassName = 'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-yellow-600 after:rounded-full',
+    currentDayClassName = 'border-2 !border-yellow-700 rounded',
+    startYear,
+    endYear
+}: ICalendarProps<T>) {
+
+    const sortedPlansByDateDesc = useMemo(
+        () => [...plans].sort((plan1, plan2) => new Date(plan1.date).getTime() < new Date(plan2.date).getTime() ? 1 : -1),
+        [plans]);
+    const createDateKey = (date: string | Date) =>
+        moment(date.toString().split('T')[0]).toISOString().split('T')[0];
+    const isDateAvailableForPlanning = useCallback(
+        (dateToCheck: Date) => {
+            const dateKey = createDateKey(dateToCheck);
+            const planDates = new Set(plans.map(plan => createDateKey(plan.date)));
+            return !planDates.has(dateKey);
+        },
+        [plans]
+    );
+    return (
+        <DatePicker
+            mode="single"
+            captionLayout="dropdown"
+            buttonVariant={'link'}
+            className={"dark:bg-dark--theme-light rounded-lg bg-white dark:text-gray-200"}
+            buttonClassName={'decoration-transparent flex items-center w-full h-[2.2em] bg-white dark:text-gray-200 dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black  h-[2.2rem] border dark:border-slate-600 rounded-md'}
+            numberOfMonths={1}
+            initialFocus
+            customInput={<DatePickerInput date={new Date()} label={''} />}
+            selected={selectedPlan || undefined}
+            onSelect={(date) => date && setSelectedPlan(moment(date).toDate())}
+            disabled={(date) => checkPastDate(date) || !isDateAvailableForPlanning(date)}
+            modifiers={{
+                booked: sortedPlansByDateDesc.map(plan => moment.utc(plan.date.toString().split('T')[0]).toDate()),
+                pastDay: pastPlans.map(plan => moment.utc(plan.date.toString().split('T')[0]).toDate())
+            }}
+            modifiersClassNames={{
+                booked: clsxm(bookedDayClassName),
+                selected: clsxm(selectedDayClassName),
+                pastDay: clsxm(pastDayClassName),
+                today: clsxm(currentDayClassName)
+            }}
+            fromYear={startYear || new Date(sortedPlansByDateDesc?.[0]?.date ?? Date.now()).getFullYear()}
+            toYear={endYear || new Date(sortedPlansByDateDesc?.[sortedPlansByDateDesc?.length - 1]?.date ?? Date.now()).getFullYear() + 10}
+        />
+    );
+});
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
index cdd35dfa2..c20e08c90 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
@@ -1,8 +1,8 @@
-import { IDailyPlan } from '@/app/interfaces';
+import { GroupedTimesheet } from '@/app/hooks/features/useTimesheet';
 import { DataTableTimeSheet } from 'lib/features/integrations/calendar';
 import { useTranslations } from 'next-intl';
 
-export function TimesheetView({ data }: { data?: IDailyPlan[] }) {
+export function TimesheetView({ data }: { data?: GroupedTimesheet[] }) {
     const t = useTranslations();
     return (
         <div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index f002a4942..7686deaa1 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -1,8 +1,8 @@
 "use client"
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useParams } from 'next/navigation';
-import { useTranslations } from 'next-intl';
-import { TranslationHooks } from 'next-intl';
+import moment from 'moment';
+import { useTranslations, TranslationHooks } from 'next-intl';
 
 import { withAuthentication } from 'lib/app/authenticator';
 import { Breadcrumb, Container } from 'lib/components';
@@ -14,7 +14,7 @@ import { fullWidthState } from '@app/stores/fullWidth';
 import { useAtomValue } from 'jotai';
 
 import { ArrowLeftIcon } from 'assets/svg';
-import { CalendarView, TimesheetCard, TimesheetFilter, TimesheetView } from './components';
+import { CalendarView, FilterStatus, TimesheetCard, TimesheetFilter, TimesheetView } from './components';
 import { CalendarDaysIcon, Clock, User2 } from 'lucide-react';
 import { GrTask } from 'react-icons/gr';
 import { GoSearch } from 'react-icons/go';
@@ -23,6 +23,7 @@ import { getGreeting } from '@/app/helpers';
 import { useTimesheet } from '@/app/hooks/features/useTimesheet';
 import { endOfDay, startOfDay } from 'date-fns';
 
+
 type TimesheetViewMode = "ListView" | "CalendarView";
 
 type ViewToggleButtonProps = {
@@ -36,6 +37,8 @@ type ViewToggleButtonProps = {
 const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memberId: string } }) {
     const t = useTranslations();
     const { user } = useAuthenticateUser();
+    const [search, setSearch] = useState<string>('')
+    const [filterStatus, setFilterStatus] = useLocalStorageState<FilterStatus>("timesheet-filter-status", "All Tasks")
 
     const [dateRange, setDateRange] = React.useState<{ from: Date | null; to: Date | null }>({
         from: startOfDay(new Date()),
@@ -47,6 +50,15 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
         endDate: dateRange.to ?? ""
     });
 
+    const lowerCaseSearch = useMemo(() => search?.toLowerCase() ?? '', [search]);
+    const filterDataTimesheet = useMemo(() =>
+        timesheet.filter((v) =>
+            v.tasks.some((task) => (
+                (task.task?.title?.toLowerCase()?.includes(lowerCaseSearch)) ||
+                (task.employee?.fullName?.toLowerCase()?.includes(lowerCaseSearch)) ||
+                (task.project?.name?.toLowerCase()?.includes(lowerCaseSearch))
+            ))
+        ), [timesheet, lowerCaseSearch]);
 
     const {
         isOpen: isManualTimeModalOpen,
@@ -105,7 +117,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
                                 <TimesheetCard
                                     hours='63:00h'
                                     title='Men Hours'
-                                    date='10.04.2024 - 11.04.2024'
+                                    date={`${moment(dateRange.from).format('YYYY-MM-DD')} - ${moment(dateRange.to).format('YYYY-MM-DD')}`}
                                     icon={<Clock className='font-bold' />}
                                     classNameIcon='bg-[#3D5A80] shadow-[#3d5a809c] '
                                 />
@@ -138,18 +150,21 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
                             <div className='flex items-center !h-[2.2rem] w-[700px] bg-white dark:bg-dark--theme-light gap-x-2 px-2 border border-gray-200 dark:border-gray-700 rounded-sm mb-2'>
                                 <GoSearch className='text-[#7E7991]' />
                                 <input
+                                    onChange={(v) => setSearch(v.target.value)}
                                     role="searchbox"
                                     aria-label="Search timesheet"
                                     type="search"
                                     name="timesheet-search"
                                     id="timesheet-search"
                                     className="!h-[2.2rem] w-full bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent placeholder-gray-500 placeholder:font-medium shadow-sm outline-none"
-                                    placeholder="Search.." />
+                                    placeholder={t('common.SEARCH')} />
                             </div>
                         </div>
                         {/* <DropdownMenuDemo /> */}
                         <div className='flex flex-col overflow-y-auto  w-full border-1 rounded-lg bg-[#FFFFFF]  dark:bg-dark--theme p-4 mt-4'>
                             <TimesheetFilter
+                                onChangeStatus={setFilterStatus}
+                                filterStatus={filterStatus}
                                 initDate={{
                                     initialRange: dateRange,
                                     onChange(range) {
@@ -163,7 +178,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
                             />
                             <div className='h-[calc(100vh-_291px)] mt-3 overflow-y-auto border border-gray-200 rounded-lg dark:border-gray-800'>
                                 {timesheetNavigator === 'ListView' ?
-                                    <TimesheetView data={timesheet} />
+                                    <TimesheetView data={filterDataTimesheet} />
                                     : <CalendarView />
                                 }
                             </div>
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index c67616373..d2e398ade 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -12,6 +12,31 @@ interface TimesheetParams {
     endDate: Date | string;
 }
 
+export interface GroupedTimesheet {
+    date: string;
+    tasks: ITimeSheet[];
+}
+
+
+const groupByDate = (items: ITimeSheet[]): GroupedTimesheet[] => {
+    if (!items?.length) return [];
+    type GroupedMap = Record<string, ITimeSheet[]>;
+    const groupedByDate = items.reduce<GroupedMap>((acc, item) => {
+        if (!item?.createdAt) return acc;
+        try {
+            const date = new Date(item.createdAt).toISOString().split('T')[0];
+            if (!acc[date]) acc[date] = [];
+            acc[date].push(item);
+        } catch (error) {
+            console.error('Invalid date format:', item.createdAt);
+        }
+        return acc;
+    }, {});
+
+    return Object.entries(groupedByDate)
+        .map(([date, tasks]) => ({ date, tasks }))
+        .sort((a, b) => b.date.localeCompare(a.date));
+}
 
 
 export function useTimesheet({
@@ -47,20 +72,6 @@ export function useTimesheet({
     }, [getTaskTimesheet, startDate, endDate]);
 
 
-    const groupByDate = (items: ITimeSheet[]) => {
-        const groupedByDate = items.reduce((acc: Record<string, ITimeSheet[]>, item) => {
-            const date = new Date(item.createdAt).toISOString().split('T')[0];
-            if (!acc[date]) {
-                acc[date] = [];
-            }
-            acc[date].push(item);
-            return acc;
-        }, {});
-        return Object.keys(groupedByDate).map((date) => ({
-            date,
-            tasks: groupedByDate[date]
-        })) as [];
-    }
 
     return {
         loadingTimesheet,
diff --git a/apps/web/app/interfaces/IProject.ts b/apps/web/app/interfaces/IProject.ts
index cd35fba7f..4fac0db55 100644
--- a/apps/web/app/interfaces/IProject.ts
+++ b/apps/web/app/interfaces/IProject.ts
@@ -24,6 +24,7 @@ export interface IProject {
 	isTasksAutoSync?: boolean;
 	isTasksAutoSyncOnLabel?: boolean;
 	syncTag?: string;
+	name?: string
 }
 
 export interface IProjectCreate {
diff --git a/apps/web/app/interfaces/ITask.ts b/apps/web/app/interfaces/ITask.ts
index 0d12e0718..daa407299 100644
--- a/apps/web/app/interfaces/ITask.ts
+++ b/apps/web/app/interfaces/ITask.ts
@@ -158,7 +158,7 @@ export interface ICreateTask {
 	priority?: string;
 	taskStatusId?: string;
 	issueType?: string;
-	members?: { id: string; [x: string]: any }[];
+	members?: { id: string;[x: string]: any }[];
 	estimateDays?: number;
 	estimateHours?: string;
 	estimateMinutes?: string;
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
index dd48ad243..f7131863a 100644
--- a/apps/web/app/interfaces/timer/ITimerLog.ts
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -1,3 +1,5 @@
+import { ITaskIssue } from "..";
+
 interface Project {
     id: string;
     name: string;
@@ -69,4 +71,5 @@ export interface ITimeSheet {
     employee: Employee;
     duration: number;
     isEdited: boolean;
+    issueType?: ITaskIssue;
 }
diff --git a/apps/web/app/services/client/api/timer/timer-log.ts b/apps/web/app/services/client/api/timer/timer-log.ts
index 237e840e1..c7b86175b 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -49,7 +49,8 @@ export async function getTaskTimesheetLogsApi({
 		'relations[0]': 'project',
 		'relations[1]': 'task',
 		'relations[2]': 'organizationContact',
-		'relations[3]': 'employee.user'
+		'relations[3]': 'employee.user',
+		'relations[4]': 'task.taskStatus'
 	});
 
 	const endpoint = `/timesheet/time-log?${params.toString()}`;
diff --git a/apps/web/lib/components/custom-select/multi-select.tsx b/apps/web/lib/components/custom-select/multi-select.tsx
index 3b8a298b4..585758a13 100644
--- a/apps/web/lib/components/custom-select/multi-select.tsx
+++ b/apps/web/lib/components/custom-select/multi-select.tsx
@@ -16,6 +16,7 @@ interface MultiSelectProps<T> {
     renderItem?: (item: T, onClick: () => void, isSelected: boolean) => JSX.Element;
     defaultValue?: T | T[];
     multiSelect?: boolean;
+    removeItems?: boolean
 }
 
 export function MultiSelect<T>({
@@ -28,6 +29,7 @@ export function MultiSelect<T>({
     renderItem,
     defaultValue,
     multiSelect = false,
+    removeItems
 }: MultiSelectProps<T>) {
     const [selectedItems, setSelectedItems] = useState<T[]>(Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : []);
     const [isPopoverOpen, setPopoverOpen] = useState(false);
@@ -52,6 +54,7 @@ export function MultiSelect<T>({
         }
     };
 
+
     const removeItem = (item: T) => {
         const newSelectedItems = selectedItems.filter((selectedItem) => itemId(selectedItem) !== itemId(item));
         setSelectedItems(newSelectedItems);
@@ -60,6 +63,26 @@ export function MultiSelect<T>({
         }
     };
 
+    const removeAllItems = () => {
+        setSelectedItems([]);
+        if (onValueChange) {
+            onValueChange(null);
+        }
+    };
+
+    useEffect(() => {
+        let mounted = true;
+        if (removeItems) {
+            if (mounted) { // deepscan-disable-line
+                removeAllItems();
+            }
+        }
+        return () => {
+            mounted = false;
+        };
+    }, [removeItems, removeAllItems]) // deepscan-disable-line
+
+
     useEffect(() => {
         const initialItems = Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : [];
         setSelectedItems(initialItems);
@@ -69,6 +92,7 @@ export function MultiSelect<T>({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [defaultValue]);
 
+
     useEffect(() => {
         if (triggerRef.current) {
             setPopoverWidth(triggerRef.current.offsetWidth);
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 25ed36ef3..c530fbfd5 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -55,11 +55,10 @@ import {
 import { clsxm } from "@/app/utils"
 import { statusColor } from "@/lib/components"
 import { Badge } from '@components/ui/badge'
-import { IDailyPlan } from "@/app/interfaces"
 import { EditTaskModal, RejectSelectedModal, StatusType, getTimesheetButtons } from "@/app/[locale]/timesheet/[memberId]/components"
 import { useTranslations } from "next-intl"
 import { formatDate } from "@/app/helpers"
-import { TaskNameInfoDisplay } from "../../task/task-displays"
+import { GroupedTimesheet } from "@/app/hooks/features/useTimesheet"
 
 
 
@@ -173,7 +172,7 @@ export const columns: ColumnDef<TimeSheet>[] = [
 
 
 
-export function DataTableTimeSheet({ data }: { data?: IDailyPlan[] }) {
+export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
     const {
         isOpen,
         openModal,
@@ -286,19 +285,19 @@ export function DataTableTimeSheet({ data }: { data?: IDailyPlan[] }) {
                                                     >
                                                         <Checkbox className="h-5 w-5" />
                                                         <div className="flex-[2]">
-                                                            <TaskNameInfoDisplay
+                                                            {/* <TaskNameInfoDisplay
                                                                 task={task}
                                                                 className={clsxm('shadow-[0px_0px_15px_0px_#e2e8f0] dark:shadow-transparent')}
                                                                 taskTitleClassName={clsxm('text-sm')}
                                                                 showSize={true}
                                                                 dash
                                                                 taskNumberClassName="text-sm"
-                                                            />
+                                                            /> */}
                                                         </div>
-                                                        <span className="flex-1">{task.status}</span>
-                                                        <span className="flex-1">{plan.employee?.fullName}</span>
+                                                        <span className="flex-1">{task.isActive}</span>
+                                                        <span className="flex-1">{task.employee.fullName}</span>
                                                         <span className="flex-1">
-                                                            {task.estimateHours}h, {task.estimateDays}j, {task.estimateMinutes}m
+                                                            {/* {task.}h, {task.estimateDays}j, {task.estimateMinutes}m */}
                                                         </span>
                                                         <TaskActionMenu idTasks={task.id} />
                                                     </div>
diff --git a/apps/web/lib/features/task/task-issue.tsx b/apps/web/lib/features/task/task-issue.tsx
index 8c13db8ed..4632a8cf3 100644
--- a/apps/web/lib/features/task/task-issue.tsx
+++ b/apps/web/lib/features/task/task-issue.tsx
@@ -1,5 +1,5 @@
 import { useModal } from '@app/hooks';
-import { IClassName, IssueType, ITaskIssue, ITeamTask, Nullable } from '@app/interfaces';
+import { IClassName, IssueType, ITaskIssue, ITeamTask, ITimeSheet, Nullable } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { BackButton, Button, Card, InputField, Modal, Text } from 'lib/components';
 import { NoteIcon, BugIcon, Square4StackIcon, Square4OutlineIcon } from 'assets/svg';
@@ -212,3 +212,19 @@ export function CreateTaskIssueModal({ open, closeModal }: { open: boolean; clos
 		</Modal>
 	);
 }
+
+
+export function TaskIssueStatusTimesheet({
+	task,
+	className,
+	showIssueLabels
+}: { task: Nullable<ITimeSheet>; showIssueLabels?: boolean } & IClassName) {
+	return (
+		<TaskStatus
+			{...taskIssues[task?.issueType || 'Task']}
+			showIssueLabels={showIssueLabels}
+			issueType="issue"
+			className={clsxm('rounded-md px-2 text-white', className)}
+		/>
+	);
+}

From 9eff73fead01fd606aa7cfeb72e55800364b4072 Mon Sep 17 00:00:00 2001
From: Cedric Karungu <ckarungu921@gmail.com>
Date: Tue, 12 Nov 2024 13:42:15 +0200
Subject: [PATCH 02/13] (apps/web)[fix]: Task Labels UI on Task Component

---
 apps/web/lib/features/auth-user-task-input.tsx | 2 +-
 apps/web/lib/features/task/task-input.tsx      | 4 ++--
 apps/web/lib/features/task/task-status.tsx     | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/lib/features/auth-user-task-input.tsx b/apps/web/lib/features/auth-user-task-input.tsx
index 70bfd69b4..33a6452ad 100644
--- a/apps/web/lib/features/auth-user-task-input.tsx
+++ b/apps/web/lib/features/auth-user-task-input.tsx
@@ -52,7 +52,7 @@ export function AuthUserTaskInput({ className }: IClassName) {
 						task={activeTeamTask}
 						className="lg:max-w-[170px] w-full text-xs"
 						forDetails={false}
-						taskStatusClassName="dark:bg-[#1B1D22] dark:border py-[7px] dark:border-[#FFFFFF33] text-xs"
+						taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] text-xs"
 					/>
 				</div>
 				{/* <div className="grid justify-items-center md:hidden">
diff --git a/apps/web/lib/features/task/task-input.tsx b/apps/web/lib/features/task/task-input.tsx
index 213990f05..1ae8b0945 100644
--- a/apps/web/lib/features/task/task-input.tsx
+++ b/apps/web/lib/features/task/task-input.tsx
@@ -624,9 +624,9 @@ function TaskCard({
                   />
 
                   <TaskLabels
-                    className="lg:min-w-[170px] text-xs"
+                    className="lg:min-w-[170px] text-xs z-[9999]"
                     forDetails={false}
-                    taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] h-7 text-xs"
+                    taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] h-9 text-xs"
                     onValueChange={(_: any, values: string[] | undefined) => {
                       taskLabelsData.filter((tag) =>
                         tag.name ? values?.includes(tag.name) : false
diff --git a/apps/web/lib/features/task/task-status.tsx b/apps/web/lib/features/task/task-status.tsx
index b0967a01e..73096654c 100644
--- a/apps/web/lib/features/task/task-status.tsx
+++ b/apps/web/lib/features/task/task-status.tsx
@@ -1243,14 +1243,14 @@ export function MultipleStatusDropdown<T extends TStatusItem>({
 						leaveFrom="transform scale-100 opacity-100"
 						leaveTo="transform scale-95 opacity-0"
 						className={clsxm(
-							'absolute right-0 left-0 z-40 min-w-min outline-none',
+							'absolute right-0 left-0 z-[999] min-w-min outline-none',
 							issueType === 'issue' && ['left-auto right-auto']
 						)}
 					>
 						<Listbox.Options className="outline-none">
 							<Card
 								shadow="bigger"
-								className="p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col"
+								className="p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col max-h-[206px] overflow-x-auto"
 							>
 								<div className="flex flex-col gap-2.5 max-h-[320px] overflow-auto scrollbar-hide !border-b-0">
 									{items.map((item, i) => {

From 8ae8beadbfc15033ff332e7530629a87aa1a5f2b Mon Sep 17 00:00:00 2001
From: Arick Bulakali <arickbulakali@gmail.com>
Date: Tue, 12 Nov 2024 15:05:37 +0200
Subject: [PATCH 03/13] chore(deps): [WEB] update packages

---
 apps/web/package.json |  11 ++-
 yarn.lock             | 179 ++++++++++++++++++------------------------
 2 files changed, 82 insertions(+), 108 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 57fb0a2bb..7e36362dc 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -68,7 +68,6 @@
 		"@radix-ui/react-tooltip": "^1.1.3",
 		"@sentry/nextjs": "^7.80.0",
 		"@tanstack/react-table": "^8.20.5",
-		"@types/react-google-recaptcha": "^2.1.5",
 		"@uidotdev/usehooks": "^2.4.1",
 		"@vercel/analytics": "^0.1.6",
 		"autoprefixer": "^10.4.12",
@@ -99,14 +98,13 @@
 		"moment": "^2.29.4",
 		"moment-timezone": "^0.5.42",
 		"nanoid": "5.0.1",
-		"next": "^14.2.3",
+    	"next": "14.2.17",
 		"next-auth": "^5.0.0-beta.18",
 		"next-intl": "^3.3.2",
 		"next-themes": "^0.2.1",
 		"ni18n": "^1.1.0",
 		"pako": "^2.1.0",
 		"polished": "^4.2.2",
-		"postcss": "^8.4.19",
 		"posthog-js": "^1.154.5",
 		"qs": "^6.11.2",
 		"react": "^18.2.0",
@@ -131,11 +129,12 @@
 		"slate-serializers": "^0.4.0",
 		"sonner": "^1.5.0",
 		"string-to-color": "^2.2.2",
-		"tailwind-merge": "^1.14.0",
-		"tailwindcss": "^3.1.8",
-		"tailwindcss-animate": "^1.0.6"
+		"tailwind-merge": "^1.14.0"
 	},
 	"devDependencies": {
+		"tailwindcss-animate": "^1.0.6",
+		"tailwindcss": "^3.4.1",
+		"postcss": "^8.4.19",
 		"@svgr/webpack": "^8.1.0",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/cookie": "^0.5.1",
diff --git a/yarn.lock b/yarn.lock
index f9c7d4424..d416b8b87 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4069,10 +4069,10 @@
     jsonc-parser "3.2.0"
     pluralize "8.0.0"
 
-"@next/env@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.10.tgz#1d3178340028ced2d679f84140877db4f420333c"
-  integrity sha512-dZIu93Bf5LUtluBXIv4woQw2cZVZ2DJTjax5/5DOs3lzEOeKLy7GxRSr4caK9/SCPdaW6bCgpye6+n4Dh9oJPw==
+"@next/env@14.2.17":
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.17.tgz#bcb2c84fca50a38ec5b492d1029b8f41b0900594"
+  integrity sha512-MCgO7VHxXo8sYR/0z+sk9fGyJJU636JyRmkjc7ZJY8Hurl8df35qG5hoAh5KMs75FLjhlEo9bb2LGe89Y/scDA==
 
 "@next/eslint-plugin-next@14.0.4":
   version "14.0.4"
@@ -4088,50 +4088,50 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-darwin-arm64@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.10.tgz#49d10ca4086fbd59ee68e204f75d7136eda2aa80"
-  integrity sha512-V3z10NV+cvMAfxQUMhKgfQnPbjw+Ew3cnr64b0lr8MDiBJs3eLnM6RpGC46nhfMZsiXgQngCJKWGTC/yDcgrDQ==
-
-"@next/swc-darwin-x64@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.10.tgz#0ebeae3afb8eac433882b79543295ab83624a1a8"
-  integrity sha512-Y0TC+FXbFUQ2MQgimJ/7Ina2mXIKhE7F+GUe1SgnzRmwFY3hX2z8nyVCxE82I2RicspdkZnSWMn4oTjIKz4uzA==
-
-"@next/swc-linux-arm64-gnu@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.10.tgz#7e602916d2fb55a3c532f74bed926a0137c16f20"
-  integrity sha512-ZfQ7yOy5zyskSj9rFpa0Yd7gkrBnJTkYVSya95hX3zeBG9E55Z6OTNPn1j2BTFWvOVVj65C3T+qsjOyVI9DQpA==
-
-"@next/swc-linux-arm64-musl@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.10.tgz#6b143f628ccee490b527562e934f8de578d4be47"
-  integrity sha512-n2i5o3y2jpBfXFRxDREr342BGIQCJbdAUi/K4q6Env3aSx8erM9VuKXHw5KNROK9ejFSPf0LhoSkU/ZiNdacpQ==
-
-"@next/swc-linux-x64-gnu@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.10.tgz#086f2f16a0678890a1eb46518c4dda381b046082"
-  integrity sha512-GXvajAWh2woTT0GKEDlkVhFNxhJS/XdDmrVHrPOA83pLzlGPQnixqxD8u3bBB9oATBKB//5e4vpACnx5Vaxdqg==
-
-"@next/swc-linux-x64-musl@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.10.tgz#1befef10ed8dbcc5047b5d637a25ae3c30a0bfc3"
-  integrity sha512-opFFN5B0SnO+HTz4Wq4HaylXGFV+iHrVxd3YvREUX9K+xfc4ePbRrxqOuPOFjtSuiVouwe6uLeDtabjEIbkmDA==
-
-"@next/swc-win32-arm64-msvc@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.10.tgz#731f52c3ae3c56a26cf21d474b11ae1529531209"
-  integrity sha512-9NUzZuR8WiXTvv+EiU/MXdcQ1XUvFixbLIMNQiVHuzs7ZIFrJDLJDaOF1KaqttoTujpcxljM/RNAOmw1GhPPQQ==
-
-"@next/swc-win32-ia32-msvc@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.10.tgz#32723ef7f04e25be12af357cc72ddfdd42fd1041"
-  integrity sha512-fr3aEbSd1GeW3YUMBkWAu4hcdjZ6g4NBl1uku4gAn661tcxd1bHs1THWYzdsbTRLcCKLjrDZlNp6j2HTfrw+Bg==
-
-"@next/swc-win32-x64-msvc@14.2.10":
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.10.tgz#ee1d036cb5ec871816f96baee7991035bb242455"
-  integrity sha512-UjeVoRGKNL2zfbcQ6fscmgjBAS/inHBh63mjIlfPg/NG8Yn2ztqylXt5qilYb6hoHIwaU2ogHknHWWmahJjgZQ==
+"@next/swc-darwin-arm64@14.2.17":
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.17.tgz#f1e38727eb94cf198f63fddcb19002bd4cc971dc"
+  integrity sha512-WiOf5nElPknrhRMTipXYTJcUz7+8IAjOYw3vXzj3BYRcVY0hRHKWgTgQ5439EvzQyHEko77XK+yN9x9OJ0oOog==
+
+"@next/swc-darwin-x64@14.2.17":
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.17.tgz#e29a17ef28d97c347c7d021f391e13b6c8e4c813"
+  integrity sha512-29y425wYnL17cvtxrDQWC3CkXe/oRrdt8ie61S03VrpwpPRI0XsnTvtKO06XCisK4alaMnZlf8riwZIbJTaSHQ==
+
+"@next/swc-linux-arm64-gnu@14.2.17":
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.17.tgz#10e99c7aa60cc33f8b7633e045f74be9a43e7b0c"
+  integrity sha512-SSHLZls3ZwNEHsc+d0ynKS+7Af0Nr8+KTUBAy9pm6xz9SHkJ/TeuEg6W3cbbcMSh6j4ITvrjv3Oi8n27VR+IPw==
+
+"@next/swc-linux-arm64-musl@14.2.17":
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.17.tgz#9a5bb809d3c6aef96c409959aedae28b4e5db53d"
+  integrity sha512-VFge37us5LNPatB4F7iYeuGs9Dprqe4ZkW7lOEJM91r+Wf8EIdViWHLpIwfdDXinvCdLl6b4VyLpEBwpkctJHA==
+
+"@next/swc-linux-x64-gnu@14.2.17":
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.17.tgz#64e0ce01870e6dc45ae48f676d7cce82aedcdc62"
+  integrity sha512-aaQlpxUVb9RZ41adlTYVQ3xvYEfBPUC8+6rDgmQ/0l7SvK8S1YNJzPmDPX6a4t0jLtIoNk7j+nroS/pB4nx7vQ==
+
+"@next/swc-linux-x64-musl@14.2.17":
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.17.tgz#93114164b6ccfc533908193ab9065f0c3970abc3"
+  integrity sha512-HSyEiFaEY3ay5iATDqEup5WAfrhMATNJm8dYx3ZxL+e9eKv10XKZCwtZByDoLST7CyBmyDz+OFJL1wigyXeaoA==
+
+"@next/swc-win32-arm64-msvc@14.2.17":
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.17.tgz#4b99dea02178c112e5c33c742f9ff2a49b3b2939"
+  integrity sha512-h5qM9Btqv87eYH8ArrnLoAHLyi79oPTP2vlGNSg4CDvUiXgi7l0+5KuEGp5pJoMhjuv9ChRdm7mRlUUACeBt4w==
+
+"@next/swc-win32-ia32-msvc@14.2.17":
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.17.tgz#f1c23955405a259b6d45c65f918575b01bcf0106"
+  integrity sha512-BD/G++GKSLexQjdyoEUgyo5nClU7er5rK0sE+HlEqnldJSm96CIr/+YOTT063LVTT/dUOeQsNgp5DXr86/K7/A==
+
+"@next/swc-win32-x64-msvc@14.2.17":
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.17.tgz#44f5a4fcd8df1396a8d4326510ca2d92fb809cb3"
+  integrity sha512-vkQfN1+4V4KqDibkW2q0sJ6CxQuXq5l2ma3z0BRcfIqkAMZiiW67T9yCpwqJKP68QghBtPEFjPAlaqe38O6frw==
 
 "@nivo/calendar@^0.87.0":
   version "0.87.0"
@@ -14825,7 +14825,7 @@ fast-glob@^3.2.12, fast-glob@^3.2.7, fast-glob@^3.2.9, fast-glob@^3.3.1:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-glob@^3.3.2:
+fast-glob@^3.3.0, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -18157,16 +18157,16 @@ jimp@^0.22.7:
     "@jimp/types" "^0.22.12"
     regenerator-runtime "^0.13.3"
 
-jiti@^1.18.2:
-  version "1.19.3"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.19.3.tgz#ef554f76465b3c2b222dc077834a71f0d4a37569"
-  integrity sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==
-
 jiti@^1.20.0:
   version "1.21.3"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.3.tgz#b2adb07489d7629b344d59082bbedb8c21c5f755"
   integrity sha512-uy2bNX5zQ+tESe+TiC7ilGRz8AtRGmnJH55NC5S0nSUjvvvM2hJHmefHErugGXN4pNv4Qx7vLsnNw9qJ9mtIsw==
 
+jiti@^1.21.0:
+  version "1.21.6"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
+  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+
 joi@^17.3.0:
   version "17.11.0"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.11.0.tgz#aa9da753578ec7720e6f0ca2c7046996ed04fc1a"
@@ -20207,12 +20207,12 @@ next-tick@^1.1.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
-next@^14.2.3:
-  version "14.2.10"
-  resolved "https://registry.yarnpkg.com/next/-/next-14.2.10.tgz#331981a4fecb1ae8af1817d4db98fc9687ee1cb6"
-  integrity sha512-sDDExXnh33cY3RkS9JuFEKaS4HmlWmDKP1VJioucCG6z5KuA008DPsDZOzi8UfqEk3Ii+2NCQSJrfbEWtZZfww==
+next@14.2.17:
+  version "14.2.17"
+  resolved "https://registry.yarnpkg.com/next/-/next-14.2.17.tgz#77a38b11be983ddbbf6c7d1cea3c7e913e8a5445"
+  integrity sha512-hNo/Zy701DDO3nzKkPmsLRlDfNCtb1OJxFUvjGEl04u7SFa3zwC6hqsOUzMajcaEOEV8ey1GjvByvrg0Qr5AiQ==
   dependencies:
-    "@next/env" "14.2.10"
+    "@next/env" "14.2.17"
     "@swc/helpers" "0.5.5"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001579"
@@ -20220,15 +20220,15 @@ next@^14.2.3:
     postcss "8.4.31"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "14.2.10"
-    "@next/swc-darwin-x64" "14.2.10"
-    "@next/swc-linux-arm64-gnu" "14.2.10"
-    "@next/swc-linux-arm64-musl" "14.2.10"
-    "@next/swc-linux-x64-gnu" "14.2.10"
-    "@next/swc-linux-x64-musl" "14.2.10"
-    "@next/swc-win32-arm64-msvc" "14.2.10"
-    "@next/swc-win32-ia32-msvc" "14.2.10"
-    "@next/swc-win32-x64-msvc" "14.2.10"
+    "@next/swc-darwin-arm64" "14.2.17"
+    "@next/swc-darwin-x64" "14.2.17"
+    "@next/swc-linux-arm64-gnu" "14.2.17"
+    "@next/swc-linux-arm64-musl" "14.2.17"
+    "@next/swc-linux-x64-gnu" "14.2.17"
+    "@next/swc-linux-x64-musl" "14.2.17"
+    "@next/swc-win32-arm64-msvc" "14.2.17"
+    "@next/swc-win32-ia32-msvc" "14.2.17"
+    "@next/swc-win32-x64-msvc" "14.2.17"
 
 ni18n@^1.1.0:
   version "1.1.0"
@@ -24712,16 +24712,7 @@ string-to-color@^2.2.2:
     lodash.words "^4.2.0"
     rgb-hex "^3.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -24831,14 +24822,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -25075,20 +25059,20 @@ tailwindcss-animate@^1.0.6:
   resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
   integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
 
-tailwindcss@^3.1.8:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
-  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
+tailwindcss@^3.4.1:
+  version "3.4.14"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.14.tgz#6dd23a7f54ec197b19159e91e3bb1e55e7aa73ac"
+  integrity sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.12"
+    fast-glob "^3.3.0"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.18.2"
+    jiti "^1.21.0"
     lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
@@ -26888,7 +26872,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -26906,15 +26890,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 32da600d6e6f581cb23ca42fffc8ead1e09fc81f Mon Sep 17 00:00:00 2001
From: Arick Bulakali <arickbulakali@gmail.com>
Date: Tue, 12 Nov 2024 15:57:22 +0200
Subject: [PATCH 04/13] fix(web): [User Team Card] size and user team cart
 activity

---
 .../user-team-card-activity.tsx               | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx b/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx
index 0627568c9..557ee7b8f 100644
--- a/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx
+++ b/apps/web/lib/features/team/user-team-card/user-team-card-activity.tsx
@@ -31,18 +31,18 @@ const UserTeamActivity = ({ showActivity, member }: { showActivity: boolean; mem
 		>
 			<div className="transition-all">
 				<HorizontalSeparator className="my-4" />
-				<h2 className="text-xl font-semibold py-2 px-4">Activity for Today</h2>
-				<div className="flex justify-between overflow-hidden">
-					<div className="w-56 ">
-						<div className="shadow rounded-md w-full p-4 m-4 h-32 bg-light--theme-light dark:bg-[#26272C]">
+				<h2 className="px-4 py-2 text-xl font-semibold">Activity for Today</h2>
+				<div className="flex flex-col justify-between overflow-hidden gap-y-5">
+					<div className="flex items-center gap-3 wrap">
+						<div className="shadow basis-1/4 min-w-56 max-w-80 rounded-md w-full p-4 m-4 h-32 bg-light--theme-light dark:bg-[#26272C]">
 							<span>{t('timer.TIME_ACTIVITY')}</span>
-							<h2 className="text-3xl font-bold my-3">
+							<h2 className="my-3 text-3xl font-bold">
 								{activityPercent ? activityPercent.toFixed(2) : '00'} %
 							</h2>
 							<ProgressBar width={'80%'} progress={`${activityPercent}%`} className="my-2" />
 						</div>
 					</div>
-					<div className="p-4 flex-1 overflow-hidden">
+					<div className="flex-1 overflow-hidden">
 						<Tab.Group>
 							<Tab.List className="w-full flex space-x-1 rounded-xl bg-gray-200 dark:bg-[#FFFFFF14] p-2 mx-4">
 								{Object.values(ActivityFilters).map((filter: string) => (
@@ -63,16 +63,16 @@ const UserTeamActivity = ({ showActivity, member }: { showActivity: boolean; mem
 								))}
 							</Tab.List>
 							<Tab.Panels>
-								<Tab.Panel className="w-full mx-4 p-2 overflow-hidden">
+								<Tab.Panel className="w-full p-2 mx-4 overflow-hidden">
 									<UserWorkedTaskTab member={member} />
 								</Tab.Panel>
-								<Tab.Panel className="w-full mx-4 p-2">
+								<Tab.Panel className="w-full p-2 mx-4">
 									<ScreenshootTeamTab />
 								</Tab.Panel>
-								<Tab.Panel className="w-full mx-4 p-2">
+								<Tab.Panel className="w-full p-2 mx-4">
 									<AppsTab />
 								</Tab.Panel>
-								<Tab.Panel className="w-full mx-4 p-2">
+								<Tab.Panel className="w-full p-2 mx-4">
 									<VisitedSitesTab />
 								</Tab.Panel>
 							</Tab.Panels>

From b99090dbbe1c039162cf730b06433521580a2ac6 Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Tue, 12 Nov 2024 19:07:39 +0200
Subject: [PATCH 05/13] preserve input values on invite member form

---
 .../lib/components/auto-complete-dropdown.tsx | 30 +++++++++++--------
 .../team/invite/invite-email-dropdown.tsx     |  6 ++--
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/apps/web/lib/components/auto-complete-dropdown.tsx b/apps/web/lib/components/auto-complete-dropdown.tsx
index a91b05ac5..78119d1f3 100644
--- a/apps/web/lib/components/auto-complete-dropdown.tsx
+++ b/apps/web/lib/components/auto-complete-dropdown.tsx
@@ -3,8 +3,8 @@
 import React, { Dispatch, KeyboardEvent, PropsWithChildren, SetStateAction, useCallback, useState } from 'react';
 import { Transition, Combobox } from '@headlessui/react';
 import { clsxm } from '@app/utils';
-import { Card } from './card';
 import { Text } from './typography';
+import { IInviteEmail } from '@/app/interfaces';
 
 type DropdownItem<D = { [x: string]: any }> = {
 	key: React.Key;
@@ -29,6 +29,8 @@ type Props<T extends DropdownItem> = {
 	disabled?: boolean;
 	error?: string;
 	useHandleKeyUp?: boolean;
+	setSelectedEmail?: Dispatch<SetStateAction<IInviteEmail | undefined>>;
+	selectedEmail?: IInviteEmail | undefined;
 } & PropsWithChildren;
 
 export function AutoCompleteDropdown<T extends DropdownItem>({
@@ -43,7 +45,9 @@ export function AutoCompleteDropdown<T extends DropdownItem>({
 	handleAddNew,
 	disabled = false,
 	error = '',
-	useHandleKeyUp = false
+	useHandleKeyUp = false,
+	setSelectedEmail,
+	selectedEmail
 }: Props<T>) {
 	const [query, setQuery] = useState('');
 	let filteredItem = items;
@@ -68,11 +72,14 @@ export function AutoCompleteDropdown<T extends DropdownItem>({
 	);
 
 	return (
-		<div className={clsxm('relative', className)}>
-			<Combobox value={Value} onChange={onChange} disabled={disabled}>
+		<div className={clsxm('', className)}>
+			<Combobox nullable value={Value} onChange={onChange} disabled={disabled}>
 				<Combobox.Input
 					placeholder={placeholder}
-					onChange={(event) => setQuery(event.target.value)}
+					onChange={(event) => {
+						setQuery(event.target.value);
+						setSelectedEmail?.({ name: selectedEmail?.name ?? '', title: event.target.value });
+					}}
 					className={clsxm(
 						'input-border ',
 						'w-full flex justify-between rounded-[0.625rem] px-3 py-2 text-sm items-center bg-transparent',
@@ -83,6 +90,7 @@ export function AutoCompleteDropdown<T extends DropdownItem>({
 					displayValue={(item: T) => item?.data?.title}
 					autoFocus
 					onKeyUp={handleKeyUp}
+					value={query}
 				/>
 
 				<Transition
@@ -95,16 +103,12 @@ export function AutoCompleteDropdown<T extends DropdownItem>({
 				>
 					<Combobox.Options
 						className={clsxm(
-							'absolute mt-3 min-w-full max-h-64',
+							'mt-3 min-w-full max-h-64',
 							'overflow-hidden overflow-y-auto',
 							optionsClassName
 						)}
 					>
-						<Card
-							shadow="bigger"
-							className="md:px-4 py-4 rounded-[12px]"
-							style={{ boxShadow: '0px 14px 39px rgba(0, 0, 0, 0.15)' }}
-						>
+						<div className="md:px-4 py-2 bg-slate-50  rounded-none">
 							{/* This should only show when New item needs to be created */}
 							{query && handleAddNew && (
 								<Combobox.Option
@@ -113,7 +117,7 @@ export function AutoCompleteDropdown<T extends DropdownItem>({
 									onClick={() => {
 										handleAddNew(query);
 									}}
-									className="font-medium cursor-pointer mb-3"
+									className="font-medium cursor-pointer mb-3 flex items-center h-full"
 								>
 									<div className="flex justify-between">{`${query}`}</div>
 								</Combobox.Option>
@@ -132,7 +136,7 @@ export function AutoCompleteDropdown<T extends DropdownItem>({
 
 							{/* Additional content */}
 							<Combobox.Button as="div">{children}</Combobox.Button>
-						</Card>
+						</div>
 					</Combobox.Options>
 				</Transition>
 			</Combobox>
diff --git a/apps/web/lib/features/team/invite/invite-email-dropdown.tsx b/apps/web/lib/features/team/invite/invite-email-dropdown.tsx
index 5fda03568..c2c39eba9 100644
--- a/apps/web/lib/features/team/invite/invite-email-dropdown.tsx
+++ b/apps/web/lib/features/team/invite/invite-email-dropdown.tsx
@@ -19,8 +19,8 @@ export const InviteEmailDropdown = ({
 	selectedEmail: IInviteEmail | undefined;
 	error: string;
 	handleAddNew: (email: string) => void;
-	}) => {
-	const t = useTranslations()
+}) => {
+	const t = useTranslations();
 	const items = useMemo(() => mapTeamMemberItems(emails), [emails]);
 	const $items = useSyncRef(items);
 
@@ -54,6 +54,8 @@ export const InviteEmailDropdown = ({
 				error={error}
 				handleAddNew={handleAddNew}
 				useHandleKeyUp={true}
+				setSelectedEmail={setSelectedEmail}
+				selectedEmail={selectedEmail}
 			/>
 		</>
 	);

From 3b1c019fb23d91fee637fa2835d861f63f3c76b1 Mon Sep 17 00:00:00 2001
From: Cedric Karungu | Lord VB <ckarungu921@gmail.com>
Date: Thu, 14 Nov 2024 22:56:24 +0200
Subject: [PATCH 06/13] fix: update Team Member Role (#3224)

* fix: update Team Member Role

* (apps/web)[fix]: Remove Team Manager

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix: error

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 apps/web/lib/settings/member-table.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/web/lib/settings/member-table.tsx b/apps/web/lib/settings/member-table.tsx
index 83caa5430..497148d72 100644
--- a/apps/web/lib/settings/member-table.tsx
+++ b/apps/web/lib/settings/member-table.tsx
@@ -59,23 +59,18 @@ export const MemberTable = ({ members }: { members: OT_Member[] }) => {
 
 		if (isPromotingToManager) {
 			// Add new manager
-			const updatedMemberIds = [...new Set([
-				...(activeTeamRef.current?.members || []).map((member: OT_Member) => member.employee.id),
-				employeeId
-			])];
+			const updatedManagerIds = [...new Set([...currentManagers, employeeId])];
 
 			return updateOrganizationTeam(activeTeamRef.current, {
 				...activeTeamRef.current,
-				memberIds: updatedMemberIds
+				managerIds: updatedManagerIds
 			});
 		} else {
 			// Remove manager
-			const updatedMemberIds = [...new Set([...currentManagers, employeeId])];
 			const updatedManagerIds = currentManagers.filter(id => id !== employeeId);
 
 			return updateOrganizationTeam(activeTeamRef.current, {
 				...activeTeamRef.current,
-				memberIds: updatedMemberIds,
 				managerIds: updatedManagerIds,
 			});
 		}

From fb2c1a678e6089ac83e6afba5f4b109d994c96e0 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Thu, 14 Nov 2024 23:34:33 +0200
Subject: [PATCH 07/13] Add confirmation modal before deleting a task status
 (#3309)

* add confirmation modal before deleteing a task status if used

* update the status to 'open' after deleting a used status
---
 .../delete-status-confirmation-modal.tsx      | 100 ++++++++++++++++++
 apps/web/lib/settings/task-statuses-form.tsx  |  23 +++-
 apps/web/locales/ar.json                      |   3 +
 apps/web/locales/bg.json                      |   3 +
 apps/web/locales/de.json                      |   3 +
 apps/web/locales/en.json                      |   3 +
 apps/web/locales/es.json                      |   3 +
 apps/web/locales/fr.json                      |   3 +
 apps/web/locales/he.json                      |   3 +
 apps/web/locales/it.json                      |   3 +
 apps/web/locales/nl.json                      |   3 +
 apps/web/locales/pl.json                      |   3 +
 apps/web/locales/pt.json                      |   3 +
 apps/web/locales/ru.json                      |   3 +
 apps/web/locales/zh.json                      |   3 +
 15 files changed, 159 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/lib/features/task-status/delete-status-confirmation-modal.tsx

diff --git a/apps/web/lib/features/task-status/delete-status-confirmation-modal.tsx b/apps/web/lib/features/task-status/delete-status-confirmation-modal.tsx
new file mode 100644
index 000000000..530b46229
--- /dev/null
+++ b/apps/web/lib/features/task-status/delete-status-confirmation-modal.tsx
@@ -0,0 +1,100 @@
+import { ITaskStatusItemList, TaskStatusEnum } from '@/app/interfaces';
+import { useTaskStatus, useTeamTasks } from '@app/hooks';
+import { Button, Card, Modal, Text } from 'lib/components';
+import { useTranslations } from 'next-intl';
+import { useCallback, useMemo } from 'react';
+
+interface DeleteTaskStatusModalProps {
+	open: boolean;
+	closeModal: () => void;
+	status: ITaskStatusItemList;
+	onCancel: () => void;
+}
+
+/**
+ * A confirmation modal before deleting a status that is used by at least one task in the team.
+ *
+ * @param {Object} props - The props Object
+ * @param {boolean} props.open - If true open the modal otherwise close the modal
+ * @param {() => void} props.closeModal - A function to close the modal
+ * @param {ITaskStatusItemList} props.status - The status object to be deleted
+ * @param {() => void} props.onCancel - Callback function when deletion is cancelled
+ *
+ * @returns {JSX.Element} The modal element
+ */
+export function DeleteTaskStatusConfirmationModal(props: DeleteTaskStatusModalProps) {
+	const { closeModal, open, status, onCancel } = props;
+	const { deleteTaskStatus, deleteTaskStatusLoading } = useTaskStatus();
+	const t = useTranslations();
+	const { tasks, updateTask } = useTeamTasks();
+
+	// Filter tasks that are using the current status
+	const tasksUsingStatus = useMemo(() => tasks.filter((task) => task.status === status.name), [tasks, status.name]);
+
+	const handleCloseModal = useCallback(() => {
+		onCancel();
+		closeModal();
+	}, [closeModal, onCancel]);
+
+	// Function to handle task status deletion
+	const handleDeleteTaskStatus = useCallback(async () => {
+		if (!status.id) {
+			console.error('Status ID is not provided.');
+			return;
+		}
+
+		try {
+			// Update each task that uses the current status
+			const updatePromises = tasksUsingStatus.map((task) => updateTask({ ...task, status: TaskStatusEnum.OPEN }));
+
+			await Promise.all(updatePromises);
+
+			// Delete the task status after updating related tasks
+			await deleteTaskStatus(status.id);
+		} catch (error) {
+			console.error('Error while deleting task status:', error);
+		} finally {
+			handleCloseModal();
+		}
+	}, [deleteTaskStatus, handleCloseModal, status, tasksUsingStatus, updateTask]);
+
+	return (
+		<Modal
+			isOpen={open}
+			closeModal={closeModal}
+			className="w-[98%] md:w-[530px] relative"
+			showCloseIcon={false}
+			aria-labelledby="delete-status-modal-title"
+			aria-describedby="delete-status-modal-description"
+		>
+			<Card className="w-full" shadow="custom">
+				<div className="w-full flex flex-col justify-between gap-6">
+					<Text.Heading as="h5" id="delete-status-modal-title" className="mb-3 text-center">
+						{t('pages.taskStatus.DELETE_STATUS_CONFIRMATION', { statusName: status.name })}
+					</Text.Heading>
+					<div className="w-full flex items-center justify-evenly">
+						<Button
+							disabled={deleteTaskStatusLoading}
+							variant="outline"
+							type="button"
+							onClick={handleCloseModal}
+							className="rounded-md font-light text-md dark:text-white dark:bg-slate-700 dark:border-slate-600"
+						>
+							{t('common.NO')}
+						</Button>
+						<Button
+							loading={deleteTaskStatusLoading}
+							disabled={deleteTaskStatusLoading}
+							onClick={handleDeleteTaskStatus}
+							variant="primary"
+							type="submit"
+							className=" rounded-md font-light text-md dark:text-white"
+						>
+							{t('common.YES')}
+						</Button>
+					</div>
+				</div>
+			</Card>
+		</Modal>
+	);
+}
diff --git a/apps/web/lib/settings/task-statuses-form.tsx b/apps/web/lib/settings/task-statuses-form.tsx
index 99ef5c37f..678e9b569 100644
--- a/apps/web/lib/settings/task-statuses-form.tsx
+++ b/apps/web/lib/settings/task-statuses-form.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
-import { useModal, useRefetchData, useTaskStatus } from '@app/hooks';
+import { useModal, useRefetchData, useTaskStatus, useTeamTasks } from '@app/hooks';
 import { IIcon, ITaskStatusItemList } from '@app/interfaces';
 import { userState } from '@app/stores';
 import { clsxm } from '@app/utils';
@@ -15,6 +15,7 @@ import IconPopover from './icon-popover';
 import { StatusesListCard } from './list-card';
 import SortTasksStatusSettings from '@components/pages/kanban/sort-tasks-status-settings';
 import { StandardTaskStatusDropDown } from 'lib/features';
+import { DeleteTaskStatusConfirmationModal } from '../features/task-status/delete-status-confirmation-modal';
 
 type StatusForm = {
   formOnly?: boolean;
@@ -152,6 +153,9 @@ export const TaskStatusesForm = ({
       ? updateArray.sort((a: any, b: any) => a.order - b.order)
       : [];
   const { isOpen, closeModal, openModal } = useModal();
+  const {isOpen : isDeleteConfirmationOpen , closeModal : closeDeleteConfirmationModal, openModal : openDeleteConfirmationModal} = useModal()
+  const [statusToDelete, setStatusToDelete] = useState<ITaskStatusItemList | null>(null)
+  const {tasks} = useTeamTasks()
 
   return (
     <>
@@ -282,8 +286,20 @@ export const TaskStatusesForm = ({
                             setCreateNew(false);
                             setEdit(status);
                           }}
-                          onDelete={() => {
-                            deleteTaskStatus(status.id);
+                          onDelete={async () => {
+							try {
+								const isStatusUsed = tasks.find(
+									(t) => t.status?.toLowerCase() === status.name?.toLowerCase()
+								);
+								if (isStatusUsed) {
+									setStatusToDelete(status);
+									openDeleteConfirmationModal();
+								} else {
+									await deleteTaskStatus(status.id);
+								}
+							} catch (error) {
+								console.error(error);
+							}
                           }}
                           isStatus={true}
                         />
@@ -298,6 +314,7 @@ export const TaskStatusesForm = ({
           </div>
         </div>
       </form>
+	  {statusToDelete && <DeleteTaskStatusConfirmationModal onCancel={() => setStatusToDelete(null)} status={statusToDelete} open={isDeleteConfirmationOpen} closeModal={closeDeleteConfirmationModal}/>}
     </>
   );
 };
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index d977cdb04..e05bce974 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "لا يمكن تغيير نوع المهمة الملحمية.",
 			"TASK_HAS_PARENT": "لا يمكن تغيير نوع المهمة حيث أن لديها بالفعل والد."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "أنت على وشك حذف الحالة {statusName} التي يتم استخدامها من قبل المهام النشطة؛ يرجى تأكيد الإجراء"
+		},
 		"auth": {
 			"SEND_CODE": "إرسال الرمز",
 			"RESEND_CODE": "إعادة إرسال الرمز",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index 8042b15b4..70bebf88c 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "Епичният тип задача не може да бъде променен.",
 			"TASK_HAS_PARENT": "Типът задача не може да бъде променен, тъй като задачата вече има родител."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "Вие сте на път да изтриете състоянието {statusName}, което се използва от активни задачи; моля, потвърдете действието"
+		},
 		"auth": {
 			"SEND_CODE": "изпрати код",
 			"RESEND_CODE": "Изпрати код отново",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index 43c1d47a4..e4938bb7b 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "Epische Aufgabentypen können nicht geändert werden.",
 			"TASK_HAS_PARENT": "Der Aufgabentyp kann nicht geändert werden, da die Aufgabe bereits ein übergeordnetes Element hat."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "Sie sind dabei, den Status {statusName} zu löschen, der von aktiven Aufgaben verwendet wird; bitte bestätigen Sie die Aktion"
+		},
 		"auth": {
 			"SEND_CODE": "Code senden",
 			"RESEND_CODE": "Code erneut senden",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 52974d479..03961d2a3 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "Epic Task Type can not be changed.",
 			"TASK_HAS_PARENT": "Task Type can not be changed as Task has already Parent."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "You are about to Delete the Status {statusName} that is used by active tasks; please confirm action"
+		},
 		"auth": {
 			"SEND_CODE": "send code",
 			"RESEND_CODE": "Resend Code",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 98ed6351d..ed2e54490 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "La tarea de tipo Épico no se puede cambiar.",
 			"TASK_HAS_PARENT": "El tipo de tarea no se puede cambiar porque la tarea ya tiene un padre."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "Está a punto de eliminar el estado {statusName} que está siendo utilizado por tareas activas; por favor confirme la acción"
+		},
 		"auth": {
 			"SEND_CODE": "enviar código",
 			"RESEND_CODE": "Reenviar código",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index e0ce01e92..69179edce 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "Le type de tâche épique ne peut pas être modifié.",
 			"TASK_HAS_PARENT": "Le type de tâche ne peut pas être modifié car la tâche a déjà un parent."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "Vous êtes sur le point de supprimer le statut {statusName} qui est utilisé par des tâches actives ; veuillez confirmer l'action"
+		},
 		"auth": {
 			"SEND_CODE": "envoyer le code",
 			"RESEND_CODE": "Renvoyer le code",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 2762188c2..83c9b1312 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "לא ניתן לשנות סוג משימה אפית.",
 			"TASK_HAS_PARENT": "לא ניתן לשנות סוג משימה מכיוון שלמשימה כבר יש הורה."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "אתה עומד למחוק את המצב {statusName} המשמש במשימות פעילות; נא לאשר פעולה"
+		},
 		"auth": {
 			"SEND_CODE": "שלח קוד",
 			"RESEND_CODE": "שלח קוד מחדש",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 79e55f0d3..90b440c68 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "Il tipo di Compito Epico non può essere cambiato.",
 			"TASK_HAS_PARENT": "Il tipo di Compito non può essere cambiato poiché il Compito ha già un Genitore."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "Stai per eliminare lo stato {statusName} utilizzato da attività attive; per favore conferma l'azione"
+		},
 		"auth": {
 			"SEND_CODE": "Invia Codice",
 			"RESEND_CODE": "Reinvia Codice",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 8919befc3..90b22103b 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "Epic taaktype kan niet worden gewijzigd.",
 			"TASK_HAS_PARENT": "Taaktype kan niet worden gewijzigd omdat de taak al een bovenliggende taak heeft."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "U staat op het punt de status {statusName} te verwijderen die wordt gebruikt door actieve taken; bevestig alstublieft de actie"
+		},
 		"auth": {
 			"SEND_CODE": "code verzenden",
 			"RESEND_CODE": "Code opnieuw verzenden",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index fb9a1170a..afabe281f 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "Typ Zadania jako 'Epic' nie może zostać zmieniony.",
 			"TASK_HAS_PARENT": "Typ Zadania nie może zostać zmieniony, ponieważ Zadanie ma już przypisanego rodzica."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "Zaraz usuniesz status {statusName}, który jest używany przez aktywne zadania; proszę potwierdzić akcję"
+		},
 		"auth": {
 			"SEND_CODE": "wyślij kod",
 			"RESEND_CODE": "Wyślij ponownie kod",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index f1a2201b2..63c3f6cf7 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "O Tipo de Tarefa Épica não pode ser alterado.",
 			"TASK_HAS_PARENT": "O Tipo de Tarefa não pode ser alterado, pois a Tarefa já possui um Pai."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "Está prestes a eliminar o status {statusName} que está a ser usado por tarefas ativas; por favor, confirme a ação"
+		},
 		"auth": {
 			"SEND_CODE": "enviar código",
 			"RESEND_CODE": "Reenviar Código",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index f0afd994e..8f2e0f7e5 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "Тип задачи 'Epic' не может быть изменен.",
 			"TASK_HAS_PARENT": "Тип задачи не может быть изменен, так как у задачи уже есть родитель."
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "Вы собираетесь удалить статус {statusName}, который используется активными задачами; пожалуйста, подтвердите действие"
+		},
 		"auth": {
 			"SEND_CODE": "отправить код",
 			"RESEND_CODE": "Отправить код повторно",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 1b63a666f..4484dfded 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -340,6 +340,9 @@
 			"TASK_IS_ALREADY_EPIC": "史诗类型任务无法更改。",
 			"TASK_HAS_PARENT": "任务已有父任务,无法更改任务类型。"
 		},
+		"taskStatus": {
+			"DELETE_STATUS_CONFIRMATION": "您即将删除正在被活跃任务使用的状态 {statusName}；请确认操作"
+		},
 		"auth": {
 			"SEND_CODE": "发送验证码",
 			"RESEND_CODE": "重新发送验证码",

From 47212e412448ba02c62c56666815c020e69ac606 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Thu, 14 Nov 2024 23:35:52 +0200
Subject: [PATCH 08/13] change position of 'Delete this plan' button (#3322)

---
 apps/web/lib/features/user-profile-plans.tsx | 141 ++++++++++---------
 1 file changed, 76 insertions(+), 65 deletions(-)

diff --git a/apps/web/lib/features/user-profile-plans.tsx b/apps/web/lib/features/user-profile-plans.tsx
index fae576c33..e9c8a5153 100644
--- a/apps/web/lib/features/user-profile-plans.tsx
+++ b/apps/web/lib/features/user-profile-plans.tsx
@@ -58,7 +58,16 @@ export function UserProfilePlans() {
 	const t = useTranslations();
 
 	const profile = useUserProfilePage();
-	const { todayPlan, futurePlans, pastPlans, outstandingPlans, sortedPlans, profileDailyPlans } = useDailyPlan();
+	const {
+		todayPlan,
+		futurePlans,
+		pastPlans,
+		outstandingPlans,
+		sortedPlans,
+		profileDailyPlans,
+		deleteDailyPlan,
+		deleteDailyPlanLoading
+	} = useDailyPlan();
 	const fullWidth = useAtomValue(fullWidthState);
 	const [currentOutstanding, setCurrentOutstanding] = useLocalStorageState<FilterOutstanding>('outstanding', 'ALL');
 	const [currentTab, setCurrentTab] = useLocalStorageState<FilterTabs>('daily-plan-tab', 'Today Tasks');
@@ -85,6 +94,8 @@ export function UserProfilePlans() {
 	const { hasPlan } = useTimer();
 	const { activeTeam } = useTeamTasks();
 	const requirePlan = useMemo(() => activeTeam?.requirePlanToTrack, [activeTeam?.requirePlanToTrack]);
+	const [popupOpen, setPopupOpen] = useState(false);
+	const canSeeActivity = useCanSeeActivityScreen();
 
 	// Set the tab plan tab to outstanding if user has no daily plan and there are outstanding tasks (on first load)
 	useEffect(() => {
@@ -132,7 +143,7 @@ export function UserProfilePlans() {
 					{profileDailyPlans?.items?.length > 0 ? (
 						<div className=" space-y-4">
 							<div className="flex items-center justify-between w-full">
-								<div className={clsxm('flex items-center gap-4 ')}>
+								<div className={clsxm('flex items-center gap-4')}>
 									{Object.keys(tabsScreens).map((filter, i) => (
 										<div key={i} className="flex items-center justify-start gap-4 cursor-pointer">
 											{i !== 0 && <VerticalSeparator className="border-slate-400" />}
@@ -173,6 +184,66 @@ export function UserProfilePlans() {
 									))}
 								</div>
 								<div className="flex  items-center gap-2">
+									{currentTab === 'Today Tasks' && todayPlan[0] && (
+										<>
+											{canSeeActivity ? (
+												<div className="flex justify-end">
+													<AlertPopup
+														open={popupOpen}
+														buttonOpen={
+															//button open popup
+															<Button
+																onClick={() => {
+																	setPopupOpen((prev) => !prev);
+																}}
+																variant="outline"
+																className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+															>
+																{t('common.plan.DELETE_THIS_PLAN')}
+															</Button>
+														}
+													>
+														{/*button confirm*/}
+														<Button
+															disabled={deleteDailyPlanLoading}
+															onClick={async () => {
+																try {
+																	if (requirePlan) {
+																		localStorage.removeItem(
+																			DAILY_PLAN_SUGGESTION_MODAL_DATE
+																		);
+																	}
+																	todayPlan[0].id &&
+																		(await deleteDailyPlan(todayPlan[0].id));
+																} catch (error) {
+																	console.error(error);
+																} finally {
+																	setPopupOpen(false);
+																}
+															}}
+															variant="destructive"
+															className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:bg-red-400"
+														>
+															{deleteDailyPlanLoading && (
+																<ReloadIcon className="w-4 h-4 mr-2 animate-spin" />
+															)}
+															{t('common.DELETE')}
+														</Button>
+														{/*button cancel*/}
+														<Button
+															onClick={() => setPopupOpen(false)}
+															variant="outline"
+															className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+														>
+															{t('common.CANCEL')}
+														</Button>
+													</AlertPopup>
+												</div>
+											) : (
+												<></>
+											)}
+										</>
+									)}
 									{currentTab === 'Outstanding' && (
 										<Select
 											onValueChange={(value) => {
@@ -216,13 +287,8 @@ export function UserProfilePlans() {
 function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; currentTab?: FilterTabs }) {
 	// Filter plans
 	const filteredPlans = useRef<IDailyPlan[]>([]);
-	const { deleteDailyPlan, deleteDailyPlanLoading, sortedPlans, todayPlan } = useDailyPlan();
-	const [popupOpen, setPopupOpen] = useState(false);
-	const [currentDeleteIndex, setCurrentDeleteIndex] = useState(0);
+	const { sortedPlans, todayPlan } = useDailyPlan();
 	const { date } = useDateRange(currentTab);
-	const { activeTeam } = useTeamTasks();
-	const requirePlan = useMemo(() => activeTeam?.requirePlanToTrack, [activeTeam?.requirePlanToTrack]);
-	const t = useTranslations();
 
 	if (currentTab === 'Today Tasks') {
 		filteredPlans.current = todayPlan;
@@ -230,14 +296,13 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 		filteredPlans.current = sortedPlans;
 	}
 
-	const canSeeActivity = useCanSeeActivityScreen();
 	const view = useAtomValue(dailyPlanViewHeaderTabs);
 
 	const [plans, setPlans] = useState(filteredPlans.current);
 
 	useEffect(() => {
 		setPlans(filterDailyPlan(date as any, filteredPlans.current));
-	}, [date, filteredPlans.current]);
+	}, [date, todayPlan]);
 
 	return (
 		<div className="flex flex-col gap-6">
@@ -252,7 +317,7 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 								: [plans?.map((plan) => new Date(plan.date).toISOString().split('T')[0])[0]]
 						}
 					>
-						{plans.map((plan, index) => (
+						{plans.map((plan) => (
 							<AccordionItem
 								value={plan.date.toString().split('T')[0]}
 								key={plan.id}
@@ -338,60 +403,6 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 													)
 												)}
 												<>{provided.placeholder}</>
-												{currentTab === 'Today Tasks' && (
-													<>
-														{canSeeActivity ? (
-															<div className="flex justify-end">
-																<AlertPopup
-																	open={currentDeleteIndex === index && popupOpen}
-																	buttonOpen={
-																		//button open popup
-																		<Button
-																			onClick={() => {
-																				setCurrentDeleteIndex(index);
-																				setPopupOpen((prev) => !prev);
-																			}}
-																			variant="outline"
-																			className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
-																		>
-																			{t('common.plan.DELETE_THIS_PLAN')}
-																		</Button>
-																	}
-																>
-																	{/*button confirm*/}
-																	<Button
-																		disabled={deleteDailyPlanLoading}
-																		onClick={() => {
-																			if (requirePlan) {
-																				localStorage.removeItem(
-																					DAILY_PLAN_SUGGESTION_MODAL_DATE
-																				);
-																			}
-																			deleteDailyPlan(plan.id ?? '');
-																		}}
-																		variant="destructive"
-																		className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:bg-red-400"
-																	>
-																		{deleteDailyPlanLoading && (
-																			<ReloadIcon className="w-4 h-4 mr-2 animate-spin" />
-																		)}
-																		{t('common.DELETE')}
-																	</Button>
-																	{/*button cancel*/}
-																	<Button
-																		onClick={() => setPopupOpen(false)}
-																		variant="outline"
-																		className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
-																	>
-																		{t('common.CANCEL')}
-																	</Button>
-																</AlertPopup>
-															</div>
-														) : (
-															<></>
-														)}
-													</>
-												)}
 											</ul>
 										)}
 									</Droppable>

From bf69973d382228f0990d7604ed25c8dec0d49d73 Mon Sep 17 00:00:00 2001
From: Arick Bulakali <85836702+NdekoCode@users.noreply.github.com>
Date: Thu, 14 Nov 2024 23:36:42 +0200
Subject: [PATCH 09/13] Fix: Double Scrollbars and Overflow when extending the
 Sidebar (#3323)

* fix(web):  Double Scrollbars and Overflow when extending the Sidebar

* fix(web): The mainHeaderSlot content is not being rendered
---
 apps/web/lib/layout/main-layout.tsx | 47 +++++++++++++++++++----------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx
index ea9dd33c9..17cfcbce3 100644
--- a/apps/web/lib/layout/main-layout.tsx
+++ b/apps/web/lib/layout/main-layout.tsx
@@ -3,7 +3,7 @@
 import { cn } from '@/lib/utils';
 import { Toaster, ToastMessageManager } from '@components/ui/toaster';
 import { Container, Divider, Meta } from 'lib/components';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useRef, ReactNode } from 'react';
 import { Footer, Navbar } from '.';
 import { useAtomValue } from 'jotai';
 import { fullWidthState } from '@app/stores/fullWidth';
@@ -19,6 +19,8 @@ type Props = PropsWithChildren<{
 	className?: string;
 	childrenClassName?: string;
 	footerClassName?: string;
+	mainHeaderSlot?: JSX.Element | ReactNode;
+	mainHeaderSlotClassName?: string;
 }>;
 
 export function MainLayout({
@@ -29,9 +31,12 @@ export function MainLayout({
 	notFound,
 	className,
 	childrenClassName,
+	mainHeaderSlot,
+	mainHeaderSlotClassName = '',
 	footerClassName = ''
 }: Props) {
 	const fullWidth = useAtomValue(fullWidthState);
+	const headerRef = useRef<HTMLDivElement>(null);
 	return (
 		<div className="w-full h-full overflow-x-hidden min-w-fit">
 			<style jsx global>
@@ -61,25 +66,35 @@ export function MainLayout({
 				<AppSidebar publicTeam={publicTeam || false} />
 
 				<SidebarInset>
-					<header
-						className={cn(
-							'flex max-h-fit flex-col flex-1 sticky z-50 my-auto inset-x-0 w-full  top-0 h-16 shrink-0 justify-start gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 bg-white dark:bg-dark-high  !mx-0 nav-items--shadow dark:border-b-[0.125rem] dark:border-b-[#26272C]',
-							!fullWidth ? 'lg:px-8' : 'px-8'
-						)}
-					>
-						<Navbar
+					<div ref={headerRef} className="min-h-fit h-max">
+						<header
 							className={cn(
-								'flex items-center justify-end w-full transition-all h-max',
-								!fullWidth ? 'x-container mx-auto' : '!mx-0'
+								'flex max-h-fit flex-col flex-1 sticky z-50 my-auto inset-x-0 w-full min-h-[80px] top-0 h-fit shrink-0 justify-start gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 bg-white dark:bg-dark-high  !mx-0 nav-items--shadow dark:border-b-[0.125rem] dark:border-b-[#26272C]',
+								!fullWidth ? 'lg:px-8' : 'px-8'
 							)}
-							showTimer={showTimer}
-							publicTeam={publicTeam || false}
-							notFound={notFound || false}
-						/>
-					</header>
+						>
+							<Navbar
+								className={cn(
+									'flex items-center justify-end w-full transition-all h-max',
+									!fullWidth ? 'x-container mx-auto' : '!mx-0'
+								)}
+								showTimer={showTimer}
+								publicTeam={publicTeam || false}
+								notFound={notFound || false}
+							/>
+						</header>
+						{mainHeaderSlot ? <div className={cn(mainHeaderSlotClassName)}>{mainHeaderSlot}</div> : null}
+					</div>
+
 					<div className={cn('flex flex-1 flex-col gap-4 p-4 h-max pt-5', className)}>
 						<MainSidebarTrigger />
-						<div className={cn('min-h-[100vh] flex-1', childrenClassName)}>{children}</div>
+						{/* Warning: this is to remove the unwanted double scroll on the Dashboard */}
+						<div
+							className={cn('min-h-[calc(100vh_-_240px)] h-full flex flex-col flex-1', childrenClassName)}
+							style={mainHeaderSlot ? { marginTop: `${headerRef?.current?.offsetHeight}px` } : undefined}
+						>
+							{children}
+						</div>
 					</div>
 					<Container
 						fullWidth={fullWidth}

From 3d71b2e477f7d24677df56a2b09101d9bf24084d Mon Sep 17 00:00:00 2001
From: Arick Bulakali <85836702+NdekoCode@users.noreply.github.com>
Date: Thu, 14 Nov 2024 23:37:14 +0200
Subject: [PATCH 10/13] Fix colours for sidebar links in dark mode (#3325)

* fix(web): Fix colours for sidebar links in dark mode

* fix(web): Fix colours for team task title and search border

* fix(web): sub active menu
---
 apps/web/components/nav-main.tsx                     | 10 +++++++---
 .../components/pages/team/tasks/tasks-data-table.tsx | 12 +++++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/nav-main.tsx b/apps/web/components/nav-main.tsx
index 8dfd21d4b..de5446bdf 100644
--- a/apps/web/components/nav-main.tsx
+++ b/apps/web/components/nav-main.tsx
@@ -80,7 +80,9 @@ export function NavMain({
 										className={cn(
 											'hover:bg-[#eaeef4] text-[#1F2937] items-center dark:text-gray-50 data-[active=true]:bg-[#eaeef4] min-h-10 h-10 dark:hover:bg-sidebar-accent px-3 py-2 transition-colors duration-300',
 											state === 'collapsed' ? ' justify-center' : '',
-											index === activeMenuIndex ? 'font-medium bg-[#eaeef4]' : '!font-normal' // Style for active menu
+											index === activeMenuIndex
+												? 'font-medium bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
+												: '!font-normal' // Style for active menu
 										)}
 										asChild
 										tooltip={item.title}
@@ -110,7 +112,9 @@ export function NavMain({
 									className={cn(
 										'hover:bg-[#eaeef4] text-[#1F2937] items-center dark:text-gray-50 data-[active=true]:bg-[#eaeef4] min-h-10 h-10 dark:hover:bg-sidebar-accent px-3 py-2 transition-colors duration-300',
 										state === 'collapsed' ? ' justify-center' : '',
-										index === activeMenuIndex ? 'font-medium' : '!font-normal'
+										index === activeMenuIndex
+											? 'font-medium bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
+											: '!font-normal'
 									)}
 									asChild
 									tooltip={item.title}
@@ -154,7 +158,7 @@ export function NavMain({
 
 																// Style for active sub-menu
 																key === activeSubMenuIndex
-																	? 'font-medium bg-[#eaeef4]'
+																	? 'font-medium bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
 																	: '!font-light'
 															)}
 															onClick={() => handleSubMenuToggle(key)}
diff --git a/apps/web/components/pages/team/tasks/tasks-data-table.tsx b/apps/web/components/pages/team/tasks/tasks-data-table.tsx
index d8dd86767..65fc87cb8 100644
--- a/apps/web/components/pages/team/tasks/tasks-data-table.tsx
+++ b/apps/web/components/pages/team/tasks/tasks-data-table.tsx
@@ -7,6 +7,7 @@ import StatusBadge from './StatusBadge';
 import { ITaskStatus, ITeamTask } from '@/app/interfaces';
 import { Input } from '@components/ui/input';
 import { Search } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 interface DataTableProps<TData, TValue> {
 	columns: ColumnDef<TData, TValue>[];
 	data: TData[];
@@ -21,12 +22,13 @@ export function TasksDataTable<TData, TValue>({ columns, data, className }: Read
 		getFilteredRowModel: getFilteredRowModel()
 	});
 	const tasks = data as ITeamTask[];
+	const t = useTranslations();
 	return (
 		<>
 			<div className="flex flex-col my-5 leading-snug">
 				<div className="flex flex-wrap items-center justify-between w-full gap-10 py-2 max-md:max-w-full">
-					<h1 className="self-stretch my-auto text-4xl font-medium tracking-tighter text-indigo-950">
-						Team Tasks
+					<h1 className="self-stretch my-auto text-4xl font-medium tracking-tighter text-indigo-950 dark:text-gray-50">
+						{t('sidebar.TEAMTASKS')}
 					</h1>
 					<nav className="flex flex-wrap gap-3.5 items-center self-stretch my-auto text-sm font-medium tracking-tight min-w-[240px] text-indigo-950 max-md:max-w-full">
 						<div className="flex gap-2.5 justify-center items-center self-stretch my-auto font-medium text-slate-800">
@@ -42,15 +44,15 @@ export function TasksDataTable<TData, TValue>({ columns, data, className }: Read
 							</div>
 						</div>
 						<FilterButton table={table} />
-						<div className="w-px h-6 bg-gray-200" />
-						<div className="flex gap-2.5 items-center relative min-w-[122px] border border-gray-200 dark:border-gray-300 rounded-lg">
+						<div className="w-px h-6 bg-gray-200 dark:bg-gray-400" />
+						<div className="flex gap-2.5 items-center relative min-w-[122px] text-muted-foreground border border-gray-200 dark:border-gray-400 rounded-md">
 							<Search className="absolute w-4 h-4 left-3" />
 
 							<Input
 								placeholder="Search tasks..."
 								value={(table.getColumn('title')?.getFilterValue() as string) ?? ''}
 								onChange={(event) => table.getColumn('title')?.setFilterValue(event.target.value)}
-								className="max-w-sm pl-10 bg-transparent border-none placeholder:font-normal"
+								className="max-w-sm pl-10 bg-transparent border-none dark:focus-visible:!border-[#c8c8c8] transition-all duration-200  placeholder:font-normal"
 							/>
 						</div>
 						<Button className="text-[#B1AEBC]" variant="ghost" size="icon" aria-label="More options">

From 9a9421302e7f48ca8765518677cfef8de25d0e3a Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Thu, 14 Nov 2024 23:41:58 +0200
Subject: [PATCH 11/13] [Feat]: Add Timelog FilterOptions  (#3333)

* feat: add useTimelogFilterOptions hook for managing time log filter states

* fix:coderabbitai

* fix:build

* feat:save multi select filter in localstorage clear on cancel

* fix:coderabbitai
---
 .../components/TimeSheetFilterPopover.tsx     | 31 +++++----
 .../hooks/features/useTimelogFilterOptions.ts | 25 ++++++++
 apps/web/app/hooks/features/useTimesheet.ts   | 17 +++--
 apps/web/app/hooks/index.ts                   |  1 +
 apps/web/app/interfaces/timer/ITimerLog.ts    |  3 +-
 .../services/client/api/timer/timer-log.ts    | 16 ++++-
 apps/web/app/stores/index.ts                  |  1 +
 apps/web/app/stores/time-logs.ts              | 13 +++-
 .../components/custom-select/multi-select.tsx | 63 ++++++++++++-------
 .../calendar/table-time-sheet.tsx             |  2 +-
 .../web/lib/features/task/task-block-card.tsx |  2 +-
 apps/web/lib/features/task/task-issue.tsx     |  2 +-
 12 files changed, 128 insertions(+), 48 deletions(-)
 create mode 100644 apps/web/app/hooks/features/useTimelogFilterOptions.ts

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
index 743a0e4ab..d241c7650 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
@@ -1,8 +1,8 @@
+import React from "react";
 import { useOrganizationTeams, useTeamTasks } from "@app/hooks";
 import { Button } from "@components/ui/button";
 import { statusOptions } from "@app/constants";
 import { MultiSelect } from "lib/components/custom-select";
-import React, { useEffect } from "react";
 import {
     Popover,
     PopoverContent,
@@ -11,16 +11,17 @@ import {
 import { SettingFilterIcon } from "@/assets/svg";
 import { useTranslations } from "next-intl";
 import { clsxm } from "@/app/utils";
+import { useTimelogFilterOptions } from "@/app/hooks";
 
 
-
-export function TimeSheetFilterPopover() {
+export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover() {
     const [shouldRemoveItems, setShouldRemoveItems] = React.useState(false);
     const { activeTeam } = useOrganizationTeams();
     const { tasks } = useTeamTasks();
     const t = useTranslations();
+    const { setEmployeeState, setProjectState, setStatusState, setTaskState, employee, project, statusState, task } = useTimelogFilterOptions();
 
-    useEffect(() => {
+    React.useEffect(() => {
         if (shouldRemoveItems) {
             setShouldRemoveItems(false);
         }
@@ -46,14 +47,15 @@ export function TimeSheetFilterPopover() {
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('manualTime.EMPLOYEE')}</span>
-                                    <span className={clsxm("text-primary/10")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", employee?.length > 0 && "text-primary dark:text-primary-light")}>Clear</span>
                                 </label>
                                 <MultiSelect
+                                    localStorageKey="timesheet-select-filter-employee"
                                     removeItems={shouldRemoveItems}
                                     items={activeTeam?.members ?? []}
                                     itemToString={(members) => (members ? members.employee.fullName : '')}
                                     itemId={(item) => item.id}
-                                    onValueChange={(selectedItems) => console.log(selectedItems)}
+                                    onValueChange={(selectedItems) => setEmployeeState(selectedItems as any)}
                                     multiSelect={true}
                                     triggerClassName="dark:border-gray-700"
                                 />
@@ -61,14 +63,15 @@ export function TimeSheetFilterPopover() {
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('sidebar.PROJECTS')}</span>
-                                    <span className={clsxm("text-primary/10")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", project?.length > 0 && "text-primary dark:text-primary-light")}>Clear</span>
                                 </label>
                                 <MultiSelect
+                                    localStorageKey="timesheet-select-filter-projects"
                                     removeItems={shouldRemoveItems}
                                     items={activeTeam?.projects ?? []}
                                     itemToString={(project) => (activeTeam?.projects ? project.name! : '')}
                                     itemId={(item) => item.id}
-                                    onValueChange={(selectedItems) => console.log(selectedItems)}
+                                    onValueChange={(selectedItems) => setProjectState(selectedItems as any)}
                                     multiSelect={true}
                                     triggerClassName="dark:border-gray-700"
                                 />
@@ -76,12 +79,13 @@ export function TimeSheetFilterPopover() {
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('hotkeys.TASK')}</span>
-                                    <span className={clsxm("text-primary/10")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", task?.length > 0 && "text-primary dark:text-primary-light")}>Clear</span>
                                 </label>
                                 <MultiSelect
+                                    localStorageKey="timesheet-select-filter-task"
                                     removeItems={shouldRemoveItems}
                                     items={tasks}
-                                    onValueChange={(task) => task}
+                                    onValueChange={(selectedItems) => setTaskState(selectedItems as any)}
                                     itemId={(task) => (task ? task.id : '')}
                                     itemToString={(task) => (task ? task.title : '')}
                                     multiSelect={true}
@@ -91,14 +95,15 @@ export function TimeSheetFilterPopover() {
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('common.STATUS')}</span>
-                                    <span className={clsxm("text-primary/10")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", statusState && "text-primary dark:text-primary-light")}>Clear</span>
                                 </label>
                                 <MultiSelect
+                                    localStorageKey="timesheet-select-filter-status"
                                     removeItems={shouldRemoveItems}
                                     items={statusOptions}
                                     itemToString={(status) => (status ? status.value : '')}
                                     itemId={(item) => item.value}
-                                    onValueChange={(selectedItems) => console.log(selectedItems)}
+                                    onValueChange={(selectedItems) => setStatusState(selectedItems)}
                                     multiSelect={true}
                                     triggerClassName="dark:border-gray-700"
                                 />
@@ -121,4 +126,4 @@ export function TimeSheetFilterPopover() {
             </Popover>
         </>
     )
-}
+})
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
new file mode 100644
index 000000000..60733481f
--- /dev/null
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -0,0 +1,25 @@
+import { timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState } from '@/app/stores';
+import { useAtom } from 'jotai';
+
+export function useTimelogFilterOptions() {
+    const [employeeState, setEmployeeState] = useAtom(timesheetFilterEmployeeState);
+    const [projectState, setProjectState] = useAtom(timesheetFilterProjectState);
+    const [statusState, setStatusState] = useAtom(timesheetFilterStatusState);
+    const [taskState, setTaskState] = useAtom(timesheetFilterTaskState);
+
+    const employee = employeeState;
+    const project = projectState;
+    const task = taskState
+
+
+    return {
+        statusState,
+        employee,
+        project,
+        task,
+        setEmployeeState,
+        setProjectState,
+        setTaskState,
+        setStatusState
+    };
+}
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index d2e398ade..c11e196ff 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -6,10 +6,11 @@ import { useCallback, useEffect } from 'react';
 import { getTaskTimesheetLogsApi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
 import { ITimeSheet } from '@/app/interfaces';
+import { useTimelogFilterOptions } from './useTimelogFilterOptions';
 
 interface TimesheetParams {
-    startDate: Date | string;
-    endDate: Date | string;
+    startDate?: Date | string;
+    endDate?: Date | string;
 }
 
 export interface GroupedTimesheet {
@@ -45,7 +46,7 @@ export function useTimesheet({
 }: TimesheetParams) {
     const { user } = useAuthenticateUser();
     const [timesheet, setTimesheet] = useAtom(timesheetRapportState);
-
+    const { employee, project } = useTimelogFilterOptions();
     const { loading: loadingTimesheet, queryCall: queryTimesheet } = useQuery(getTaskTimesheetLogsApi);
 
     const getTaskTimesheet = useCallback(
@@ -59,13 +60,21 @@ export function useTimesheet({
                 organizationId: user.employee?.organizationId,
                 tenantId: user.tenantId ?? '',
                 timeZone: user.timeZone?.split('(')[0].trim(),
+                employeeIds: employee?.map((member) => member.employee.id).filter((id) => id !== undefined),
+                projectIds: project?.map((project) => project.id).filter((id) => id !== undefined)
             }).then((response) => {
                 setTimesheet(response.data);
             }).catch((error) => {
                 console.error('Error fetching timesheet:', error);
             });
         },
-        [user, queryTimesheet, setTimesheet]
+        [
+            user,
+            queryTimesheet,
+            setTimesheet,
+            employee,
+            project
+        ]
     );
     useEffect(() => {
         getTaskTimesheet({ startDate, endDate });
diff --git a/apps/web/app/hooks/index.ts b/apps/web/app/hooks/index.ts
index 93610f55d..5f4642a6a 100644
--- a/apps/web/app/hooks/index.ts
+++ b/apps/web/app/hooks/index.ts
@@ -40,6 +40,7 @@ export * from './features/useTeamTasks';
 export * from './features/useTimer';
 export * from './features/useUser';
 export * from './features/useUserProfilePage';
+export * from './features/useTimelogFilterOptions';
 export * from './useCollaborative';
 
 //export user personal setting
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
index f7131863a..3e30da712 100644
--- a/apps/web/app/interfaces/timer/ITimerLog.ts
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -11,7 +11,9 @@ interface Project {
 interface Task {
     id: string;
     title: string;
+    issueType?: ITaskIssue | null;
     estimate: number | null;
+    taskStatus: string | null;
     taskNumber: string;
 }
 
@@ -71,5 +73,4 @@ export interface ITimeSheet {
     employee: Employee;
     duration: number;
     isEdited: boolean;
-    issueType?: ITaskIssue;
 }
diff --git a/apps/web/app/services/client/api/timer/timer-log.ts b/apps/web/app/services/client/api/timer/timer-log.ts
index c7b86175b..f3a5b13b4 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -20,13 +20,17 @@ export async function getTaskTimesheetLogsApi({
 	tenantId,
 	startDate,
 	endDate,
-	timeZone
+	timeZone,
+	projectIds = [],
+	employeeIds = []
 }: {
 	organizationId: string,
 	tenantId: string,
 	startDate: string | Date,
 	endDate: string | Date,
-	timeZone?: string
+	timeZone?: string,
+	projectIds?: string[],
+	employeeIds?: string[]
 }) {
 
 	if (!organizationId || !tenantId || !startDate || !endDate) {
@@ -37,7 +41,6 @@ export async function getTaskTimesheetLogsApi({
 	if (isNaN(new Date(start).getTime()) || isNaN(new Date(end).getTime())) {
 		throw new Error('Invalid date format provided');
 	}
-
 	const params = new URLSearchParams({
 		'activityLevel[start]': '0',
 		'activityLevel[end]': '100',
@@ -53,6 +56,13 @@ export async function getTaskTimesheetLogsApi({
 		'relations[4]': 'task.taskStatus'
 	});
 
+	projectIds.forEach((id, index) => {
+		params.append(`projectIds[${index}]`, id);
+	});
+
+	employeeIds.forEach((id, index) => {
+		params.append(`employeeIds[${index}]`, id);
+	});
 	const endpoint = `/timesheet/time-log?${params.toString()}`;
 	return get<ITimeSheet[]>(endpoint, { tenantId });
 }
diff --git a/apps/web/app/stores/index.ts b/apps/web/app/stores/index.ts
index 35f126481..5ad723561 100644
--- a/apps/web/app/stores/index.ts
+++ b/apps/web/app/stores/index.ts
@@ -27,3 +27,4 @@ export * from './integration-tenant';
 export * from './integration-github';
 export * from './integration-types';
 export * from './integration';
+export * from './time-logs'
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index 3cf5395ea..9f607b4ff 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -1,7 +1,18 @@
 import { ITimerLogsDailyReport } from '@app/interfaces/timer/ITimerLogs';
 import { atom } from 'jotai';
-import { ITimeSheet } from '../interfaces';
+import { IProject, ITeamTask, ITimeSheet, OT_Member } from '../interfaces';
+
+interface IFilterOption {
+    value: string;
+    label: string;
+}
 
 export const timerLogsDailyReportState = atom<ITimerLogsDailyReport[]>([]);
 
 export const timesheetRapportState = atom<ITimeSheet[]>([])
+
+export const timesheetFilterEmployeeState = atom<OT_Member[]>([]);
+export const timesheetFilterProjectState = atom<IProject[]>([]);
+export const timesheetFilterTaskState = atom<ITeamTask[]>([]);
+
+export const timesheetFilterStatusState = atom<IFilterOption | IFilterOption[] | null>([]);
diff --git a/apps/web/lib/components/custom-select/multi-select.tsx b/apps/web/lib/components/custom-select/multi-select.tsx
index 585758a13..670f79508 100644
--- a/apps/web/lib/components/custom-select/multi-select.tsx
+++ b/apps/web/lib/components/custom-select/multi-select.tsx
@@ -16,7 +16,8 @@ interface MultiSelectProps<T> {
     renderItem?: (item: T, onClick: () => void, isSelected: boolean) => JSX.Element;
     defaultValue?: T | T[];
     multiSelect?: boolean;
-    removeItems?: boolean
+    removeItems?: boolean;
+    localStorageKey?: string;
 }
 
 export function MultiSelect<T>({
@@ -29,13 +30,49 @@ export function MultiSelect<T>({
     renderItem,
     defaultValue,
     multiSelect = false,
-    removeItems
+    removeItems,
+    localStorageKey = "select-items-selected",
 }: MultiSelectProps<T>) {
-    const [selectedItems, setSelectedItems] = useState<T[]>(Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : []);
+    const [selectedItems, setSelectedItems] = useState<T[]>(() => {
+        if (typeof window === 'undefined') return [];
+        try {
+            const saved = localStorage.getItem(localStorageKey);
+            return saved ? JSON.parse(saved) : [];
+        } catch {
+            return [];
+        }
+    });
     const [isPopoverOpen, setPopoverOpen] = useState(false);
     const [popoverWidth, setPopoverWidth] = useState<number | null>(null);
     const triggerRef = useRef<HTMLButtonElement>(null);
 
+    // Load selected items from localStorage on component mount
+    useEffect(() => {
+        if (defaultValue) {
+            const initialItems = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+            setSelectedItems(initialItems);
+        }
+    }, [defaultValue, setSelectedItems]);
+
+    useEffect(() => {
+        if (onValueChange) {
+            onValueChange(multiSelect ? selectedItems : selectedItems[0] || null);
+        }
+    }, [selectedItems, multiSelect, onValueChange]);
+
+    // Save selected items to localStorage whenever they change
+    // Handle persistence
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            try {
+                localStorage.setItem(localStorageKey, JSON.stringify(selectedItems));
+            } catch (error) {
+                console.error('Failed to save to localStorage:', error);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedItems, localStorageKey]);
+
     const onClick = (item: T) => {
         let newSelectedItems: T[];
         if (multiSelect) {
@@ -49,25 +86,15 @@ export function MultiSelect<T>({
             setPopoverOpen(false);
         }
         setSelectedItems(newSelectedItems);
-        if (onValueChange) {
-            onValueChange(multiSelect ? newSelectedItems : newSelectedItems[0]);
-        }
     };
 
-
     const removeItem = (item: T) => {
         const newSelectedItems = selectedItems.filter((selectedItem) => itemId(selectedItem) !== itemId(item));
         setSelectedItems(newSelectedItems);
-        if (onValueChange) {
-            onValueChange(multiSelect ? newSelectedItems : newSelectedItems.length > 0 ? newSelectedItems[0] : null);
-        }
     };
 
     const removeAllItems = () => {
         setSelectedItems([]);
-        if (onValueChange) {
-            onValueChange(null);
-        }
     };
 
     useEffect(() => {
@@ -83,16 +110,6 @@ export function MultiSelect<T>({
     }, [removeItems, removeAllItems]) // deepscan-disable-line
 
 
-    useEffect(() => {
-        const initialItems = Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : [];
-        setSelectedItems(initialItems);
-        if (onValueChange) {
-            onValueChange(multiSelect ? initialItems : initialItems[0] || null);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultValue]);
-
-
     useEffect(() => {
         if (triggerRef.current) {
             setPopoverWidth(triggerRef.current.offsetWidth);
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 c530fbfd5..83468b5bb 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -271,7 +271,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
                                                             <span className="text-[#868688]">24:30h</span>
                                                         </Badge>
                                                     </div>
-                                                    <div className="flex items-center gap-2 p-x-1">
+                                                    <div className={clsxm("flex items-center gap-2 p-x-1")}>
                                                         {getTimesheetButtons(status as StatusType, t, handleButtonClick)}
                                                     </div>
                                                 </div>
diff --git a/apps/web/lib/features/task/task-block-card.tsx b/apps/web/lib/features/task/task-block-card.tsx
index d84d6985d..c008e6ab6 100644
--- a/apps/web/lib/features/task/task-block-card.tsx
+++ b/apps/web/lib/features/task/task-block-card.tsx
@@ -76,7 +76,7 @@ export default function TaskBlockCard(props: TaskItemProps) {
             previousValue + currentValue.duration,
           0
         )) ||
-      0
+    0
   );
 
   return (
diff --git a/apps/web/lib/features/task/task-issue.tsx b/apps/web/lib/features/task/task-issue.tsx
index 4632a8cf3..1b494a2f8 100644
--- a/apps/web/lib/features/task/task-issue.tsx
+++ b/apps/web/lib/features/task/task-issue.tsx
@@ -221,7 +221,7 @@ export function TaskIssueStatusTimesheet({
 }: { task: Nullable<ITimeSheet>; showIssueLabels?: boolean } & IClassName) {
 	return (
 		<TaskStatus
-			{...taskIssues[task?.issueType || 'Task']}
+			{...taskIssues[task?.task.issueType || 'Task']}
 			showIssueLabels={showIssueLabels}
 			issueType="issue"
 			className={clsxm('rounded-md px-2 text-white', className)}

From 678899f210bc4a1050ab8fd3f26c4d51f19803c8 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Thu, 14 Nov 2024 23:44:03 +0200
Subject: [PATCH 12/13] [Feat]: Update DynamicSelect component and localization
 Files (#3334)

* feat: Update DynamicSelect component and localization files

* fix: coderabbitai

* fix: coderabbitai

---------

Co-authored-by: Ruslan Konviser <evereq@gmail.com>
---
 .../components/TimeSheetFilterPopover.tsx     | 12 ++--
 .../components/TimesheetFilterDate.tsx        |  2 +-
 .../components/custom-select/select-items.tsx | 69 +++++++++++++++++++
 .../manual-time/add-manual-time-modal.tsx     | 20 ------
 apps/web/locales/ar.json                      |  5 +-
 apps/web/locales/bg.json                      |  5 +-
 apps/web/locales/de.json                      |  5 +-
 apps/web/locales/en.json                      |  5 +-
 apps/web/locales/es.json                      |  5 +-
 apps/web/locales/fr.json                      |  5 +-
 apps/web/locales/he.json                      |  5 +-
 apps/web/locales/it.json                      |  5 +-
 apps/web/locales/nl.json                      |  5 +-
 apps/web/locales/pl.json                      |  5 +-
 apps/web/locales/pt.json                      |  5 +-
 apps/web/locales/ru.json                      |  5 +-
 apps/web/locales/zh.json                      |  5 +-
 17 files changed, 128 insertions(+), 40 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
index d241c7650..48d04748d 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
@@ -47,7 +47,7 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('manualTime.EMPLOYEE')}</span>
-                                    <span className={clsxm("text-primary/10", employee?.length > 0 && "text-primary dark:text-primary-light")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", employee?.length > 0 && "text-primary dark:text-primary-light")}>{t('common.CLEAR')}</span>
                                 </label>
                                 <MultiSelect
                                     localStorageKey="timesheet-select-filter-employee"
@@ -63,7 +63,7 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('sidebar.PROJECTS')}</span>
-                                    <span className={clsxm("text-primary/10", project?.length > 0 && "text-primary dark:text-primary-light")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", project?.length > 0 && "text-primary dark:text-primary-light")}>{t('common.CLEAR')}</span>
                                 </label>
                                 <MultiSelect
                                     localStorageKey="timesheet-select-filter-projects"
@@ -79,7 +79,7 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('hotkeys.TASK')}</span>
-                                    <span className={clsxm("text-primary/10", task?.length > 0 && "text-primary dark:text-primary-light")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", task?.length > 0 && "text-primary dark:text-primary-light")}>{t('common.CLEAR')}</span>
                                 </label>
                                 <MultiSelect
                                     localStorageKey="timesheet-select-filter-task"
@@ -95,7 +95,7 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
                             <div className="">
                                 <label className="flex justify-between text-gray-600 mb-1 text-sm">
                                     <span className="text-[12px]">{t('common.STATUS')}</span>
-                                    <span className={clsxm("text-primary/10", statusState && "text-primary dark:text-primary-light")}>Clear</span>
+                                    <span className={clsxm("text-primary/10", statusState && "text-primary dark:text-primary-light")}>{t('common.CLEAR')}</span>
                                 </label>
                                 <MultiSelect
                                     localStorageKey="timesheet-select-filter-status"
@@ -113,11 +113,11 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
                                     onClick={() => setShouldRemoveItems(true)}
                                     variant={'outline'}
                                     className='flex items-center text-sm justify-center h-10   rounded-lg  dark:text-gray-300' >
-                                    <span className="text-sm">Clear Filter</span>
+                                    <span className="text-sm">{t('common.CLEAR_FILTER')}</span>
                                 </Button>
                                 <Button
                                     className='flex items-center text-sm justify-center h-10  rounded-lg bg-primary dark:bg-primary-light dark:text-gray-300' >
-                                    <span className="text-sm">Apply Filter</span>
+                                    <span className="text-sm">{t('common.APPLY_FILTER')}</span>
                                 </Button>
                             </div>
                         </div>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
index db5d266a8..9d5888f63 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
@@ -175,7 +175,7 @@ export function TimesheetFilterDate({
                         <Button
                             key={index}
                             variant="outline"
-                            className="h-7 flex items-center justify-between border-none text-[12px] text-gray-700 dark:dark:bg-dark--theme-light"
+                            className={clsxm("h-6 flex items-center justify-between border-none text-[12px] text-gray-700 dark:bg-dark--theme-light hover:bg-primary  hover:text-white hover:dark:bg-primary-light")}
                             onClick={() => {
                                 label === t('common.FILTER_CUSTOM_RANGE') && setIsVisible((prev) => !prev)
                                 handlePresetClick(label)
diff --git a/apps/web/lib/components/custom-select/select-items.tsx b/apps/web/lib/components/custom-select/select-items.tsx
index 0e56528b7..78f523191 100644
--- a/apps/web/lib/components/custom-select/select-items.tsx
+++ b/apps/web/lib/components/custom-select/select-items.tsx
@@ -3,6 +3,16 @@ import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover'
 import { cn } from 'lib/utils';
 import { useEffect, useState } from 'react';
 import { MdOutlineKeyboardArrowDown } from 'react-icons/md';
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select"
+import React from 'react';
 
 interface SelectItemsProps<T> {
 	items: T[];
@@ -94,3 +104,62 @@ export function SelectItems<T>({
 		</Popover>
 	);
 }
+
+
+type DynamicSelectProps<T> = {
+	items: T[]
+	label: string
+	placeholder: string
+	getItemLabel: (item: T) => string
+	getItemValue: (item: T) => string
+	onChange?: (value: string) => void
+	disabled?: boolean
+	error?: string
+	defaultValue?: string
+}
+
+export const DynamicSelect = React.memo(function DynamicSelect<T>({
+	items,
+	label,
+	placeholder,
+	getItemLabel,
+	getItemValue,
+	onChange,
+	disabled,
+	error,
+	defaultValue
+}: DynamicSelectProps<T>) {
+	return (
+		<Select
+			onValueChange={onChange}
+			disabled={disabled}
+			defaultValue={defaultValue}>
+			<SelectTrigger
+				className={cn(
+					"w-full",
+					error && "border-red-500 focus:ring-red-500"
+				)}
+			>
+				<SelectValue placeholder={placeholder} />
+			</SelectTrigger>
+			<SelectContent className='z-[10000]'>
+				<SelectGroup>
+					<SelectLabel>{label}</SelectLabel>
+					{items.map((item, index) => (
+						<SelectItem key={getItemValue(item)} value={getItemValue(item)}>
+							{getItemLabel(item)}
+						</SelectItem>
+					))}
+				</SelectGroup>
+			</SelectContent>
+			{error && (
+				<p
+					className="mt-1 text-sm text-red-500"
+					role="alert"
+					aria-live="polite">
+					{error}
+				</p>
+			)}
+		</Select>
+	)
+})
diff --git a/apps/web/lib/features/manual-time/add-manual-time-modal.tsx b/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
index 97151553c..e67af3598 100644
--- a/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
+++ b/apps/web/lib/features/manual-time/add-manual-time-modal.tsx
@@ -296,26 +296,6 @@ export function AddManualTimeModal(props: Readonly<IAddManualTimeModalProps>) {
 						{timeDifference}
 					</div>
 				</div>
-
-				{/* <div className="">
-					<label className="block text-gray-500 mb-1">
-						{t('manualTime.TEAM')}<span className="text-[#de5505e1] ml-1">*</span>
-					</label>
-					{
-						activeTeam ?
-							<SelectItems
-								defaultValue={activeTeam}
-								items={teams}
-								onValueChange={(team) => setTeam(team)}
-								itemId={(team) => (team ? team.id : '')}
-								itemToString={(team) => (team ? team.name : '')}
-								triggerClassName="border-gray-300 dark:border-slate-600"
-							/>
-							:
-							<></>
-					}
-				</div> */}
-
 				{params === 'AddManuelTime' ? (
 					<>
 						<ManageOrMemberComponent
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index e05bce974..77d575a46 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -244,7 +244,10 @@
 		"FILTER_LAST_7_DAYS": "آخر 7 أيام",
 		"FILTER_LAST_30_DAYS": "آخر 30 يومًا",
 		"FILTER_THIS_YEAR": "هذا العام {year}",
-		"FILTER_CUSTOM_RANGE": "نطاق مخصص"
+		"FILTER_CUSTOM_RANGE": "نطاق مخصص",
+		"CLEAR_FILTER": "مسح الفلتر",
+		"CLEAR": "مسح",
+		"APPLY_FILTER": "تطبيق الفلتر"
 	},
 	"sidebar": {
 		"DASHBOARD": "لوحة التحكم",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index 70bebf88c..146962a2e 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Последните 7 дни",
 		"FILTER_LAST_30_DAYS": "Последните 30 дни",
 		"FILTER_THIS_YEAR": "Тази година {year}",
-		"FILTER_CUSTOM_RANGE": "Потребителски диапазон"
+		"FILTER_CUSTOM_RANGE": "Потребителски диапазон",
+		"CLEAR_FILTER": "Изчисти филтъра",
+		"CLEAR": "Изчисти",
+		"APPLY_FILTER": "Приложи филтър"
 	},
 	"hotkeys": {
 		"HELP": "Помощ",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index e4938bb7b..c42de6e56 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Letzte 7 Tage",
 		"FILTER_LAST_30_DAYS": "Letzte 30 Tage",
 		"FILTER_THIS_YEAR": "Dieses Jahr {year}",
-		"FILTER_CUSTOM_RANGE": "Benutzerdefinierter Bereich"
+		"FILTER_CUSTOM_RANGE": "Benutzerdefinierter Bereich",
+		"CLEAR_FILTER": "Filter löschen",
+		"CLEAR": "Löschen",
+		"APPLY_FILTER": "Filter anwenden"
 	},
 	"hotkeys": {
 		"HELP": "Hilfe",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 03961d2a3..a35d7ec92 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Last 7 Days",
 		"FILTER_LAST_30_DAYS": "Last 30 Days",
 		"FILTER_THIS_YEAR": "This year {year}",
-		"FILTER_CUSTOM_RANGE": "Custom Range"
+		"FILTER_CUSTOM_RANGE": "Custom Range",
+		"CLEAR_FILTER": "Clear Filter",
+		"CLEAR": "Clear",
+		"APPLY_FILTER": "Apply Filter"
 	},
 	"hotkeys": {
 		"HELP": "Help",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index ed2e54490..8a30a3032 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Últimos 7 días",
 		"FILTER_LAST_30_DAYS": "Últimos 30 días",
 		"FILTER_THIS_YEAR": "Este año {year}",
-		"FILTER_CUSTOM_RANGE": "Rango personalizado"
+		"FILTER_CUSTOM_RANGE": "Rango personalizado",
+		"CLEAR_FILTER": "Borrar filtro",
+		"CLEAR": "Borrar",
+		"APPLY_FILTER": "Aplicar filtro"
 	},
 	"hotkeys": {
 		"HELP": "Ayuda",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index 69179edce..bbd5f0430 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Derniers 7 jours",
 		"FILTER_LAST_30_DAYS": "Derniers 30 jours",
 		"FILTER_THIS_YEAR": "Cette année {year}",
-		"FILTER_CUSTOM_RANGE": "Plage personnalisée"
+		"FILTER_CUSTOM_RANGE": "Plage personnalisée",
+		"CLEAR_FILTER": "Effacer le filtre",
+		"CLEAR": "Effacer",
+		"APPLY_FILTER": "Appliquer le filtre"
 	},
 	"hotkeys": {
 		"HELP": "Aide",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 83c9b1312..0cf6d5c9e 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "ה-7 ימים האחרונים",
 		"FILTER_LAST_30_DAYS": "ה-30 ימים האחרונים",
 		"FILTER_THIS_YEAR": "שנה זו {year}",
-		"FILTER_CUSTOM_RANGE": "טווח מותאם אישית"
+		"FILTER_CUSTOM_RANGE": "טווח מותאם אישית",
+		"CLEAR_FILTER": "נקה סינון",
+		"CLEAR": "נקה",
+		"APPLY_FILTER": "החל סינון"
 	},
 	"hotkeys": {
 		"HELP": "עזרה",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 90b440c68..576c9af34 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Ultimi 7 giorni",
 		"FILTER_LAST_30_DAYS": "Ultimi 30 giorni",
 		"FILTER_THIS_YEAR": "Quest'anno {year}",
-		"FILTER_CUSTOM_RANGE": "Intervallo personalizzato"
+		"FILTER_CUSTOM_RANGE": "Intervallo personalizzato",
+		"CLEAR_FILTER": "Cancella filtro",
+		"CLEAR": "Cancella",
+		"APPLY_FILTER": "Applica filtro"
 	},
 	"hotkeys": {
 		"HELP": "Aiuto",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 90b22103b..1c7612d5c 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Laatste 7 dagen",
 		"FILTER_LAST_30_DAYS": "Laatste 30 dagen",
 		"FILTER_THIS_YEAR": "Dit jaar {year}",
-		"FILTER_CUSTOM_RANGE": "Aangepast bereik"
+		"FILTER_CUSTOM_RANGE": "Aangepast bereik",
+		"CLEAR_FILTER": "Filter wissen",
+		"CLEAR": "Wissen",
+		"APPLY_FILTER": "Filter toepassen"
 	},
 	"hotkeys": {
 		"HELP": "Help",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index afabe281f..7e45f58ba 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Ostatnie 7 dni",
 		"FILTER_LAST_30_DAYS": "Ostatnie 30 dni",
 		"FILTER_THIS_YEAR": "Ten rok {year}",
-		"FILTER_CUSTOM_RANGE": "Zakres niestandardowy"
+		"FILTER_CUSTOM_RANGE": "Zakres niestandardowy",
+		"CLEAR_FILTER": "Wyczyść filtr",
+		"CLEAR": "Wyczyść",
+		"APPLY_FILTER": "Zastosuj filtr"
 	},
 	"hotkeys": {
 		"HELP": "Pomoc",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index 63c3f6cf7..4a832f9ab 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Últimos 7 dias",
 		"FILTER_LAST_30_DAYS": "Últimos 30 dias",
 		"FILTER_THIS_YEAR": "Este ano {year}",
-		"FILTER_CUSTOM_RANGE": "Faixa personalizada"
+		"FILTER_CUSTOM_RANGE": "Faixa personalizada",
+		"CLEAR_FILTER": "Limpar filtro",
+		"CLEAR": "Limpar",
+		"APPLY_FILTER": "Aplicar filtro"
 	},
 	"hotkeys": {
 		"HELP": "Ajuda",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index 8f2e0f7e5..20c2605ab 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "Последние 7 дней",
 		"FILTER_LAST_30_DAYS": "Последние 30 дней",
 		"FILTER_THIS_YEAR": "Этот год {year}",
-		"FILTER_CUSTOM_RANGE": "Пользовательский диапазон"
+		"FILTER_CUSTOM_RANGE": "Пользовательский диапазон",
+		"CLEAR_FILTER": "Очистить фильтр",
+		"CLEAR": "Очистить",
+		"APPLY_FILTER": "Применить фильтр"
 	},
 	"hotkeys": {
 		"HELP": "Помощь",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 4484dfded..3735c7f97 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -262,7 +262,10 @@
 		"FILTER_LAST_7_DAYS": "过去7天",
 		"FILTER_LAST_30_DAYS": "过去30天",
 		"FILTER_THIS_YEAR": "今年 {year}",
-		"FILTER_CUSTOM_RANGE": "自定义范围"
+		"FILTER_CUSTOM_RANGE": "自定义范围",
+		"CLEAR_FILTER": "清除筛选",
+		"CLEAR": "清除",
+		"APPLY_FILTER": "应用筛选"
 	},
 	"hotkeys": {
 		"HELP": "帮助",

From aace163acd07d148a7cb6e4bac781116b2364741 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Thu, 14 Nov 2024 23:47:34 +0200
Subject: [PATCH 13/13] improve arrow navigation on 'see plans' modal (#3337)

* improve arrow navigation on 'see plans' modal

* add requested changes
---
 .../features/daily-plan/all-plans-modal.tsx   | 95 ++++++++++++++++---
 1 file changed, 80 insertions(+), 15 deletions(-)

diff --git a/apps/web/lib/features/daily-plan/all-plans-modal.tsx b/apps/web/lib/features/daily-plan/all-plans-modal.tsx
index 63bebcaef..0fb7db8cd 100644
--- a/apps/web/lib/features/daily-plan/all-plans-modal.tsx
+++ b/apps/web/lib/features/daily-plan/all-plans-modal.tsx
@@ -19,7 +19,8 @@ interface IAllPlansModal {
 	isOpen: boolean;
 }
 
-type CalendarTab = 'Today' | 'Tomorrow' | 'Calendar';
+type TCalendarTab = 'Today' | 'Tomorrow' | 'Calendar';
+type TNavigationMode = 'DATE' | 'PLAN';
 
 /**
  * A modal that displays all the plans available to the user (Today, Tomorrow and Future).
@@ -32,17 +33,41 @@ type CalendarTab = 'Today' | 'Tomorrow' | 'Calendar';
  * @returns {JSX.Element} The modal element
  */
 export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal) {
+	// Utility function for checking if two dates are the same
+	const isSameDate = useCallback((date1: Date | number | string, date2: Date | number | string) => {
+		return moment(date1).toISOString().split('T')[0] === moment(date2).toISOString().split('T')[0];
+	}, []);
+
 	const { isOpen, closeModal } = props;
 	const [showCalendar, setShowCalendar] = useState(false);
 	const [showCustomPlan, setShowCustomPlan] = useState(false);
 	const [customDate, setCustomDate] = useState<Date>(moment().toDate());
 	const { myDailyPlans, pastPlans } = useDailyPlan();
 	const t = useTranslations();
-
-	// Utility function for checking if two dates are the same
-	const isSameDate = useCallback((date1: Date | number | string, date2: Date | number | string) => {
-		return moment(date1).toISOString().split('T')[0] === moment(date2).toISOString().split('T')[0];
-	}, []);
+	const [navigationMode, setNavigationMode] = useState<TNavigationMode>('PLAN');
+	const sortedPlans = useMemo(
+		() =>
+			[...myDailyPlans.items].sort((plan1, plan2) =>
+				new Date(plan1.date).getTime() > new Date(plan2.date).getTime() ? 1 : -1
+			),
+		[myDailyPlans.items]
+	);
+	const currentPlanIndex = useMemo(
+		() => sortedPlans.findIndex((plan) => isSameDate(plan.date, moment(customDate).toDate())),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[customDate, myDailyPlans.items]
+	);
+	const nextPlan = useMemo(
+		() =>
+			currentPlanIndex >= 0 && currentPlanIndex < myDailyPlans.items.length - 1
+				? sortedPlans[currentPlanIndex + 1]
+				: null,
+		[currentPlanIndex, myDailyPlans.items.length, sortedPlans]
+	);
+	const previousPlan = useMemo(
+		() => (currentPlanIndex > 0 ? sortedPlans[currentPlanIndex - 1] : null),
+		[currentPlanIndex, sortedPlans]
+	);
 
 	// Memoize today, tomorrow, and future plans
 	const todayPlan = useMemo(
@@ -70,21 +95,27 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 	}, [closeModal]);
 
 	// Define tabs for plan selection
-	const tabs: CalendarTab[] = useMemo(() => ['Today', 'Tomorrow', 'Calendar'], []);
+	const tabs: TCalendarTab[] = useMemo(() => ['Today', 'Tomorrow', 'Calendar'], []);
 
 	// State to track the active tab
 	const [selectedTab, setSelectedTab] = useState(tabs[0]);
 
 	// Handle tab switching
-	const handleTabClick = (tab: CalendarTab) => {
+	const handleTabClick = (tab: TCalendarTab) => {
 		if (tab === 'Today') {
 			setCustomDate(moment().toDate());
+			setNavigationMode('PLAN');
 		} else if (tab === 'Tomorrow') {
 			setCustomDate(moment().add(1, 'days').toDate());
+			setNavigationMode('PLAN');
 		}
 		setSelectedTab(tab);
 		setShowCalendar(tab === 'Calendar');
 		setShowCustomPlan(false);
+
+		if (tab === 'Calendar') {
+			setNavigationMode('DATE');
+		}
 	};
 
 	// Determine which plan to display based on the selected tab
@@ -117,6 +148,8 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 				setShowCalendar(false);
 				setShowCustomPlan(true);
 			}
+
+			setNavigationMode('PLAN');
 		}
 	}, [customDate, isSameDate]);
 
@@ -155,12 +188,12 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 
 			if (selectedPlan) {
 				if (isSameDate(date, moment().startOf('day').toDate())) {
-					setSelectedTab('Today');
+					navigationMode == 'PLAN' && setSelectedTab('Today');
 				} else if (isSameDate(date, moment().add(1, 'days').startOf('day').toDate())) {
-					setSelectedTab('Tomorrow');
+					navigationMode == 'PLAN' && setSelectedTab('Tomorrow');
 				} else {
 					setSelectedTab('Calendar');
-					if (existPlan) {
+					if (existPlan && navigationMode == 'PLAN') {
 						setShowCalendar(false);
 						setShowCustomPlan(true);
 					} else {
@@ -171,11 +204,35 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 				}
 			}
 		},
-		[isSameDate, myDailyPlans.items, selectedPlan]
+		[isSameDate, myDailyPlans.items, navigationMode, selectedPlan]
+	);
+
+	// Handle navigation  between plans
+	const moveBetweenPlans = useCallback(
+		(direction: boolean) => {
+			if (direction) {
+				// Select the next plan
+				if (nextPlan) {
+					setCustomDate(moment(nextPlan.date).toDate());
+					setSelectedTab('Calendar');
+					setShowCalendar(false);
+					setShowCustomPlan(true);
+				}
+			} else {
+				// Select the previous plan
+				if (previousPlan) {
+					setCustomDate(moment(previousPlan.date).toDate());
+					setSelectedTab('Calendar');
+					setShowCalendar(false);
+					setShowCustomPlan(true);
+				}
+			}
+		},
+		[nextPlan, previousPlan]
 	);
 
 	// A handler function to display the plan title
-	const displayPlanTitle = (selectedTab: CalendarTab, selectedPlan?: IDailyPlan) => {
+	const displayPlanTitle = (selectedTab: TCalendarTab, selectedPlan?: IDailyPlan) => {
 		const isCalendarTab = selectedTab === 'Calendar';
 		const planDate = selectedPlan?.date ? new Date(selectedPlan.date).toLocaleDateString('en-GB') : '';
 		const hasTasks = selectedPlan?.tasks?.length;
@@ -247,14 +304,22 @@ export const AllPlansModal = memo(function AllPlansModal(props: IAllPlansModal)
 						</ul>
 						<div className="flex h-8 items-center justify-between border rounded ">
 							<span
-								onClick={() => arrowNavigationHandler(moment(customDate).subtract(1, 'days').toDate())}
+								onClick={() =>
+									navigationMode === 'DATE'
+										? arrowNavigationHandler(moment(customDate).subtract(1, 'days').toDate())
+										: moveBetweenPlans(false)
+								}
 								className="rotate-180 cursor-pointer px-2 h-full flex items-center justify-center"
 							>
 								<ChevronRightIcon className="w-6  h-4 stroke-[#B1AEBC]" />
 							</span>
 							<VerticalSeparator />
 							<span
-								onClick={() => arrowNavigationHandler(moment(customDate).add(1, 'days').toDate())}
+								onClick={() =>
+									navigationMode === 'DATE'
+										? arrowNavigationHandler(moment(customDate).add(1, 'days').toDate())
+										: moveBetweenPlans(true)
+								}
 								className=" h-full cursor-pointer flex  px-2 items-center justify-center"
 							>
 								<ChevronRightIcon className="w-6  h-4 stroke-[#B1AEBC]" />