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/41] [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/41] (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/41] 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/41] 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/41] 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/41] 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/41] 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/41] 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/41] 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/41] 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/41] [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/41] [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/41] 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]" />

From 5c1cada2d05ceaf17f3b3ae46a765f88f7bcf6f5 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Sun, 17 Nov 2024 10:01:22 +0200
Subject: [PATCH 14/41] [Feat]: Add Delete Task Timesheet function (#3338)

* Add deleteTaskTimesheet function to handle timesheet deletion

* fix: coderabbitai

* fix: build

* feat: make AlertDialogConfirmation fully controllable via external props

* fix: coderabbitai

* fix: coderabbitai
---
 .../[memberId]/components/TimesheetAction.tsx |  12 +-
 .../api/timer/timesheet/bulk-delete/route.ts  |  42 ++++++
 .../hooks/features/useTimelogFilterOptions.ts |  15 +-
 apps/web/app/hooks/features/useTimesheet.ts   |  47 +++++-
 .../services/client/api/timer/timer-log.ts    |  41 +++++-
 .../app/services/server/requests/timesheet.ts |  16 ++
 apps/web/app/stores/time-logs.ts              |   1 +
 apps/web/components/ui/alert-dialog.tsx       | 139 ++++++++++++++++++
 apps/web/components/ui/button.tsx             |  89 +++++------
 .../components/alert-dialog-confirmation.tsx  |  72 +++++++++
 apps/web/lib/components/index.ts              |   1 +
 .../calendar/table-time-sheet.tsx             |  50 ++++++-
 apps/web/lib/features/user-profile-plans.tsx  |   5 +-
 apps/web/package.json                         |   9 +-
 yarn.lock                                     |  14 +-
 15 files changed, 484 insertions(+), 69 deletions(-)
 create mode 100644 apps/web/app/api/timer/timesheet/bulk-delete/route.ts
 create mode 100755 apps/web/components/ui/alert-dialog.tsx
 create mode 100644 apps/web/lib/components/alert-dialog-confirmation.tsx

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
index 2bad95b8a..213b9ccc0 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
@@ -24,23 +24,25 @@ export const TimesheetButton = ({ className, icon, onClick, title }: ITimesheetB
 
 
 export type StatusType = "Pending" | "Approved" | "Rejected";
+export type StatusAction = "Deleted" | "Approved" | "Rejected";
+
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, onClick: (action: StatusType) => void) => {
+export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, onClick: (action: StatusAction) => void) => {
 
-    const buttonsConfig: Record<StatusType, { icon: JSX.Element; title: string; action: StatusType }[]> = {
+    const buttonsConfig: Record<StatusType, { icon: JSX.Element; title: string; action: StatusAction }[]> = {
         Pending: [
             { icon: <FaClipboardCheck className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED'), action: "Approved" },
             { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Rejected" },
-            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Pending" }
+            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
         ],
         Approved: [
             { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Rejected" },
-            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Pending" }
+            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
         ],
         Rejected: [
             { icon: <FaClipboardCheck className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED'), action: "Approved" },
-            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Pending" }
+            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
         ]
     };
 
diff --git a/apps/web/app/api/timer/timesheet/bulk-delete/route.ts b/apps/web/app/api/timer/timesheet/bulk-delete/route.ts
new file mode 100644
index 000000000..517e1f624
--- /dev/null
+++ b/apps/web/app/api/timer/timesheet/bulk-delete/route.ts
@@ -0,0 +1,42 @@
+import { deleteTaskTimesheetRequest } from '@/app/services/server/requests';
+import { authenticatedGuard } from '@app/services/server/guards/authenticated-guard-app';
+import { NextResponse } from "next/server";
+
+export async function DELETE(req: Request) {
+    const res = new NextResponse();
+    const body = await req.json();
+    const { logIds = [] } = body;
+
+    if (!Array.isArray(logIds) || logIds.length === 0) {
+        return NextResponse.json(
+            { error: 'logIds must be a non-empty array' },
+            { status: 400 }
+        );
+    }
+
+    const { $res, user, tenantId, organizationId, access_token, } = await authenticatedGuard(req, res);
+    if (!user) return $res('Unauthorized');
+    try {
+        const { data } = await deleteTaskTimesheetRequest({
+            tenantId,
+            organizationId,
+            logIds,
+        }, access_token);
+
+        if (!data) {
+            return NextResponse.json(
+                { error: 'No data found' },
+                { status: 404 }
+            );
+        }
+
+        return NextResponse.json(data);
+    } catch (error) {
+        console.error('Error delete timesheet:', error);
+        return NextResponse.json(
+            { error: 'Failed to delete timesheet data' },
+            { status: 500 }
+        );
+    }
+
+}
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
index 60733481f..ca39217a3 100644
--- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -1,16 +1,24 @@
-import { timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState } from '@/app/stores';
+import { timesheetDeleteState, timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState } from '@/app/stores';
 import { useAtom } from 'jotai';
+import React from 'react';
 
 export function useTimelogFilterOptions() {
     const [employeeState, setEmployeeState] = useAtom(timesheetFilterEmployeeState);
     const [projectState, setProjectState] = useAtom(timesheetFilterProjectState);
     const [statusState, setStatusState] = useAtom(timesheetFilterStatusState);
     const [taskState, setTaskState] = useAtom(timesheetFilterTaskState);
+    const [selectTimesheet, setSelectTimesheet] = useAtom(timesheetDeleteState);
 
     const employee = employeeState;
     const project = projectState;
     const task = taskState
 
+    const handleSelectRowTimesheet = (items: string) => {
+        setSelectTimesheet((prev) => prev.includes(items) ? prev.filter((filter) => filter !== items) : [...prev, items])
+    }
+    React.useEffect(() => {
+        return () => setSelectTimesheet([]);
+    }, []);
 
     return {
         statusState,
@@ -20,6 +28,9 @@ export function useTimelogFilterOptions() {
         setEmployeeState,
         setProjectState,
         setTaskState,
-        setStatusState
+        setStatusState,
+        handleSelectRowTimesheet,
+        selectTimesheet,
+        setSelectTimesheet
     };
 }
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index c11e196ff..959f2ccdd 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -3,7 +3,7 @@ import { useAtom } from 'jotai';
 import { timesheetRapportState } from '@/app/stores/time-logs';
 import { useQuery } from '../useQuery';
 import { useCallback, useEffect } from 'react';
-import { getTaskTimesheetLogsApi } from '@/app/services/client/api/timer/timer-log';
+import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
 import { ITimeSheet } from '@/app/interfaces';
 import { useTimelogFilterOptions } from './useTimelogFilterOptions';
@@ -17,7 +17,11 @@ export interface GroupedTimesheet {
     date: string;
     tasks: ITimeSheet[];
 }
-
+interface DeleteTimesheetParams {
+    organizationId: string;
+    tenantId: string;
+    logIds: string[];
+}
 
 const groupByDate = (items: ITimeSheet[]): GroupedTimesheet[] => {
     if (!items?.length) return [];
@@ -46,8 +50,10 @@ export function useTimesheet({
 }: TimesheetParams) {
     const { user } = useAuthenticateUser();
     const [timesheet, setTimesheet] = useAtom(timesheetRapportState);
-    const { employee, project } = useTimelogFilterOptions();
+    const { employee, project, selectTimesheet: logIds } = useTimelogFilterOptions();
     const { loading: loadingTimesheet, queryCall: queryTimesheet } = useQuery(getTaskTimesheetLogsApi);
+    const { loading: loadingDeleteTimesheet, queryCall: queryDeleteTimesheet } = useQuery(deleteTaskTimesheetLogsApi)
+
 
     const getTaskTimesheet = useCallback(
         ({ startDate, endDate }: TimesheetParams) => {
@@ -76,6 +82,39 @@ export function useTimesheet({
             project
         ]
     );
+
+
+
+    const handleDeleteTimesheet = async (params: DeleteTimesheetParams) => {
+        try {
+            return await queryDeleteTimesheet(params);
+        } catch (error) {
+            console.error('Error deleting timesheet:', error);
+            throw error;
+        }
+    };
+
+    const deleteTaskTimesheet = useCallback(async () => {
+        if (!user) {
+            throw new Error('User not authenticated');
+        }
+        if (!logIds.length) {
+            throw new Error('No timesheet IDs provided for deletion');
+        }
+        try {
+            await handleDeleteTimesheet({
+                organizationId: user.employee.organizationId,
+                tenantId: user.tenantId ?? "",
+                logIds
+            });
+        } catch (error) {
+            console.error('Failed to delete timesheets:', error);
+            throw error;
+        }
+    },
+        [user, queryDeleteTimesheet, logIds, handleDeleteTimesheet] // deepscan-disable-line
+    );
+
     useEffect(() => {
         getTaskTimesheet({ startDate, endDate });
     }, [getTaskTimesheet, startDate, endDate]);
@@ -86,5 +125,7 @@ export function useTimesheet({
         loadingTimesheet,
         timesheet: groupByDate(timesheet),
         getTaskTimesheet,
+        loadingDeleteTimesheet,
+        deleteTaskTimesheet
     };
 }
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 f3a5b13b4..3715f8cc3 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -1,5 +1,5 @@
 import { ITimeSheet, ITimerStatus } from '@app/interfaces';
-import { get } from '../../axios';
+import { get, deleteApi } from '../../axios';
 
 export async function getTimerLogs(
 	tenantId: string,
@@ -66,3 +66,42 @@ export async function getTaskTimesheetLogsApi({
 	const endpoint = `/timesheet/time-log?${params.toString()}`;
 	return get<ITimeSheet[]>(endpoint, { tenantId });
 }
+
+
+export async function deleteTaskTimesheetLogsApi({
+	logIds,
+	organizationId,
+	tenantId
+}: {
+	organizationId: string,
+	tenantId: string,
+	logIds: string[]
+}) {
+	// Validate required parameters
+	if (!organizationId || !tenantId || !logIds?.length) {
+		throw new Error('Required parameters missing: organizationId, tenantId, and logIds are required');
+	}
+
+	// Limit bulk deletion size for safety
+	if (logIds.length > 100) {
+		throw new Error('Maximum 100 logs can be deleted at once');
+	}
+
+	const params = new URLSearchParams({
+		organizationId,
+		tenantId
+	});
+	logIds.forEach((id, index) => {
+		if (!id) {
+			throw new Error(`Invalid logId at index ${index}`);
+		}
+		params.append(`logIds[${index}]`, id);
+	});
+
+	const endPoint = `/timesheet/time-log?${params.toString()}`;
+	try {
+		return await deleteApi<{ success: boolean; message: string }>(endPoint, { tenantId });
+	} catch (error) {
+		throw new Error(`Failed to delete timesheet logs`);
+	}
+}
diff --git a/apps/web/app/services/server/requests/timesheet.ts b/apps/web/app/services/server/requests/timesheet.ts
index a7a254880..1c5fe6048 100644
--- a/apps/web/app/services/server/requests/timesheet.ts
+++ b/apps/web/app/services/server/requests/timesheet.ts
@@ -79,3 +79,19 @@ export function getTaskTimesheetRequest(params: ITimesheetProps, bearer_token: s
 		tenantId: params.tenantId
 	})
 }
+
+type IDeleteTimesheetProps = {
+	organizationId: string;
+	tenantId: string;
+	logIds?: string[]
+}
+
+export function deleteTaskTimesheetRequest(params: IDeleteTimesheetProps, bearer_token: string) {
+	const { logIds = [] } = params;
+	return serverFetch<ITimeSheet[]>({
+		path: `/timesheet/time-log/${logIds.join(',')}`,
+		method: 'DELETE',
+		bearer_token,
+		tenantId: params.tenantId
+	});
+}
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index 9f607b4ff..e73d66c64 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -16,3 +16,4 @@ export const timesheetFilterProjectState = atom<IProject[]>([]);
 export const timesheetFilterTaskState = atom<ITeamTask[]>([]);
 
 export const timesheetFilterStatusState = atom<IFilterOption | IFilterOption[] | null>([]);
+export const timesheetDeleteState = atom<string[]>([])
diff --git a/apps/web/components/ui/alert-dialog.tsx b/apps/web/components/ui/alert-dialog.tsx
new file mode 100755
index 000000000..61b539897
--- /dev/null
+++ b/apps/web/components/ui/alert-dialog.tsx
@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "lib/utils"
+import { buttonVariants } from "components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index 90859cca5..670456047 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -1,51 +1,56 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from 'lib/utils';
+import { cn } from "lib/utils"
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-	{
-		variants: {
-			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-				destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-				outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground',
-				link: 'text-primary underline-offset-4 hover:underline'
-			},
-			size: {
-				default: 'h-10 px-4 py-2',
-				sm: 'h-9 rounded-md px-3',
-				lg: 'h-11 rounded-md px-8',
-				icon: 'h-10 w-10'
-			}
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'default'
-		}
-	}
-);
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
 
 export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	asChild?: boolean;
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }: ButtonProps, ref) => {
-		const Comp = asChild ? Slot : 'button';
-		return (
-			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
-				{props.children as React.ReactNode}
-			</Comp>
-		);
-	}
-);
-Button.displayName = 'Button';
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/apps/web/lib/components/alert-dialog-confirmation.tsx b/apps/web/lib/components/alert-dialog-confirmation.tsx
new file mode 100644
index 000000000..494a40f12
--- /dev/null
+++ b/apps/web/lib/components/alert-dialog-confirmation.tsx
@@ -0,0 +1,72 @@
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@components/ui/alert-dialog"
+import { ReloadIcon } from "@radix-ui/react-icons";
+import React from "react";
+
+
+
+interface AlertDialogConfirmationProps {
+    title: string;
+    description: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    loading?: boolean
+}
+
+export function AlertDialogConfirmation({
+    title,
+    description,
+    confirmText = "Continue",
+    cancelText = "Cancel",
+    onConfirm,
+    onCancel,
+    isOpen,
+    onOpenChange,
+    loading
+}: AlertDialogConfirmationProps) {
+    return (
+        <AlertDialog
+            open={isOpen}
+            onOpenChange={onOpenChange}
+            defaultOpen={false}
+        >
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>{title}</AlertDialogTitle>
+                    <AlertDialogDescription>{description}</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel
+                        onClick={onCancel}
+                        autoFocus
+                    >
+                        {cancelText}
+                    </AlertDialogCancel>
+                    <AlertDialogAction
+                        className="px-4 py-2 text-sm hover:bg-red-600 hover:text-white font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
+                        aria-label={loading ? "Confirming action..." : confirmText}
+                        disabled={loading}
+                        onClick={onConfirm}
+                    >
+                        {loading && (
+                            <ReloadIcon className="w-4 h-4 mr-2 animate-spin" />
+                        )}
+                        {loading ? "Processing..." : confirmText}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}
diff --git a/apps/web/lib/components/index.ts b/apps/web/lib/components/index.ts
index c9f001e4a..356270efd 100644
--- a/apps/web/lib/components/index.ts
+++ b/apps/web/lib/components/index.ts
@@ -30,3 +30,4 @@ export * from './inputs/auth-code-input';
 export * from './services/recaptcha';
 export * from './copy-tooltip';
 export * from './alert-popup'
+export * from './alert-dialog-confirmation'
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 83468b5bb..bd937ee60 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -44,7 +44,7 @@ import {
     MdKeyboardArrowRight
 } from "react-icons/md"
 import { ConfirmStatusChange, StatusBadge, statusOptions, dataSourceTimeSheet, TimeSheet } from "."
-import { useModal } from "@app/hooks"
+import { useModal, useTimelogFilterOptions } from "@app/hooks"
 import { Checkbox } from "@components/ui/checkbox"
 import {
     Accordion,
@@ -53,12 +53,12 @@ import {
     AccordionTrigger,
 } from "@components/ui/accordion"
 import { clsxm } from "@/app/utils"
-import { statusColor } from "@/lib/components"
+import { AlertDialogConfirmation, statusColor } from "@/lib/components"
 import { Badge } from '@components/ui/badge'
-import { EditTaskModal, RejectSelectedModal, StatusType, getTimesheetButtons } from "@/app/[locale]/timesheet/[memberId]/components"
+import { EditTaskModal, RejectSelectedModal, StatusAction, StatusType, getTimesheetButtons } from "@/app/[locale]/timesheet/[memberId]/components"
 import { useTranslations } from "next-intl"
 import { formatDate } from "@/app/helpers"
-import { GroupedTimesheet } from "@/app/hooks/features/useTimesheet"
+import { GroupedTimesheet, useTimesheet } from "@/app/hooks/features/useTimesheet"
 
 
 
@@ -178,6 +178,26 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
         openModal,
         closeModal
     } = useModal();
+    const { deleteTaskTimesheet, loadingDeleteTimesheet } = useTimesheet({})
+    const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet } = useTimelogFilterOptions()
+    const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+    const handleConfirm = () => {
+        try {
+            deleteTaskTimesheet()
+                .then(() => {
+                    setSelectTimesheet([])
+                    setIsDialogOpen(false);
+                })
+                .catch((error) => {
+                    console.error('Delete timesheet error:', error);
+                });
+        } catch (error) {
+            console.error('Delete timesheet error:', error);
+        }
+    };
+    const handleCancel = () => {
+        setIsDialogOpen(false);
+    };
 
     const t = useTranslations();
     const [sorting, setSorting] = React.useState<SortingState>([])
@@ -209,7 +229,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
         Rejected: table.getRowModel().rows.filter(row => row.original.status === "Rejected")
     };
 
-    const handleButtonClick = (action: StatusType) => {
+    const handleButtonClick = (action: StatusAction) => {
         switch (action) {
             case 'Approved':
                 // TODO: Implement approval logic
@@ -217,8 +237,8 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
             case 'Rejected':
                 openModal()
                 break;
-            case 'Pending':
-                // TODO: Implement pending logic
+            case 'Deleted':
+                setIsDialogOpen(true)
                 break;
             default:
                 console.error(`Unsupported action: ${action}`);
@@ -227,6 +247,17 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 
     return (
         <div className="w-full dark:bg-dark--theme">
+            <AlertDialogConfirmation
+                title="Are you sure you want to delete this?"
+                description={`This action is irreversible. All related data will be lost. (${selectTimesheet.length})`}
+                confirmText="Yes, delete"
+                cancelText="No, cancel"
+                isOpen={isDialogOpen}
+                onOpenChange={setIsDialogOpen}
+                onConfirm={handleConfirm}
+                onCancel={handleCancel}
+                loading={loadingDeleteTimesheet}
+            />
             <RejectSelectedModal
                 onReject={() => {
                     // Pending implementation
@@ -283,7 +314,10 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
                                                         style={{ backgroundColor: statusColor(status).bgOpacity, borderBottomColor: statusColor(status).bg }}
                                                         className={clsxm("flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1 h-[60px]")}
                                                     >
-                                                        <Checkbox className="h-5 w-5" />
+                                                        <Checkbox className="h-5 w-5"
+                                                            onClick={() => handleSelectRowTimesheet(task.id)}
+                                                            checked={selectTimesheet.includes(task.id)}
+                                                        />
                                                         <div className="flex-[2]">
                                                             {/* <TaskNameInfoDisplay
                                                                 task={task}
diff --git a/apps/web/lib/features/user-profile-plans.tsx b/apps/web/lib/features/user-profile-plans.tsx
index e9c8a5153..fbdac86f3 100644
--- a/apps/web/lib/features/user-profile-plans.tsx
+++ b/apps/web/lib/features/user-profile-plans.tsx
@@ -455,9 +455,8 @@ export function PlanHeader({ plan, planMode }: { plan: IDailyPlan; planMode: Fil
 
 	return (
 		<div
-			className={`mb-6 flex ${
-				planMode === 'Future Tasks' ? 'justify-start' : 'justify-around'
-			}  items-center gap-5`}
+			className={`mb-6 flex ${planMode === 'Future Tasks' ? 'justify-start' : 'justify-around'
+				}  items-center gap-5`}
 		>
 			{/* Planned Time */}
 
diff --git a/apps/web/package.json b/apps/web/package.json
index 7e36362dc..32e4781f6 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -52,6 +52,7 @@
 		"@opentelemetry/semantic-conventions": "^1.18.1",
 		"@popperjs/core": "^2.11.6",
 		"@radix-ui/react-accordion": "^1.1.2",
+		"@radix-ui/react-alert-dialog": "^1.1.2",
 		"@radix-ui/react-avatar": "^1.1.1",
 		"@radix-ui/react-checkbox": "^1.1.1",
 		"@radix-ui/react-collapsible": "^1.1.1",
@@ -98,7 +99,7 @@
 		"moment": "^2.29.4",
 		"moment-timezone": "^0.5.42",
 		"nanoid": "5.0.1",
-    	"next": "14.2.17",
+		"next": "14.2.17",
 		"next-auth": "^5.0.0-beta.18",
 		"next-intl": "^3.3.2",
 		"next-themes": "^0.2.1",
@@ -132,9 +133,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",
@@ -151,6 +149,9 @@
 		"eslint": "^8.28.0",
 		"eslint-config-next": "^14.0.4",
 		"eslint-plugin-unused-imports": "^3.0.0",
+		"postcss": "^8.4.19",
+		"tailwindcss": "^3.4.1",
+		"tailwindcss-animate": "^1.0.6",
 		"typescript": "^4.9.4"
 	},
 	"prettier": {
diff --git a/yarn.lock b/yarn.lock
index d416b8b87..6e68a578d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6050,6 +6050,18 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
+"@radix-ui/react-alert-dialog@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.2.tgz#ac3bb7f71f5cbb595d3d0949bb12b598c2a99981"
+  integrity sha512-eGSlLzPhKO+TErxkiGcCZGuvbVMnLA1MTnyBksGOeGRGkxHiiJUujsjmNTdWTm4iHVSRaUao9/4Ur671auMghQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dialog" "1.1.2"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+
 "@radix-ui/react-arrow@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
@@ -6203,7 +6215,7 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.4"
 
-"@radix-ui/react-dialog@^1.1.2":
+"@radix-ui/react-dialog@1.1.2", "@radix-ui/react-dialog@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz#d9345575211d6f2d13e209e84aec9a8584b54d6c"
   integrity sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==

From 0fdda8aa2cd9eea4305c1e870dd43ac5fd66ab46 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Mon, 18 Nov 2024 21:18:55 +0200
Subject: [PATCH 15/41] [Feat]: Display Timesheet Data and Refactor Code
 (#3342)

* feat: display timesheet data and refactor code

* fix: codeRabbit

* Update apps/web/lib/features/task/task-card.tsx

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

---------

Co-authored-by: Ruslan Konviser <evereq@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .../[memberId]/components/TimesheetAction.tsx |  28 +--
 .../components/TimesheetFilterDate.tsx        |   2 +-
 apps/web/app/hooks/features/useTimesheet.ts   |  58 +++++-
 apps/web/app/interfaces/ITask.ts              |   8 +
 apps/web/app/interfaces/timer/ITimerLog.ts    | 110 ++++++----
 .../services/client/api/timer/timer-log.ts    |   8 +-
 .../app/services/server/requests/timesheet.ts |   6 +-
 apps/web/app/stores/time-logs.ts              |   4 +-
 apps/web/lib/components/types.ts              |  30 ++-
 .../calendar/table-time-sheet.tsx             | 196 ++++++++++--------
 apps/web/lib/features/task/task-card.tsx      |  54 ++---
 apps/web/lib/features/task/task-issue.tsx     |  18 +-
 12 files changed, 316 insertions(+), 206 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
index 213b9ccc0..5e1de381d 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
@@ -8,12 +8,15 @@ type ITimesheetButton = {
     title?: string,
     onClick?: () => void,
     className?: string,
-    icon?: ReactNode
+    icon?: ReactNode,
+    disabled?: boolean
 
 }
-export const TimesheetButton = ({ className, icon, onClick, title }: ITimesheetButton) => {
+export const TimesheetButton = ({ className, icon, onClick, title, disabled }: ITimesheetButton) => {
     return (
-        <button onClick={onClick} className={clsxm("flex items-center gap-1 text-gray-400 font-normal leading-3", className)}>
+        <button disabled={disabled}
+            onClick={onClick}
+            className={clsxm("flex items-center gap-1 text-gray-400 font-normal leading-3", className)}>
             <div className="w-[16px] h-[16px] text-[#293241]">
                 {icon}
             </div>
@@ -23,32 +26,33 @@ export const TimesheetButton = ({ className, icon, onClick, title }: ITimesheetB
 }
 
 
-export type StatusType = "Pending" | "Approved" | "Rejected";
-export type StatusAction = "Deleted" | "Approved" | "Rejected";
+export type StatusType = "Pending" | "Approved" | "Denied";
+export type StatusAction = "Deleted" | "Approved" | "Denied";
 
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, onClick: (action: StatusAction) => void) => {
+export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, disabled: boolean, onClick: (action: StatusAction) => void) => {
 
     const buttonsConfig: Record<StatusType, { icon: JSX.Element; title: string; action: StatusAction }[]> = {
         Pending: [
             { icon: <FaClipboardCheck className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED'), action: "Approved" },
-            { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Rejected" },
+            { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Denied" },
             { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
         ],
         Approved: [
-            { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Rejected" },
+            { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED'), action: "Denied" },
             { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
         ],
-        Rejected: [
+        Denied: [
             { icon: <FaClipboardCheck className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED'), action: "Approved" },
             { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED'), action: "Deleted" }
         ]
     };
 
-    return (buttonsConfig[status] || buttonsConfig.Rejected).map((button, index) => (
+    return (buttonsConfig[status] || buttonsConfig.Denied).map((button, index) => (
         <TimesheetButton
-            className="hover:underline"
+            className="hover:underline text-sm gap-2"
+            disabled={disabled}
             key={index}
             icon={button.icon}
             onClick={() => onClick(button.action)}
@@ -60,5 +64,5 @@ export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, onC
 export const statusTable: { label: StatusType; description: string }[] = [
     { label: "Pending", description: "Awaiting approval or review" },
     { label: "Approved", description: "The item has been approved" },
-    { label: "Rejected", description: "The item has been rejected" },
+    { label: "Denied", description: "The item has been rejected" },
 ];
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
index 9d5888f63..0331c05a5 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
@@ -163,7 +163,7 @@ export function TimesheetFilterDate({
                     </div>
                 )
                 }
-                <div className="border border-slate-100 dark:border-gray-800 my-1"></div>
+                {isVisible && <div className="border border-slate-100 dark:border-gray-800 my-1"></div>}
                 <div className="flex flex-col p-2">
                     {[
                         t('common.FILTER_TODAY'),
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index 959f2ccdd..3352f9861 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -5,7 +5,7 @@ import { useQuery } from '../useQuery';
 import { useCallback, useEffect } from 'react';
 import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
-import { ITimeSheet } from '@/app/interfaces';
+import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
 import { useTimelogFilterOptions } from './useTimelogFilterOptions';
 
 interface TimesheetParams {
@@ -15,25 +15,35 @@ interface TimesheetParams {
 
 export interface GroupedTimesheet {
     date: string;
-    tasks: ITimeSheet[];
+    tasks: TimesheetLog[];
 }
+
+
 interface DeleteTimesheetParams {
     organizationId: string;
     tenantId: string;
     logIds: string[];
 }
 
-const groupByDate = (items: ITimeSheet[]): GroupedTimesheet[] => {
+
+const groupByDate = (items: TimesheetLog[]): GroupedTimesheet[] => {
     if (!items?.length) return [];
-    type GroupedMap = Record<string, ITimeSheet[]>;
+    type GroupedMap = Record<string, TimesheetLog[]>;
+
     const groupedByDate = items.reduce<GroupedMap>((acc, item) => {
-        if (!item?.createdAt) return acc;
+        if (!item?.timesheet?.createdAt) {
+            console.warn('Skipping item with missing timesheet or createdAt:', item);
+            return acc;
+        }
         try {
-            const date = new Date(item.createdAt).toISOString().split('T')[0];
+            const date = new Date(item.timesheet.createdAt).toISOString().split('T')[0];
             if (!acc[date]) acc[date] = [];
             acc[date].push(item);
         } catch (error) {
-            console.error('Invalid date format:', item.createdAt);
+            console.error(
+                `Failed to process date for timesheet ${item.timesheet.id}:`,
+                { createdAt: item.timesheet.createdAt, error }
+            );
         }
         return acc;
     }, {});
@@ -83,6 +93,37 @@ export function useTimesheet({
         ]
     );
 
+    const getStatusTimesheet = (items: TimesheetLog[] = []) => {
+        const STATUS_MAP: Record<TimesheetStatus, TimesheetLog[]> = {
+            PENDING: [],
+            APPROVED: [],
+            DENIED: [],
+            DRAFT: [],
+            'IN REVIEW': []
+        };
+
+        return items.reduce((acc, item) => {
+            const status = item.timesheet.status;
+            if (isTimesheetStatus(status)) {
+                acc[status].push(item);
+            } else {
+                console.warn(`Invalid timesheet status: ${status}`);
+            }
+            return acc;
+        }, STATUS_MAP);
+    }
+
+    // Type guard
+    function isTimesheetStatus(status: unknown): status is TimesheetStatus {
+        const timesheetStatusValues: TimesheetStatus[] = [
+            "DRAFT",
+            "PENDING",
+            "IN REVIEW",
+            "DENIED",
+            "APPROVED"
+        ];
+        return Object.values(timesheetStatusValues).includes(status as TimesheetStatus);
+    }
 
 
     const handleDeleteTimesheet = async (params: DeleteTimesheetParams) => {
@@ -126,6 +167,7 @@ export function useTimesheet({
         timesheet: groupByDate(timesheet),
         getTaskTimesheet,
         loadingDeleteTimesheet,
-        deleteTaskTimesheet
+        deleteTaskTimesheet,
+        getStatusTimesheet
     };
 }
diff --git a/apps/web/app/interfaces/ITask.ts b/apps/web/app/interfaces/ITask.ts
index daa407299..0bb4459b3 100644
--- a/apps/web/app/interfaces/ITask.ts
+++ b/apps/web/app/interfaces/ITask.ts
@@ -137,6 +137,14 @@ export type ITaskStatusField =
 	| 'tags'
 	| 'status type';
 
+export type TimesheetStatus =
+	| "DRAFT"
+	| "PENDING"
+	| "IN REVIEW"
+	| "DENIED"
+	| "APPROVED";
+
+
 export type ITaskStatusStack = {
 	status: ITaskStatus;
 	size: ITaskSize;
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
index 3e30da712..d6e469d25 100644
--- a/apps/web/app/interfaces/timer/ITimerLog.ts
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -1,66 +1,99 @@
-import { ITaskIssue } from "..";
+import { ITeamTask } from "../ITask";
 
-interface Project {
+interface BaseEntity {
     id: string;
-    name: string;
-    imageUrl: string;
-    membersCount: number;
-    image: string | null;
-}
-
-interface Task {
-    id: string;
-    title: string;
-    issueType?: ITaskIssue | null;
-    estimate: number | null;
-    taskStatus: string | null;
-    taskNumber: string;
+    isActive: boolean;
+    isArchived: boolean;
+    tenantId: string;
+    organizationId: string;
+    createdAt: string;
+    updatedAt: string;
+    deletedAt: string | null;
+    archivedAt: string | null;
 }
 
-interface OrganizationContact {
-    id: string;
-    name: string;
-    imageUrl: string;
+interface ImageEntity {
+    imageUrl: string | null;
     image: string | null;
 }
 
-interface User {
-    id: string;
+interface User extends BaseEntity {
     firstName: string;
     lastName: string;
-    imageUrl: string;
-    image: string | null;
     name: string;
+    imageUrl: string | null;
+    image: string | null;
 }
 
-interface Employee {
-    id: string;
+interface Employee extends BaseEntity {
     isOnline: boolean;
     isAway: boolean;
     user: User;
     fullName: string;
 }
 
-export interface ITimeSheet {
-    deletedAt: string | null;
-    id: string;
-    createdAt: string;
-    updatedAt: string;
-    isActive: boolean;
-    isArchived: boolean;
-    archivedAt: string | null;
-    tenantId: string;
-    organizationId: string;
+interface TaskStatus extends BaseEntity {
+    name: string;
+    value: string;
+    description: string;
+    order: number;
+    icon: string;
+    color: string;
+    isSystem: boolean;
+    isCollapsed: boolean;
+    isDefault: boolean;
+    isTodo: boolean;
+    isInProgress: boolean;
+    isDone: boolean;
+    projectId: string | null;
+    organizationTeamId: string | null;
+    fullIconUrl: string;
+}
+interface Task extends ITeamTask {
+    taskStatus: TaskStatus | null,
+    number: number;
+    description: string;
+    startDate: string | null;
+}
+
+
+interface Timesheet extends BaseEntity {
+    duration: number;
+    keyboard: number;
+    mouse: number;
+    overall: number;
+    startedAt: string;
+    stoppedAt: string;
+    approvedAt: string | null;
+    submittedAt: string | null;
+    lockedAt: string | null;
+    editedAt: string | null;
+    isBilled: boolean;
+    status: string;
+    employeeId: string;
+    approvedById: string | null;
+    isEdited: boolean;
+}
+interface Project extends BaseEntity, ImageEntity {
+    name: string;
+    membersCount: number;
+}
+
+interface OrganizationContact extends BaseEntity, ImageEntity {
+    name: string;
+}
+
+export interface TimesheetLog extends BaseEntity {
     startedAt: string;
     stoppedAt: string;
     editedAt: string | null;
-    logType: string;
-    source: string;
+    logType: "TRACKED" | "MANUAL";
+    source: "WEB_TIMER" | "MOBILE_APP" | "DESKTOP_APP";
     description: string;
     reason: string | null;
     isBillable: boolean;
     isRunning: boolean;
-    version: number | null;
+    version: string | null;
     employeeId: string;
     timesheetId: string;
     projectId: string;
@@ -71,6 +104,7 @@ export interface ITimeSheet {
     task: Task;
     organizationContact: OrganizationContact;
     employee: Employee;
+    timesheet: Timesheet,
     duration: number;
     isEdited: boolean;
 }
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 3715f8cc3..b35b7abea 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -1,4 +1,4 @@
-import { ITimeSheet, ITimerStatus } from '@app/interfaces';
+import { TimesheetLog, ITimerStatus } from '@app/interfaces';
 import { get, deleteApi } from '../../axios';
 
 export async function getTimerLogs(
@@ -53,7 +53,9 @@ export async function getTaskTimesheetLogsApi({
 		'relations[1]': 'task',
 		'relations[2]': 'organizationContact',
 		'relations[3]': 'employee.user',
-		'relations[4]': 'task.taskStatus'
+		'relations[4]': 'task.taskStatus',
+		'relations[5]': 'timesheet'
+
 	});
 
 	projectIds.forEach((id, index) => {
@@ -64,7 +66,7 @@ export async function getTaskTimesheetLogsApi({
 		params.append(`employeeIds[${index}]`, id);
 	});
 	const endpoint = `/timesheet/time-log?${params.toString()}`;
-	return get<ITimeSheet[]>(endpoint, { tenantId });
+	return get<TimesheetLog[]>(endpoint, { tenantId });
 }
 
 
diff --git a/apps/web/app/services/server/requests/timesheet.ts b/apps/web/app/services/server/requests/timesheet.ts
index 1c5fe6048..4040697dd 100644
--- a/apps/web/app/services/server/requests/timesheet.ts
+++ b/apps/web/app/services/server/requests/timesheet.ts
@@ -1,7 +1,7 @@
 import { ITasksTimesheet } from '@app/interfaces/ITimer';
 import { serverFetch } from '../fetch';
 import qs from 'qs';
-import { ITimeSheet } from '@/app/interfaces/timer/ITimerLog';
+import { TimesheetLog } from '@/app/interfaces/timer/ITimerLog';
 
 export type TTasksTimesheetStatisticsParams = {
 	tenantId: string;
@@ -72,7 +72,7 @@ type ITimesheetProps = {
 
 export function getTaskTimesheetRequest(params: ITimesheetProps, bearer_token: string) {
 	const queries = qs.stringify(params);
-	return serverFetch<ITimeSheet[]>({
+	return serverFetch<TimesheetLog[]>({
 		path: `/timesheet/time-log?activityLevel?${queries.toString()}`,
 		method: 'GET',
 		bearer_token,
@@ -88,7 +88,7 @@ type IDeleteTimesheetProps = {
 
 export function deleteTaskTimesheetRequest(params: IDeleteTimesheetProps, bearer_token: string) {
 	const { logIds = [] } = params;
-	return serverFetch<ITimeSheet[]>({
+	return serverFetch<TimesheetLog[]>({
 		path: `/timesheet/time-log/${logIds.join(',')}`,
 		method: 'DELETE',
 		bearer_token,
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index e73d66c64..d015ab9bf 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -1,6 +1,6 @@
 import { ITimerLogsDailyReport } from '@app/interfaces/timer/ITimerLogs';
 import { atom } from 'jotai';
-import { IProject, ITeamTask, ITimeSheet, OT_Member } from '../interfaces';
+import { IProject, ITeamTask, OT_Member, TimesheetLog } from '../interfaces';
 
 interface IFilterOption {
     value: string;
@@ -9,7 +9,7 @@ interface IFilterOption {
 
 export const timerLogsDailyReportState = atom<ITimerLogsDailyReport[]>([]);
 
-export const timesheetRapportState = atom<ITimeSheet[]>([])
+export const timesheetRapportState = atom<TimesheetLog[]>([])
 
 export const timesheetFilterEmployeeState = atom<OT_Member[]>([]);
 export const timesheetFilterProjectState = atom<IProject[]>([]);
diff --git a/apps/web/lib/components/types.ts b/apps/web/lib/components/types.ts
index 30755c619..30c0412ef 100644
--- a/apps/web/lib/components/types.ts
+++ b/apps/web/lib/components/types.ts
@@ -6,21 +6,37 @@ type StatusColorScheme = {
 };
 
 const STATUS_COLORS: Record<string, StatusColorScheme> = {
-    Pending: {
+    PENDING: {
         bg: 'bg-[#FBB650]',
         text: 'text-[#FBB650]',
-        bgOpacity: 'rgba(251, 182, 80, 0.1)'
+        bgOpacity: 'rgba(251, 182, 80, 0.1)',
     },
-    Approved: {
+    APPROVED: {
         bg: 'bg-[#30B366]',
         text: 'text-[#30B366]',
-        bgOpacity: 'rgba(48, 179, 102, 0.1)'
+        bgOpacity: 'rgba(48, 179, 102, 0.1)',
     },
-    Rejected: {
+    DENIED: {
         bg: 'bg-[#dc2626]',
         text: 'text-[#dc2626]',
-        bgOpacity: 'rgba(220, 38, 38, 0.1)'
-    }
+        bgOpacity: 'rgba(220, 38, 38, 0.1)',
+    },
+    DRAFT: {
+        bg: 'bg-gray-300',
+        text: 'text-gray-500',
+        bgOpacity: 'rgba(220, 220, 220, 0.1)',
+    },
+    'IN REVIEW': {
+        bg: 'bg-blue-500',
+        text: 'text-blue-500',
+        bgOpacity: 'rgba(59, 130, 246, 0.1)',
+    },
+    DEFAULT: {
+        bg: 'bg-gray-100',
+        text: 'text-gray-400',
+        bgOpacity: 'rgba(243, 244, 246, 0.1)',
+    },
+
 };
 
 
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 bd937ee60..24f5d3202 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -24,10 +24,6 @@ import {
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from "@components/ui/dropdown-menu"
-import {
-    Table,
-    TableBody
-} from "@components/ui/table"
 import {
     Select,
     SelectContent,
@@ -59,8 +55,9 @@ import { EditTaskModal, RejectSelectedModal, StatusAction, StatusType, getTimesh
 import { useTranslations } from "next-intl"
 import { formatDate } from "@/app/helpers"
 import { GroupedTimesheet, useTimesheet } from "@/app/hooks/features/useTimesheet"
-
-
+import { TaskNameInfoDisplay } from "../../task/task-displays"
+import { TimesheetStatus } from "@/app/interfaces"
+import dayjs from 'dayjs';
 
 
 export const columns: ColumnDef<TimeSheet>[] = [
@@ -178,7 +175,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
         openModal,
         closeModal
     } = useModal();
-    const { deleteTaskTimesheet, loadingDeleteTimesheet } = useTimesheet({})
+    const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet } = useTimesheet({})
     const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet } = useTimelogFilterOptions()
     const [isDialogOpen, setIsDialogOpen] = React.useState(false);
     const handleConfirm = () => {
@@ -198,7 +195,6 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
     const handleCancel = () => {
         setIsDialogOpen(false);
     };
-
     const t = useTranslations();
     const [sorting, setSorting] = React.useState<SortingState>([])
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
@@ -223,18 +219,13 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
         },
     })
 
-    const groupedRows = {
-        Pending: table.getRowModel().rows.filter(row => row.original.status === "Pending"),
-        Approved: table.getRowModel().rows.filter(row => row.original.status === "Approved"),
-        Rejected: table.getRowModel().rows.filter(row => row.original.status === "Rejected")
-    };
 
     const handleButtonClick = (action: StatusAction) => {
         switch (action) {
             case 'Approved':
                 // TODO: Implement approval logic
                 break;
-            case 'Rejected':
+            case 'Denied':
                 openModal()
                 break;
             case 'Deleted':
@@ -268,82 +259,93 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
                 isOpen={isOpen}
             />
             <div className="rounded-md">
-                <Table className="order rounded-md dark:bg-dark--theme-light">
-                    <TableBody className="w-full rounded-md h-[400px] overflow-y-auto dark:bg-dark--theme">
-                        {data?.map((plan, index) => (
-                            <div key={index}>
-                                <div className="h-[48px] flex justify-between items-center w-full bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1 border-gray-400 px-5 text-[#71717A] font-medium">
-                                    <span>{formatDate(plan?.date)}</span>
-                                    <span>64:30h</span>
-                                </div>
+                {data?.map((plan, index) => (
+                    <div key={index}>
+                        <div className={clsxm(
+                            "h-[48px] flex justify-between items-center w-full",
+                            "bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1",
+                            "border-gray-400 px-5 text-[#71717A] font-medium")}>
+                            <span>{formatDate(plan.date)}</span>
+                            <span>64:30h</span>
+                        </div>
+
+                        <Accordion type="single" collapsible>
+                            {Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => (
+                                <AccordionItem key={status}
+                                    value={
+                                        status === 'DENIED'
+                                            ? "REJECTED" : status}
+                                    className="p-1 rounded"
+                                >
+                                    <AccordionTrigger
+                                        style={{ backgroundColor: statusColor(status).bgOpacity }}
+                                        type="button"
+                                        className={clsxm(
+                                            "flex flex-row-reverse justify-end items-center w-full h-[50px] rounded-sm gap-x-2 hover:no-underline px-2",
+                                            statusColor(status).text,
+                                        )}>
+                                        <div className="flex items-center space-x-1 justify-between w-full">
+                                            <div className="flex items-center space-x-1">
+                                                <div className={clsxm("p-2 rounded", statusColor(status).bg)}></div>
+                                                <div className="flex items-center gap-x-1">
+                                                    <span className="text-base font-normal uppercase text-gray-400">
+                                                        {status === 'DENIED' ? "REJECTED" : status}
+                                                    </span>
+                                                    <span className="text-gray-400 text-[14px]">({rows?.length})</span>
+                                                </div>
+                                                <Badge variant={'outline'} className="flex items-center gap-x-2 h-[25px] rounded-md bg-[#E4E4E7] dark:bg-gray-800">
+                                                    <span className="text-[#5f5f61]">Total</span>
+                                                    <span className="text-[#868688]">24:30h</span>
+                                                </Badge>
+                                            </div>
+                                            <div className={clsxm("flex items-center gap-2 p-x-1 capitalize")}>
+                                                {getTimesheetButtons(status as StatusType, t, true, handleButtonClick)}
+                                            </div>
+                                        </div>
+                                    </AccordionTrigger>
+                                    <AccordionContent className="flex flex-col w-full">
+                                        {rows?.map((task) => (
+                                            <div
+                                                key={task.id}
+                                                style={{ backgroundColor: statusColor(status).bgOpacity, borderBottomColor: statusColor(status).bg }}
+                                                className={clsxm("flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1 h-[60px]")}>
+                                                <Checkbox className="h-5 w-5"
+                                                    onCheckedChange={() => handleSelectRowTimesheet(task.id)}
+                                                    checked={selectTimesheet.includes(task.id)}
+                                                />
+                                                <div className="flex-[2]">
+                                                    <TaskNameInfoDisplay
+                                                        task={task.task}
+                                                        className={clsxm('shadow-[0px_0px_15px_0px_#e2e8f0] dark:shadow-transparent')}
+                                                        taskTitleClassName={clsxm('text-sm text-ellipsis overflow-hidden ')}
+                                                        showSize={true}
+                                                        dash
+                                                        taskNumberClassName="text-sm"
+                                                    />
+                                                </div>
+                                                <span className="flex-1">{task.project && task.project.name}</span>
+                                                <div className="flex items-center gap-x-2 flex-1">
+                                                    <img className="h-8 w-8 rounded-full" src={task.employee.user.imageUrl!} alt="" />
+                                                    <span className="flex-1 font-medium">{task.employee.fullName}</span>
+                                                </div>
+                                                <div className="flex-1">
+                                                    <Badge className={`${getBadgeColor(task.timesheet.status as TimesheetStatus)}  rounded-md py-1 px-2 text-center font-medium text-black`}>
+                                                        {task.timesheet.status}
+                                                    </Badge>
 
-                                <Accordion type="single" collapsible>
-                                    {Object.entries(groupedRows).map(([status, rows]) => (
-                                        <AccordionItem key={status} value={status} className="p-1 rounded">
-                                            <AccordionTrigger
-                                                style={{ backgroundColor: statusColor(status).bgOpacity }}
-                                                type="button"
-                                                className={clsxm(
-                                                    "flex flex-row-reverse justify-end items-center w-full h-[50px] rounded-sm gap-x-2 hover:no-underline px-2",
-                                                    statusColor(status).text,
-                                                )}
-                                            >
-                                                <div className="flex items-center space-x-1 justify-between w-full">
-                                                    <div className="flex items-center space-x-1">
-                                                        <div className={clsxm("p-2 rounded", statusColor(status).bg)}></div>
-                                                        <div className="flex items-center gap-x-1">
-                                                            <span className="text-base font-normal uppercase text-gray-400">
-                                                                {status}
-                                                            </span>
-                                                            <span className="text-gray-400 text-[14px]">({rows.length})</span>
-                                                        </div>
-                                                        <Badge variant={'outline'} className="flex items-center gap-x-2 h-[25px] rounded-md bg-[#E4E4E7] dark:bg-gray-800">
-                                                            <span className="text-[#5f5f61]">Total</span>
-                                                            <span className="text-[#868688]">24:30h</span>
-                                                        </Badge>
-                                                    </div>
-                                                    <div className={clsxm("flex items-center gap-2 p-x-1")}>
-                                                        {getTimesheetButtons(status as StatusType, t, handleButtonClick)}
-                                                    </div>
                                                 </div>
-                                            </AccordionTrigger>
-                                            <AccordionContent className="flex flex-col w-full">
-                                                {plan.tasks?.map((task) => (
-                                                    <div
-                                                        key={task.id}
-                                                        style={{ backgroundColor: statusColor(status).bgOpacity, borderBottomColor: statusColor(status).bg }}
-                                                        className={clsxm("flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1 h-[60px]")}
-                                                    >
-                                                        <Checkbox className="h-5 w-5"
-                                                            onClick={() => handleSelectRowTimesheet(task.id)}
-                                                            checked={selectTimesheet.includes(task.id)}
-                                                        />
-                                                        <div className="flex-[2]">
-                                                            {/* <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.isActive}</span>
-                                                        <span className="flex-1">{task.employee.fullName}</span>
-                                                        <span className="flex-1">
-                                                            {/* {task.}h, {task.estimateDays}j, {task.estimateMinutes}m */}
-                                                        </span>
-                                                        <TaskActionMenu idTasks={task.id} />
-                                                    </div>
-                                                ))}
-                                            </AccordionContent>
-                                        </AccordionItem>
-                                    ))}
-                                </Accordion>
-                            </div>
-                        ))}
-                    </TableBody>
-                </Table>
+                                                <span className="flex-1 font-medium">
+                                                    {dayjs(task.timesheet.createdAt).format("HH:mm:ss")}
+                                                </span>
+                                                <TaskActionMenu idTasks={task.id} />
+                                            </div>
+                                        ))}
+                                    </AccordionContent>
+                                </AccordionItem>
+                            ))}
+                        </Accordion>
+                    </div>
+                ))}
             </div>
             <div className="flex items-center justify-end space-x-2 py-4">
                 <div className="flex-1 text-sm text-muted-foreground">
@@ -551,3 +553,21 @@ export const StatusTask = () => {
         </>
     )
 }
+
+
+const getBadgeColor = (timesheetStatus: TimesheetStatus | null) => {
+    switch (timesheetStatus) {
+        case 'DRAFT':
+            return 'bg-gray-300';
+        case 'PENDING':
+            return 'bg-yellow-400';
+        case 'IN REVIEW':
+            return 'bg-blue-500';
+        case 'DENIED':
+            return 'bg-red-500';
+        case 'APPROVED':
+            return 'bg-green-500';
+        default:
+            return 'bg-gray-100';
+    }
+};
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index c4d97f026..ae4d67e6f 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -646,39 +646,39 @@ function TaskCardMenu({
 
 									{(viewType == 'default' ||
 										(viewType === 'dailyplan' && planMode === 'Outstanding')) && (
-										<>
-											<Divider type="HORIZONTAL" />
-											<div className="mt-3">
-												{!taskPlannedToday && (
-													<li className="mb-2">
-														<PlanTask
-															planMode="today"
-															taskId={task.id}
-															employeeId={profile?.member?.employeeId ?? ''}
-															taskPlannedToday={taskPlannedToday}
-														/>
-													</li>
-												)}
-												{!taskPlannedTomorrow && (
+											<>
+												<Divider type="HORIZONTAL" />
+												<div className="mt-3">
+													{!taskPlannedToday && (
+														<li className="mb-2">
+															<PlanTask
+																planMode="today"
+																taskId={task.id}
+																employeeId={profile?.member?.employeeId ?? ''}
+																taskPlannedToday={taskPlannedToday}
+															/>
+														</li>
+													)}
+													{!taskPlannedTomorrow && (
+														<li className="mb-2">
+															<PlanTask
+																planMode="tomorrow"
+																taskId={task.id}
+																employeeId={profile?.member?.employeeId ?? ''}
+																taskPlannedForTomorrow={taskPlannedTomorrow}
+															/>
+														</li>
+													)}
 													<li className="mb-2">
 														<PlanTask
-															planMode="tomorow"
+															planMode="custom"
 															taskId={task.id}
 															employeeId={profile?.member?.employeeId ?? ''}
-															taskPlannedForTomorrow={taskPlannedTomorrow}
 														/>
 													</li>
-												)}
-												<li className="mb-2">
-													<PlanTask
-														planMode="custom"
-														taskId={task.id}
-														employeeId={profile?.member?.employeeId ?? ''}
-													/>
-												</li>
-											</div>
-										</>
-									)}
+												</div>
+											</>
+										)}
 
 									{viewType === 'dailyplan' &&
 										(planMode === 'Today Tasks' || planMode === 'Future Tasks') && (
diff --git a/apps/web/lib/features/task/task-issue.tsx b/apps/web/lib/features/task/task-issue.tsx
index 1b494a2f8..8c13db8ed 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, ITimeSheet, Nullable } from '@app/interfaces';
+import { IClassName, IssueType, ITaskIssue, ITeamTask, 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,19 +212,3 @@ 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?.task.issueType || 'Task']}
-			showIssueLabels={showIssueLabels}
-			issueType="issue"
-			className={clsxm('rounded-md px-2 text-white', className)}
-		/>
-	);
-}

From 628a39e3e22f2872c5e5ed54e71ff733006d606a Mon Sep 17 00:00:00 2001
From: syns <sutralian@gmail.com>
Date: Tue, 19 Nov 2024 02:20:08 +0700
Subject: [PATCH 16/41] Fix/server web application menu (#3341)

* fix: server web application menu

* fix: server web default updater setting

* fix: server web platform logo dark and light

* fix: server web host not trusted

* fix: remove unused variable
---
 .../src/locales/i18n/bg/translation.json      |  15 +
 .../src/locales/i18n/en/translation.json      |  15 +
 .../helpers/services/libs/desktop-store.ts    |  40 ++-
 apps/server-web/src/main/main.ts              |  43 ++-
 apps/server-web/src/main/main_.ts             | 137 ---------
 apps/server-web/src/main/menu.ts              | 290 +++++++-----------
 .../components/svgs/EverTeamsLogo.tsx         |   8 +-
 apps/web/app/constants.ts                     |   2 +
 apps/web/auth.ts                              |   2 +
 9 files changed, 188 insertions(+), 364 deletions(-)
 delete mode 100644 apps/server-web/src/main/main_.ts

diff --git a/apps/server-web/src/locales/i18n/bg/translation.json b/apps/server-web/src/locales/i18n/bg/translation.json
index a9ba889cc..bcec1eff5 100644
--- a/apps/server-web/src/locales/i18n/bg/translation.json
+++ b/apps/server-web/src/locales/i18n/bg/translation.json
@@ -14,6 +14,21 @@
     "OPEN_WEB": "Отворете уеб в браузъра",
     "SERVER_WINDOW": "Прозорец на сървъра"
   },
+  "MENU_APP": {
+    "ABOUT": "Относно",
+    "QUIT": "Изход",
+    "WINDOW": "Прозорец",
+    "SUBMENU": {
+      "SETTING": "Настройки",
+      "SERVER_WINDOW": "Сървърен прозорец",
+      "LEARN_MORE": "Научете повече",
+      "DOC": "Документация",
+      "SETTING_DEV": "Настройки за разработчици",
+      "SERVER_DEV": "Сървър за разработчици"
+    },
+    "DEV": "Разработчик",
+    "HELP": "Помощ"
+  },
   "FORM": {
     "FIELDS": {
       "PORT": "ПРИСТАНИЩЕ",
diff --git a/apps/server-web/src/locales/i18n/en/translation.json b/apps/server-web/src/locales/i18n/en/translation.json
index 48320d87b..c18265dde 100644
--- a/apps/server-web/src/locales/i18n/en/translation.json
+++ b/apps/server-web/src/locales/i18n/en/translation.json
@@ -14,6 +14,21 @@
     "OPEN_WEB": "Open Web In Browser",
     "SERVER_WINDOW": "Server Window"
   },
+  "MENU_APP": {
+    "ABOUT": "About",
+    "QUIT": "Quit",
+    "WINDOW": "Window",
+    "SUBMENU": {
+      "SETTING": "Setting",
+      "SERVER_WINDOW": "Server Window",
+      "LEARN_MORE": "Learn More",
+      "DOC": "Documentation",
+      "SETTING_DEV": "Setting Dev.",
+      "SERVER_DEV": "Server Dev."
+    },
+    "DEV": "Developer",
+    "HELP": "Help"
+  },
   "FORM": {
     "FIELDS": {
       "PORT": "PORT",
diff --git a/apps/server-web/src/main/helpers/services/libs/desktop-store.ts b/apps/server-web/src/main/helpers/services/libs/desktop-store.ts
index 9db836cd9..01c708563 100644
--- a/apps/server-web/src/main/helpers/services/libs/desktop-store.ts
+++ b/apps/server-web/src/main/helpers/services/libs/desktop-store.ts
@@ -1,6 +1,19 @@
 import Store from 'electron-store';
 import { WebServer } from '../../interfaces';
 const store = new Store();
+const DEFAULT_CONFIG:any = {
+	server: {
+		PORT: 3002,
+		GAUZY_API_SERVER_URL: 'http://localhost:3000',
+		NEXT_PUBLIC_GAUZY_API_SERVER_URL: 'http://localhost:3000',
+		DESKTOP_WEB_SERVER_HOSTNAME: '0.0.0.0'
+	},
+	general: {
+		lang: 'en',
+		autoUpdate: true,
+		updateCheckPeriode: '1140'
+	}
+}
 export const LocalStore = {
 	getStore: (source: string | 'config'): WebServer | any => {
 		return store.get(source);
@@ -24,22 +37,15 @@ export const LocalStore = {
 
 
 	setDefaultServerConfig: () => {
-		const defaultConfig: WebServer | any = store.get('config');
-		if (!defaultConfig || !defaultConfig.server || !defaultConfig.general) {
-			const config: WebServer = {
-				server: {
-					PORT: 3002,
-					GAUZY_API_SERVER_URL: 'http://localhost:3000',
-					NEXT_PUBLIC_GAUZY_API_SERVER_URL: 'http://localhost:3000',
-					DESKTOP_WEB_SERVER_HOSTNAME: '0.0.0.0'
-				},
-				general: {
-					lang: 'en',
-					autoUpdate: true,
-					updateCheckPeriode: '30'
-				}
-			}
-			store.set({ config });
-		}
+		const defaultConfig: WebServer | any = store.get('config') || {};
+		Object.keys(DEFAULT_CONFIG).forEach((key) => {
+			Object.keys(DEFAULT_CONFIG[key]).forEach((keySub) => {
+				defaultConfig[key] = defaultConfig[key] || {};
+				defaultConfig[key][keySub] = defaultConfig[key][keySub] || DEFAULT_CONFIG[key][keySub];
+			})
+		})
+		store.set({
+			config: defaultConfig
+		});
 	}
 };
diff --git a/apps/server-web/src/main/main.ts b/apps/server-web/src/main/main.ts
index f88b5cf7b..cba85f718 100644
--- a/apps/server-web/src/main/main.ts
+++ b/apps/server-web/src/main/main.ts
@@ -1,5 +1,5 @@
 import path from 'path';
-import { app, ipcMain, Tray, dialog, BrowserWindow, shell } from 'electron';
+import { app, ipcMain, Tray, dialog, BrowserWindow, shell, Menu } from 'electron';
 import { DesktopServer } from './helpers/desktop-server';
 import { LocalStore } from './helpers/services/libs/desktop-store';
 import { EventEmitter } from 'events';
@@ -23,8 +23,6 @@ Object.assign(console, Log.functions);
 
 app.name = config.DESCRIPTION;
 
-
-
 const eventEmitter = new EventEmitter();
 
 const controller = new AbortController();
@@ -43,6 +41,7 @@ let logWindow: BrowserWindow | null = null;
 let setupWindow: BrowserWindow | any = null;
 let SettingMenu: any = null;
 let ServerWindowMenu: any = null;
+const appMenu = new MenuBuilder(eventEmitter)
 
 Log.hooks.push((message: any, transport) => {
   if (transport !== Log.transports.file) {
@@ -93,6 +92,7 @@ i18nextMainBackend.on('initialized', () => {
 });
 
 let trayMenuItems: any = [];
+let appMenuItems: any = [];
 
 const RESOURCES_PATH = app.isPackaged
   ? path.join(process.resourcesPath, 'assets')
@@ -182,10 +182,7 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
         settingWindow = null;
         SettingMenu = null
       });
-      if (!SettingMenu) {
-        SettingMenu = new MenuBuilder(settingWindow);
-      }
-      SettingMenu.buildMenu();
+      Menu.setApplicationMenu(appMenu.buildDefaultTemplate(appMenuItems, i18nextMainBackend))
       break;
     case 'LOG_WINDOW':
       logWindow = new BrowserWindow(defaultOptionWindow);
@@ -196,10 +193,7 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
         logWindow = null;
         ServerWindowMenu = null
       })
-      if (!ServerWindowMenu) {
-        ServerWindowMenu = new MenuBuilder(logWindow);
-      }
-      ServerWindowMenu.buildMenu();
+      Menu.setApplicationMenu(appMenu.buildDefaultTemplate(appMenuItems, i18nextMainBackend))
       break;
     case 'SETUP_WINDOW':
       setupWindow = new BrowserWindow(defaultOptionWindow);
@@ -218,7 +212,7 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
 const runServer = async () => {
   console.log('Run the Server...');
   try {
-    const envVal = getEnvApi();
+    const envVal: any = getEnvApi();
 
     // Instantiate API and UI servers
     await desktopServer.start(
@@ -262,14 +256,18 @@ const SendMessageToSettingWindow = (type: string, data: any) => {
 }
 
 const onInitApplication = () => {
-  LocalStore.setDefaultServerConfig(); // check and set default config
+ // check and set default config
+  LocalStore.setDefaultServerConfig();
   createIntervalAutoUpdate()
   trayMenuItems = trayMenuItems.length ? trayMenuItems : defaultTrayMenuItem(eventEmitter);
+  appMenuItems = appMenuItems.length ? appMenuItems : appMenu.defaultMenu();
   tray = _initTray(trayMenuItems, getAssetPath('icons/icon.png'));
   i18nextMainBackend.on('languageChanged', (lng) => {
     if (i18nextMainBackend.isInitialized) {
+
       trayMenuItems = trayMenuItems.length ? trayMenuItems : defaultTrayMenuItem(eventEmitter);
       updateTrayMenu('none', {}, eventEmitter, tray, trayMenuItems, i18nextMainBackend);
+      Menu.setApplicationMenu(appMenu.buildDefaultTemplate(appMenuItems, i18nextMainBackend))
     }
   });
   eventEmitter.on(EventLists.webServerStart, async () => {
@@ -425,6 +423,16 @@ const onInitApplication = () => {
     const url = `http://127.0.0.1:${envConfig?.PORT}`
     shell.openExternal(url)
   })
+
+  eventEmitter.on(EventLists.SETTING_WINDOW_DEV, () => {
+    settingWindow?.webContents.toggleDevTools();
+  })
+
+  eventEmitter.on(EventLists.SERVER_WINDOW_DEV, () => {
+    logWindow?.webContents.toggleDevTools();
+  })
+
+  eventEmitter.emit(EventLists.SERVER_WINDOW);
 }
 
 (async () => {
@@ -452,7 +460,6 @@ ipcMain.on('message', async (event, arg) => {
 })
 
 ipcMain.on(IPC_TYPES.SETTING_PAGE, async (event, arg) => {
-  console.log('main setting page', arg);
   switch (arg.type) {
     case SettingPageTypeMessage.saveSetting:
       const existingConfig = getEnvApi();
@@ -512,13 +519,6 @@ ipcMain.on(IPC_TYPES.SETTING_PAGE, async (event, arg) => {
     case SettingPageTypeMessage.themeChange:
       eventEmitter.emit(EventLists.CHANGE_THEME, arg.data)
       break;
-    default:
-      break;
-  }
-})
-
-ipcMain.on(IPC_TYPES.UPDATER_PAGE, (event, arg) => {
-  switch (arg.type) {
     case SettingPageTypeMessage.updateSetting:
       LocalStore.updateConfigSetting({
         general: {
@@ -529,7 +529,6 @@ ipcMain.on(IPC_TYPES.UPDATER_PAGE, (event, arg) => {
       createIntervalAutoUpdate()
       event.sender.send(IPC_TYPES.UPDATER_PAGE, { type: SettingPageTypeMessage.updateSettingResponse, data: true })
       break;
-
     default:
       break;
   }
diff --git a/apps/server-web/src/main/main_.ts b/apps/server-web/src/main/main_.ts
deleted file mode 100644
index 10c8220ed..000000000
--- a/apps/server-web/src/main/main_.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-/* eslint global-require: off, no-console: off, promise/always-return: off */
-
-/**
- * This module executes inside of electron's main process. You can start
- * electron renderer process from here and communicate with the other processes
- * through IPC.
- *
- * When running `npm run build` or `npm run build:main`, this file is compiled to
- * `./src/main.js` using webpack. This gives us some performance wins.
- */
-import path from 'path';
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
-import { autoUpdater } from 'electron-updater';
-import log from 'electron-log';
-import MenuBuilder from './menu';
-import { resolveHtmlPath } from './util';
-
-class AppUpdater {
-  constructor() {
-    log.transports.file.level = 'info';
-    autoUpdater.logger = log;
-    autoUpdater.checkForUpdatesAndNotify();
-  }
-}
-
-let mainWindow: BrowserWindow | null = null;
-
-ipcMain.on('ipc-example', async (event, arg) => {
-  const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
-  console.log(msgTemplate(arg));
-  event.reply('ipc-example', msgTemplate('pong'));
-});
-
-if (process.env.NODE_ENV === 'production') {
-  const sourceMapSupport = require('source-map-support');
-  sourceMapSupport.install();
-}
-
-const isDebug =
-  process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
-
-if (isDebug) {
-  require('electron-debug')();
-}
-
-const installExtensions = async () => {
-  const installer = require('electron-devtools-installer');
-  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
-  const extensions = ['REACT_DEVELOPER_TOOLS'];
-
-  return installer
-    .default(
-      extensions.map((name) => installer[name]),
-      forceDownload,
-    )
-    .catch(console.log);
-};
-
-const createWindow = async () => {
-  if (isDebug) {
-    await installExtensions();
-  }
-
-  const RESOURCES_PATH = app.isPackaged
-    ? path.join(process.resourcesPath, 'assets')
-    : path.join(__dirname, '../../assets');
-
-  const getAssetPath = (...paths: string[]): string => {
-    return path.join(RESOURCES_PATH, ...paths);
-  };
-
-  mainWindow = new BrowserWindow({
-    show: false,
-    width: 1024,
-    height: 728,
-    icon: getAssetPath('icon.png'),
-    webPreferences: {
-      preload: app.isPackaged
-        ? path.join(__dirname, 'preload.js')
-        : path.join(__dirname, '../../.erb/dll/preload.js'),
-    },
-  });
-
-  mainWindow.loadURL(resolveHtmlPath('index.html'));
-
-  mainWindow.on('ready-to-show', () => {
-    if (!mainWindow) {
-      throw new Error('"mainWindow" is not defined');
-    }
-    if (process.env.START_MINIMIZED) {
-      mainWindow.minimize();
-    } else {
-      mainWindow.show();
-    }
-  });
-
-  mainWindow.on('closed', () => {
-    mainWindow = null;
-  });
-
-  const menuBuilder = new MenuBuilder(mainWindow);
-  menuBuilder.buildMenu();
-
-  // Open urls in the user's browser
-  mainWindow.webContents.setWindowOpenHandler((eData) => {
-    shell.openExternal(eData.url);
-    return { action: 'deny' };
-  });
-
-  // Remove this if your app does not use auto updates
-  // eslint-disable-next-line
-  new AppUpdater();
-};
-
-/**
- * Add event listeners...
- */
-
-app.on('window-all-closed', () => {
-  // Respect the OSX convention of having the application in memory even
-  // after all windows have been closed
-  if (process.platform !== 'darwin') {
-    app.quit();
-  }
-});
-
-app
-  .whenReady()
-  .then(() => {
-    createWindow();
-    app.on('activate', () => {
-      // On macOS it's common to re-create a window in the app when the
-      // dock icon is clicked and there are no other windows open.
-      if (mainWindow === null) createWindow();
-    });
-  })
-  .catch(console.log);
diff --git a/apps/server-web/src/main/menu.ts b/apps/server-web/src/main/menu.ts
index be4348ceb..cec72f148 100644
--- a/apps/server-web/src/main/menu.ts
+++ b/apps/server-web/src/main/menu.ts
@@ -2,216 +2,79 @@ import {
   app,
   Menu,
   shell,
-  BrowserWindow,
-  MenuItemConstructorOptions,
 } from 'electron';
 import { config } from '../configs/config';
-
-interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
-  selector?: string;
-  submenu?: DarwinMenuItemConstructorOptions[] | Menu;
-}
+import { EventEmitter } from 'events';
+import { EventLists } from './helpers/constant';
+import i18n from 'i18next';
 
 export default class MenuBuilder {
-  mainWindow: BrowserWindow;
-
-  constructor(mainWindow: BrowserWindow) {
-    this.mainWindow = mainWindow;
-  }
-
-  buildMenu(): Menu {
-    if (
-      process.env.NODE_ENV === 'development' ||
-      process.env.DEBUG_PROD === 'true'
-    ) {
-      this.setupDevelopmentEnvironment();
-    }
-
-    const template =
-      process.platform === 'darwin'
-        ? this.buildDarwinTemplate()
-        : this.buildDefaultTemplate();
-
-    const menu = Menu.buildFromTemplate(template);
-    Menu.setApplicationMenu(menu);
-
-    return menu;
-  }
-
-  setupDevelopmentEnvironment(): void {
-    this.mainWindow.webContents.on('context-menu', (_, props) => {
-      const { x, y } = props;
-
-      Menu.buildFromTemplate([
-        {
-          label: 'Inspect element',
-          click: () => {
-            this.mainWindow.webContents.inspectElement(x, y);
-          },
-        },
-      ]).popup({ window: this.mainWindow });
-    });
-  }
+  eventEmitter: EventEmitter
 
-  buildDarwinTemplate(): MenuItemConstructorOptions[] {
-    const subMenuAbout: DarwinMenuItemConstructorOptions = {
-      label: config.DESCRIPTION || app.getName(),
-      submenu: [
-        {
-          label: `About ${config.DESCRIPTION || app.getName()}`,
-          selector: 'orderFrontStandardAboutPanel:',
-        },
-        { type: 'separator' },
-        {
-          label: 'Quit',
-          accelerator: 'Command+Q',
-          click: () => {
-            app.quit();
-          },
-        },
-      ],
-    };
-    const subMenuViewDev: MenuItemConstructorOptions = {
-      label: 'View',
-      submenu: [
-        {
-          label: 'Reload',
-          accelerator: 'Command+R',
-          click: () => {
-            this.mainWindow.webContents.reload();
-          },
-        },
-        {
-          label: 'Toggle Developer Tools',
-          accelerator: 'Alt+Command+I',
-          click: () => {
-            this.mainWindow.webContents.toggleDevTools();
-          },
-        },
-      ],
-    };
-    const subMenuViewProd: MenuItemConstructorOptions = {
-      label: 'View',
-      submenu: [
-        {
-          label: 'Reload',
-          accelerator: 'Command+R',
-          click: () => {
-            this.mainWindow.webContents.reload();
-          },
-        },
-        {
-          label: 'Toggle Developer Tools',
-          accelerator: 'Alt+Command+I',
-          click: () => {
-            this.mainWindow.webContents.toggleDevTools();
-          },
-        },
-      ],
-    };
-    const subMenuWindow: DarwinMenuItemConstructorOptions = {
-      label: 'Window',
-      submenu: [
-        {
-          label: 'Minimize',
-          accelerator: 'Command+M',
-          selector: 'performMiniaturize:',
-        },
-        { label: 'Close', accelerator: 'Command+W', selector: 'performClose:' },
-        { type: 'separator' },
-      ],
-    };
-    const subMenuHelp: MenuItemConstructorOptions = {
-      label: 'Help',
-      submenu: [
-        {
-          label: 'Learn More',
-          click() {
-            shell.openExternal('https://ever.team/');
-          },
-        },
-        {
-          label: 'Documentation',
-          click() {
-            shell.openExternal(
-              'https://github.com/ever-co/ever-teams/blob/develop/README.md',
-            );
-          },
-        },
-        {
-          label: 'Search Issues',
-          click() {
-            shell.openExternal('https://github.com/ever-co/ever-teams/issues');
-          },
-        },
-      ],
-    };
-
-    const subMenuView =
-      process.env.NODE_ENV === 'development' ||
-        process.env.DEBUG_PROD === 'true'
-        ? subMenuViewDev
-        : subMenuViewProd;
-
-    return [subMenuAbout, subMenuView, subMenuWindow, subMenuHelp];
+  constructor(eventEmitter: EventEmitter) {
+    this.eventEmitter = eventEmitter
   }
 
-  buildDefaultTemplate() {
-    const templateDefault = [
+  defaultMenu() {
+    const isDarwin = process.platform === 'darwin';
+    return [
       {
-        label: '&File',
+        id: 'MENU_APP',
+        label: config.DESCRIPTION || app.getName(),
         submenu: [
           {
-            label: '&Close',
-            accelerator: 'Ctrl+W',
+            id: 'MENU_APP_ABOUT',
+            label: `MENU_APP.ABOUT`,
+            selector: 'orderFrontStandardAboutPanel:',
+            click: () => {
+              this.eventEmitter.emit(EventLists.gotoAbout)
+            }
+          },
+          { type: 'separator' },
+          {
+            id: 'MENU_APP_QUIT',
+            label: 'MENU_APP.QUIT',
+            accelerator: isDarwin ? 'Command+Q' : 'Alt+F4',
             click: () => {
-              this.mainWindow.close();
+              app.quit();
             },
           },
         ],
       },
       {
-        label: '&View',
-        submenu:
-          process.env.NODE_ENV === 'development' ||
-            process.env.DEBUG_PROD === 'true'
-            ? [
-              {
-                label: '&Reload',
-                accelerator: 'Ctrl+R',
-                click: () => {
-                  this.mainWindow.webContents.reload();
-                },
-              },
-              {
-                label: 'Toggle &Developer Tools',
-                accelerator: 'Alt+Ctrl+I',
-                click: () => {
-                  this.mainWindow.webContents.toggleDevTools();
-                },
-              },
-            ]
-            : [
-              {
-                label: 'Toggle &Developer Tools',
-                accelerator: 'Alt+Ctrl+I',
-                click: () => {
-                  this.mainWindow.webContents.toggleDevTools();
-                },
-              },
-            ],
+        id: 'MENU_APP_WINDOW',
+        label: 'MENU_APP.WINDOW',
+        submenu: [
+          {
+            id: 'SUBMENU_SETTING',
+            label: 'MENU_APP.SUBMENU.SETTING',
+            click: () => {
+              this.eventEmitter.emit(EventLists.gotoSetting);
+            }
+          },
+          {
+            id: 'SUBMENU_SERVER',
+            label: 'MENU_APP.SUBMENU.SERVER_WINDOW',
+            click: () => {
+              this.eventEmitter.emit(EventLists.SERVER_WINDOW);
+            }
+          }
+        ]
       },
       {
-        label: 'Help',
+        id: 'MENU_APP_HELP',
+        label: 'MENU_APP.HELP',
         submenu: [
           {
-            label: 'Learn More',
+            id: 'SUBMENU_LEARN_MORE',
+            label: 'MENU_APP.SUBMENU.LEARN_MORE',
             click() {
               shell.openExternal(config.COMPANY_SITE_LINK);
             },
           },
           {
-            label: 'Documentation',
+            id: 'SUBMENU_DOC',
+            label: 'MENU_APP.SUBMENU.DOC',
             click() {
               shell.openExternal(
                 config.COMPANY_GITHUB_LINK
@@ -220,8 +83,61 @@ export default class MenuBuilder {
           },
         ],
       },
-    ];
+      {
+        id: 'MENU_APP_DEV',
+        label: 'MENU_APP.DEV',
+        submenu: [
+          {
+            id: 'SUBMENU_SETTING_DEV',
+            label: 'MENU_APP.SUBMENU.SETTING_DEV',
+            click: () => {
+              this.eventEmitter.emit(EventLists.SETTING_WINDOW_DEV);
+            },
+          },
+          {
+            id: 'SUBMENU_SERVER_DEV',
+            label: 'MENU_APP.SUBMENU.SERVER_DEV',
+            click: () => {
+              this.eventEmitter.emit(EventLists.SERVER_WINDOW_DEV);
+            },
+          },
+        ]
+      },
+    ]
+  }
 
-    return templateDefault;
+  buildDefaultTemplate(menuItems: any, i18nextMainBackend: typeof i18n) {
+    return Menu.buildFromTemplate(this.translateAppMenu(i18nextMainBackend, menuItems));
   }
+
+  updateAppMenu(menuItem: string, context: { label?: string, enabled?: boolean}, contextMenuItems: any, i18nextMainBackend: typeof i18n) {
+    const menuIdx:number = contextMenuItems.findIndex((item: any) => item.id === menuItem);
+    if (menuIdx > -1) {
+        contextMenuItems[menuIdx] = {...contextMenuItems[menuIdx], ...context};
+        const newMenu = [...contextMenuItems];
+        Menu.setApplicationMenu(Menu.buildFromTemplate(this.translateAppMenu(i18nextMainBackend, newMenu)));
+    } else {
+      const newMenu = [...contextMenuItems];
+      Menu.setApplicationMenu(Menu.buildFromTemplate(this.translateAppMenu(i18nextMainBackend, newMenu)))
+    }
+}
+
+translateAppMenu(i18nextMainBackend: typeof i18n, contextMenu: any) {
+  return contextMenu.map((menu: any) => {
+    const menuCopied = {...menu};
+    if (menuCopied.label) {
+      menuCopied.label = i18nextMainBackend.t(menuCopied.label);
+    }
+    if (menuCopied.submenu && menuCopied.submenu.length) {
+      menuCopied.submenu = menuCopied.submenu.map((sm: any) => {
+        const submenu = {...sm};
+        if (submenu.label) {
+          submenu.label = i18nextMainBackend.t(submenu.label)
+        }
+        return submenu;
+      })
+    }
+    return menuCopied;
+  })
+}
 }
diff --git a/apps/server-web/src/renderer/components/svgs/EverTeamsLogo.tsx b/apps/server-web/src/renderer/components/svgs/EverTeamsLogo.tsx
index 2a123bf40..3df194cda 100644
--- a/apps/server-web/src/renderer/components/svgs/EverTeamsLogo.tsx
+++ b/apps/server-web/src/renderer/components/svgs/EverTeamsLogo.tsx
@@ -1,6 +1,12 @@
 import Logo from '../../../resources/icons/platform-logo.png';
 export const EverTeamsLogo = () => {
   return (
-    <img src={Logo} alt="EverTeams Logo" width="200" height="100" className="logoI" />
+    <img
+      src={Logo}
+      alt="EverTeams Logo"
+      width="200"
+      height="100"
+      className="object-contain brightness-0 dark:invert invert-0 fill-black dark:fill-white"
+    />
   );
 };
diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
index db8321a56..e2a2e0564 100644
--- a/apps/web/app/constants.ts
+++ b/apps/web/app/constants.ts
@@ -317,6 +317,8 @@ export const SLACK_CLIENT_SECRET = process.env.SLACK_CLIENT_SECRET;
 export const TWITTER_CLIENT_ID = process.env.TWITTER_CLIENT_ID;
 export const TWITTER_CLIENT_SECRET = process.env.TWITTER_CLIENT_SECRET;
 
+export const IS_DESKTOP_APP = process.env.IS_DESKTOP_APP === 'true';
+
 // Add manual timer reason
 
 export const manualTimeReasons: ManualTimeReasons[] = [
diff --git a/apps/web/auth.ts b/apps/web/auth.ts
index 56e936665..36430b60a 100644
--- a/apps/web/auth.ts
+++ b/apps/web/auth.ts
@@ -2,9 +2,11 @@ import NextAuth from 'next-auth';
 import { filteredProviders } from '@app/utils/check-provider-env-vars';
 import { GauzyAdapter, jwtCallback, ProviderEnum, signInCallback } from '@app/services/server/requests/OAuth';
 import { NextRequest } from 'next/server';
+import { IS_DESKTOP_APP } from '@app/constants';
 
 export const { handlers, signIn, signOut, auth } = NextAuth((request) => ({
 	providers: filteredProviders,
+	trustHost: IS_DESKTOP_APP,
 	adapter: GauzyAdapter(request as NextRequest),
 	session: { strategy: 'jwt' },
 	callbacks: {

From ae9cb254aa212a31805ecb7dc0f056458e71a489 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Mon, 18 Nov 2024 21:21:07 +0200
Subject: [PATCH 17/41] feat: add table view for daily plan tasks (#3335)

---
 apps/web/components/ui/data-table.tsx         |   6 +-
 .../features/task/daily-plan/future-tasks.tsx | 220 ++++++++++--------
 .../features/task/daily-plan/past-tasks.tsx   | 158 +++++++------
 .../cells/task-action-menu-cell.tsx           |  51 ++++
 .../table-view/cells/task-estimation-cell.tsx |  24 ++
 .../table-view/cells/task-info-cell.tsx       |   7 +
 .../table-view/cells/task-times-cell.tsx      |  31 +++
 .../task/daily-plan/table-view/index.tsx      |  75 ++++++
 apps/web/lib/features/task/task-card.tsx      |   4 +-
 .../lib/features/team-members-table-view.tsx  |   1 -
 apps/web/lib/features/user-profile-plans.tsx  | 163 +++++++------
 11 files changed, 486 insertions(+), 254 deletions(-)
 create mode 100644 apps/web/lib/features/task/daily-plan/table-view/cells/task-action-menu-cell.tsx
 create mode 100644 apps/web/lib/features/task/daily-plan/table-view/cells/task-estimation-cell.tsx
 create mode 100644 apps/web/lib/features/task/daily-plan/table-view/cells/task-info-cell.tsx
 create mode 100644 apps/web/lib/features/task/daily-plan/table-view/cells/task-times-cell.tsx
 create mode 100644 apps/web/lib/features/task/daily-plan/table-view/index.tsx

diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
index 09c74e340..8a9ceaf8e 100644
--- a/apps/web/components/ui/data-table.tsx
+++ b/apps/web/components/ui/data-table.tsx
@@ -86,9 +86,9 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
 													{header.isPlaceholder
 														? null
 														: flexRender(
-															header.column.columnDef.header,
-															header.getContext()
-														)}
+																header.column.columnDef.header,
+																header.getContext()
+															)}
 												</div>
 											</Tooltip>
 										</TableHead>
diff --git a/apps/web/lib/features/task/daily-plan/future-tasks.tsx b/apps/web/lib/features/task/daily-plan/future-tasks.tsx
index 0b5f6ac59..65cb07acf 100644
--- a/apps/web/lib/features/task/daily-plan/future-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/future-tasks.tsx
@@ -16,6 +16,7 @@ import { filterDailyPlan } from '@app/hooks/useFilterDateRange';
 import { IDailyPlan } from '@app/interfaces';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useDateRange } from '@app/hooks/useDateRange';
+import DailyPlanTasksTableView from './table-view';
 
 export function FutureTasks({ profile }: { profile: any }) {
 	const { deleteDailyPlan, deleteDailyPlanLoading, futurePlans } = useDailyPlan();
@@ -57,115 +58,130 @@ export function FutureTasks({ profile }: { profile: any }) {
 								</AccordionTrigger>
 								<AccordionContent className="border-none dark:bg-dark--theme">
 									<PlanHeader plan={plan} planMode="Future Tasks" />
-									<Droppable droppableId={plan.id as string} key={plan.id} type="task">
-										{(provided) => (
-											<ul
-												ref={provided.innerRef}
-												{...provided.droppableProps}
-												className={clsxm(
-													view === 'CARDS' && 'flex-col',
-													view === 'TABLE' && 'flex-wrap',
-													'flex gap-2 pb-[1.5rem]',
-													view === 'BLOCKS' && 'overflow-x-auto'
-												)}
-											>
-												{plan.tasks?.map((task, index) =>
-													view === 'CARDS' ? (
-														<Draggable key={task.id} draggableId={task.id} index={index}>
-															{(provided) => (
-																<div
-																	ref={provided.innerRef}
-																	{...provided.draggableProps}
-																	{...provided.dragHandleProps}
-																	style={{
-																		...provided.draggableProps.style,
-																		marginBottom: 4
-																	}}
-																>
-																	<TaskCard
-																		key={`${task.id}${plan.id}`}
-																		isAuthUser={true}
-																		activeAuthTask={true}
-																		viewType={'dailyplan'}
-																		task={task}
-																		profile={profile}
-																		type="HORIZONTAL"
-																		taskBadgeClassName={`rounded-sm`}
-																		taskTitleClassName="mt-[0.0625rem]"
-																		plan={plan}
-																		planMode="Future Tasks"
-																		className="shadow-[0px_0px_15px_0px_#e2e8f0]"
-																	/>
-																</div>
-															)}
-														</Draggable>
-													) : (
-														<Draggable key={task.id} draggableId={task.id} index={index}>
-															{(provided) => (
-																<div
-																	ref={provided.innerRef}
-																	{...provided.draggableProps}
-																	{...provided.dragHandleProps}
-																	style={{
-																		...provided.draggableProps.style,
-																		marginBottom: 8
-																	}}
-																>
-																	<TaskBlockCard task={task} />
-																</div>
-															)}
-														</Draggable>
-													)
-												)}
-												<>{provided.placeholder}</>
-												{canSeeActivity ? (
-													<div className="flex shrink-0  justify-end">
-														<AlertPopup
-															open={currentDeleteIndex === index && popupOpen}
-															buttonOpen={
-																//button open popup
+									{view === 'TABLE' ? (
+										<DailyPlanTasksTableView
+											profile={profile}
+											plan={plan}
+											data={plan.tasks ?? []}
+										/>
+									) : (
+										<Droppable droppableId={plan.id as string} key={plan.id} type="task">
+											{(provided) => (
+												<ul
+													ref={provided.innerRef}
+													{...provided.droppableProps}
+													className={clsxm(
+														view === 'CARDS' && 'flex-col',
+														'flex gap-2 pb-[1.5rem]',
+														view === 'BLOCKS' && 'overflow-x-auto'
+													)}
+												>
+													{plan.tasks?.map((task, index) =>
+														view === 'CARDS' ? (
+															<Draggable
+																key={task.id}
+																draggableId={task.id}
+																index={index}
+															>
+																{(provided) => (
+																	<div
+																		ref={provided.innerRef}
+																		{...provided.draggableProps}
+																		{...provided.dragHandleProps}
+																		style={{
+																			...provided.draggableProps.style,
+																			marginBottom: 4
+																		}}
+																	>
+																		<TaskCard
+																			key={`${task.id}${plan.id}`}
+																			isAuthUser={true}
+																			activeAuthTask={true}
+																			viewType={'dailyplan'}
+																			task={task}
+																			profile={profile}
+																			type="HORIZONTAL"
+																			taskBadgeClassName={`rounded-sm`}
+																			taskTitleClassName="mt-[0.0625rem]"
+																			plan={plan}
+																			planMode="Future Tasks"
+																			className="shadow-[0px_0px_15px_0px_#e2e8f0]"
+																		/>
+																	</div>
+																)}
+															</Draggable>
+														) : (
+															<Draggable
+																key={task.id}
+																draggableId={task.id}
+																index={index}
+															>
+																{(provided) => (
+																	<div
+																		ref={provided.innerRef}
+																		{...provided.draggableProps}
+																		{...provided.dragHandleProps}
+																		style={{
+																			...provided.draggableProps.style,
+																			marginBottom: 8
+																		}}
+																	>
+																		<TaskBlockCard task={task} />
+																	</div>
+																)}
+															</Draggable>
+														)
+													)}
+													<>{provided.placeholder}</>
+													{canSeeActivity ? (
+														<div className="flex shrink-0  justify-end">
+															<AlertPopup
+																open={currentDeleteIndex === index && popupOpen}
+																buttonOpen={
+																	//button open popup
+																	<Button
+																		onClick={() => {
+																			setPopupOpen((prev) => !prev);
+																			setCurrentDeleteIndex(index);
+																		}}
+																		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"
+																	>
+																		Delete this plan
+																	</Button>
+																}
+															>
+																{/*button confirm*/}
 																<Button
+																	disabled={deleteDailyPlanLoading}
 																	onClick={() => {
-																		setPopupOpen((prev) => !prev);
-																		setCurrentDeleteIndex(index);
+																		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="animate-spin mr-2 h-4 w-4" />
+																	)}
+																	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"
 																>
-																	Delete this plan
+																	Cancel
 																</Button>
-															}
-														>
-															{/*button confirm*/}
-															<Button
-																disabled={deleteDailyPlanLoading}
-																onClick={() => {
-																	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="animate-spin mr-2 h-4 w-4" />
-																)}
-																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"
-															>
-																Cancel
-															</Button>
-														</AlertPopup>
-													</div>
-												) : (
-													<></>
-												)}
-											</ul>
-										)}
-									</Droppable>
+															</AlertPopup>
+														</div>
+													) : (
+														<></>
+													)}
+												</ul>
+											)}
+										</Droppable>
+									)}
 								</AccordionContent>
 							</AccordionItem>
 						))}
diff --git a/apps/web/lib/features/task/daily-plan/past-tasks.tsx b/apps/web/lib/features/task/daily-plan/past-tasks.tsx
index 29ce71c3e..d4fdf8cd1 100644
--- a/apps/web/lib/features/task/daily-plan/past-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/past-tasks.tsx
@@ -13,6 +13,7 @@ import { useEffect, useState } from 'react';
 import { IDailyPlan } from '@app/interfaces';
 import { DragDropContext, Draggable, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
 import { useDateRange } from '@app/hooks/useDateRange';
+import DailyPlanTasksTableView from './table-view';
 
 export function PastTasks({ profile, currentTab = 'Past Tasks' }: { profile: any; currentTab?: FilterTabs }) {
 	const { pastPlans } = useDailyPlan();
@@ -51,79 +52,90 @@ export function PastTasks({ profile, currentTab = 'Past Tasks' }: { profile: any
 								<AccordionContent className="border-none dark:bg-dark--theme pb-6">
 									{/* Plan header */}
 									<PlanHeader plan={plan} planMode="Outstanding" />
-									<Droppable
-										droppableId={plan.id as string}
-										key={plan.id}
-										type="task"
-										direction={view === 'CARDS' ? 'vertical' : 'horizontal'}
-									>
-										{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
-											<ul
-												ref={provided.innerRef}
-												{...provided.droppableProps}
-												className={clsxm(
-													view === 'CARDS' && 'flex-col',
-													view === 'TABLE' && 'flex-wrap',
-													'flex gap-2 pb-[1.5rem]',
-													view === 'BLOCKS' && 'overflow-x-auto',
-													snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
-												)}
-											>
-												{plan.tasks?.map((task, index) =>
-													view === 'CARDS' ? (
-														<Draggable key={index} draggableId={task.id} index={index}>
-															{(provided) => (
-																<div
-																	ref={provided.innerRef}
-																	{...provided.draggableProps}
-																	{...provided.dragHandleProps}
-																	style={{
-																		...provided.draggableProps.style,
-																		marginBottom: 4
-																	}}
-																>
-																	<TaskCard
-																		key={`${task.id}${plan.id}`}
-																		isAuthUser={true}
-																		activeAuthTask={true}
-																		viewType={'dailyplan'}
-																		task={task}
-																		profile={profile}
-																		plan={plan}
-																		type="HORIZONTAL"
-																		taskBadgeClassName={`rounded-sm`}
-																		taskTitleClassName="mt-[0.0625rem]"
-																		planMode={
-																			currentTab === 'Past Tasks'
-																				? 'Past Tasks'
-																				: undefined
-																		}
-																		className="shadow-[0px_0px_15px_0px_#e2e8f0]"
-																	/>
-																</div>
-															)}
-														</Draggable>
-													) : (
-														<Draggable key={task.id} draggableId={task.id} index={index}>
-															{(provided) => (
-																<div
-																	ref={provided.innerRef}
-																	{...provided.draggableProps}
-																	{...provided.dragHandleProps}
-																	style={{
-																		...provided.draggableProps.style,
-																		marginBottom: 8
-																	}}
-																>
-																	<TaskBlockCard key={task.id} task={task} />
-																</div>
-															)}
-														</Draggable>
-													)
-												)}
-											</ul>
-										)}
-									</Droppable>
+									{view === 'TABLE' ? (
+										<DailyPlanTasksTableView
+											profile={profile}
+											plan={plan}
+											data={plan.tasks ?? []}
+										/>
+									) : (
+										<Droppable
+											droppableId={plan.id as string}
+											key={plan.id}
+											type="task"
+											direction={view === 'CARDS' ? 'vertical' : 'horizontal'}
+										>
+											{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
+												<ul
+													ref={provided.innerRef}
+													{...provided.droppableProps}
+													className={clsxm(
+														view === 'CARDS' && 'flex-col',
+														'flex gap-2 pb-[1.5rem]',
+														view === 'BLOCKS' && 'overflow-x-auto',
+														snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
+													)}
+												>
+													{plan.tasks?.map((task, index) =>
+														view === 'CARDS' ? (
+															<Draggable key={index} draggableId={task.id} index={index}>
+																{(provided) => (
+																	<div
+																		ref={provided.innerRef}
+																		{...provided.draggableProps}
+																		{...provided.dragHandleProps}
+																		style={{
+																			...provided.draggableProps.style,
+																			marginBottom: 4
+																		}}
+																	>
+																		<TaskCard
+																			key={`${task.id}${plan.id}`}
+																			isAuthUser={true}
+																			activeAuthTask={true}
+																			viewType={'dailyplan'}
+																			task={task}
+																			profile={profile}
+																			plan={plan}
+																			type="HORIZONTAL"
+																			taskBadgeClassName={`rounded-sm`}
+																			taskTitleClassName="mt-[0.0625rem]"
+																			planMode={
+																				currentTab === 'Past Tasks'
+																					? 'Past Tasks'
+																					: undefined
+																			}
+																			className="shadow-[0px_0px_15px_0px_#e2e8f0]"
+																		/>
+																	</div>
+																)}
+															</Draggable>
+														) : (
+															<Draggable
+																key={task.id}
+																draggableId={task.id}
+																index={index}
+															>
+																{(provided) => (
+																	<div
+																		ref={provided.innerRef}
+																		{...provided.draggableProps}
+																		{...provided.dragHandleProps}
+																		style={{
+																			...provided.draggableProps.style,
+																			marginBottom: 8
+																		}}
+																	>
+																		<TaskBlockCard key={task.id} task={task} />
+																	</div>
+																)}
+															</Draggable>
+														)
+													)}
+												</ul>
+											)}
+										</Droppable>
+									)}
 								</AccordionContent>
 							</AccordionItem>
 						))}
diff --git a/apps/web/lib/features/task/daily-plan/table-view/cells/task-action-menu-cell.tsx b/apps/web/lib/features/task/daily-plan/table-view/cells/task-action-menu-cell.tsx
new file mode 100644
index 000000000..89643f9df
--- /dev/null
+++ b/apps/web/lib/features/task/daily-plan/table-view/cells/task-action-menu-cell.tsx
@@ -0,0 +1,51 @@
+import { ITeamTask } from '@/app/interfaces';
+import { CellContext } from '@tanstack/react-table';
+import { ActiveTaskStatusDropdown } from '../../../task-status';
+import { useMemo, useState } from 'react';
+import { I_UserProfilePage, useOrganizationTeams, useTeamMemberCard } from '@/app/hooks';
+import { get } from 'lodash';
+import { TaskCardMenu } from '../../../task-card';
+
+export default function TaskActionMenuCell(props: CellContext<ITeamTask, unknown>) {
+	const [loading, setLoading] = useState(false);
+	const { activeTeam } = useOrganizationTeams();
+	const members = useMemo(() => activeTeam?.members || [], [activeTeam?.members]);
+	const profile = get(props.column, 'columnDef.meta.profile') as unknown as I_UserProfilePage;
+	const plan = get(props.column, 'columnDef.meta.plan');
+	const planMode = get(props.column, 'columnDef.meta.planMode');
+	const currentMember = useMemo(
+		() =>
+			members.find((m) => {
+				return m.employee.user?.id === profile?.userProfile?.id;
+			}),
+		[members, profile?.userProfile?.id]
+	);
+	const memberInfo = useTeamMemberCard(currentMember || undefined);
+
+	return (
+		<div className="flex items-center justify-center w-1/5 h-full xl:justify-between lg:px-3 2xl:w-52 3xl:w-80">
+			{/* Active Task Status Dropdown (It's a dropdown that allows the user to change the status of the task.)*/}
+			<div className="flex items-center justify-center ">
+				<ActiveTaskStatusDropdown
+					task={props.row.original}
+					onChangeLoading={(load) => setLoading(load)}
+					className="min-w-[10.625rem] text-sm"
+				/>
+			</div>
+			{/* TaskCardMenu */}
+			<div className="flex items-end justify-end mt-2 shrink-0 xl:mt-0 text-start">
+				{props.row.original && currentMember && (
+					<TaskCardMenu
+						task={props.row.original}
+						loading={loading}
+						memberInfo={memberInfo}
+						viewType={'default'}
+						profile={profile}
+						plan={plan}
+						planMode={planMode}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/lib/features/task/daily-plan/table-view/cells/task-estimation-cell.tsx b/apps/web/lib/features/task/daily-plan/table-view/cells/task-estimation-cell.tsx
new file mode 100644
index 000000000..51a933455
--- /dev/null
+++ b/apps/web/lib/features/task/daily-plan/table-view/cells/task-estimation-cell.tsx
@@ -0,0 +1,24 @@
+import { I_UserProfilePage, useOrganizationTeams, useTeamMemberCard, useTMCardTaskEdit } from '@/app/hooks';
+import { ITeamTask } from '@/app/interfaces';
+import { TaskEstimateInfo } from '@/lib/features/team/user-team-card/task-estimate';
+import { CellContext } from '@tanstack/react-table';
+import { get } from 'lodash';
+import { useMemo } from 'react';
+
+export default function DailyPlanTaskEstimationCell(props: CellContext<ITeamTask, unknown>) {
+	const plan = get(props.column, 'columnDef.meta.plan');
+	const profile = get(props.column, 'columnDef.meta.profile') as unknown as I_UserProfilePage;
+	const { activeTeam } = useOrganizationTeams();
+	const members = useMemo(() => activeTeam?.members || [], [activeTeam?.members]);
+	const currentMember = useMemo(
+		() =>
+			members.find((m) => {
+				return m.employee.user?.id === profile?.userProfile?.id;
+			}),
+		[members, profile?.userProfile?.id]
+	);
+	const memberInfo = useTeamMemberCard(currentMember || undefined);
+	const taskEdition = useTMCardTaskEdit(props.row.original);
+
+	return <TaskEstimateInfo plan={plan} memberInfo={memberInfo} edition={taskEdition} activeAuthTask={true} />;
+}
diff --git a/apps/web/lib/features/task/daily-plan/table-view/cells/task-info-cell.tsx b/apps/web/lib/features/task/daily-plan/table-view/cells/task-info-cell.tsx
new file mode 100644
index 000000000..d31827ce7
--- /dev/null
+++ b/apps/web/lib/features/task/daily-plan/table-view/cells/task-info-cell.tsx
@@ -0,0 +1,7 @@
+import { CellContext } from '@tanstack/react-table';
+import { TaskInfo } from '../../../task-card';
+import { ITeamTask } from '@/app/interfaces';
+
+export default function DailyPlanTaskInfoCell(props: CellContext<ITeamTask, unknown>) {
+	return <TaskInfo task={props.row.original} className="w-full px-4" tab={'default'} />;
+}
diff --git a/apps/web/lib/features/task/daily-plan/table-view/cells/task-times-cell.tsx b/apps/web/lib/features/task/daily-plan/table-view/cells/task-times-cell.tsx
new file mode 100644
index 000000000..2ba60368f
--- /dev/null
+++ b/apps/web/lib/features/task/daily-plan/table-view/cells/task-times-cell.tsx
@@ -0,0 +1,31 @@
+import { CellContext } from '@tanstack/react-table';
+import { TaskTimes } from '../../../task-times';
+import { ITeamTask } from '@/app/interfaces';
+import { I_UserProfilePage, useOrganizationTeams, useTeamMemberCard } from '@/app/hooks';
+import get from 'lodash/get';
+import { useMemo } from 'react';
+
+export default function DailyPlanTaskTimesCell(props: CellContext<ITeamTask, unknown>) {
+	const profile = get(props.column, 'columnDef.meta.profile') as unknown as I_UserProfilePage;
+	const { activeTeam } = useOrganizationTeams();
+	const members = useMemo(() => activeTeam?.members || [], [activeTeam?.members]);
+	const currentMember = useMemo(
+		() =>
+			members.find((m) => {
+				return m.employee.user?.id === profile?.userProfile?.id;
+			}),
+		[members, profile?.userProfile?.id]
+	);
+	const memberInfo = useTeamMemberCard(currentMember || undefined);
+
+	return (
+		<TaskTimes
+			activeAuthTask={true}
+			task={props.row.original}
+			isAuthUser={true}
+			className="flex flex-col gap-2"
+			showTotal={true}
+			memberInfo={memberInfo}
+		/>
+	);
+}
diff --git a/apps/web/lib/features/task/daily-plan/table-view/index.tsx b/apps/web/lib/features/task/daily-plan/table-view/index.tsx
new file mode 100644
index 000000000..7adc2dc79
--- /dev/null
+++ b/apps/web/lib/features/task/daily-plan/table-view/index.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import DataTable from '@components/ui/data-table';
+import { ColumnDef } from '@tanstack/react-table';
+import { IDailyPlan, ITeamTask } from '@app/interfaces';
+import DailyPlanTaskEstimationCell from './cells/task-estimation-cell';
+import DailyPlanTaskInfoCell from './cells/task-info-cell';
+import DailyPlanTaskTimesCell from './cells/task-times-cell';
+import TaskActionMenuCell from './cells/task-action-menu-cell';
+import { FilterTabs, I_UserProfilePage } from '@/app/hooks';
+
+interface IDailyPlanTasksTableViewProps {
+	data: ITeamTask[];
+	plan: IDailyPlan;
+	profile: I_UserProfilePage;
+	planMode?: FilterTabs;
+}
+
+/**
+ * Table view of daily plan tasks
+ *
+ * @param {Object} props - THe props object
+ * @param {ITeamTask[]} props.data - The tasks
+ * @param {I_UserProfilePage} props.profile - The user profile page
+ * @param {FilterTabs} props.planMode - The plan mode to display
+ *
+ * @returns {JSX.Element} - The table view of daily plan tasks
+ */
+export default function DailyPlanTasksTableView(props: IDailyPlanTasksTableViewProps) {
+	const { data, plan, profile, planMode } = props;
+
+	const columns = React.useMemo<ColumnDef<ITeamTask>[]>(
+		() => [
+			{
+				id: 'task',
+				header: 'Task',
+				tooltip: '',
+				cell: DailyPlanTaskInfoCell
+			},
+			{
+				id: 'estimate',
+				header: 'Estimate',
+				tooltip: '',
+				cell: DailyPlanTaskEstimationCell,
+				meta: {
+					plan,
+					profile
+				}
+			},
+			{
+				id: 'workedOn',
+				header: 'Worked On',
+				tooltip: '',
+				cell: DailyPlanTaskTimesCell,
+				meta: {
+					profile
+				}
+			},
+			{
+				id: 'action',
+				header: 'Action',
+				tooltip: '',
+				cell: TaskActionMenuCell,
+				meta: {
+					plan,
+					profile,
+					planMode
+				}
+			}
+		],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[]
+	);
+
+	return <DataTable isHeader={false} columns={columns} data={data} />;
+}
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index ae4d67e6f..3eae62ec9 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -480,7 +480,7 @@ function TimerButtonCall({
 
 //* Task Estimate info *
 //* Task Info FC *
-function TaskInfo({
+export function TaskInfo({
 	className,
 	task,
 	taskBadgeClassName,
@@ -526,7 +526,7 @@ function TaskInfo({
 /**
  * It's a dropdown menu that allows the user to remove the task.
  */
-function TaskCardMenu({
+export function TaskCardMenu({
 	task,
 	loading,
 	memberInfo,
diff --git a/apps/web/lib/features/team-members-table-view.tsx b/apps/web/lib/features/team-members-table-view.tsx
index af2d3d471..50df9227d 100644
--- a/apps/web/lib/features/team-members-table-view.tsx
+++ b/apps/web/lib/features/team-members-table-view.tsx
@@ -72,7 +72,6 @@ const TeamMembersTableView = ({
 
 	return (
 		<>
-
 			<DataTable
 				isHeader={false}
 				columns={columns as Column<OT_Member>[]}
diff --git a/apps/web/lib/features/user-profile-plans.tsx b/apps/web/lib/features/user-profile-plans.tsx
index fbdac86f3..754622dd6 100644
--- a/apps/web/lib/features/user-profile-plans.tsx
+++ b/apps/web/lib/features/user-profile-plans.tsx
@@ -50,6 +50,7 @@ import TaskBlockCard from './task/task-block-card';
 import { TaskCard } from './task/task-card';
 import moment from 'moment';
 import { usePathname } from 'next/navigation';
+import DailyPlanTasksTableView from './task/daily-plan/table-view';
 
 export type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Tasks' | 'Outstanding';
 type FilterOutstanding = 'ALL' | 'DATE';
@@ -333,79 +334,95 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 								</AccordionTrigger>
 								<AccordionContent className="bg-transparent border-none dark:bg-dark--theme">
 									<PlanHeader plan={plan} planMode={currentTab as any} />
-									<Droppable
-										droppableId={plan.id as string}
-										key={plan.id}
-										type="task"
-										direction={view === 'CARDS' ? 'vertical' : 'horizontal'}
-									>
-										{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
-											<ul
-												ref={provided.innerRef}
-												{...provided.droppableProps}
-												className={clsxm(
-													view === 'CARDS' && 'flex-col',
-													view === 'TABLE' && 'flex-wrap',
-													'flex gap-2 pb-[1.5rem]',
-													view === 'BLOCKS' && 'overflow-x-auto',
-													snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
-												)}
-											>
-												{plan.tasks?.map((task, index) =>
-													view === 'CARDS' ? (
-														<Draggable key={task.id} draggableId={task.id} index={index}>
-															{(provided) => (
-																<div
-																	ref={provided.innerRef}
-																	{...provided.draggableProps}
-																	{...provided.dragHandleProps}
-																	style={{
-																		...provided.draggableProps.style,
-																		marginBottom: 6
-																	}}
-																>
-																	<TaskCard
-																		isAuthUser={true}
-																		activeAuthTask={true}
-																		viewType={'dailyplan'}
-																		task={task}
-																		profile={profile}
-																		type="HORIZONTAL"
-																		taskBadgeClassName={`rounded-sm`}
-																		taskTitleClassName="mt-[0.0625rem]"
-																		planMode={
-																			currentTab === 'Today Tasks'
-																				? 'Today Tasks'
-																				: undefined
-																		}
-																		plan={plan}
-																		className="shadow-[0px_0px_15px_0px_#e2e8f0]"
-																	/>
-																</div>
-															)}
-														</Draggable>
-													) : (
-														<Draggable key={task.id} draggableId={task.id} index={index}>
-															{(provided) => (
-																<div
-																	ref={provided.innerRef}
-																	{...provided.draggableProps}
-																	{...provided.dragHandleProps}
-																	style={{
-																		...provided.draggableProps.style,
-																		marginBottom: 8
-																	}}
-																>
-																	<TaskBlockCard task={task} />
-																</div>
-															)}
-														</Draggable>
-													)
-												)}
-												<>{provided.placeholder}</>
-											</ul>
-										)}
-									</Droppable>
+
+									{view === 'TABLE' ? (
+										<DailyPlanTasksTableView
+											profile={profile}
+											plan={plan}
+											data={plan.tasks ?? []}
+										/>
+									) : (
+										<Droppable
+											droppableId={plan.id as string}
+											key={plan.id}
+											type="task"
+											direction={view === 'CARDS' ? 'vertical' : 'horizontal'}
+										>
+											{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
+												<ul
+													ref={provided.innerRef}
+													{...provided.droppableProps}
+													className={clsxm(
+														view === 'CARDS' && 'flex-col',
+														'flex gap-2 pb-[1.5rem]',
+														view === 'BLOCKS' && 'overflow-x-auto',
+														snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
+													)}
+												>
+													{plan.tasks?.map((task, index) =>
+														view === 'CARDS' ? (
+															<Draggable
+																key={task.id}
+																draggableId={task.id}
+																index={index}
+															>
+																{(provided) => (
+																	<div
+																		ref={provided.innerRef}
+																		{...provided.draggableProps}
+																		{...provided.dragHandleProps}
+																		style={{
+																			...provided.draggableProps.style,
+																			marginBottom: 6
+																		}}
+																	>
+																		<TaskCard
+																			isAuthUser={true}
+																			activeAuthTask={true}
+																			viewType={'dailyplan'}
+																			task={task}
+																			profile={profile}
+																			type="HORIZONTAL"
+																			taskBadgeClassName={`rounded-sm`}
+																			taskTitleClassName="mt-[0.0625rem]"
+																			planMode={
+																				currentTab === 'Today Tasks'
+																					? 'Today Tasks'
+																					: undefined
+																			}
+																			plan={plan}
+																			className="shadow-[0px_0px_15px_0px_#e2e8f0]"
+																		/>
+																	</div>
+																)}
+															</Draggable>
+														) : (
+															<Draggable
+																key={task.id}
+																draggableId={task.id}
+																index={index}
+															>
+																{(provided) => (
+																	<div
+																		ref={provided.innerRef}
+																		{...provided.draggableProps}
+																		{...provided.dragHandleProps}
+																		style={{
+																			...provided.draggableProps.style,
+																			marginBottom: 8
+																		}}
+																	>
+																		<TaskBlockCard task={task} />
+																	</div>
+																)}
+															</Draggable>
+														)
+													)}
+													<>{provided.placeholder}</>
+												</ul>
+											)}
+										</Droppable>
+									)}
 								</AccordionContent>
 							</AccordionItem>
 						))}

From 5b1a6bd28db8c0da67f27969b06cb0b421c16e4e Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Mon, 18 Nov 2024 21:25:11 +0200
Subject: [PATCH 18/41] improvement: status type | edit/create mode (#3185)

* improvement: status type | edit/create mode

* fix svg icon colors

* fix svg icon default value

* adapt requested changes

* add requested changes

* fix build errors
---
 .vscode/settings.json                        |  4 +-
 apps/web/app/constants.ts                    |  2 +
 apps/web/app/services/server/fetch.ts        | 39 ++++++++-
 apps/web/lib/features/task/task-status.tsx   |  9 +-
 apps/web/lib/settings/icon-items.tsx         |  9 +-
 apps/web/lib/settings/list-card.tsx          | 56 +++++++++---
 apps/web/lib/settings/task-statuses-form.tsx | 91 ++++++++++++++++----
 apps/web/locales/ar.json                     |  2 +
 apps/web/locales/bg.json                     |  2 +
 apps/web/locales/de.json                     |  2 +
 apps/web/locales/en.json                     |  2 +
 apps/web/locales/es.json                     |  2 +
 apps/web/locales/fr.json                     |  2 +
 apps/web/locales/he.json                     |  2 +
 apps/web/locales/it.json                     |  2 +
 apps/web/locales/nl.json                     |  2 +
 apps/web/locales/pl.json                     |  2 +
 apps/web/locales/pt.json                     |  2 +
 apps/web/locales/ru.json                     |  2 +
 apps/web/locales/zh.json                     |  2 +
 20 files changed, 196 insertions(+), 40 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 06dae99cd..be7e65f57 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -23,9 +23,7 @@
 	},
 	"vsicons.presets.angular": true,
 	"deepscan.enable": true,
-	"cSpell.words": [
-		"Timepicker"
-	],
+	"cSpell.words": ["Timepicker"],
 	"files.exclude": {
 		"**/.git": true,
 		"**/.DS_Store": true,
diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
index e2a2e0564..b7d0ad636 100644
--- a/apps/web/app/constants.ts
+++ b/apps/web/app/constants.ts
@@ -209,6 +209,8 @@ export const TaskStatus = {
 	INPROGRESS: 'in-progress'
 };
 
+export const tasksStatusSvgCacheDuration = 1000 * 60 * 60;
+
 export const languagesFlags = [
 	{
 		Flag: US,
diff --git a/apps/web/app/services/server/fetch.ts b/apps/web/app/services/server/fetch.ts
index 32d56cb05..f026969ed 100644
--- a/apps/web/app/services/server/fetch.ts
+++ b/apps/web/app/services/server/fetch.ts
@@ -1,4 +1,4 @@
-import { GAUZY_API_SERVER_URL } from '@app/constants';
+import { GAUZY_API_SERVER_URL, tasksStatusSvgCacheDuration } from '@app/constants';
 
 export function serverFetch<T>({
 	path,
@@ -54,3 +54,40 @@ export function serverFetch<T>({
 		};
 	});
 }
+
+/** Tasks status SVG icons fetch */
+
+// In memory cache for performance
+
+const tasksStatusSvgCache = new Map<
+	string,
+	{
+		content: Response;
+		timestamp: number;
+	}
+>();
+
+export async function svgFetch(url: string): Promise<Response> {
+	try {
+		//Url validation
+		new URL(url);
+
+		const cached = tasksStatusSvgCache.get(url);
+		const now = Date.now();
+
+		if (cached && now - cached.timestamp < tasksStatusSvgCacheDuration) {
+			return cached.content.clone();
+		}
+
+		// Fetch the SVG
+		const response = await fetch(url);
+
+		tasksStatusSvgCache.set(url, {
+			content: response.clone(),
+			timestamp: now
+		});
+		return response;
+	} catch {
+		throw new Error('Invalid URL provided');
+	}
+}
diff --git a/apps/web/lib/features/task/task-status.tsx b/apps/web/lib/features/task/task-status.tsx
index 73096654c..eb9c4e2d7 100644
--- a/apps/web/lib/features/task/task-status.tsx
+++ b/apps/web/lib/features/task/task-status.tsx
@@ -33,6 +33,7 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 import { readableColor } from 'polished';
 import { useTheme } from 'next-themes';
 import { Square4OutlineIcon, CircleIcon } from 'assets/svg';
+import { getTextColor } from '@app/helpers';
 import { cn } from '@/lib/utils';
 
 export type TStatusItem = {
@@ -854,7 +855,8 @@ export function TaskStatus({
 				className
 			)}
 			style={{
-				backgroundColor: active ? backgroundColor : undefined
+				backgroundColor: active ? backgroundColor : undefined,
+				color: getTextColor(backgroundColor ?? 'white')
 			}}
 		>
 			<div
@@ -975,10 +977,10 @@ export function StatusDropdown<T extends TStatusItem>({
 			className={clsxm(
 				`justify-between capitalize`,
 				sidebarUI && ['text-xs'],
-				!value && ['text-dark dark:text-white dark:bg-dark--theme-light'],
+				!value && ['!text-dark/40 dark:text-white'],
 				isVersion || (forDetails && !value)
 					? 'bg-transparent border border-solid border-color-[#F2F2F2]'
-					: 'bg-[#F2F2F2] ',
+					: 'bg-white border',
 				'dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33]',
 				taskStatusClassName,
 				isVersion && 'dark:text-white',
@@ -1028,6 +1030,7 @@ export function StatusDropdown<T extends TStatusItem>({
 										<Tooltip
 											enabled={hasBtnIcon && (value?.name || '').length > 10}
 											label={capitalize(value?.name) || ''}
+											className="h-full"
 										>
 											{button}
 										</Tooltip>
diff --git a/apps/web/lib/settings/icon-items.tsx b/apps/web/lib/settings/icon-items.tsx
index 5ba87b2db..8c72290e2 100644
--- a/apps/web/lib/settings/icon-items.tsx
+++ b/apps/web/lib/settings/icon-items.tsx
@@ -2,6 +2,7 @@ import { GAUZY_API_BASE_SERVER_URL } from '@app/constants';
 import { IIcon } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { DropdownItem } from 'lib/components';
+import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 
 export type IconItem = DropdownItem<IIcon>;
@@ -53,6 +54,7 @@ export function IconItem({
 	url: string;
 	disabled?: boolean;
 }) {
+	const t = useTranslations();
 	return (
 		<div
 			title={title}
@@ -63,7 +65,7 @@ export function IconItem({
 			)}
 		>
 			<div>
-				{url && (
+				{url ? (
 					<div
 						className={clsxm(
 							'w-[17px] h-[17px]',
@@ -82,11 +84,10 @@ export function IconItem({
 							loading="lazy"
 						/>
 					</div>
+				) : (
+					<span>{t('common.ICON')}</span>
 				)}
 			</div>
-			<span className={clsxm('text-normal', 'whitespace-nowrap text-ellipsis overflow-hidden capitalize')}>
-				{title}
-			</span>
 		</div>
 	);
 }
diff --git a/apps/web/lib/settings/list-card.tsx b/apps/web/lib/settings/list-card.tsx
index f07ef63b0..e9ad47a24 100644
--- a/apps/web/lib/settings/list-card.tsx
+++ b/apps/web/lib/settings/list-card.tsx
@@ -1,11 +1,12 @@
 import { EditPenUnderlineIcon, TrashIcon } from 'assets/svg';
 import { Button, Text, Tooltip } from 'lib/components';
-import Image from 'next/image';
 import { CHARACTER_LIMIT_TO_SHOW } from '@app/constants';
 import { IClassName } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { getTextColor } from '@app/helpers';
 import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
+import { svgFetch } from '@app/services/server/fetch';
 
 export const StatusesListCard = ({
 	statusIcon,
@@ -27,6 +28,12 @@ export const StatusesListCard = ({
 	const textColor = getTextColor(bgColor);
 	const t = useTranslations();
 
+	useEffect(() => {
+		if (statusIcon) {
+			loadSVG(statusIcon, 'icon-container' + statusTitle, textColor);
+		}
+	}, [statusIcon, statusTitle, textColor]);
+
 	return (
 		<div className="border w-[21.4rem] flex items-center p-1 rounded-xl justify-between">
 			<div
@@ -37,18 +44,7 @@ export const StatusesListCard = ({
 				)}
 				style={{ backgroundColor: bgColor === '' ? undefined : bgColor }}
 			>
-				{statusIcon && (
-					<Image
-						src={statusIcon}
-						alt={statusTitle}
-						width={20}
-						height={20}
-						decoding="async"
-						data-nimg="1"
-						loading="lazy"
-						className="min-h-[20px]"
-					/>
-				)}
+				{statusIcon && <div id={'icon-container' + statusTitle}></div>}
 				<Tooltip
 					label={statusTitle}
 					enabled={statusTitle.length >= CHARACTER_LIMIT_TO_SHOW}
@@ -84,3 +80,37 @@ export const StatusesListCard = ({
 		</div>
 	);
 };
+
+/**
+ * A function to load an SVG and gives the ability to
+ * update its attributes. e.g: fill color
+ *
+ * @param {string} url the URL of the SVG file to load
+ * @param {string} containerId  the ID of the container where the SVG will be inserted
+ * @param {string} color the fill color for the SVG
+ */
+const loadSVG = async (url: string, containerId: string, color: string): Promise<void> => {
+	try {
+		const response = await svgFetch(url);
+
+		if (!response.ok) {
+			throw new Error(`Failed to fetch SVG: ${response.statusText}`);
+		}
+
+		let svgContent = await response.text();
+
+		// Update the fill color in the SVG content
+		svgContent = svgContent.replace(/stroke="[^"]*"/g, `stroke="${color}"`);
+
+		const container = document.getElementById(containerId);
+
+		if (container) {
+			console.log(container);
+			container.innerHTML = svgContent;
+		} else {
+			console.error(`Container with ID "${containerId}" not found.`);
+		}
+	} catch (error) {
+		console.error(`Error loading SVG: ${(error as Error).message}`);
+	}
+};
diff --git a/apps/web/lib/settings/task-statuses-form.tsx b/apps/web/lib/settings/task-statuses-form.tsx
index 678e9b569..c07e48b7b 100644
--- a/apps/web/lib/settings/task-statuses-form.tsx
+++ b/apps/web/lib/settings/task-statuses-form.tsx
@@ -6,7 +6,7 @@ import { clsxm } from '@app/utils';
 import { Spinner } from '@components/ui/loaders/spinner';
 import { PlusIcon } from '@heroicons/react/20/solid';
 import { Button, ColorPicker, InputField, Modal, Text } from 'lib/components';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslations } from 'next-intl';
 import { useAtom } from 'jotai';
@@ -31,6 +31,8 @@ export const TaskStatusesForm = ({
   const [createNew, setCreateNew] = useState(formOnly);
   const [edit, setEdit] = useState<ITaskStatusItemList | null>(null);
   const t = useTranslations();
+  const [selectedStatusType, setSelectedStatusType] = useState<string | null>(null);
+  const [randomColor, setRandomColor] = useState<string | undefined>(undefined);
 
   const taskStatusIconList: IIcon[] = generateIconList('task-statuses', [
     'open',
@@ -38,14 +40,15 @@ export const TaskStatusesForm = ({
     'ready',
     'in-review',
     'blocked',
-    'completed'
+    'completed',
+	'backlog',
   ]);
   const taskSizesIconList: IIcon[] = generateIconList('task-sizes', [
-    'x-large'
-    // 'large',
-    // 'medium',
-    // 'small',
-    // 'tiny',
+    'x-large',
+    'large',
+    'medium',
+    'small',
+    'tiny',
   ]);
   const taskPrioritiesIconList: IIcon[] = generateIconList('task-priorities', [
     'urgent',
@@ -54,11 +57,12 @@ export const TaskStatusesForm = ({
     'low'
   ]);
 
-  const iconList: IIcon[] = [
+  const iconList: IIcon[] = useMemo(() => [
     ...taskStatusIconList,
     ...taskSizesIconList,
     ...taskPrioritiesIconList
-  ];
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  ],[]) ;
 
   const {
     loading,
@@ -157,6 +161,53 @@ export const TaskStatusesForm = ({
   const [statusToDelete, setStatusToDelete] = useState<ITaskStatusItemList | null>(null)
   const {tasks} = useTeamTasks()
 
+  /**
+   * Get Icon by status name
+   *
+   * @param {string} iconName - Name of the icon
+   * @returns {IIcon} - Icon of the status
+   */
+  const getIcon = useCallback(
+		(iconName: string | null) => {
+			if (!iconName) return null;
+
+			const STATUS_MAPPINGS: Record<string, string> = {
+				'ready-for-review': 'ready'
+			};
+
+			const name = STATUS_MAPPINGS[iconName] || iconName;
+
+			const icon = iconList.find((icon) => icon.title === name);
+			
+			if (icon) {
+				setValue('icon', icon.path);
+			}
+			return icon;
+		},
+		[iconList, setValue]
+  );
+
+
+  /**
+   * Get random color for new status
+   *
+   * @returns {string} - Random color
+   */
+  const getRandomColor = useCallback(() => {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }, []);
+
+  useEffect(() => {
+	if (!edit && selectedStatusType) {
+	  setRandomColor(getRandomColor());
+	}
+  }, [selectedStatusType, edit, getRandomColor]);
+
   return (
     <>
       <Modal isOpen={isOpen} closeModal={closeModal}>
@@ -195,7 +246,7 @@ export const TaskStatusesForm = ({
                   variant="outline"
                   className="rounded-[10px]"
                 >
-                  Sort
+                  {t('common.SORT')}
                 </Button>
               </div>
               {(createNew || edit) && (
@@ -218,22 +269,26 @@ export const TaskStatusesForm = ({
                       {...register('name')}
                     />
                     <StandardTaskStatusDropDown
-                      onValueChange={(status) => setValue('template', status)}
-                      className=" h-14 shrink-0"
+                      onValueChange={(status) => {
+						setValue('template', status)
+						setSelectedStatusType(status)
+					  } }
+                      className="h-14 shrink-0"
+					  defaultValue={edit?.value}
                     />
                     <IconPopover
                       iconList={iconList}
                       setValue={setValue}
                       active={
-                        edit
+						selectedStatusType ? getIcon(selectedStatusType)
+                          : edit
                           ? (iconList.find(
                               (icon) => icon.path === edit.icon
-                            ) as IIcon)
-                          : null
+                            ) as IIcon) : null
                       }
                     />
                     <ColorPicker
-                      defaultColor={edit ? edit.color : undefined}
+                      defaultColor={edit ? edit.color : randomColor}
                       onChange={(color) => setValue('color', color)}
                       className=" shrink-0"
                     />
@@ -247,6 +302,9 @@ export const TaskStatusesForm = ({
                         createTaskStatusLoading || editTaskStatusLoading
                       }
                       loading={createTaskStatusLoading || editTaskStatusLoading}
+					  onClick={() => {
+						setSelectedStatusType(null);
+					  }}
                     >
                       {edit ? t('common.SAVE') : t('common.CREATE')}
                     </Button>
@@ -257,6 +315,7 @@ export const TaskStatusesForm = ({
                         onClick={() => {
                           setCreateNew(false);
                           setEdit(null);
+						  setSelectedStatusType(null);
                         }}
                       >
                         {t('common.CANCEL')}
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index 77d575a46..2b45b804d 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -235,6 +235,8 @@
 		"CHANGE_RELATIONS": "تغيير العلاقات",
 		"SET_AS_NEXT": "تعيين كالتالي",
 		"MOVE_TO": "نقل إلى",
+		"SORT": "فرز",
+		"ICON": "أيقونة",
 		"SELECT_DATE": "اختر التاريخ",
 		"SELECT_AND_CLOSE": "اختر وأغلق",
 		"SELECT_ROLE": "يرجى اختيار أي دور",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index 146962a2e..6a35a5b89 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "Преместете в",
 		"SELECT_DATE": "Изберете дата",
 		"SELECT_AND_CLOSE": "Изберете и затворете",
+		"SORT": "Подредете",
+		"ICON": "Икона",
 		"SELECT_ROLE": "Моля, изберете роля",
 		"ADD_TIME": "Добавете време",
 		"VIEW_TIMESHEET": "Преглед на работния час",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index c42de6e56..a8cd98b43 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "Verschieben nach",
 		"SELECT_DATE": "Datum auswählen",
 		"SELECT_AND_CLOSE": "Auswählen und schließen",
+		"SORT": "Sortieren",
+		"ICON": "Symbol",
 		"SELECT_ROLE": "Bitte wählen Sie eine Rolle",
 		"ADD_TIME": "Zeit hinzufügen",
 		"VIEW_TIMESHEET": "Zeiterfassung anzeigen",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index a35d7ec92..e230c7a31 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "Move to",
 		"SELECT_DATE": "Select date",
 		"SELECT_AND_CLOSE": "Select & Close",
+		"SORT": "Sort",
+		"ICON": "Icon",
 		"SELECT_ROLE": "Please Select any Role",
 		"ADD_TIME": "Add Time",
 		"VIEW_TIMESHEET": "View timesheet",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 8a30a3032..7e8997c94 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "Mover a",
 		"SELECT_DATE": "Seleccionar fecha",
 		"SELECT_AND_CLOSE": "Seleccionar y cerrar",
+		"SORT": "Ordenar",
+		"ICON": "Ícono",
 		"SELECT_ROLE": "Por favor, selecciona un rol",
 		"ADD_TIME": "Agregar tiempo",
 		"VIEW_TIMESHEET": "Ver hoja de tiempo",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index bbd5f0430..2c70c0917 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "Déplacer vers",
 		"SELECT_DATE": "Sélectionner la date",
 		"SELECT_AND_CLOSE": "Sélectionner et fermer",
+		"SORT": "Trier",
+		"ICON": "Icône",
 		"SELECT_ROLE": "Veuillez sélectionner un rôle",
 		"ADD_TIME": "Ajouter du temps",
 		"VIEW_TIMESHEET": "Voir la feuille de temps",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 0cf6d5c9e..e6c81b8fc 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "העבר אל",
 		"SELECT_DATE": "בחר תאריך",
 		"SELECT_AND_CLOSE": "בחר וסגור",
+		"SORT": "מיין",
+		"ICON": "סמל",
 		"SELECT_ROLE": "אנא בחר תפקיד",
 		"ADD_TIME": "הוסף זמן",
 		"VIEW_TIMESHEET": "הצג גיליון זמן",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 576c9af34..945980bd8 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "Sposta a",
 		"SELECT_DATE": "Seleziona data",
 		"SELECT_AND_CLOSE": "Seleziona e chiudi",
+		"SORT": "Ordina",
+		"ICON": "Icona",
 		"SELECT_ROLE": "Seleziona un ruolo",
 		"ADD_TIME": "Aggiungi tempo",
 		"VIEW_TIMESHEET": "Vedi foglio ore",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 1c7612d5c..2445311c8 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "Verplaatsen naar",
 		"SELECT_DATE": "Selecteer datum",
 		"SELECT_AND_CLOSE": "Selecteren en sluiten",
+		"SORT": "Sorteren",
+		"ICON": "Icoon",
 		"SELECT_ROLE": "Selecteer een rol",
 		"ADD_TIME": "Tijd toevoegen",
 		"VIEW_TIMESHEET": "Bekijk tijdregistratie",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index 7e45f58ba..198f39004 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "Przenieś do",
 		"SELECT_DATE": "Wybierz datę",
 		"SELECT_AND_CLOSE": "Wybierz i zamknij",
+		"SORT": "Sortuj",
+		"ICON": "Ikona",
 		"SELECT_ROLE": "Proszę wybrać rolę",
 		"ADD_TIME": "Dodaj czas",
 		"VIEW_TIMESHEET": "Zobacz Ewidencję czasu",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index 4a832f9ab..033cc1a79 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "Mover para",
 		"SELECT_DATE": "Selecionar data",
 		"SELECT_AND_CLOSE": "Selecionar e fechar",
+		"SORT": "Classificar",
+		"ICON": "Ícone",
 		"SELECT_ROLE": "Por favor, selecione um cargo",
 		"ADD_TIME": "Adicionar tempo",
 		"VIEW_TIMESHEET": "Ver folha de ponto",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index 20c2605ab..3ab812538 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "Переместить в",
 		"SELECT_DATE": "Выберите дату",
 		"SELECT_AND_CLOSE": "Выбрать и закрыть",
+		"SORT": "Сортировать",
+		"ICON": "Иконка",
 		"SELECT_ROLE": "Пожалуйста, выберите роль",
 		"ADD_TIME": "Добавить время",
 		"VIEW_TIMESHEET": "Просмотреть табель",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 3735c7f97..50d39d2d2 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -255,6 +255,8 @@
 		"MOVE_TO": "移动到",
 		"SELECT_DATE": "选择日期",
 		"SELECT_AND_CLOSE": "选择并关闭",
+		"SORT": "排序",
+		"ICON": "图标",
 		"SELECT_ROLE": "请选择角色",
 		"ADD_TIME": "添加时间",
 		"VIEW_TIMESHEET": "查看工时表",

From f89d96dc7ca20cbc39607bbdebceb83037af794c Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Mon, 18 Nov 2024 22:16:16 +0200
Subject: [PATCH 19/41] fix:bug (#3344)

---
 .cspell.json                                              | 2 +-
 apps/web/app/interfaces/IDailyPlan.ts                     | 8 ++++----
 apps/web/components/pages/kanban/menu-kanban-card.tsx     | 5 ++---
 .../features/daily-plan/create-daily-plan-form-modal.tsx  | 8 ++++----
 .../features/integrations/calendar/table-time-sheet.tsx   | 4 ++--
 apps/web/lib/features/task/task-card.tsx                  | 2 +-
 6 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/.cspell.json b/.cspell.json
index be2df850e..9c47d01cc 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -372,7 +372,7 @@
 		"tinvitations",
 		"tnode",
 		"Togger",
-		"tomorow",
+		"tomorrow",
 		"Tongatapu",
 		"tota",
 		"TRANSFERT",
diff --git a/apps/web/app/interfaces/IDailyPlan.ts b/apps/web/app/interfaces/IDailyPlan.ts
index 8eba961df..e296af463 100644
--- a/apps/web/app/interfaces/IDailyPlan.ts
+++ b/apps/web/app/interfaces/IDailyPlan.ts
@@ -25,12 +25,12 @@ export interface ICreateDailyPlan extends IDailyPlanBase, IRelationnalEmployee,
 
 export interface IUpdateDailyPlan
 	extends Partial<IDailyPlanBase>,
-		Pick<ICreateDailyPlan, 'employeeId'>,
-		Partial<Pick<IRelationalOrganizationTeam, 'organizationTeamId'>> {}
+	Pick<ICreateDailyPlan, 'employeeId'>,
+	Partial<Pick<IRelationalOrganizationTeam, 'organizationTeamId'>> { }
 
 export interface IDailyPlanTasksUpdate
 	extends Pick<ICreateDailyPlan, 'taskId' | 'employeeId'>,
-		IBasePerTenantAndOrganizationEntity {}
+	IBasePerTenantAndOrganizationEntity { }
 
 export enum DailyPlanStatusEnum {
 	OPEN = 'open',
@@ -38,4 +38,4 @@ export enum DailyPlanStatusEnum {
 	COMPLETED = 'completed'
 }
 
-export type IDailyPlanMode = 'today' | 'tomorow' | 'custom';
+export type IDailyPlanMode = 'today' | 'tomorrow' | 'custom';
diff --git a/apps/web/components/pages/kanban/menu-kanban-card.tsx b/apps/web/components/pages/kanban/menu-kanban-card.tsx
index 457433d6b..26ebbc833 100644
--- a/apps/web/components/pages/kanban/menu-kanban-card.tsx
+++ b/apps/web/components/pages/kanban/menu-kanban-card.tsx
@@ -170,7 +170,7 @@ export default function MenuKanbanCard({ item: task, member }: { item: ITeamTask
 						<PlanTask planMode="today" taskId={task.id} chooseMember={true} />
 					</li>
 					<li className="font-normal flex justify-between capitalize hover:bg-secondary-foreground/20 w-full text-left whitespace-nowrap text-sm hover:font-semibold hover:transition-all py-1 px-2">
-						<PlanTask planMode="tomorow" taskId={task.id} chooseMember={true} />
+						<PlanTask planMode="tomorrow" taskId={task.id} chooseMember={true} />
 					</li>
 					<li className="font-normal flex justify-between capitalize hover:bg-secondary-foreground/20 w-full text-left whitespace-nowrap text-sm hover:font-semibold hover:transition-all py-1 px-2">
 						<PlanTask planMode="custom" taskId={task.id} chooseMember={true} />
@@ -227,8 +227,7 @@ function TeamMembersSelect(props: ITeamMemberSelectProps): JSX.Element {
 								<Combobox.Option
 									key={member.id}
 									className={({ active }) =>
-										`relative cursor-default select-none py-2 pl-10 pr-4 ${
-											active ? 'bg-primary/5' : 'text-gray-900'
+										`relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-primary/5' : 'text-gray-900'
 										}`
 									}
 									value={member}
diff --git a/apps/web/lib/features/daily-plan/create-daily-plan-form-modal.tsx b/apps/web/lib/features/daily-plan/create-daily-plan-form-modal.tsx
index 2baacd152..147d9e459 100644
--- a/apps/web/lib/features/daily-plan/create-daily-plan-form-modal.tsx
+++ b/apps/web/lib/features/daily-plan/create-daily-plan-form-modal.tsx
@@ -91,7 +91,7 @@ export function CreateDailyPlanFormModal({
 				date:
 					planMode == 'today'
 						? toDay
-						: planMode == 'tomorow'
+						: planMode == 'tomorrow'
 							? tomorrowDate
 							: new Date(moment(date).format('YYYY-MM-DD')),
 				status: DailyPlanStatusEnum.OPEN,
@@ -302,12 +302,12 @@ function MembersList({
 									{(member?.employee?.user?.image?.thumbUrl ||
 										member?.employee?.user?.image?.fullUrl ||
 										member?.employee?.user?.imageUrl) &&
-									isValidUrl(
-										member?.employee?.user?.image?.thumbUrl ||
+										isValidUrl(
+											member?.employee?.user?.image?.thumbUrl ||
 											member?.employee?.user?.image?.fullUrl ||
 											member?.employee?.user?.imageUrl ||
 											''
-									) ? (
+										) ? (
 										<Avatar
 											size={36}
 											className="relative cursor-pointer dark:border-[0.25rem] dark:border-[#26272C]"
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 24f5d3202..01bc391b0 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -241,8 +241,8 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
             <AlertDialogConfirmation
                 title="Are you sure you want to delete this?"
                 description={`This action is irreversible. All related data will be lost. (${selectTimesheet.length})`}
-                confirmText="Yes, delete"
-                cancelText="No, cancel"
+                confirmText={t('common.DELETE')}
+                cancelText={t('common.CANCEL')}
                 isOpen={isDialogOpen}
                 onOpenChange={setIsDialogOpen}
                 onConfirm={handleConfirm}
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 3eae62ec9..181ade9af 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -812,7 +812,7 @@ export function PlanTask({
 						)}
 					</span>
 				)}
-				{planMode === 'tomorow' && !taskPlannedForTomorrow && (
+				{planMode === 'tomorrow' && !taskPlannedForTomorrow && (
 					<span>
 						{isPending || createDailyPlanLoading ? (
 							<ReloadIcon className="w-4 h-4 mr-2 animate-spin" />

From f37fac7c15c617b671b3ba9e1002b1affcd58439 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Tue, 19 Nov 2024 20:06:35 +0200
Subject: [PATCH 20/41] [Feature] Show | Edit project information in the task
 details page (#3347)

* add project in task details page / possiblity to edit

* Update apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx

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

---------

Co-authored-by: Ruslan Konviser <evereq@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .../api/organization-projects/[id]/route.ts   |  21 +-
 .../app/api/organization-projects/route.ts    |  19 +-
 .../hooks/features/useOrganizationProjects.ts | 122 +++--
 apps/web/app/interfaces/ITask.ts              |   2 +-
 .../client/api/organization-projects.ts       |  28 +-
 .../server/requests/organization-projects.ts  |  43 ++
 apps/web/app/stores/organization-projects.ts  |   4 +
 .../blocks/task-secondary-info.tsx            | 444 +++++++++++-------
 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 +-
 21 files changed, 494 insertions(+), 228 deletions(-)
 create mode 100644 apps/web/app/stores/organization-projects.ts

diff --git a/apps/web/app/api/organization-projects/[id]/route.ts b/apps/web/app/api/organization-projects/[id]/route.ts
index 072bf41d9..12280aae7 100644
--- a/apps/web/app/api/organization-projects/[id]/route.ts
+++ b/apps/web/app/api/organization-projects/[id]/route.ts
@@ -1,6 +1,6 @@
 import { authenticatedGuard } from '@app/services/server/guards/authenticated-guard-app';
 
-import { editOrganizationProjectsRequest } from '@app/services/server/requests';
+import { editOrganizationProjectsRequest, getOrganizationProjectRequest } from '@app/services/server/requests';
 import { NextResponse } from 'next/server';
 
 export async function PUT(req: Request, { params }: { params: { id: string } }) {
@@ -23,3 +23,22 @@ export async function PUT(req: Request, { params }: { params: { id: string } })
 
 	return $res(response.data);
 }
+
+export async function GET(req: Request, { params }: { params: { id: string } }) {
+	const res = new NextResponse();
+	if (!params.id) {
+		return;
+	}
+
+	const { $res, user, access_token, tenantId } = await authenticatedGuard(req, res);
+
+	if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+	const response = await getOrganizationProjectRequest({
+		bearer_token: access_token,
+		id: params.id,
+		tenantId
+	});
+
+	return $res(response.data);
+}
diff --git a/apps/web/app/api/organization-projects/route.ts b/apps/web/app/api/organization-projects/route.ts
index c76dfa9b0..b78c6d73c 100644
--- a/apps/web/app/api/organization-projects/route.ts
+++ b/apps/web/app/api/organization-projects/route.ts
@@ -1,6 +1,6 @@
 import { authenticatedGuard } from '@app/services/server/guards/authenticated-guard-app';
 
-import { createOrganizationProjectRequest } from '@app/services/server/requests';
+import { createOrganizationProjectRequest, getOrganizationProjectsRequest } from '@app/services/server/requests';
 import { NextResponse } from 'next/server';
 
 export async function POST(req: Request) {
@@ -19,3 +19,20 @@ export async function POST(req: Request) {
 
 	return $res(response.data);
 }
+
+export async function GET(req: Request) {
+	const res = new NextResponse();
+
+	const { $res, user, access_token, tenantId, organizationId } = await authenticatedGuard(req, res);
+
+	if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+
+	const response = await getOrganizationProjectsRequest({
+		bearer_token: access_token,
+		tenantId,
+		organizationId
+	});
+
+	return $res(response.data);
+}
diff --git a/apps/web/app/hooks/features/useOrganizationProjects.ts b/apps/web/app/hooks/features/useOrganizationProjects.ts
index fdacff18c..121c4dc8e 100644
--- a/apps/web/app/hooks/features/useOrganizationProjects.ts
+++ b/apps/web/app/hooks/features/useOrganizationProjects.ts
@@ -1,59 +1,83 @@
 import {
 	editOrganizationProjectSettingAPI,
-	editOrganizationProjectAPI
+	editOrganizationProjectAPI,
+	getOrganizationProjectAPI,
+	getOrganizationProjectsAPI
 } from '@app/services/client/api';
 import { userState } from '@app/stores';
 import { useCallback } from 'react';
 import { useAtom } from 'jotai';
 import { useQuery } from '../useQuery';
+import { organizationProjectsState } from '@/app/stores/organization-projects';
 
 export function useOrganizationProjects() {
-  const [user] = useAtom(userState);
-
-  const {
-    loading: editOrganizationProjectLoading,
-    queryCall: editOrganizationProjectQueryCall
-  } = useQuery(editOrganizationProjectAPI);
-
-  const {
-    loading: editOrganizationProjectSettingLoading,
-    queryCall: editOrganizationProjectSettingQueryCall
-  } = useQuery(editOrganizationProjectSettingAPI);
-
-  const editOrganizationProjectSetting = useCallback(
-    (id: string, data: any) => {
-      if (user?.tenantId) {
-        return editOrganizationProjectSettingQueryCall(
-          id,
-          data,
-          user?.tenantId || ''
-        ).then((res) => {
-          return res;
-        });
-      }
-    },
-    [user, editOrganizationProjectSettingQueryCall]
-  );
-
-  const editOrganizationProject = useCallback(
-    (id: string, data: any) => {
-      if (user?.tenantId) {
-        return editOrganizationProjectQueryCall(
-          id,
-          data,
-          user?.tenantId || ''
-        ).then((res) => {
-          return res;
-        });
-      }
-    },
-    [user, editOrganizationProjectQueryCall]
-  );
-
-  return {
-    editOrganizationProjectSetting,
-    editOrganizationProjectSettingLoading,
-    editOrganizationProject,
-    editOrganizationProjectLoading
-  };
+	const [user] = useAtom(userState);
+	const [organizationProjects, setOrganizationProjects] = useAtom(organizationProjectsState);
+
+	const { loading: editOrganizationProjectLoading, queryCall: editOrganizationProjectQueryCall } =
+		useQuery(editOrganizationProjectAPI);
+
+	const { loading: editOrganizationProjectSettingLoading, queryCall: editOrganizationProjectSettingQueryCall } =
+		useQuery(editOrganizationProjectSettingAPI);
+
+	const { loading: getOrganizationProjectLoading, queryCall: getOrganizationProjectQueryCall } =
+		useQuery(getOrganizationProjectAPI);
+
+	const { loading: getOrganizationProjectsLoading, queryCall: getOrganizationProjectsQueryCall } =
+		useQuery(getOrganizationProjectsAPI);
+
+	const editOrganizationProjectSetting = useCallback(
+		(id: string, data: any) => {
+			if (user?.tenantId) {
+				return editOrganizationProjectSettingQueryCall(id, data, user?.tenantId || '').then((res) => {
+					return res;
+				});
+			}
+		},
+		[user, editOrganizationProjectSettingQueryCall]
+	);
+
+	const editOrganizationProject = useCallback(
+		(id: string, data: any) => {
+			if (user?.tenantId) {
+				return editOrganizationProjectQueryCall(id, data, user?.tenantId || '').then((res) => {
+					return res;
+				});
+			}
+		},
+		[user, editOrganizationProjectQueryCall]
+	);
+
+	const getOrganizationProject = useCallback(
+		async (id: string) => {
+			try {
+				return await getOrganizationProjectQueryCall(id);
+			} catch (error) {
+				console.log(error);
+			}
+		},
+		[getOrganizationProjectQueryCall]
+	);
+
+	const getOrganizationProjects = useCallback(async () => {
+		try {
+			const res = await getOrganizationProjectsQueryCall();
+
+			setOrganizationProjects(res.data.items);
+		} catch (error) {
+			console.log(error);
+		}
+	}, [getOrganizationProjectsQueryCall, setOrganizationProjects]);
+
+	return {
+		editOrganizationProjectSetting,
+		editOrganizationProjectSettingLoading,
+		editOrganizationProject,
+		editOrganizationProjectLoading,
+		getOrganizationProject,
+		getOrganizationProjectLoading,
+		getOrganizationProjects,
+		getOrganizationProjectsLoading,
+		organizationProjects,
+	};
 }
diff --git a/apps/web/app/interfaces/ITask.ts b/apps/web/app/interfaces/ITask.ts
index 0bb4459b3..1a50b539c 100644
--- a/apps/web/app/interfaces/ITask.ts
+++ b/apps/web/app/interfaces/ITask.ts
@@ -18,7 +18,7 @@ export type ITeamTask = {
 	estimateMinutes?: number;
 	dueDate: string;
 	startDate?: string | null;
-	projectId: string;
+	projectId: string | null;
 	public: boolean;
 	taskStatusId?: string;
 	resolvedAt?: string;
diff --git a/apps/web/app/services/client/api/organization-projects.ts b/apps/web/app/services/client/api/organization-projects.ts
index 1f2d7243f..107225e44 100644
--- a/apps/web/app/services/client/api/organization-projects.ts
+++ b/apps/web/app/services/client/api/organization-projects.ts
@@ -1,5 +1,7 @@
-import { IProject } from '@app/interfaces';
-import { put } from '../axios';
+import {  IProject, PaginationResponse } from '@app/interfaces';
+import { get, put } from '../axios';
+import qs from 'qs';
+import { getOrganizationIdCookie, getTenantIdCookie } from '@/app/helpers';
 
 export function editOrganizationProjectSettingAPI(id: string, data: any, tenantId?: string) {
 	return put<any>(`/organization-projects/setting/${id}`, data, {
@@ -12,3 +14,25 @@ export function editOrganizationProjectAPI(id: string, data: any, tenantId?: str
 		tenantId
 	});
 }
+
+export function getOrganizationProjectAPI(id: string, tenantId?: string) {
+	return get<IProject>(`/organization-projects/${id}`, {
+		tenantId
+	});
+}
+
+export function getOrganizationProjectsAPI() {
+
+	const organizationId = getOrganizationIdCookie();
+	const tenantId = getTenantIdCookie();
+
+	const obj = {
+		'where[organizationId]': organizationId,
+		'where[tenantId]': tenantId,
+	}
+	const query = qs.stringify(obj);
+
+	return get<PaginationResponse<IProject>>(`/organization-projects?${query}`, {
+		tenantId
+	});
+}
diff --git a/apps/web/app/services/server/requests/organization-projects.ts b/apps/web/app/services/server/requests/organization-projects.ts
index d4ce9f971..643995491 100644
--- a/apps/web/app/services/server/requests/organization-projects.ts
+++ b/apps/web/app/services/server/requests/organization-projects.ts
@@ -1,4 +1,6 @@
+import qs from 'qs';
 import { serverFetch } from '../fetch';
+import { IProject, PaginationResponse } from '@/app/interfaces';
 
 export function editOrganizationProjectsSettingsRequest({
 	id,
@@ -39,3 +41,44 @@ export function editOrganizationProjectsRequest({
 		tenantId
 	});
 }
+
+export function getOrganizationProjectRequest({
+	id,
+	tenantId,
+	bearer_token
+}: {
+	id: string;
+	tenantId: string;
+	bearer_token: string;
+}) {
+	return serverFetch<IProject>({
+		path: `/organization-projects/${id}`,
+		method: 'GET',
+		bearer_token,
+		tenantId
+	});
+}
+
+export function getOrganizationProjectsRequest({
+	tenantId,
+	organizationId,
+	bearer_token
+}: {
+	tenantId: string;
+	bearer_token: string;
+	organizationId : string;
+}) {
+
+	const obj = {
+		'where[organizationId]': organizationId,
+		'where[tenantId]': tenantId,
+	}
+	const query = qs.stringify(obj);
+
+	return serverFetch<PaginationResponse<IProject>>({
+		path: `/organization-projects?${query}`,
+		method: 'GET',
+		bearer_token,
+		tenantId
+	});
+}
diff --git a/apps/web/app/stores/organization-projects.ts b/apps/web/app/stores/organization-projects.ts
new file mode 100644
index 000000000..e928707b5
--- /dev/null
+++ b/apps/web/app/stores/organization-projects.ts
@@ -0,0 +1,4 @@
+import { atom } from "jotai";
+import { IProject } from "../interfaces";
+
+export const organizationProjectsState = atom<IProject[]>([])
diff --git a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
index 687671af3..88c8690fd 100644
--- a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
+++ b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
@@ -1,8 +1,8 @@
-import { useModal, useTeamTasks } from '@app/hooks';
-import { ITaskVersionCreate, ITeamTask } from '@app/interfaces';
+import { useModal, useOrganizationProjects, useTeamTasks } from '@app/hooks';
+import { IProject, ITaskVersionCreate, ITeamTask } from '@app/interfaces';
 import { detailedTaskState } from '@app/stores';
 import { PlusIcon } from '@heroicons/react/20/solid';
-import { Button, Card, Modal, Tooltip } from 'lib/components';
+import { Button, Card, Modal, SpinnerLoader, Tooltip } from 'lib/components';
 import {
   ActiveTaskPropertiesDropdown,
   ActiveTaskSizesDropdown,
@@ -21,11 +21,14 @@ import {
 import { VersionForm } from 'lib/settings/version-form';
 import { cloneDeep } from 'lodash';
 import Link from 'next/link';
-import { useCallback, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import TaskRow from '../components/task-row';
 import { useTranslations } from 'next-intl';
-import { Square4OutlineIcon } from 'assets/svg';
+import { ChevronDownIcon, Square4OutlineIcon } from 'assets/svg';
+import { Listbox, Transition } from '@headlessui/react';
+import { clsxm } from '@/app/utils';
+import { organizationProjectsState } from '@/app/stores/organization-projects';
 
 type StatusType = 'version' | 'epic' | 'status' | 'label' | 'size' | 'priority';
 
@@ -89,163 +92,149 @@ const TaskSecondaryInfo = () => {
   }, [taskLabels, task?.tags]);
 
   return (
-    <section className="flex flex-col gap-4 p-[0.9375rem]">
-      {/* Version */}
-      <TaskRow labelTitle={t('pages.taskDetails.VERSION')}>
-        <ActiveTaskVersionDropdown
-          task={task}
-          className="lg:min-w-[170px] text-black"
-          forDetails={true}
-          sidebarUI={true}
-          taskStatusClassName="text-[0.625rem] h-[1.5625rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-        >
-          <Button
-            className="w-full py-1 px-2 text-[0.625rem] mt-3  dark:text-white dark:border-white"
-            variant="outline"
-            onClick={openModalEditionHandle('version')}
-          >
-            <PlusIcon className="w-4 h-4" />
-          </Button>
-        </ActiveTaskVersionDropdown>
-      </TaskRow>
-
-      {/* Epic */}
-      {task && task.issueType === 'Story' && (
-        <TaskRow labelTitle={t('pages.taskDetails.EPIC')}>
-          <TaskEpicDropdown
-            onValueChange={(d) => {
-              onTaskSelect({
-                id: d
-              } as ITeamTask);
-            }}
-            className="lg:min-w-[170px] text-black"
-            forDetails={true}
-            sidebarUI={true}
-            taskStatusClassName="text-[0.625rem] h-[1.5625rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-            defaultValue={task.parentId || ''}
-          />
-        </TaskRow>
-      )}
-
-      {task && <EpicParent task={task} />}
-
-      {/* Task Status */}
-      <TaskRow labelTitle={t('pages.taskDetails.STATUS')}>
-        <ActiveTaskStatusDropdown
-          task={task}
-          className="lg:min-w-[170px] text-black"
-          forDetails={true}
-          sidebarUI={true}
-          taskStatusClassName="text-[0.625rem] h-[1.5625rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-        >
-          <Button
-            className="w-full px-2 py-1 text-xs dark:text-white dark:border-white"
-            variant="outline"
-            onClick={openModalEditionHandle('status')}
-          >
-            <PlusIcon className="w-4 h-4" />
-          </Button>
-        </ActiveTaskStatusDropdown>
-      </TaskRow>
-
-      {/* Task Labels */}
-      <TaskRow labelTitle={t('pages.taskDetails.LABELS')}>
-        <TaskLabels
-          task={task}
-          className="lg:min-w-[170px] text-black lg:mt-0"
-          forDetails={true}
-          taskStatusClassName="text-[0.625rem] h-[1.5625rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-        />
-      </TaskRow>
-      {tags.length > 0 && (
-        <TaskRow>
-          <div className="flex flex-row flex-wrap gap-1 max-w-[10rem]">
-            {tags.map((tag, i) => {
-              return (
-                <Tooltip
-                  key={i}
-                  label={tag.name?.split('-').join(' ') || ''}
-                  placement="auto"
-                >
-                  <TaskStatus
-                    {...tag}
-                    className="rounded-[0.625rem] h-6 max-w-[8rem]"
-                    active={true}
-                    name={tag.name?.split('-').join(' ')}
-                    titleClassName={'text-[0.625rem] font-[500]'}
-                  />
-                </Tooltip>
-              );
-            })}
-          </div>
-        </TaskRow>
-      )}
+		<section className="flex flex-col gap-4 p-[0.9375rem]">
+			{/* Version */}
+			<TaskRow labelTitle={t('pages.taskDetails.VERSION')}>
+				<ActiveTaskVersionDropdown
+					task={task}
+					className="lg:min-w-[170px] text-black"
+					forDetails={true}
+					sidebarUI={true}
+					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
+				>
+					<Button
+						className="w-full py-1 px-2 text-[0.625rem] mt-3  dark:text-white dark:border-white"
+						variant="outline"
+						onClick={openModalEditionHandle('version')}
+					>
+						<PlusIcon className="w-4 h-4" />
+					</Button>
+				</ActiveTaskVersionDropdown>
+			</TaskRow>
 
-      {/* Task Size */}
-      <TaskRow
-        labelTitle={t('pages.taskDetails.SIZE')}
-        wrapperClassName="text-black"
-      >
-        <ActiveTaskSizesDropdown
-          task={task}
-          className="lg:min-w-[170px] text-black"
-          forDetails={true}
-          sidebarUI={true}
-          taskStatusClassName="text-[0.625rem] h-[1.5625rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-        >
-          <Button
-            className="w-full px-2 py-1 text-xs dark:text-white dark:border-white"
-            variant="outline"
-            onClick={openModalEditionHandle('size')}
-          >
-            <PlusIcon className="w-4 h-4" />
-          </Button>
-        </ActiveTaskSizesDropdown>
-      </TaskRow>
-
-      {/* Task Properties */}
-      <TaskRow
-        labelTitle={t('pages.taskDetails.PRIORITY')}
-        wrapperClassName="text-black"
-      >
-        <ActiveTaskPropertiesDropdown
-          task={task}
-          className="lg:min-w-[170px] text-black rounded-xl"
-          forDetails={true}
-          sidebarUI={true}
-          taskStatusClassName="text-[0.625rem] h-[1.5625rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-        >
-          <Button
-            className="w-full px-2 py-1 text-xs dark:text-white dark:border-white"
-            variant="outline"
-            onClick={openModalEditionHandle('priority')}
-          >
-            <PlusIcon className="w-4 h-4" />
-          </Button>
-        </ActiveTaskPropertiesDropdown>
-      </TaskRow>
-
-      <Modal isOpen={modal.isOpen} closeModal={modal.closeModal}>
-        <Card className="sm:w-[530px] w-[330px]" shadow="custom">
-          {formTarget === 'version' && (
-            <VersionForm
-              onVersionCreated={onVersionCreated}
-              onCreated={modal.closeModal}
-              formOnly={true}
-            />
-          )}
-          {formTarget === 'status' && (
-            <TaskStatusesForm onCreated={modal.closeModal} formOnly={true} />
-          )}
-          {formTarget === 'priority' && (
-            <TaskPrioritiesForm onCreated={modal.closeModal} formOnly={true} />
-          )}
-          {formTarget === 'size' && (
-            <TaskSizesForm onCreated={modal.closeModal} formOnly={true} />
-          )}
-        </Card>
-      </Modal>
-    </section>
+			{/* Epic */}
+			{task && task.issueType === 'Story' && (
+				<TaskRow labelTitle={t('pages.taskDetails.EPIC')}>
+					<TaskEpicDropdown
+						onValueChange={(d) => {
+							onTaskSelect({
+								id: d
+							} as ITeamTask);
+						}}
+						className="lg:min-w-[170px] text-black"
+						forDetails={true}
+						sidebarUI={true}
+						taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
+						defaultValue={task.parentId || ''}
+					/>
+				</TaskRow>
+			)}
+
+			{task && <EpicParent task={task} />}
+
+			{/* Task Status */}
+			<TaskRow labelTitle={t('pages.taskDetails.STATUS')}>
+				<ActiveTaskStatusDropdown
+					task={task}
+					className="lg:min-w-[170px] text-black"
+					forDetails={true}
+					sidebarUI={true}
+					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
+				>
+					<Button
+						className="w-full px-2 py-1 text-xs dark:text-white dark:border-white"
+						variant="outline"
+						onClick={openModalEditionHandle('status')}
+					>
+						<PlusIcon className="w-4 h-4" />
+					</Button>
+				</ActiveTaskStatusDropdown>
+			</TaskRow>
+
+			{/* Task Labels */}
+			<TaskRow labelTitle={t('pages.taskDetails.LABELS')}>
+				<TaskLabels
+					task={task}
+					className="lg:min-w-[170px] text-black lg:mt-0"
+					forDetails={true}
+					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
+				/>
+			</TaskRow>
+			{tags.length > 0 && (
+				<TaskRow>
+					<div className="flex flex-row flex-wrap gap-1 max-w-[10rem]">
+						{tags.map((tag, i) => {
+							return (
+								<Tooltip key={i} label={tag.name?.split('-').join(' ') || ''} placement="auto">
+									<TaskStatus
+										{...tag}
+										className="rounded-[0.625rem] h-6 max-w-[8rem]"
+										active={true}
+										name={tag.name?.split('-').join(' ')}
+										titleClassName={'text-[0.625rem] font-[500]'}
+									/>
+								</Tooltip>
+							);
+						})}
+					</div>
+				</TaskRow>
+			)}
+
+			{/* Task Size */}
+			<TaskRow labelTitle={t('pages.taskDetails.SIZE')} wrapperClassName="text-black">
+				<ActiveTaskSizesDropdown
+					task={task}
+					className="lg:min-w-[170px] text-black"
+					forDetails={true}
+					sidebarUI={true}
+					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
+				>
+					<Button
+						className="w-full px-2 py-1 text-xs dark:text-white dark:border-white"
+						variant="outline"
+						onClick={openModalEditionHandle('size')}
+					>
+						<PlusIcon className="w-4 h-4" />
+					</Button>
+				</ActiveTaskSizesDropdown>
+			</TaskRow>
+
+			{/* Task Properties */}
+			<TaskRow labelTitle={t('pages.taskDetails.PRIORITY')} wrapperClassName="text-black">
+				<ActiveTaskPropertiesDropdown
+					task={task}
+					className="lg:min-w-[170px] text-black rounded-xl"
+					forDetails={true}
+					sidebarUI={true}
+					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
+				>
+					<Button
+						className="w-full px-2 py-1 text-xs dark:text-white dark:border-white"
+						variant="outline"
+						onClick={openModalEditionHandle('priority')}
+					>
+						<PlusIcon className="w-4 h-4" />
+					</Button>
+				</ActiveTaskPropertiesDropdown>
+			</TaskRow>
+
+			{/* Task project */}
+			{task && (
+				<TaskRow labelTitle={t('pages.taskDetails.PROJECT')} wrapperClassName="text-black">
+					<ProjectDropDown task={task} />
+				</TaskRow>
+			)}
+			<Modal isOpen={modal.isOpen} closeModal={modal.closeModal}>
+				<Card className="sm:w-[530px] w-[330px]" shadow="custom">
+					{formTarget === 'version' && (
+						<VersionForm onVersionCreated={onVersionCreated} onCreated={modal.closeModal} formOnly={true} />
+					)}
+					{formTarget === 'status' && <TaskStatusesForm onCreated={modal.closeModal} formOnly={true} />}
+					{formTarget === 'priority' && <TaskPrioritiesForm onCreated={modal.closeModal} formOnly={true} />}
+					{formTarget === 'size' && <TaskSizesForm onCreated={modal.closeModal} formOnly={true} />}
+				</Card>
+			</Modal>
+		</section>
   );
 };
 
@@ -280,4 +269,137 @@ const EpicParent = ({ task }: { task: ITeamTask }) => {
   );
 };
 
+
+
+interface ITaskProjectDropdownProps {
+	task: ITeamTask;
+}
+
 export default TaskSecondaryInfo;
+
+/**
+ * TaskProject dropdown
+ *
+ * @param {Object} props - The props object
+ * @param {ITeamTask} props.task - The ITeamTask object which
+ *
+ * @returns {JSX.Element} - The Dropdown element
+ */
+function ProjectDropDown (props : ITaskProjectDropdownProps) {
+
+	const {task} = props
+
+	const organizationProjects = useAtomValue(organizationProjectsState)
+	const {getOrganizationProjects} = useOrganizationProjects()
+	const {updateTask, updateLoading} = useTeamTasks()
+	const t = useTranslations()
+
+	useEffect(() => {
+		getOrganizationProjects()
+	},[getOrganizationProjects])
+
+
+	const [selected, setSelected] = useState<IProject>();
+
+	// Set the task project if any
+	useEffect(() => {
+		setSelected(organizationProjects.find(project => {
+			return  project.id === task.projectId
+		}))
+	},[organizationProjects, task.projectId])
+
+	// Update the project
+	const handleUpdateProject = useCallback(async (project : IProject) => {
+		try {
+			await updateTask({ ...task, projectId: project.id });
+
+			setSelected(project);
+		} catch (error) {
+			console.error(error);
+		}
+	},[task, updateTask])
+
+
+	// Remove the project
+	const handleRemoveProject = useCallback(async () => {
+		try {
+			await updateTask({ ...task, projectId: null });
+
+			setSelected(undefined);
+		} catch (error) {
+			console.error(error);
+		}
+	}, [task, updateTask]);
+
+	return (
+		<div
+			className={clsxm(
+				'relative  text-sm font-medium border text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs'
+			)}
+		>
+			<Listbox
+				value={selected}
+				onChange={handleUpdateProject}
+			>
+				{({ open }) => {
+					return (
+						<>
+							<Listbox.Button
+								className={clsxm(
+									'cursor-pointer outline-none w-full flex items-center justify-between px-4 h-full '
+								)}
+							>
+								{updateLoading ? (
+									<SpinnerLoader size={10} />
+								) : (
+									<p className=" truncate ">{selected?.name ?? 'Project'}</p>
+								)}
+								<ChevronDownIcon
+									className={clsxm(
+										'h-4 w-4 text-default transition duration-150 ease-in-out group-hover:text-opacity-80'
+									)}
+									aria-hidden="true"
+								/>
+							</Listbox.Button>
+
+							<Transition
+								show={open}
+								enter="transition duration-100 ease-out"
+								enterFrom="transform scale-95 opacity-0"
+								enterTo="transform scale-100 opacity-100"
+								leave="transition duration-75 ease-out"
+								leaveFrom="transform scale-100 opacity-100"
+								leaveTo="transform scale-95 opacity-0"
+								className={clsxm('absolute right-0 left-0 top-10 z-40 min-w-min outline-none')}
+							>
+								<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 gap-2.5 max-h-[206px] overflow-x-auto rounded-none"
+									>
+										{organizationProjects.map((item, i) => {
+											return (
+												<Listbox.Option key={item.id} value={item} as={Fragment}>
+													<li className="relative outline-none cursor-pointer">
+														{item.name}
+													</li>
+												</Listbox.Option>
+											);
+										})}
+										<Button
+											className=" px-2 py-1 mt-2 !min-w-min rounded-none text-xs dark:text-white dark:border-white"
+											variant="outline"
+											onClick={handleRemoveProject}
+										>
+											{t('common.REMOVE')}
+										</Button>
+									</Card>
+								</Listbox.Options>
+							</Transition>
+						</>
+					);
+				}}
+			</Listbox>
+		</div>
+	);
+}
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index 2b45b804d..c64c8e161 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "تعذر علينا تحديث عنوان المهمة.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "لا يمكن أن يتجاوز عنوان المهمة 255 حرفًا.",
 			"TASK_IS_ALREADY_EPIC": "لا يمكن تغيير نوع المهمة الملحمية.",
-			"TASK_HAS_PARENT": "لا يمكن تغيير نوع المهمة حيث أن لديها بالفعل والد."
+			"TASK_HAS_PARENT": "لا يمكن تغيير نوع المهمة حيث أن لديها بالفعل والد.",
+			"PROJECT": "مشروع"
 		},
 		"taskStatus": {
 			"DELETE_STATUS_CONFIRMATION": "أنت على وشك حذف الحالة {statusName} التي يتم استخدامها من قبل المهام النشطة؛ يرجى تأكيد الإجراء"
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index 6a35a5b89..a504c9f88 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "Не можахме да обновим заглавието на задачата.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "Заглавието на задачата не може да надвишава 255 символа.",
 			"TASK_IS_ALREADY_EPIC": "Епичният тип задача не може да бъде променен.",
-			"TASK_HAS_PARENT": "Типът задача не може да бъде променен, тъй като задачата вече има родител."
+			"TASK_HAS_PARENT": "Типът задача не може да бъде променен, тъй като задачата вече има родител.",
+			"PROJECT": "Проект"
 		},
 		"taskStatus": {
 			"DELETE_STATUS_CONFIRMATION": "Вие сте на път да изтриете състоянието {statusName}, което се използва от активни задачи; моля, потвърдете действието"
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index a8cd98b43..a29130ced 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "Die Aufgabenbezeichnung konnte nicht aktualisiert werden.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "Die Aufgabenbezeichnung darf nicht mehr als 255 Zeichen umfassen.",
 			"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."
+			"TASK_HAS_PARENT": "Der Aufgabentyp kann nicht geändert werden, da die Aufgabe bereits ein übergeordnetes Element hat.",
+			"PROJECT": "Projekt"
 		},
 		"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"
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index e230c7a31..7ad4c6701 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "We couldn't update Task Title.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "Task Title can't exceed 255 characters.",
 			"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."
+			"TASK_HAS_PARENT": "Task Type can not be changed as Task has already Parent.",
+			"PROJECT": "Project"
 		},
 		"taskStatus": {
 			"DELETE_STATUS_CONFIRMATION": "You are about to Delete the Status {statusName} that is used by active tasks; please confirm action"
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 7e8997c94..072a30752 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "No pudimos actualizar el título de la tarea.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "El título de la tarea no puede exceder 255 caracteres.",
 			"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."
+			"TASK_HAS_PARENT": "El tipo de tarea no se puede cambiar porque la tarea ya tiene un padre.",
+			"PROJECT": "Proyecto"
 		},
 		"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"
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index 2c70c0917..03e6d72ae 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "Impossible de mettre à jour le titre de la tâche.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "Le titre de la tâche ne peut pas dépasser 255 caractères.",
 			"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."
+			"TASK_HAS_PARENT": "Le type de tâche ne peut pas être modifié car la tâche a déjà un parent.",
+			"PROJECT": "Projet"
 		},
 		"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"
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index e6c81b8fc..009eaf700 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "לא יכולנו לעדכן את כותרת המשימה.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "כותרת משימה לא יכולה לעלות על 255 תווים.",
 			"TASK_IS_ALREADY_EPIC": "לא ניתן לשנות סוג משימה אפית.",
-			"TASK_HAS_PARENT": "לא ניתן לשנות סוג משימה מכיוון שלמשימה כבר יש הורה."
+			"TASK_HAS_PARENT": "לא ניתן לשנות סוג משימה מכיוון שלמשימה כבר יש הורה.",
+			"PROJECT": "פרויקט"
 		},
 		"taskStatus": {
 			"DELETE_STATUS_CONFIRMATION": "אתה עומד למחוק את המצב {statusName} המשמש במשימות פעילות; נא לאשר פעולה"
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 945980bd8..c9810b03a 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "Non è stato possibile aggiornare il Titolo del Compito.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "Il Titolo del Compito non può superare i 255 caratteri.",
 			"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."
+			"TASK_HAS_PARENT": "Il tipo di Compito non può essere cambiato poiché il Compito ha già un Genitore.",
+			"PROJECT": "Progetto"
 		},
 		"taskStatus": {
 			"DELETE_STATUS_CONFIRMATION": "Stai per eliminare lo stato {statusName} utilizzato da attività attive; per favore conferma l'azione"
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 2445311c8..15022dd3d 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "We konden de taaktitel niet bijwerken.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "De taaktitel kan niet langer zijn dan 255 tekens.",
 			"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."
+			"TASK_HAS_PARENT": "Taaktype kan niet worden gewijzigd omdat de taak al een bovenliggende taak heeft.",
+			"PROJECT": "Project"
 		},
 		"taskStatus": {
 			"DELETE_STATUS_CONFIRMATION": "U staat op het punt de status {statusName} te verwijderen die wordt gebruikt door actieve taken; bevestig alstublieft de actie"
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index 198f39004..3ff42ee43 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "Nie udało się zaktualizować Tytułu Zadania.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "Tytuł Zadania nie może przekraczać 255 znaków.",
 			"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."
+			"TASK_HAS_PARENT": "Typ Zadania nie może zostać zmieniony, ponieważ Zadanie ma już przypisanego rodzica.",
+			"PROJECT": "Projekt"
 		},
 		"taskStatus": {
 			"DELETE_STATUS_CONFIRMATION": "Zaraz usuniesz status {statusName}, który jest używany przez aktywne zadania; proszę potwierdzić akcję"
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index 033cc1a79..4ae42a04d 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "Não foi possível atualizar o Título da Tarefa.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "O Título da Tarefa não pode exceder 255 caracteres.",
 			"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."
+			"TASK_HAS_PARENT": "O Tipo de Tarefa não pode ser alterado, pois a Tarefa já possui um Pai.",
+			"PROJECT": "Projeto"
 		},
 		"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"
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index 3ab812538..a64a38134 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "Мы не смогли обновить заголовок задачи.",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "Заголовок задачи не может превышать 255 символов.",
 			"TASK_IS_ALREADY_EPIC": "Тип задачи 'Epic' не может быть изменен.",
-			"TASK_HAS_PARENT": "Тип задачи не может быть изменен, так как у задачи уже есть родитель."
+			"TASK_HAS_PARENT": "Тип задачи не может быть изменен, так как у задачи уже есть родитель.",
+			"PROJECT": "Проект"
 		},
 		"taskStatus": {
 			"DELETE_STATUS_CONFIRMATION": "Вы собираетесь удалить статус {statusName}, который используется активными задачами; пожалуйста, подтвердите действие"
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 50d39d2d2..311077623 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -343,7 +343,8 @@
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_TITLE": "无法更新任务标题。",
 			"TASK_TITLE_CHARACTER_LIMIT_ERROR_DESCRIPTION": "任务标题不能超过255个字符。",
 			"TASK_IS_ALREADY_EPIC": "史诗类型任务无法更改。",
-			"TASK_HAS_PARENT": "任务已有父任务,无法更改任务类型。"
+			"TASK_HAS_PARENT": "任务已有父任务,无法更改任务类型。",
+			"PROJECT": "项目"
 		},
 		"taskStatus": {
 			"DELETE_STATUS_CONFIRMATION": "您即将删除正在被活跃任务使用的状态 {statusName}；请确认操作"

From bc6384930077a326301db21f9cd241d241a6728a Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Tue, 19 Nov 2024 22:35:23 +0200
Subject: [PATCH 21/41] [Feature] Task | Add project information in the task
 (#3350)

* add project in task details page / possiblity to edit

* set the project when creating task
---
 apps/web/app/hooks/features/useTaskInput.ts   |   7 +-
 apps/web/app/hooks/features/useTeamTasks.ts   |  16 +-
 .../blocks/task-secondary-info.tsx            | 369 +++++++++++-------
 apps/web/components/ui/svgs/project-icon.tsx  |  18 +
 .../web/lib/features/auth-user-task-input.tsx |  18 +-
 apps/web/lib/features/task/task-input.tsx     |  18 +-
 6 files changed, 291 insertions(+), 155 deletions(-)
 create mode 100644 apps/web/components/ui/svgs/project-icon.tsx

diff --git a/apps/web/app/hooks/features/useTaskInput.ts b/apps/web/app/hooks/features/useTaskInput.ts
index fe21f5716..d5d803128 100644
--- a/apps/web/app/hooks/features/useTaskInput.ts
+++ b/apps/web/app/hooks/features/useTaskInput.ts
@@ -63,6 +63,7 @@ export function useTaskInput({
   const taskSize = useRef<null | string>(null);
   const taskDescription = useRef<null | string>(null);
   const taskLabels = useRef<[] | ITaskLabelsItemList[]>([]);
+  const taskProject = useRef<null | string>(null);
 
   const tasks = customTasks || teamTasks;
 
@@ -160,7 +161,8 @@ export function useTaskInput({
         priority: taskPriority.current || undefined,
         size: taskSize.current || undefined,
         tags: taskLabels.current || [],
-        description: taskDescription.current
+        description: taskDescription.current,
+		projectId : taskProject.current
       },
       !autoAssignTaskAuth ? assignToUsers : undefined
     ).then((res) => {
@@ -233,7 +235,8 @@ export function useTaskInput({
     taskLabels,
     taskDescription,
     user,
-    userRef
+    userRef,
+	taskProject,
   };
 }
 
diff --git a/apps/web/app/hooks/features/useTeamTasks.ts b/apps/web/app/hooks/features/useTeamTasks.ts
index a85217c6c..8b1fa8e9f 100644
--- a/apps/web/app/hooks/features/useTeamTasks.ts
+++ b/apps/web/app/hooks/features/useTeamTasks.ts
@@ -296,7 +296,8 @@ export function useTeamTasks() {
 				priority,
 				size,
 				tags,
-				description
+				description,
+				projectId
 			}: {
 				taskName: string;
 				issueType?: string;
@@ -306,6 +307,7 @@ export function useTeamTasks() {
 				size?: string;
 				tags?: ITaskLabelsItemList[];
 				description?: string | null;
+				projectId?: string | null;
 			},
 			members?: { id: string }[]
 		) => {
@@ -319,11 +321,13 @@ export function useTeamTasks() {
 					tags,
 					// Set Project Id to cookie
 					// TODO: Make it dynamic when we add Dropdown in Navbar
-					...(activeTeam?.projects && activeTeam?.projects.length > 0
-						? {
-								projectId: activeTeam.projects[0].id
-							}
-						: {}),
+
+					// ...(activeTeam?.projects && activeTeam?.projects.length > 0
+					// 	? {
+					// 			projectId: activeTeam.projects[0].id
+					// 		}
+					// 	: {}),
+					projectId,
 					...(description ? { description: `<p>${description}</p>` } : {}),
 					...(members ? { members } : {}),
 					taskStatusId: taskStatusId
diff --git a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
index 88c8690fd..959b2c4da 100644
--- a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
+++ b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
@@ -4,20 +4,16 @@ import { detailedTaskState } from '@app/stores';
 import { PlusIcon } from '@heroicons/react/20/solid';
 import { Button, Card, Modal, SpinnerLoader, Tooltip } from 'lib/components';
 import {
-  ActiveTaskPropertiesDropdown,
-  ActiveTaskSizesDropdown,
-  ActiveTaskStatusDropdown,
-  ActiveTaskVersionDropdown,
-  EpicPropertiesDropdown as TaskEpicDropdown,
-  TaskLabels,
-  TaskStatus,
-  useTaskLabelsValue
+	ActiveTaskPropertiesDropdown,
+	ActiveTaskSizesDropdown,
+	ActiveTaskStatusDropdown,
+	ActiveTaskVersionDropdown,
+	EpicPropertiesDropdown as TaskEpicDropdown,
+	TaskLabels,
+	TaskStatus,
+	useTaskLabelsValue
 } from 'lib/features';
-import {
-  TaskPrioritiesForm,
-  TaskSizesForm,
-  TaskStatusesForm
-} from 'lib/settings';
+import { TaskPrioritiesForm, TaskSizesForm, TaskStatusesForm } from 'lib/settings';
 import { VersionForm } from 'lib/settings/version-form';
 import { cloneDeep } from 'lodash';
 import Link from 'next/link';
@@ -29,69 +25,65 @@ import { ChevronDownIcon, Square4OutlineIcon } from 'assets/svg';
 import { Listbox, Transition } from '@headlessui/react';
 import { clsxm } from '@/app/utils';
 import { organizationProjectsState } from '@/app/stores/organization-projects';
+import ProjectIcon from '@components/ui/svgs/project-icon';
 
 type StatusType = 'version' | 'epic' | 'status' | 'label' | 'size' | 'priority';
 
 const TaskSecondaryInfo = () => {
-  const task = useAtomValue(detailedTaskState);
-  const { updateTask } = useTeamTasks();
-
-  const { handleStatusUpdate } = useTeamTasks();
-
-  const t = useTranslations();
-
-  const modal = useModal();
-  const [formTarget, setFormTarget] = useState<StatusType | null>(null);
-
-  const openModalEditionHandle = useCallback(
-    (type: StatusType) => {
-      return () => {
-        setFormTarget(type);
-        modal.openModal();
-      };
-    },
-    [modal]
-  );
-
-  const onVersionCreated = useCallback(
-    (version: ITaskVersionCreate) => {
-      handleStatusUpdate(
-        version.value || version.name,
-        'version',
-        task?.taskStatusId,
-        task
-      );
-    },
-    [task, handleStatusUpdate]
-  );
-
-  const onTaskSelect = useCallback(
-    async (parentTask: ITeamTask | undefined) => {
-      if (!parentTask) return;
-      const childTask = cloneDeep(task);
-
-      await updateTask({
-        ...childTask,
-        parentId: parentTask.id ? parentTask.id : null,
-        parent: parentTask.id ? parentTask : null
-      } as any);
-    },
-    [task, updateTask]
-  );
-
-  const taskLabels = useTaskLabelsValue();
-
-  const tags = useMemo(() => {
-    return (
-      task?.tags
-        .map((tag) => {
-          return taskLabels[tag.name];
-        })
-        .filter(Boolean) || []
-    );
-  }, [taskLabels, task?.tags]);
-
-  return (
+	const task = useAtomValue(detailedTaskState);
+	const { updateTask } = useTeamTasks();
+
+	const { handleStatusUpdate } = useTeamTasks();
+
+	const t = useTranslations();
+
+	const modal = useModal();
+	const [formTarget, setFormTarget] = useState<StatusType | null>(null);
+
+	const openModalEditionHandle = useCallback(
+		(type: StatusType) => {
+			return () => {
+				setFormTarget(type);
+				modal.openModal();
+			};
+		},
+		[modal]
+	);
+
+	const onVersionCreated = useCallback(
+		(version: ITaskVersionCreate) => {
+			handleStatusUpdate(version.value || version.name, 'version', task?.taskStatusId, task);
+		},
+		[task, handleStatusUpdate]
+	);
+
+	const onTaskSelect = useCallback(
+		async (parentTask: ITeamTask | undefined) => {
+			if (!parentTask) return;
+			const childTask = cloneDeep(task);
+
+			await updateTask({
+				...childTask,
+				parentId: parentTask.id ? parentTask.id : null,
+				parent: parentTask.id ? parentTask : null
+			} as any);
+		},
+		[task, updateTask]
+	);
+
+	const taskLabels = useTaskLabelsValue();
+
+	const tags = useMemo(() => {
+		return (
+			task?.tags
+				.map((tag) => {
+					return taskLabels[tag.name];
+				})
+				.filter(Boolean) || []
+		);
+	}, [taskLabels, task?.tags]);
+
+	return (
 		<section className="flex flex-col gap-4 p-[0.9375rem]">
 			{/* Version */}
 			<TaskRow labelTitle={t('pages.taskDetails.VERSION')}>
@@ -112,6 +104,23 @@ const TaskSecondaryInfo = () => {
 				</ActiveTaskVersionDropdown>
 			</TaskRow>
 
+			{/* Epic */}
+			{task && task.issueType === 'Story' && (
+				<TaskRow labelTitle={t('pages.taskDetails.EPIC')}>
+					<TaskEpicDropdown
+						onValueChange={(d) => {
+							onTaskSelect({
+								id: d
+							} as ITeamTask);
+						}}
+						className="lg:min-w-[170px] text-black"
+						forDetails={true}
+						sidebarUI={true}
+						taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
+						defaultValue={task.parentId || ''}
+					/>
+				</TaskRow>
+			)}
 			{/* Epic */}
 			{task && task.issueType === 'Story' && (
 				<TaskRow labelTitle={t('pages.taskDetails.EPIC')}>
@@ -130,8 +139,27 @@ const TaskSecondaryInfo = () => {
 				</TaskRow>
 			)}
 
+			{task && <EpicParent task={task} />}
 			{task && <EpicParent task={task} />}
 
+			{/* Task Status */}
+			<TaskRow labelTitle={t('pages.taskDetails.STATUS')}>
+				<ActiveTaskStatusDropdown
+					task={task}
+					className="lg:min-w-[170px] text-black"
+					forDetails={true}
+					sidebarUI={true}
+					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
+				>
+					<Button
+						className="w-full px-2 py-1 text-xs dark:text-white dark:border-white"
+						variant="outline"
+						onClick={openModalEditionHandle('status')}
+					>
+						<PlusIcon className="w-4 h-4" />
+					</Button>
+				</ActiveTaskStatusDropdown>
+			</TaskRow>
 			{/* Task Status */}
 			<TaskRow labelTitle={t('pages.taskDetails.STATUS')}>
 				<ActiveTaskStatusDropdown
@@ -151,6 +179,34 @@ const TaskSecondaryInfo = () => {
 				</ActiveTaskStatusDropdown>
 			</TaskRow>
 
+			{/* Task Labels */}
+			<TaskRow labelTitle={t('pages.taskDetails.LABELS')}>
+				<TaskLabels
+					task={task}
+					className="lg:min-w-[170px] text-black lg:mt-0"
+					forDetails={true}
+					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
+				/>
+			</TaskRow>
+			{tags.length > 0 && (
+				<TaskRow>
+					<div className="flex flex-row flex-wrap gap-1 max-w-[10rem]">
+						{tags.map((tag, i) => {
+							return (
+								<Tooltip key={i} label={tag.name?.split('-').join(' ') || ''} placement="auto">
+									<TaskStatus
+										{...tag}
+										className="rounded-[0.625rem] h-6 max-w-[8rem]"
+										active={true}
+										name={tag.name?.split('-').join(' ')}
+										titleClassName={'text-[0.625rem] font-[500]'}
+									/>
+								</Tooltip>
+							);
+						})}
+					</div>
+				</TaskRow>
+			)}
 			{/* Task Labels */}
 			<TaskRow labelTitle={t('pages.taskDetails.LABELS')}>
 				<TaskLabels
@@ -235,44 +291,43 @@ const TaskSecondaryInfo = () => {
 				</Card>
 			</Modal>
 		</section>
-  );
+	);
 };
 
 const EpicParent = ({ task }: { task: ITeamTask }) => {
-  const t = useTranslations();
-
-  if (task?.issueType === 'Story') {
-    return <></>;
-  }
-
-  return (!task?.issueType ||
-    task?.issueType === 'Task' ||
-    task?.issueType === 'Bug') &&
-    task?.rootEpic ? (
-    <TaskRow labelTitle={t('pages.taskDetails.EPIC')}>
-      <Tooltip
-        label={`#${task?.rootEpic?.number} ${task?.rootEpic?.title}`}
-        placement="auto"
-      >
-        <Link href={`/task/${task?.rootEpic?.id}`} target="_blank">
-          <div className="flex items-center w-32">
-            <div className="bg-[#8154BA] p-1 rounded-sm mr-1">
-              <Square4OutlineIcon className="w-full max-w-[10px] text-white" />
-            </div>
-            <div className="overflow-hidden text-xs text-ellipsis whitespace-nowrap">{`#${task?.rootEpic?.number} ${task?.rootEpic?.title}`}</div>
-          </div>
-        </Link>
-      </Tooltip>
-    </TaskRow>
-  ) : (
-    <></>
-  );
+	const t = useTranslations();
+
+	if (task?.issueType === 'Story') {
+		return <></>;
+	}
+
+	return (!task?.issueType || task?.issueType === 'Task' || task?.issueType === 'Bug') && task?.rootEpic ? (
+		<TaskRow labelTitle={t('pages.taskDetails.EPIC')}>
+			<Tooltip label={`#${task?.rootEpic?.number} ${task?.rootEpic?.title}`} placement="auto">
+				<Link href={`/task/${task?.rootEpic?.id}`} target="_blank">
+					<div className="flex items-center w-32">
+						<div className="bg-[#8154BA] p-1 rounded-sm mr-1">
+							<Square4OutlineIcon className="w-full max-w-[10px] text-white" />
+						</div>
+						<div className="overflow-hidden text-xs text-ellipsis whitespace-nowrap">{`#${task?.rootEpic?.number} ${task?.rootEpic?.title}`}</div>
+					</div>
+				</Link>
+			</Tooltip>
+		</TaskRow>
+	) : (
+		<></>
+	);
 };
 
-
-
 interface ITaskProjectDropdownProps {
-	task: ITeamTask;
+	task?: ITeamTask;
+	controlled?: boolean;
+	onChange?: (project: IProject) => void;
+	styles?: {
+		container?: string; // The dropdown element
+		value?: string;
+		listCard?: string; // The listbox
+	};
 }
 
 export default TaskSecondaryInfo;
@@ -282,50 +337,58 @@ export default TaskSecondaryInfo;
  *
  * @param {Object} props - The props object
  * @param {ITeamTask} props.task - The ITeamTask object which
+ * @param {boolean} props.controlled - If [true], changes are managed by external handlers (i.e :props.onChange)
+ * @param {(project: IProject) => void} props.onChange - The function called when user selects a value (external handler)
  *
  * @returns {JSX.Element} - The Dropdown element
  */
-function ProjectDropDown (props : ITaskProjectDropdownProps) {
-
-	const {task} = props
+export function ProjectDropDown(props: ITaskProjectDropdownProps) {
+	const { task, controlled = false, onChange, styles } = props;
 
-	const organizationProjects = useAtomValue(organizationProjectsState)
-	const {getOrganizationProjects} = useOrganizationProjects()
-	const {updateTask, updateLoading} = useTeamTasks()
-	const t = useTranslations()
+	const organizationProjects = useAtomValue(organizationProjectsState);
+	const { getOrganizationProjects } = useOrganizationProjects();
+	const { updateTask, updateLoading } = useTeamTasks();
+	const t = useTranslations();
 
 	useEffect(() => {
-		getOrganizationProjects()
-	},[getOrganizationProjects])
-
+		getOrganizationProjects();
+	}, [getOrganizationProjects]);
 
 	const [selected, setSelected] = useState<IProject>();
 
 	// Set the task project if any
 	useEffect(() => {
-		setSelected(organizationProjects.find(project => {
-			return  project.id === task.projectId
-		}))
-	},[organizationProjects, task.projectId])
-
-	// Update the project
-	const handleUpdateProject = useCallback(async (project : IProject) => {
-		try {
-			await updateTask({ ...task, projectId: project.id });
-
-			setSelected(project);
-		} catch (error) {
-			console.error(error);
+		if (task) {
+			setSelected(
+				organizationProjects.find((project) => {
+					return project.id == task.projectId;
+				})
+			);
 		}
-	},[task, updateTask])
+	}, [organizationProjects, task, task?.projectId]);
 
+	// Update the project
+	const handleUpdateProject = useCallback(
+		async (project: IProject) => {
+			try {
+				if (task) {
+					await updateTask({ ...task, projectId: project.id });
+				}
+			} catch (error) {
+				console.error(error);
+			}
+		},
+		[task, updateTask]
+	);
 
 	// Remove the project
 	const handleRemoveProject = useCallback(async () => {
 		try {
-			await updateTask({ ...task, projectId: null });
+			if (task) {
+				await updateTask({ ...task, projectId: null });
 
-			setSelected(undefined);
+				setSelected(undefined);
+			}
 		} catch (error) {
 			console.error(error);
 		}
@@ -334,25 +397,42 @@ function ProjectDropDown (props : ITaskProjectDropdownProps) {
 	return (
 		<div
 			className={clsxm(
-				'relative  text-sm font-medium border text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs'
+				'relative  text-sm font-medium border text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs',
+				styles?.container
 			)}
 		>
 			<Listbox
 				value={selected}
-				onChange={handleUpdateProject}
+				onChange={(project) => {
+					if (controlled && onChange) {
+						onChange(project);
+					} else {
+						handleUpdateProject(project);
+					}
+
+					setSelected(project);
+				}}
 			>
 				{({ open }) => {
 					return (
 						<>
 							<Listbox.Button
 								className={clsxm(
-									'cursor-pointer outline-none w-full flex items-center justify-between px-4 h-full '
+									'cursor-pointer outline-none w-full flex items-center justify-between px-4 h-full ',
+									styles?.value
 								)}
 							>
+								{selected && (
+									<div className="">
+										<ProjectIcon />
+									</div>
+								)}
 								{updateLoading ? (
 									<SpinnerLoader size={10} />
 								) : (
-									<p className=" truncate ">{selected?.name ?? 'Project'}</p>
+									<p className={clsxm('truncate', !selected && ' text-slate-400 font-light')}>
+										{selected?.name ?? 'Project'}
+									</p>
 								)}
 								<ChevronDownIcon
 									className={clsxm(
@@ -375,7 +455,10 @@ function ProjectDropDown (props : ITaskProjectDropdownProps) {
 								<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 gap-2.5 max-h-[206px] overflow-x-auto rounded-none"
+										className={clsxm(
+											'p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 max-h-[206px] overflow-x-auto rounded-none',
+											styles?.listCard
+										)}
 									>
 										{organizationProjects.map((item, i) => {
 											return (
@@ -386,13 +469,15 @@ function ProjectDropDown (props : ITaskProjectDropdownProps) {
 												</Listbox.Option>
 											);
 										})}
-										<Button
-											className=" px-2 py-1 mt-2 !min-w-min rounded-none text-xs dark:text-white dark:border-white"
-											variant="outline"
-											onClick={handleRemoveProject}
-										>
-											{t('common.REMOVE')}
-										</Button>
+										{!controlled && (
+											<Button
+												className=" px-2 py-1 mt-2 !min-w-min rounded-none text-xs dark:text-white dark:border-white"
+												variant="outline"
+												onClick={handleRemoveProject}
+											>
+												{t('common.REMOVE')}
+											</Button>
+										)}
 									</Card>
 								</Listbox.Options>
 							</Transition>
diff --git a/apps/web/components/ui/svgs/project-icon.tsx b/apps/web/components/ui/svgs/project-icon.tsx
new file mode 100644
index 000000000..e15ec9d40
--- /dev/null
+++ b/apps/web/components/ui/svgs/project-icon.tsx
@@ -0,0 +1,18 @@
+export default function ProjectIcon() {
+	return (
+		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M12 12.2501C11.56 12.2501 11.12 12.1401 10.72 11.9301L4.21 8.4201C3.62 8.1001 3.25 7.4701 3.25 6.7701C3.25 6.0701 3.62 5.4401 4.21 5.1201L10.72 1.6101C11.52 1.1801 12.48 1.1801 13.27 1.6101L19.78 5.1201C20.37 5.4401 20.74 6.0701 20.74 6.7701C20.74 7.4701 20.37 8.1001 19.78 8.4201L13.27 11.9301C12.88 12.1501 12.44 12.2501 12 12.2501ZM12 2.7801C11.81 2.7801 11.61 2.8301 11.43 2.9301L4.93 6.4301C4.76 6.5201 4.75 6.7101 4.75 6.7701C4.75 6.8301 4.76 7.0201 4.93 7.1001L11.44 10.6101C11.8 10.8001 12.21 10.8001 12.57 10.6101L19.08 7.1001C19.24 7.0101 19.26 6.8201 19.26 6.7701C19.26 6.7101 19.25 6.5201 19.08 6.4401L12.57 2.9301C12.39 2.8301 12.19 2.7801 12 2.7801Z"
+				fill="#292D32"
+			/>
+			<path
+				d="M9.78 22.72C9.5 22.72 9.21 22.65 8.95 22.52L2.89 19.5C1.88 18.99 1.25 17.97 1.25 16.84V11.12C1.25 10.47 1.58 9.88001 2.13 9.54001C2.69 9.20001 3.36 9.17001 3.94 9.46001L10 12.48C11.01 12.99 11.64 14 11.64 15.14V20.86C11.64 21.51 11.31 22.1 10.76 22.44C10.46 22.63 10.12 22.72 9.78 22.72ZM3.11 10.76C3.03 10.76 2.96 10.79 2.92 10.81C2.86 10.85 2.75 10.94 2.75 11.12V16.84C2.75 17.4 3.06 17.91 3.56 18.16L9.61 21.19C9.77 21.27 9.9 21.21 9.96 21.18C10.02 21.14 10.13 21.05 10.13 20.87V15.15C10.13 14.59 9.82 14.08 9.32 13.83L3.27 10.8C3.21 10.77 3.16 10.76 3.11 10.76Z"
+				fill="#292D32"
+			/>
+			<path
+				d="M14.2201 22.72C13.8801 22.72 13.5401 22.63 13.2401 22.44C12.6901 22.1 12.3601 21.51 12.3601 20.86V15.14C12.3601 14.01 12.9901 12.99 14.0001 12.48L20.0501 9.45C20.6301 9.16 21.3101 9.19 21.8601 9.53C22.4101 9.87 22.7401 10.46 22.7401 11.11V16.83C22.7401 17.96 22.1101 18.98 21.1001 19.49L15.0501 22.52C14.7901 22.66 14.5001 22.72 14.2201 22.72ZM20.8901 10.76C20.8401 10.76 20.7901 10.77 20.7301 10.8L14.6801 13.83C14.1801 14.08 13.8701 14.58 13.8701 15.15V20.87C13.8701 21.05 13.9801 21.14 14.0401 21.18C14.1001 21.22 14.2301 21.27 14.3901 21.19L20.4401 18.16C20.9401 17.91 21.2501 17.4 21.2501 16.84V11.12C21.2501 10.94 21.1401 10.85 21.0801 10.81C21.0401 10.79 20.9701 10.76 20.8901 10.76Z"
+				fill="#292D32"
+			/>
+		</svg>
+	);
+}
diff --git a/apps/web/lib/features/auth-user-task-input.tsx b/apps/web/lib/features/auth-user-task-input.tsx
index 33a6452ad..949392eac 100644
--- a/apps/web/lib/features/auth-user-task-input.tsx
+++ b/apps/web/lib/features/auth-user-task-input.tsx
@@ -9,6 +9,7 @@ import { TaskInput } from './task/task-input';
 import { TaskLabels } from './task/task-labels';
 import { ActiveTaskPropertiesDropdown, ActiveTaskSizesDropdown, ActiveTaskStatusDropdown } from './task/task-status';
 import { useTranslations } from 'next-intl';
+import { ProjectDropDown } from '@components/pages/task/details-section/blocks/task-secondary-info';
 
 export function AuthUserTaskInput({ className }: IClassName) {
 	const t = useTranslations();
@@ -31,29 +32,38 @@ export function AuthUserTaskInput({ className }: IClassName) {
 
 				<div className="flex-grow justify-end hidden flex-1 gap-2 md:flex">
 					<ActiveTaskStatusDropdown
-						className="lg:max-w-[190px] w-full"
+						className="lg:max-w-[190px] grow"
 						disabled={!activeTeamTask}
 						taskStatusClassName="text-xs py-1.5 w-full"
 					/>
 
 					<ActiveTaskPropertiesDropdown
-						className="lg:max-w-[190px] w-full"
+						className="lg:max-w-[190px] grow"
 						disabled={!activeTeamTask}
 						taskStatusClassName="w-full py-1.5 text-xs"
 					/>
 
 					<ActiveTaskSizesDropdown
-						className="lg:max-w-[190px] w-full"
+						className="lg:max-w-[190px] grow"
 						disabled={!activeTeamTask}
 						taskStatusClassName="w-full py-1.5 text-xs"
 					/>
 
 					<TaskLabels
 						task={activeTeamTask}
-						className="lg:max-w-[170px] w-full text-xs"
+						className="lg:max-w-[170px] grow text-xs"
 						forDetails={false}
 						taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] text-xs"
 					/>
+					{activeTeamTask && (
+						<ProjectDropDown
+							styles={{
+								container: 'rounded-xl grow text-xs !max-w-[10.625rem]',
+								listCard: 'rounded-xl'
+							}}
+							task={activeTeamTask}
+						/>
+					)}
 				</div>
 				{/* <div className="grid justify-items-center md:hidden">
 					<div className="flex">
diff --git a/apps/web/lib/features/task/task-input.tsx b/apps/web/lib/features/task/task-input.tsx
index 1ae8b0945..31d551d49 100644
--- a/apps/web/lib/features/task/task-input.tsx
+++ b/apps/web/lib/features/task/task-input.tsx
@@ -58,6 +58,7 @@ import { useTranslations } from 'next-intl';
 import { useInfinityScrolling } from '@app/hooks/useInfinityFetch';
 import { ObserverComponent } from '@components/shared/Observer';
 import { LazyRender } from 'lib/components/lazy-render';
+import { ProjectDropDown } from '@components/pages/task/details-section/blocks/task-secondary-info';
 
 type Props = {
   task?: Nullable<ITeamTask>;
@@ -540,7 +541,8 @@ function TaskCard({
     taskPriority,
     taskSize,
     taskLabels,
-    taskDescription
+    taskDescription,
+	taskProject
   } = datas;
   const { nextOffset, data } = useInfinityScrolling(updatedTaskList ?? [], 5);
 
@@ -640,6 +642,20 @@ function TaskCard({
                     }}
                     task={datas.inputTask}
                   />
+
+					<ProjectDropDown
+						styles={{
+							container: 'rounded-xl w-[10.625rem] !max-w-[10.625rem]',
+							listCard: 'rounded-xl'
+						}}
+						controlled
+						onChange={(project) => {
+							if (taskProject) {
+								taskProject.current = project.id
+							}
+						}}
+					/>
+
                 </div>
               </div>
             )}

From 9ab591b29daf9a697c8c5441370dbecfe1372bb4 Mon Sep 17 00:00:00 2001
From: Arick Bulakali <85836702+NdekoCode@users.noreply.github.com>
Date: Wed, 20 Nov 2024 23:42:59 +0200
Subject: [PATCH 22/41] Fix/layout size and scroll effect (#3351)

* refactor(web): [Layout] add app container component

* refactor(web): [Header] make the global header fixed on scroll

* refactor(web): [Footer] make the global footer fixed dynamically on scroll and setup on the layout

* refactor(web): [Layout] update specific position of elements using z-index

* fix(web): layout size

* refactor(web): [Layout] update layout height

* refactor(web): [UserTeamCard] fix size on resizing and w-max

* fix(web): add scroll effect on team-members-card-view

* refactor(web): [Layout] add resize component to global layout

* refactor(web): fix body bg in light mode, make main header fixed on tasks pages and profile page

* fix(web): [Setting] setting page layout

* fix(web): [Eslint] error and add an environnement variable for checking build without eslint errors

* refactor(web): fixed task detail header

* docs(web): add main-layout docs

* docs(web): add main-layout docs

* refactor(web): fix my-tasks page

* fix(web): [Profile] fix outstanding task overflow

* fix(web): fix footer fixed on timesheet, settings and kanban pages

* refactor(web): [Kanban] add a dynamic height on kanban item

* fix(web): [Kanban] fix kanban overscroll

* fix(web): [Dashboard] fix breadcum size

* fix(web): [Team's Tasks'] fix space on team's tasks page

* refactor(web): [Profile] optimize space on profile page

* refactor(web): [Timesheet] optimize spaces on reports/timesheet page

* fix(web): [Setting] double scroll on setting page

* test: build
---
 apps/web/.env                                 |    4 +
 apps/web/.env.sample                          |    4 +
 apps/web/app/[locale]/kanban/page.tsx         |  525 ++++----
 apps/web/app/[locale]/layout.tsx              |    6 +-
 apps/web/app/[locale]/page-component.tsx      |   91 +-
 .../app/[locale]/profile/[memberId]/page.tsx  |  131 +-
 apps/web/app/[locale]/settings/layout.tsx     |   90 +-
 .../app/[locale]/settings/personal/page.tsx   |    7 +-
 apps/web/app/[locale]/task/[id]/component.tsx |    4 +-
 apps/web/app/[locale]/task/[id]/page.tsx      |  122 +-
 apps/web/app/[locale]/team/tasks/page.tsx     |  127 +-
 .../[memberId]/components/EditTaskModal.tsx   |  428 +++----
 .../components/FilterWithStatus.tsx           |   82 +-
 .../components/RejectSelectedModal.tsx        |  167 +--
 .../components/TimeSheetFilterPopover.tsx     |  278 +++--
 .../components/TimesheetFilterDate.tsx        |  616 +++++-----
 .../[memberId]/components/TimesheetView.tsx   |   36 +-
 .../[locale]/timesheet/[memberId]/page.tsx    |  365 +++---
 apps/web/app/hooks/features/useKanban.ts      |  263 ++--
 apps/web/app/layout.tsx                       |    2 +-
 .../components/pages/team/tasks/TaskTable.tsx |   26 +-
 .../pages/team/tasks/tasks-data-table.tsx     |  204 +---
 apps/web/components/ui/data-table.tsx         |   19 +-
 apps/web/components/ui/scroll-area.tsx        |   72 +-
 apps/web/lib/components/Kanban.tsx            |   81 +-
 apps/web/lib/components/accordian.tsx         |    2 +-
 apps/web/lib/components/container.tsx         |    2 +-
 apps/web/lib/components/sidebar-accordian.tsx |    4 +-
 .../features/all-teams-members-card-view.tsx  |    6 +-
 .../users-teams-card/member-infos.tsx         |    5 +-
 .../all-teams/users-teams-card/user-card.tsx  |   35 +-
 .../user-team-active-task-times.tsx           |    8 +-
 .../user-team-active-task.tsx                 |   10 +-
 .../user-team-task-estimate.tsx               |    8 +-
 .../user-team-today-worked.tsx                |   13 +-
 .../integrations/activity-calendar/index.tsx  |  253 ++--
 .../calendar/table-time-sheet.tsx             | 1064 ++++++++---------
 .../features/task/daily-plan/future-tasks.tsx |   12 +-
 .../task/daily-plan/outstanding-all.tsx       |    3 +-
 .../task/daily-plan/outstanding-date.tsx      |    5 +-
 .../features/task/daily-plan/past-tasks.tsx   |    1 +
 apps/web/lib/features/task/task-card.tsx      |   58 +-
 apps/web/lib/features/task/task-filters.tsx   |   18 +-
 apps/web/lib/features/task/task-status.tsx    |    4 +-
 apps/web/lib/features/team-member-cell.tsx    |  152 ++-
 apps/web/lib/features/team-member-header.tsx  |   42 +-
 .../lib/features/team-members-card-view.tsx   |    3 +-
 .../lib/features/team-members-kanban-view.tsx |  554 ++++-----
 .../lib/features/team-members-table-view.tsx  |    1 +
 .../user-team-block-header.tsx                |  408 +++----
 .../features/team/user-team-card/index.tsx    |    2 +-
 .../team/user-team-card/task-skeleton.tsx     |   25 +-
 .../user-team-table-header.tsx                |    3 +-
 apps/web/lib/features/unverified-email.tsx    |    2 +-
 apps/web/lib/features/user-nav-menu.tsx       |    8 +-
 apps/web/lib/features/user-profile-plans.tsx  |   16 +-
 apps/web/lib/features/user-profile-tasks.tsx  |    4 +-
 apps/web/lib/layout/AppContainer.tsx          |   42 +
 apps/web/lib/layout/GlobalFooter.tsx          |   42 +
 apps/web/lib/layout/GlobalHeader.tsx          |   68 ++
 apps/web/lib/layout/footer.tsx                |   59 +-
 apps/web/lib/layout/main-layout.tsx           |  205 ++--
 apps/web/lib/utils.ts                         |   26 +
 apps/web/next.config.js                       |   11 +-
 apps/web/package.json                         |    2 +-
 apps/web/styles/globals.css                   |   98 +-
 yarn.lock                                     |   34 +-
 67 files changed, 3630 insertions(+), 3438 deletions(-)
 create mode 100644 apps/web/lib/layout/AppContainer.tsx
 create mode 100644 apps/web/lib/layout/GlobalFooter.tsx
 create mode 100644 apps/web/lib/layout/GlobalHeader.tsx

diff --git a/apps/web/.env b/apps/web/.env
index 41c6a1aa3..9180c30c7 100644
--- a/apps/web/.env
+++ b/apps/web/.env
@@ -133,3 +133,7 @@ NEXT_PUBLIC_CHATWOOT_API_KEY=
 # PostHog
 NEXT_PUBLIC_POSTHOG_KEY=
 NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+
+# Warning: IF TRUE This allows production builds to successfully complete even if
+# your project has ESLint errors.
+NEXT_IGNORE_ESLINT_ERROR_ON_BUILD=true
diff --git a/apps/web/.env.sample b/apps/web/.env.sample
index 7a6cedce2..62ae03258 100644
--- a/apps/web/.env.sample
+++ b/apps/web/.env.sample
@@ -83,3 +83,7 @@ NEXT_PUBLIC_MEET_DOMAIN="meet.ever.team"
 # Private Variables (Meet)
 MEET_JWT_APP_ID=ever_teams
 MEET_JWT_APP_SECRET=
+
+# Warning: IF TRUE This allows production builds to successfully complete even if
+# your project has ESLint errors.
+NEXT_IGNORE_ESLINT_ERROR_ON_BUILD=true
diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
index 71584b962..018561643 100644
--- a/apps/web/app/[locale]/kanban/page.tsx
+++ b/apps/web/app/[locale]/kanban/page.tsx
@@ -1,23 +1,16 @@
 'use client';
-
 import { KanbanTabs } from '@app/constants';
-import {
-  useAuthenticateUser,
-  useModal,
-  useOrganizationTeams
-} from '@app/hooks';
+import { useAuthenticateUser, useModal, useOrganizationTeams } from '@app/hooks';
 import { useKanban } from '@app/hooks/features/useKanban';
 import KanbanBoardSkeleton from '@components/shared/skeleton/KanbanBoardSkeleton';
 import { withAuthentication } from 'lib/app/authenticator';
-import { Breadcrumb, Container, Divider } from 'lib/components';
+import { Breadcrumb, Container } from 'lib/components';
 import { KanbanView } from 'lib/features/team-members-kanban-view';
-import { Footer, MainLayout } from 'lib/layout';
+import { MainLayout } from 'lib/layout';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useParams, useSearchParams } from 'next/navigation';
-import ImageComponent, {
-  ImageOverlapperProps
-} from 'lib/components/image-overlapper';
+import ImageComponent, { ImageOverlapperProps } from 'lib/components/image-overlapper';
 import Separator from '@components/ui/separator';
 import HeaderTabs from '@components/pages/main/header-tabs';
 import { AddIcon, PeoplesIcon } from 'assets/svg';
@@ -25,288 +18,262 @@ import { InviteFormModal } from 'lib/features/team/invite/invite-form-modal';
 import { userTimezone } from '@app/helpers';
 import KanbanSearch from '@components/pages/kanban/search-bar';
 import {
-  EpicPropertiesDropdown,
-  StatusDropdown,
-  TStatusItem,
-  TaskLabelsDropdown,
-  TaskPropertiesDropdown,
-  TaskSizesDropdown,
-  taskIssues,
-  useStatusValue
+	EpicPropertiesDropdown,
+	StatusDropdown,
+	TStatusItem,
+	TaskLabelsDropdown,
+	TaskPropertiesDropdown,
+	TaskSizesDropdown,
+	taskIssues,
+	useStatusValue
 } from 'lib/features';
 import { useAtomValue } from 'jotai';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { CircleIcon } from 'lucide-react';
 import { XMarkIcon } from '@heroicons/react/20/solid';
-import Head from 'next/head';
-import { clsxm } from '@app/utils';
 
 const Kanban = () => {
-  const {
-    data,
-    setSearchTasks,
-    searchTasks,
-    isLoading,
-    setPriority,
-    setSizes,
-    setLabels,
-    setEpics,
-    setIssues,
-    issues
-  } = useKanban();
+	const {
+		data,
+		setSearchTasks,
+		searchTasks,
+		isLoading,
+		setPriority,
+		setSizes,
+		setLabels,
+		setEpics,
+		setIssues,
+		issues
+	} = useKanban();
+
+	const { activeTeam, isTrackingEnabled } = useOrganizationTeams();
+	const t = useTranslations();
+	const params = useParams<{ locale: string }>();
+	const fullWidth = useAtomValue(fullWidthState);
+	const currentLocale = params ? params.locale : null;
+	const [activeTab, setActiveTab] = useState(KanbanTabs.TODAY);
+	const employee = useSearchParams().get('employee');
+	const breadcrumbPath = useMemo(
+		() => [
+			{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+			{ title: activeTeam?.name || '', href: '/' },
+			{ title: t('common.KANBAN'), href: `/${currentLocale}/kanban` }
+		],
+		[activeTeam?.name, currentLocale, t]
+	);
 
-  const { activeTeam, isTrackingEnabled } = useOrganizationTeams();
-  const t = useTranslations();
-  const params = useParams<{ locale: string }>();
-  const fullWidth = useAtomValue(fullWidthState);
-  const currentLocale = params ? params.locale : null;
-  const [activeTab, setActiveTab] = useState(KanbanTabs.TODAY);
-  const employee = useSearchParams().get('employee');
-  const breadcrumbPath = useMemo(
-    () => [
-      { title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
-      { title: activeTeam?.name || '', href: '/' },
-      { title: t('common.KANBAN'), href: `/${currentLocale}/kanban` }
-    ],
-    [activeTeam?.name, currentLocale, t]
-  );
+	const activeTeamMembers = activeTeam?.members ? activeTeam.members : [];
 
-  const activeTeamMembers = activeTeam?.members ? activeTeam.members : [];
+	const teamMembers: ImageOverlapperProps[] = [];
 
-  const teamMembers: ImageOverlapperProps[] = [];
+	activeTeamMembers.map((member: any) => {
+		teamMembers.push({
+			id: member.employee.user.id,
+			url: member.employee.user.imageUrl,
+			alt: member.employee.user.firstName
+		});
+	});
+	const tabs = [
+		{ name: t('common.TODAY'), value: KanbanTabs.TODAY },
+		{ name: t('common.YESTERDAY'), value: KanbanTabs.YESTERDAY },
+		{ name: t('common.TOMORROW'), value: KanbanTabs.TOMORROW }
+	];
+	const { user } = useAuthenticateUser();
+	const { openModal, isOpen, closeModal } = useModal();
+	const timezone = userTimezone();
 
-  activeTeamMembers.map((member: any) => {
-    teamMembers.push({
-      id: member.employee.user.id,
-      url: member.employee.user.imageUrl,
-      alt: member.employee.user.firstName
-    });
-  });
-  const tabs = [
-    { name: t('common.TODAY'), value: KanbanTabs.TODAY },
-    { name: t('common.YESTERDAY'), value: KanbanTabs.YESTERDAY },
-    { name: t('common.TOMORROW'), value: KanbanTabs.TOMORROW }
-  ];
-  const { user } = useAuthenticateUser();
-  const { openModal, isOpen, closeModal } = useModal();
-  const timezone = userTimezone();
-  const { items } = useStatusValue<'issueType'>({
-    status: taskIssues,
-    value: issues as any,
-    onValueChange: setIssues as any
-  });
+	const { items } = useStatusValue<'issueType'>({
+		status: taskIssues,
+		value: issues as any,
+		onValueChange: setIssues as any
+	});
 
-  useEffect(() => {
-    const lastPath = breadcrumbPath.slice(-1)[0];
-    if (employee) {
-      if (lastPath.title == 'Kanban') {
-        breadcrumbPath.push({
-          title: employee,
-          href: `/${currentLocale}/kanban?employee=${employee}`
-        });
-      } else {
-        breadcrumbPath.pop();
-        breadcrumbPath.push({
-          title: employee,
-          href: `/${currentLocale}/kanban?employee=${employee}`
-        });
-      }
-    } else {
-      if (lastPath.title !== 'Kanban') {
-        breadcrumbPath.pop();
-      }
-    }
-  }, [breadcrumbPath, currentLocale, employee]);
-  return (
-    <>
-      <Head>
-        <title>
-          {t('common.KANBAN')} {t('common.BOARD')}
-        </title>
-      </Head>
-      <MainLayout
-        showTimer={isTrackingEnabled}
-        footerClassName="hidden"
-        // footerClassName={clsxm("fixed flex flex-col  items-end justify-center bottom-0 z-50 bg-white dark:bg-dark-high",!fullWidth && 'left-0 right-0')}
-        className="h-[calc(100vh-_22px)]"
-      >
-        <div className="h-[263.4px] z-10 bg-white  dark:bg-dark-high fixed w-full"></div>
-        <div
-          className={
-            'fixed top-20 flex flex-col border-b-[1px] dark:border-[#26272C]  z-10 mx-[0px] w-full bg-white dark:bg-dark-high'
-          }
-        >
-          <Container fullWidth={fullWidth}>
-            <div className="flex bg-white dark:bg-dark-high flex-row items-start justify-between mt-12">
-              <div className="flex justify-center items-center gap-8 h-10">
-                <PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
-                <Breadcrumb paths={breadcrumbPath} className="text-sm" />
-              </div>
-              <div className="flex h-10 w-max items-center justify-center   gap-1">
-                <HeaderTabs kanban={true} linkAll={true} />
-              </div>
-            </div>
-            <div className="flex justify-between items-center  mt-10 bg-white dark:bg-dark-high">
-              <h1 className="text-4xl font-semibold ">
-                {t('common.KANBAN')} {t('common.BOARD')}
-              </h1>
-              <div className="flex w-fit items-center space-x-2">
-                <strong className="text-gray-400">
-                  {`(`}
-                  {timezone.split('(')[1]}
-                </strong>
-                <div className="mt-1">
-                  <Separator />
-                </div>
-                <ImageComponent
-                  onAvatarClickRedirectTo="kanbanTasks"
-                  images={teamMembers}
-                />
-                <div className="mt-1">
-                  <Separator />
-                </div>
+	useEffect(() => {
+		const lastPath = breadcrumbPath.slice(-1)[0];
+		if (employee) {
+			if (lastPath.title == 'Kanban') {
+				breadcrumbPath.push({
+					title: employee,
+					href: `/${currentLocale}/kanban?employee=${employee}`
+				});
+			} else {
+				breadcrumbPath.pop();
+				breadcrumbPath.push({
+					title: employee,
+					href: `/${currentLocale}/kanban?employee=${employee}`
+				});
+			}
+		} else if (lastPath.title !== 'Kanban') {
+			breadcrumbPath.pop();
+		}
+	}, [breadcrumbPath, currentLocale, employee]);
+	return (
+		<>
+			<MainLayout
+				title={`${t('common.KANBAN')} ${t('common.BOARD')}`}
+				showTimer={isTrackingEnabled}
+				childrenClassName="flex flex-col h-hull w-full"
+				mainHeaderSlot={
+					<div
+						className={
+							'flex flex-col min-h-fit border-b-[1px] dark:border-[#26272C] mx-[0px] w-full bg-white dark:bg-dark-high'
+						}
+					>
+						<Container fullWidth={fullWidth} className="!pt-0">
+							<div className="flex flex-row items-start justify-between mt-4 bg-white dark:bg-dark-high">
+								<div className="flex items-center justify-center h-10 gap-8">
+									<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
+									<Breadcrumb paths={breadcrumbPath} className="text-sm" />
+								</div>
+								<div className="flex items-center justify-center h-10 gap-1 w-max">
+									<HeaderTabs kanban={true} linkAll={true} />
+								</div>
+							</div>
+							<div className="flex items-center justify-between mt-4 bg-white dark:bg-dark-high">
+								<h1 className="text-4xl font-semibold ">
+									{t('common.KANBAN')} {t('common.BOARD')}
+								</h1>
+								<div className="flex items-center space-x-2 w-fit">
+									<strong className="text-gray-400">
+										{`(`}
+										{timezone.split('(')[1]}
+									</strong>
+									<div className="mt-1">
+										<Separator />
+									</div>
+									<ImageComponent onAvatarClickRedirectTo="kanbanTasks" images={teamMembers} />
+									<div className="mt-1">
+										<Separator />
+									</div>
 
-                <button
-                  onClick={openModal}
-                  className="p-2 rounded-full border-2 border-[#0000001a] dark:border-white"
-                >
-                  {/* <AddIcon width={24} height={24} className={'dark:stroke-white'} /> */}
-                  <AddIcon className="w-6 h-6 text-foreground" />
-                </button>
-              </div>
-            </div>
-            <div className="relative flex flex-col lg:flex-row justify-between items-center  pt-10 bg-white dark:bg-dark-high">
-              <div className="flex flex-row">
-                {tabs.map((tab) => (
-                  <div
-                    key={tab.name}
-                    onClick={() => setActiveTab(tab.value)}
-                    className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${
-                      activeTab === tab.value
-                        ? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
-                        : 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
-                    }`}
-                    style={{
-                      borderBottomWidth: '3px',
-                      borderBottomStyle: 'solid'
-                    }}
-                  >
-                    {tab.name}
-                  </div>
-                ))}
-              </div>
-              <div className="flex space-x-2 mt-5 lg:mt-0">
-                <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
-                  <EpicPropertiesDropdown
-                    onValueChange={(_, values) => setEpics(values || [])}
-                    className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
-                    multiple={true}
-                  />
-                </div>
-                {/* <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light"> */}
-                <div className="relative">
-                  <div className="bg-[#F2F2F2] dark:bg-dark--theme-light absolute flex items-center p-2 justify-between w-40 h-11 border input-border rounded-xl">
-                    <span className="flex">
-                      <div
-                        className="h-6 w-6 p-1.5 rounded-md mr-1"
-                        style={{
-                          backgroundColor: issues.bgColor ?? 'transparent'
-                        }}
-                      >
-                        {issues.icon ?? <CircleIcon className="h-3 w-3" />}
-                      </div>
-                      <p>{issues.name}</p>
-                    </span>
-                    {issues.value && (
-                      <div
-                        onClick={() =>
-                          setIssues({
-                            name: 'Issues',
-                            icon: null,
-                            bgColor: '',
-                            value: ''
-                          })
-                        }
-                        className="w-5 h-5 z-50 p-0.5 cursor-pointer"
-                      >
-                        <XMarkIcon className="h-4 w-4  dark:text-white" />
-                      </div>
-                    )}
-                  </div>
+									<button
+										onClick={openModal}
+										className="p-2 rounded-full border-2 border-[#0000001a] dark:border-white"
+									>
+										{/* <AddIcon width={24} height={24} className={'dark:stroke-white'} /> */}
+										<AddIcon className="w-6 h-6 text-foreground" />
+									</button>
+								</div>
+							</div>
+							<div className="relative z-10 flex flex-col-reverse items-center justify-between pt-6 -mb-1 bg-white xl:flex-row dark:bg-dark-high">
+								<div className="flex flex-row">
+									{tabs.map((tab) => (
+										<div
+											key={tab.name}
+											onClick={() => setActiveTab(tab.value)}
+											className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${
+												activeTab === tab.value
+													? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
+													: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
+											}`}
+											style={{
+												borderBottomWidth: '3px',
+												borderBottomStyle: 'solid'
+											}}
+										>
+											{tab.name}
+										</div>
+									))}
+								</div>
+								<div className="flex mt-4 space-x-2 lg:mt-0">
+									<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
+										<EpicPropertiesDropdown
+											onValueChange={(_, values) => setEpics(values || [])}
+											className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
+											multiple={true}
+										/>
+									</div>
+									{/* <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light"> */}
+									<div className="relative z-10">
+										<div className="bg-[#F2F2F2] dark:bg-dark--theme-light absolute flex items-center p-2 justify-between w-40 h-11 border input-border rounded-xl">
+											<span className="flex">
+												<div
+													className="h-6 w-6 p-1.5 rounded-md mr-1"
+													style={{
+														backgroundColor: issues.bgColor ?? 'transparent'
+													}}
+												>
+													{issues.icon ?? <CircleIcon className="w-3 h-3" />}
+												</div>
+												<p>{issues.name}</p>
+											</span>
+											{issues.value && (
+												<div
+													onClick={() =>
+														setIssues({
+															name: 'Issues',
+															icon: null,
+															bgColor: '',
+															value: ''
+														})
+													}
+													className="w-5 h-5 z-10 p-0.5 cursor-pointer"
+												>
+													<XMarkIcon className="w-4 h-4 dark:text-white" />
+												</div>
+											)}
+										</div>
 
-                  <StatusDropdown
-                    taskStatusClassName={'w-40 bg-red-500 h-10 opacity-0'}
-                    showIssueLabels={true}
-                    items={items}
-                    value={issues}
-                    onChange={(e) => {
-                      setIssues(items.find((v) => v.name == e) as TStatusItem);
-                    }}
-                    issueType="issue"
-                  />
-                </div>
-                {/* </div> */}
-                <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
-                  <TaskLabelsDropdown
-                    onValueChange={(_, values) => setLabels(values || [])}
-                    className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
-                    multiple={true}
-                  />
-                </div>
-                <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
-                  <TaskPropertiesDropdown
-                    onValueChange={(_, values) => setPriority(values || [])}
-                    className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
-                    multiple={true}
-                  />
-                </div>
-                <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
-                  <TaskSizesDropdown
-                    onValueChange={(_, values) => setSizes(values || [])}
-                    className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
-                    multiple={true}
-                  />
-                </div>
-                <div className="mt-1">
-                  <Separator />
-                </div>
-                <KanbanSearch
-                  setSearchTasks={setSearchTasks}
-                  searchTasks={searchTasks}
-                />
-              </div>
-            </div>
-            {/* <div className="h-20 w-full bg-red-500/50"></div> */}
-          </Container>
-        </div>
-        <div className="mt-[256px] mb-24 ">
-          {/** TODO:fetch teamtask based on days */}
-          {activeTab && ( // add filter for today, yesterday and tomorrow
-            <div>
-              {Object.keys(data).length > 0 ? (
-                <KanbanView isLoading={isLoading} kanbanBoardTasks={data} />
-              ) : (
-                <KanbanBoardSkeleton />
-              )}
-            </div>
-          )}
-        </div>
-      </MainLayout>
-      <div className="bg-white dark:bg-[#1e2025]  w-screen z-[5000] fixed bottom-0">
-        <Divider />
-        <Footer
-          className={clsxm(
-            ' justify-between w-full px-0  mx-auto',
-            fullWidth ? 'px-8' : 'x-container'
-          )}
-        />
-      </div>
-      <InviteFormModal
-        open={isOpen && !!user?.isEmailVerified}
-        closeModal={closeModal}
-      />
-    </>
-  );
+										<StatusDropdown
+											taskStatusClassName={'w-40 bg-red-500 h-10 opacity-0'}
+											showIssueLabels={true}
+											items={items}
+											value={issues}
+											onChange={(e) => {
+												setIssues(items.find((v) => v.name == e) as TStatusItem);
+											}}
+											issueType="issue"
+										/>
+									</div>
+									{/* </div> */}
+									<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
+										<TaskLabelsDropdown
+											onValueChange={(_, values) => setLabels(values || [])}
+											className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
+											multiple={true}
+										/>
+									</div>
+									<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
+										<TaskPropertiesDropdown
+											onValueChange={(_, values) => setPriority(values || [])}
+											className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
+											multiple={true}
+										/>
+									</div>
+									<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
+										<TaskSizesDropdown
+											onValueChange={(_, values) => setSizes(values || [])}
+											className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
+											multiple={true}
+										/>
+									</div>
+									<div className="mt-1">
+										<Separator />
+									</div>
+									<KanbanSearch setSearchTasks={setSearchTasks} searchTasks={searchTasks} />
+								</div>
+							</div>
+							{/* <div className="w-full h-20 bg-red-500/50"></div> */}
+						</Container>
+					</div>
+				}
+			>
+				{/** TODO:fetch teamtask based on days */}
+				<div className="pt-10">
+					{activeTab &&
+						(Object.keys(data).length > 0 ? (
+							<KanbanView isLoading={isLoading} kanbanBoardTasks={data} />
+						) : (
+							// add filter for today, yesterday and tomorrow
+							<div className="flex flex-col flex-1 w-full h-full">
+								<KanbanBoardSkeleton />
+							</div>
+						))}
+				</div>
+			</MainLayout>
+			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
+		</>
+	);
 };
 
 export default withAuthentication(Kanban, { displayName: 'Kanban' });
diff --git a/apps/web/app/[locale]/layout.tsx b/apps/web/app/[locale]/layout.tsx
index 8efdc3b8e..8dd5ce0ce 100644
--- a/apps/web/app/[locale]/layout.tsx
+++ b/apps/web/app/[locale]/layout.tsx
@@ -130,7 +130,11 @@ const LocaleLayout = ({ children, params: { locale }, pageProps }: PropsWithChil
 			</head> */}
 			<NextIntlClientProvider locale={locale} messages={messages} timeZone="Asia/Kolkata">
 				<PHProvider>
-					<body className={clsx('flex h-full flex-col overflow-x-hidden min-w-fit w-full dark:bg-[#191A20]')}>
+					<body
+						className={clsx(
+							'flex h-full flex-col overflow-x-hidden min-w-fit w-full dark:!bg-[#191A20] !bg-gray-100'
+						)}
+					>
 						<PostHogPageView />
 
 						<NextAuthSessionProvider>
diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
index febc94842..68f697eed 100644
--- a/apps/web/app/[locale]/page-component.tsx
+++ b/apps/web/app/[locale]/page-component.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 
 'use client';
-
 import React, { useEffect, useState } from 'react';
 import { useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
@@ -29,12 +28,11 @@ import { headerTabs } from '@app/stores/header-tabs';
 import { usePathname } from 'next/navigation';
 import { PeoplesIcon } from 'assets/svg';
 import TeamMemberHeader from 'lib/features/team-member-header';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@components/ui/resizable';
 import { TeamOutstandingNotifications } from 'lib/features/team/team-outstanding-notifications';
 
 function MainPage() {
 	const t = useTranslations();
-	const [headerSize, setHeaderSize] = useState(10);
+	const [headerSize] = useState(10);
 	const { isTeamMember, isTrackingEnabled, activeTeam } = useOrganizationTeams();
 	const [fullWidth, setFullWidth] = useAtom(fullWidthState);
 	const [view, setView] = useAtom(headerTabs);
@@ -67,63 +65,40 @@ function MainPage() {
 				<MainLayout
 					showTimer={headerSize <= 11.8 && isTrackingEnabled}
 					className="h-full"
-					footerClassName={clsxm('')}
-				>
-					<ChatwootWidget />
-
-					<div className="h-full ">
-						<ResizablePanelGroup direction="vertical">
-							{/* <Container className="mx-0 " fullWidth={fullWidth}> */}
-
-							<ResizablePanel
-								defaultSize={30}
-								maxSize={48}
-								className={clsxm(
-									headerSize < 20 ? '!overflow-hidden ' : '!overflow-visible',
-									'dark:bg-dark-high border-b-[0.125rem] dark:border-[#26272C]'
-								)}
-								onResize={(size) => setHeaderSize(size)}
-							>
-								<div className="sticky z-40 bg-white dark:bg-dark-high">
-									<div className={clsxm('bg-white dark:bg-dark-high ', !fullWidth && 'x-container')}>
-										<div className="mx-8-container pt-6 !px-0 flex flex-row items-start justify-between ">
-											<div className="flex items-center justify-center h-10 gap-8">
-												<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
-
-												<Breadcrumb paths={breadcrumb} className="text-sm" />
-											</div>
-
-											<div className="flex items-center justify-center h-10 gap-1 w-max">
-												<HeaderTabs linkAll={false} />
-											</div>
-										</div>
+					mainHeaderSlot={
+						<div className="sticky z-40 bg-white dark:bg-dark-high">
+							<div className={clsxm('bg-white dark:bg-dark-high ', !fullWidth && 'x-container')}>
+								<div className="mx-8-container mt-7 !px-0 flex flex-row items-start justify-between ">
+									<div className="flex items-center justify-center h-10 gap-8">
+										<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
+
+										<Breadcrumb paths={breadcrumb} className="text-sm" />
+									</div>
 
-										<div className="mb-1 mx-8-container">
-											<div className="w-full mt-3">
-												<UnverifiedEmail />
+									<div className="flex items-center justify-center h-10 gap-1 w-max">
+										<HeaderTabs linkAll={false} />
+									</div>
+								</div>
 
-												<TeamInvitations className="!m-0" />
+								<div className="mx-8-container">
+									<div className="w-full">
+										<UnverifiedEmail />
 
-												<TeamOutstandingNotifications />
-											</div>
+										<TeamInvitations className="!m-0" />
 
-											{isTeamMember ? (
-												<TaskTimerSection isTrackingEnabled={isTrackingEnabled} />
-											) : null}
-										</div>
-										<TeamMemberHeader view={view} />
+										<TeamOutstandingNotifications />
 									</div>
-								</div>
-							</ResizablePanel>
-
-							<ResizableHandle withHandle />
 
-							{/* </Container> */}
-							<ResizablePanel defaultSize={65} maxSize={95} className="!overflow-y-auto custom-scrollbar">
-								{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}
-							</ResizablePanel>
-						</ResizablePanelGroup>
-					</div>
+									{isTeamMember ? <TaskTimerSection isTrackingEnabled={isTrackingEnabled} /> : null}
+								</div>
+								<TeamMemberHeader view={view} />
+							</div>
+						</div>
+					}
+					footerClassName={clsxm('')}
+				>
+					<ChatwootWidget />
+					<div className="h-full ">{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}</div>
 				</MainLayout>
 			</div>
 			<Analytics />
@@ -131,19 +106,19 @@ function MainPage() {
 	);
 }
 
-function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean }) {
+function TaskTimerSection({ isTrackingEnabled }: Readonly<{ isTrackingEnabled: boolean }>) {
 	const [showInput, setShowInput] = React.useState(false);
 	return (
 		<Card
 			shadow="bigger"
 			className={clsxm(
-				'w-full flex lg:flex-row flex-col-reverse justify-center md:justify-between items-center py-4',
+				'w-full flex lg:flex-row gap-4 lg:gap-5 xl:gap-8 max-w-full flex-col-reverse justify-center md:justify-between items-center py-4 mb-2',
 				'border-[#00000008]  border-[0.125rem] dark:border-[#26272C] dark:shadow-lg dark:bg-[#1B1D22]'
 			)}
 		>
 			<AuthUserTaskInput
 				className={clsxm(
-					'mx-auto w-full lg:w-3/4 lg:mr-10',
+					'w-full lg:basis-3/4 grow',
 					!showInput && '!hidden md:!flex',
 					!isTrackingEnabled && 'md:w-full'
 				)}
@@ -157,7 +132,7 @@ function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean })
 				</ChevronDown>
 			</div>
 			{isTrackingEnabled ? (
-				<div className="w-full lg:w-1/4">
+				<div className="w-full max-w-fit lg:basis-1/4 grow">
 					<Timer />
 				</div>
 			) : null}
diff --git a/apps/web/app/[locale]/profile/[memberId]/page.tsx b/apps/web/app/[locale]/profile/[memberId]/page.tsx
index c3d41d65c..690ee558d 100644
--- a/apps/web/app/[locale]/profile/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/profile/[memberId]/page.tsx
@@ -17,7 +17,6 @@ import { ScreenshootTab } from 'lib/features/activity/screenshoots';
 import { AppsTab } from 'lib/features/activity/apps';
 import { VisitedSitesTab } from 'lib/features/activity/visited-sites';
 import { activityTypeState } from '@app/stores/activity-type';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@components/ui/resizable';
 import { UserProfileDetail } from './components/UserProfileDetail';
 import { cn } from 'lib/utils';
 // import { ActivityCalendar } from 'lib/features/activity/calendar';
@@ -26,7 +25,7 @@ export type FilterTab = 'Tasks' | 'Screenshots' | 'Apps' | 'Visited Sites';
 
 const Profile = React.memo(function ProfilePage({ params }: { params: { memberId: string } }) {
 	const profile = useUserProfilePage();
-	const [headerSize, setHeaderSize] = useState(10);
+	const [headerSize] = useState(10);
 	const { user } = useAuthenticateUser();
 	const { isTrackingEnabled, activeTeam, activeTeamManagers } = useOrganizationTeams();
 	const members = activeTeam?.members;
@@ -115,79 +114,71 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
 	}
 
 	return (
-		<MainLayout showTimer={(headerSize <= 11.8 && isTrackingEnabled) || !profileIsAuthUser}>
-			<ResizablePanelGroup direction="vertical">
-				<ResizablePanel
-					defaultSize={30}
-					maxSize={48}
-					className={cn(headerSize < 20 ? '!overflow-hidden' : '!overflow-visible')}
-					onResize={(size) => setHeaderSize(size)}
-				>
-					<MainHeader fullWidth={fullWidth} className={cn(hookFilterType && ['pb-0'], 'pb-2 !-mt-12')}>
-						<div className="w-full space-y-4">
-							{/* Breadcrumb */}
-							<div className="flex  items-center gap-8">
-								<Link href="/">
-									<ArrowLeftIcon className="w-6 h-6" />
-								</Link>
-
-								<Breadcrumb paths={breadcrumb} className="text-sm" />
-							</div>
+		<MainLayout
+			showTimer={(headerSize <= 11.8 && isTrackingEnabled) || !profileIsAuthUser}
+			mainHeaderSlot={
+				<MainHeader fullWidth={fullWidth} className={cn(hookFilterType && ['pb-0'], '!pt-14')}>
+					<div className="w-full space-y-4">
+						{/* Breadcrumb */}
+						<div className="flex items-center gap-8">
+							<Link href="/">
+								<ArrowLeftIcon className="w-6 h-6" />
+							</Link>
+
+							<Breadcrumb paths={breadcrumb} className="text-sm" />
+						</div>
 
-							{/* User Profile Detail */}
-							<div className="flex flex-col items-center justify-between md:flex-row">
-								<UserProfileDetail member={profile.member} />
-
-								{profileIsAuthUser && isTrackingEnabled && (
-									<Timer
-										className={cn(
-											'p-5 rounded-2xl shadow-xlcard',
-											'dark:border-[0.125rem] dark:border-[#28292F]',
-											'dark:bg-[#1B1D22]'
-										)}
-									/>
-								)}
-							</div>
-							{/* TaskFilter */}
-							<TaskFilter profile={profile} hook={hook} />
+						{/* User Profile Detail */}
+						<div className="flex flex-col items-center justify-between md:flex-row">
+							<UserProfileDetail member={profile.member} />
+
+							{profileIsAuthUser && isTrackingEnabled && (
+								<Timer
+									className={cn(
+										'p-5 rounded-2xl shadow-xlcard',
+										'dark:border-[0.125rem] dark:border-[#28292F]',
+										'dark:bg-[#1B1D22]'
+									)}
+								/>
+							)}
 						</div>
-					</MainHeader>
-					{/* <div className="p-1">
+						{/* TaskFilter */}
+						<TaskFilter profile={profile} hook={hook} />
+					</div>
+				</MainHeader>
+			}
+		>
+			{/* <div className="p-1">
 								<ActivityCalendar />
 							</div> */}
-				</ResizablePanel>
-				<ResizableHandle withHandle />
-				<ResizablePanel defaultSize={65} maxSize={95} className="!overflow-y-auto custom-scrollbar">
-					{hook.tab == 'worked' && canSeeActivity && (
-						<Container fullWidth={fullWidth} className="py-8">
-							<div className={cn('flex justify-start items-center gap-4 mt-3')}>
-								{Object.keys(activityScreens).map((filter, i) => (
-									<div key={i} className="flex items-center justify-start gap-4 cursor-pointer">
-										{i !== 0 && <VerticalSeparator />}
-										<div
-											className={cn(
-												'text-gray-500',
-												activityFilter == filter && 'text-black dark:text-white'
-											)}
-											onClick={() => changeActivityFilter(filter as FilterTab)}
-										>
-											{filter}
-										</div>
-									</div>
-								))}
+			{hook.tab == 'worked' && canSeeActivity && (
+				<Container fullWidth={fullWidth} className="py-8">
+					<div className={cn('flex justify-start items-center gap-4 mt-3')}>
+						{Object.keys(activityScreens).map((filter, i) => (
+							<div key={i} className="flex items-center justify-start gap-4 cursor-pointer">
+								{i !== 0 && <VerticalSeparator />}
+								<div
+									className={cn(
+										'text-gray-500',
+										activityFilter == filter && 'text-black dark:text-white'
+									)}
+									onClick={() => changeActivityFilter(filter as FilterTab)}
+								>
+									{filter}
+								</div>
 							</div>
-						</Container>
-					)}
-
-					<Container fullWidth={fullWidth} className="mb-10 -mt-6">
-						{hook.tab !== 'worked' || activityFilter == 'Tasks' ? (
-							<UserProfileTask profile={profile} tabFiltered={hook} paginateTasks={true} />
-						) : (
-							activityScreens[activityFilter] ?? null
-						)}
-					</Container>
-				</ResizablePanel>
-			</ResizablePanelGroup>
+						))}
+					</div>
+				</Container>
+			)}
+
+			<Container fullWidth={fullWidth} className="mb-10 -mt-6">
+				{hook.tab !== 'worked' || activityFilter == 'Tasks' ? (
+					<UserProfileTask profile={profile} tabFiltered={hook} paginateTasks={true} />
+				) : (
+					activityScreens[activityFilter] ?? null
+				)}
+			</Container>
 		</MainLayout>
 	);
 });
diff --git a/apps/web/app/[locale]/settings/layout.tsx b/apps/web/app/[locale]/settings/layout.tsx
index 232661884..7ef2e1df6 100644
--- a/apps/web/app/[locale]/settings/layout.tsx
+++ b/apps/web/app/[locale]/settings/layout.tsx
@@ -9,59 +9,57 @@ import { LeftSideSettingMenu } from 'lib/settings';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useAtom, useAtomValue } from 'jotai';
-import { clsxm } from '@app/utils';
 import { withAuthentication } from 'lib/app/authenticator';
 import { usePathname } from 'next/navigation';
 import { useOrganizationTeams } from '@app/hooks';
+import { cn } from '@/lib/utils';
 
 const SettingsLayout = ({ children }: { children: JSX.Element }) => {
-  const { isTrackingEnabled } = useOrganizationTeams();
-  const t = useTranslations();
-  const [user] = useAtom(userState);
-  const fullWidth = useAtomValue(fullWidthState);
-  const pathName = usePathname();
-  const getEndPath: any = pathName?.split('settings/')[1];
-  const endWord: 'TEAM' | 'PERSONAL' = getEndPath?.toUpperCase();
-  const breadcrumb = [
-    { title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
-    { title: t('common.SETTINGS'), href: pathName as string },
-    { title: t(`common.${endWord}`), href: pathName as string }
-  ];
+	const { isTrackingEnabled } = useOrganizationTeams();
+	const t = useTranslations();
+	const [user] = useAtom(userState);
+	const fullWidth = useAtomValue(fullWidthState);
+	const pathName = usePathname();
+	const getEndPath: any = pathName?.split('settings/')[1];
+	const endWord: 'TEAM' | 'PERSONAL' = getEndPath?.toUpperCase();
+	const breadcrumb = [
+		{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+		{ title: t('common.SETTINGS'), href: pathName as string },
+		{ title: t(`common.${endWord}`), href: pathName as string }
+	];
 
-  if (!user) {
-    return <SettingsPersonalSkeleton />;
-  } else {
-    return (
-      <MainLayout
-        showTimer={isTrackingEnabled}
-        className="items-start pb-1 overflow-hidden w-full"
-        childrenClassName="h-[calc(100vh-_300px)] overflow-hidden w-full"
-      >
-        <div className="py-10 w-full bg-white dark:bg-dark--theme">
-          <Container
-            fullWidth={fullWidth}
-            className={clsxm(
-              'w-full mt-4 flex flex-row items-center justify-start gap-8'
-            )}
-          >
-            <Link href="/">
-              <ArrowLeftIcon className="w-6 h-6" />
-            </Link>
+	if (!user) {
+		return <SettingsPersonalSkeleton />;
+	} else {
+		return (
+			<MainLayout
+				showTimer={isTrackingEnabled}
+				className="items-start w-full pb-1 overflow-hidden"
+				childrenClassName="h-[calc(100vh-_300px)] overflow-hidden w-full !min-h-fit"
+				mainHeaderSlot={
+					<div className="w-full py-6 bg-white dark:bg-dark--theme">
+						<Container
+							fullWidth={fullWidth}
+							className={cn('w-full flex flex-row items-center justify-start gap-8')}
+						>
+							<Link href="/">
+								<ArrowLeftIcon className="w-6 h-6" />
+							</Link>
 
-            <Breadcrumb paths={breadcrumb} className="text-sm" />
-          </Container>
-        </div>
-        <Container fullWidth={fullWidth} className={clsxm('!p-0')}>
-          <div className="flex">
-            <LeftSideSettingMenu />
-            <div className="h-[calc(100vh-_291px)] mt-3 p-10 overflow-y-auto  w-full">
-              {children}
-            </div>
-          </div>
-        </Container>
-      </MainLayout>
-    );
-  }
+							<Breadcrumb paths={breadcrumb} className="text-sm" />
+						</Container>
+					</div>
+				}
+			>
+				<Container fullWidth={fullWidth} className={cn('!p-0 w-full')}>
+					<div className="flex w-full">
+						<LeftSideSettingMenu />
+						<div className="h-[calc(100svh-_291px)] mt-3 px-5 overflow-y-auto w-full">{children}</div>
+					</div>
+				</Container>
+			</MainLayout>
+		);
+	}
 };
 
 export default withAuthentication(SettingsLayout, { displayName: 'Settings' });
diff --git a/apps/web/app/[locale]/settings/personal/page.tsx b/apps/web/app/[locale]/settings/personal/page.tsx
index 4a2585354..63bb4889d 100644
--- a/apps/web/app/[locale]/settings/personal/page.tsx
+++ b/apps/web/app/[locale]/settings/personal/page.tsx
@@ -11,15 +11,15 @@ const Personal = () => {
 	const t = useTranslations();
 
 	return (
-		<div className="overflow-auto pb-16">
+		<div className="pb-16 overflow-auto">
 			<Link href={'/settings/team'} className="w-full">
-				<button className="w-full lg:hidden hover:bg-white rounded-xl border border-dark text-dark p-4 mt-2">
+				<button className="w-full p-4 mt-2 border lg:hidden hover:bg-white rounded-xl border-dark text-dark">
 					Go to Team settings
 				</button>
 			</Link>
 			<Accordian
 				title={t('pages.settingsPersonal.HEADING_TITLE')}
-				className="w-full max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
+				className="w-full max-w-[96vw] p-4 mt-5 dark:bg-dark--theme"
 				id="general"
 			>
 				{/* <Text className="text-base font-normal text-center text-gray-400 sm:text-left">
@@ -38,7 +38,6 @@ const Personal = () => {
 			<Accordian
 				title={t('pages.settings.DANDER_ZONE')}
 				className="p-4 mt-4 dark:bg-dark--theme"
-				isDanger={true}
 				id="danger-zone"
 			>
 				<DangerZone />
diff --git a/apps/web/app/[locale]/task/[id]/component.tsx b/apps/web/app/[locale]/task/[id]/component.tsx
index 4883d3600..46cea2009 100644
--- a/apps/web/app/[locale]/task/[id]/component.tsx
+++ b/apps/web/app/[locale]/task/[id]/component.tsx
@@ -22,9 +22,9 @@ interface ITaskDetailsComponentProps {
 export function TaskDetailsComponent(props: ITaskDetailsComponentProps) {
 	const { task } = props;
 	return (
-		<div className="flex flex-col w-full min-h-screen pt-5">
+		<div className="flex flex-col w-full min-h-screen">
 			<section className="flex flex-col justify-between lg:flex-row lg:items-start 3xl:gap-8">
-				<section className="md:mr-5 max-w-[57rem] 3xl:max-w-none xl:w-full mb-4 md:mb-0">
+				<section className="md:max-w-[57rem] w-full 3xl:max-w-none xl:w-full mb-4 md:mb-0">
 					<TaskTitleBlock />
 
 					<div className="bg-[#F9F9F9] dark:bg-dark--theme-light p-2 md:p-6 pt-0 flex flex-col gap-8 rounded-sm">
diff --git a/apps/web/app/[locale]/task/[id]/page.tsx b/apps/web/app/[locale]/task/[id]/page.tsx
index 44335da0e..2b0651f14 100644
--- a/apps/web/app/[locale]/task/[id]/page.tsx
+++ b/apps/web/app/[locale]/task/[id]/page.tsx
@@ -1,10 +1,6 @@
 'use client';
 
-import {
-  useOrganizationTeams,
-  useTeamTasks,
-  useUserProfilePage
-} from '@app/hooks';
+import { useOrganizationTeams, useTeamTasks, useUserProfilePage } from '@app/hooks';
 import { withAuthentication } from 'lib/app/authenticator';
 import { Breadcrumb, Container } from 'lib/components';
 import { ArrowLeftIcon } from 'assets/svg';
@@ -18,72 +14,66 @@ import { useAtomValue } from 'jotai';
 import { TaskDetailsComponent } from './component';
 
 const TaskDetails = () => {
-  const profile = useUserProfilePage();
-  const t = useTranslations();
-  const router = useRouter();
-  const params = useParams();
-  const { isTrackingEnabled, activeTeam } = useOrganizationTeams();
-  const {
-    getTaskById,
-    detailedTask: task,
-    getTasksByIdLoading
-  } = useTeamTasks();
-  const fullWidth = useAtomValue(fullWidthState);
+	const profile = useUserProfilePage();
+	const t = useTranslations();
+	const router = useRouter();
+	const params = useParams();
+	const { isTrackingEnabled, activeTeam } = useOrganizationTeams();
+	const { getTaskById, detailedTask: task, getTasksByIdLoading } = useTeamTasks();
+	const fullWidth = useAtomValue(fullWidthState);
 
-  const id = params?.id;
+	const id = params?.id;
 
-  const breadcrumb = [
-    { title: activeTeam?.name || '', href: '/' },
-    {
-      title: JSON.parse(t('pages.taskDetails.BREADCRUMB')),
-      href: `/task/${id}`
-    }
-  ];
+	const breadcrumb = [
+		{ title: activeTeam?.name || '', href: '/' },
+		{
+			title: JSON.parse(t('pages.taskDetails.BREADCRUMB')),
+			href: `/task/${id}`
+		}
+	];
 
-  useEffect(() => {
-    if (
-      router &&
-      // If id is passed in query param
-      id &&
-      // Either no task or task id doesn't match query id
-      (!task || (task && task.id !== id)) &&
-      !getTasksByIdLoading
-    ) {
-      getTaskById(id as string);
-    }
-  }, [getTaskById, router, task, getTasksByIdLoading, id]);
+	useEffect(() => {
+		if (
+			router &&
+			// If id is passed in query param
+			id &&
+			// Either no task or task id doesn't match query id
+			(!task || (task && task.id !== id)) &&
+			!getTasksByIdLoading
+		) {
+			getTaskById(id as string);
+		}
+	}, [getTaskById, router, task, getTasksByIdLoading, id]);
 
-  return (
-    <MainLayout
-      showTimer={!profile.isAuthUser && isTrackingEnabled}
-      childrenClassName="bg-white dark:bg-dark--theme"
-    >
-      <div
-        ref={profile.loadTaskStatsIObserverRef}
-        className="pt-20 pb-4 -mt-8 bg-white dark:bg-dark--theme"
-      >
-        <Container fullWidth={fullWidth}>
-          <div className="flex items-center gap-8">
-            <span
-              className="cursor-pointer"
-              onClick={() => {
-                router.replace('/');
-              }}
-            >
-              <ArrowLeftIcon className="w-6 h-6" />
-            </span>
+	return (
+		<MainLayout
+			showTimer={!profile.isAuthUser && isTrackingEnabled}
+			childrenClassName="bg-white dark:bg-dark--theme"
+			mainHeaderSlot={
+				<div ref={profile.loadTaskStatsIObserverRef} className="py-5 bg-white dark:bg-dark--theme">
+					<Container fullWidth={fullWidth}>
+						<div className="flex items-center gap-8">
+							<span
+								className="cursor-pointer"
+								onClick={() => {
+									router.replace('/');
+								}}
+							>
+								<ArrowLeftIcon className="w-6 h-6" />
+							</span>
 
-            <Breadcrumb paths={breadcrumb} className="text-sm" />
-          </div>
-        </Container>
-      </div>
-
-      <Container fullWidth={fullWidth} className="mb-10">
-        {task && <TaskDetailsComponent task={task} />}
-        {/* <IssueModal task={task} /> */}
-      </Container>
-    </MainLayout>
-  );
+							<Breadcrumb paths={breadcrumb} className="text-sm" />
+						</div>
+					</Container>
+				</div>
+			}
+		>
+			<Container fullWidth={fullWidth} className="mt-6 mb-10">
+				{task && <TaskDetailsComponent task={task} />}
+				{/* <IssueModal task={task} /> */}
+			</Container>
+		</MainLayout>
+	);
 };
 
 export default withAuthentication(TaskDetails, { displayName: 'TaskDetails' });
diff --git a/apps/web/app/[locale]/team/tasks/page.tsx b/apps/web/app/[locale]/team/tasks/page.tsx
index db1844d68..33cb32f28 100644
--- a/apps/web/app/[locale]/team/tasks/page.tsx
+++ b/apps/web/app/[locale]/team/tasks/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Breadcrumb, Container } from 'lib/components';
+import { Breadcrumb, Container, Paginate } from 'lib/components';
 import { MainLayout } from 'lib/layout';
 import { useParams } from 'next/navigation';
 import { useMemo } from 'react';
@@ -7,10 +7,21 @@ import { useTranslations } from 'next-intl';
 import { useAtomValue } from 'jotai';
 
 import { fullWidthState } from '@app/stores/fullWidth';
-import { TaskTable } from '@components/pages/team/tasks/TaskTable';
 
-import { useOrganizationTeams } from '@app/hooks';
+import { useOrganizationTeams, useTeamTasks } from '@app/hooks';
 import { withAuthentication } from '@/lib/app/authenticator';
+import { ITeamTask } from '@/app/interfaces';
+
+import { getCoreRowModel, getFilteredRowModel, useReactTable } from '@tanstack/react-table';
+import StatusBadge from '@components/pages/team/tasks/StatusBadge';
+import { getStatusColor } from '@/lib/utils';
+import FilterButton from '@components/pages/team/tasks/FilterButton';
+import { Input } from '@components/ui/input';
+import { Search } from 'lucide-react';
+import { Button } from '@components/ui/button';
+import { TaskTable } from '@components/pages/team/tasks/TaskTable';
+import { columns } from '@components/pages/team/tasks/columns';
+import { usePagination } from '@/app/hooks/features/usePagination';
 const TeamTask = () => {
 	const t = useTranslations();
 	const params = useParams<{ locale: string }>();
@@ -23,15 +34,113 @@ const TeamTask = () => {
 			{ title: activeTeam?.name || '', href: '/' },
 			{ title: "Team's Task", href: `/${currentLocale}/team/task` }
 		],
-		[activeTeam?.name, currentLocale]
+		[activeTeam?.name, currentLocale, t]
 	);
 
+	const { tasks } = useTeamTasks();
+
+	const { total, onPageChange, itemsPerPage, itemOffset, endOffset, setItemsPerPage, currentItems } =
+		usePagination<ITeamTask>(tasks);
+	const table = useReactTable<ITeamTask>({
+		data: currentItems,
+		columns,
+
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel()
+	});
+
 	return (
-		<MainLayout childrenClassName="bg-white dark:bg-dark--theme">
-			<Container fullWidth={fullWidth} className="mt-16">
-				<Breadcrumb paths={breadcrumbPath} className="text-sm  mb-10" />
-				<TaskTable />
-			</Container>
+		<MainLayout
+			mainHeaderSlot={
+				<Container fullWidth={fullWidth} className="mt-5">
+					<Breadcrumb paths={breadcrumbPath} className="mb-5 text-sm" />
+
+					<div className="flex flex-col my-4 leading-snug">
+						<div className="flex flex-wrap items-center justify-between w-full gap-10 max-md:max-w-full">
+							<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">
+									<div className="flex items-start self-stretch gap-1 my-auto">
+										{Array.from(new Set(currentItems.map((status) => status.status))).map(
+											(taskStatus, index) => (
+												<StatusBadge
+													key={index}
+													color={getStatusColor(taskStatus)}
+													label={taskStatus.split('-').join(' ')}
+													count={tasks.filter((item) => item.status === taskStatus).length}
+												/>
+											)
+										)}
+									</div>
+								</div>
+								<FilterButton table={table} />
+								<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 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"
+								>
+									<svg
+										className="w-4 h-4"
+										width={24}
+										height={24}
+										viewBox="0 0 24 24"
+										fill="none"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path
+											d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10Z"
+											stroke="currentColor"
+											strokeWidth="1.3"
+										/>
+										<path
+											d="M19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10Z"
+											stroke="currentColor"
+											strokeWidth="1.3"
+										/>
+										<path
+											d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
+											stroke="currentColor"
+											strokeWidth="1.3"
+										/>
+									</svg>
+								</Button>
+							</nav>
+						</div>
+					</div>
+				</Container>
+			}
+			childrenClassName="bg-white dark:bg-dark--theme"
+		>
+			<div className="flex flex-col w-full min-h-full p-4 pt-6">
+				<TaskTable currentItems={currentItems} />
+
+				<Paginate
+					total={total}
+					onPageChange={onPageChange}
+					pageCount={1} // Set Static to 1 - It will be calculated dynamically in Paginate component
+					itemsPerPage={itemsPerPage}
+					itemOffset={itemOffset}
+					endOffset={endOffset}
+					setItemsPerPage={setItemsPerPage}
+					className="mt-auto"
+				/>
+			</div>
 		</MainLayout>
 	);
 };
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
index 3dffdc1b5..1828d9a9b 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
@@ -1,231 +1,231 @@
-import { Button, Modal, statusColor } from "@/lib/components";
-import { IoMdArrowDropdown } from "react-icons/io";
-import { FaRegClock } from "react-icons/fa";
-import { DatePickerFilter } from "./TimesheetFilterDate";
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { clsxm } from "@/app/utils";
-import { Item, ManageOrMemberComponent, getNestedValue } from "@/lib/features/manual-time/manage-member-component";
-import { useTeamTasks } from "@/app/hooks";
-import { CustomSelect } from "@/lib/features";
-import { statusTable } from "./TimesheetAction";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Button, Modal, statusColor } from '@/lib/components';
+import { IoMdArrowDropdown } from 'react-icons/io';
+import { FaRegClock } from 'react-icons/fa';
+import { DatePickerFilter } from './TimesheetFilterDate';
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { clsxm } from '@/app/utils';
+import { Item, ManageOrMemberComponent, getNestedValue } from '@/lib/features/manual-time/manage-member-component';
+import { useTeamTasks } from '@/app/hooks';
+import { CustomSelect } from '@/lib/features';
+import { statusTable } from './TimesheetAction';
 
 export interface IEditTaskModalProps {
-    isOpen: boolean;
-    closeModal: () => void;
-
+	isOpen: boolean;
+	closeModal: () => void;
 }
 export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {
-    const { activeTeam } = useTeamTasks();
-    const t = useTranslations();
-    const [dateRange, setDateRange] = useState<{ from: Date | null }>({
-        from: new Date(),
-    });
-    const [endTime, setEndTime] = useState<string>('');
-    const [startTime, setStartTime] = useState<string>('');
-    const [isBillable, setIsBillable] = useState<boolean>(false);
-    const [notes, setNotes] = useState('');
-    const memberItemsLists = {
-        Project: activeTeam?.projects as [],
-    };
-    const handleSelectedValuesChange = (values: { [key: string]: Item | null }) => {
-        // Handle value changes
-    };
-    const selectedValues = {
-        Teams: null,
-    };
-
-    const handleChange = (field: string, selectedItem: Item | null) => {
-        // Handle field changes
-    };
-
-    const fields = [
-        {
-            label: 'Project',
-            placeholder: 'Select a project',
-            isRequired: true,
-            valueKey: 'id',
-            displayKey: 'name',
-            element: 'Project'
-        },
-    ];
-
-    const handleFromChange = (fromDate: Date | null) => {
-        setDateRange((prev) => ({ ...prev, from: fromDate }));
-    };
-    return (
-        <Modal
-            closeModal={closeModal}
-            isOpen={isOpen}
-            showCloseIcon
-            title={'Edit Task'}
-            className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[30rem] justify-start h-[auto]"
-            titleClass="font-bold">
-            <div className="flex flex-col w-full">
-                <div className="flex flex-col border-b border-b-slate-100 dark:border-b-gray-700">
-                    <span> #321 Spike for creating calendar views on mobile</span>
-                    <div className="flex items-center gap-x-1 ">
-                        <span className="text-gray-400">for</span>
-                        <span className="text-primary dark:text-primary-light">Savannah Nguyen </span>
-                        <IoMdArrowDropdown className="cursor-pointer" />
-                    </div>
-                </div>
-                <div className="flex items-start flex-col justify-center gap-4">
-                    <div>
-                        <span>Task Time</span>
-                        <div className="flex items-center gap-x-2 ">
-                            <FaRegClock className="text-[#30B366]" />
-                            <span>08:10h</span>
-                        </div>
-                    </div>
-                    <div className="flex items-center w-full">
-                        <div className=" w-[48%] mr-[4%]">
-                            <label className="block text-gray-500 mb-1">
-                                {t('manualTime.START_TIME')}
-                                <span className="text-[#de5505e1] ml-1">*</span>
-                            </label>
-                            <input
-                                aria-label="Start time"
-                                aria-describedby="start-time-error"
-                                type="time"
-                                value={startTime}
-                                onChange={(e) => setStartTime(e.target.value)}
-                                className="w-full p-1 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md"
-                                required
-                            />
-                        </div>
+	const { activeTeam } = useTeamTasks();
+	const t = useTranslations();
+	const [dateRange, setDateRange] = useState<{ from: Date | null }>({
+		from: new Date()
+	});
+	const [endTime, setEndTime] = useState<string>('');
+	const [startTime, setStartTime] = useState<string>('');
+	const [isBillable, setIsBillable] = useState<boolean>(false);
+	const [notes, setNotes] = useState('');
+	const memberItemsLists = {
+		Project: activeTeam?.projects as []
+	};
+	const handleSelectedValuesChange = (values: { [key: string]: Item | null }) => {
+		// Handle value changes
+	};
+	const selectedValues = {
+		Teams: null
+	};
 
-                        <div className=" w-[48%]">
-                            <label className="block text-gray-500 mb-1">
-                                {t('manualTime.END_TIME')}
-                                <span className="text-[#de5505e1] ml-1">*</span>
-                            </label>
+	const handleChange = (field: string, selectedItem: Item | null) => {
+		// Handle field changes
+	};
 
-                            <input
-                                aria-label="End time"
-                                aria-describedby="end-time-error"
-                                type="time"
-                                value={endTime}
-                                onChange={(e) => setEndTime(e.target.value)}
-                                className="w-full p-1 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md"
-                                required
-                            />
-                        </div>
+	const fields = [
+		{
+			label: 'Project',
+			placeholder: 'Select a project',
+			isRequired: true,
+			valueKey: 'id',
+			displayKey: 'name',
+			element: 'Project'
+		}
+	];
 
-                    </div>
-                    <div>
-                        <span className="block text-gray-500 mr-2">{t("manualTime.DATE")}</span>
-                        <DatePickerFilter
-                            date={dateRange.from}
-                            setDate={handleFromChange}
-                            label="Oct 01 2024"
-                        />
-                    </div>
-                    <div className="w-full flex flex-col">
-                        <ManageOrMemberComponent
-                            fields={fields}
-                            itemsLists={memberItemsLists}
-                            selectedValues={selectedValues}
-                            onSelectedValuesChange={handleSelectedValuesChange}
-                            handleChange={handleChange}
-                            itemToString={(item, displayKey) => getNestedValue(item, displayKey) || ''}
-                            itemToValue={(item, valueKey) => getNestedValue(item, valueKey) || ''}
-                        />
-                    </div>
-                    <div className=" flex flex-col items-center">
-                        <label className="text-gray-500 mr-6 capitalize">{t('pages.timesheet.BILLABLE.BILLABLE')}</label>
-                        <div className="flex items-center gap-3">
-                            <ToggleButton
-                                isActive={isBillable}
-                                onClick={() => setIsBillable(!isBillable)}
-                                label={t('pages.timesheet.BILLABLE.YES')}
-                            />
-                            <ToggleButton
-                                isActive={!isBillable}
-                                onClick={() => setIsBillable(!isBillable)}
-                                label={t('pages.timesheet.BILLABLE.NO')}
-                            />
-                        </div>
-                    </div>
-                    <div className="w-full flex flex-col">
-                        <span>Notes</span>
-                        <textarea
-                            value={notes}
-                            onChange={(e) => setNotes(e.target.value)}
-                            placeholder="Insert notes here..."
-                            className={clsxm(
-                                "bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent",
-                                "placeholder-gray-300 placeholder:font-normal resize-none p-2 grow w-full",
-                                "border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-40",
-                                notes.trim().length === 0 && "border-red-500"
-                            )}
-                            maxLength={120}
-                            minLength={0}
-                            aria-label="Insert notes here"
-                            required
-                        />
-                        <div className="text-sm text-gray-500 text-right">
-                            {notes.length}/{120}
-                        </div>
-                    </div>
-                    <div className="border-t border-t-gray-200 dark:border-t-gray-700 w-full"></div>
-                    <div className="flex items-center justify-between gap-2 ">
-                        <div className="flex flex-col items-start justify-center">
-                            <CustomSelect
-                                options={statusTable?.flatMap((status) => status.label)}
-                                renderOption={(option) => (
-                                    <div className="flex items-center gap-x-2">
-                                        <div className={clsxm("p-2 rounded-full", statusColor(option).bg)}></div>
-                                        <span className={clsxm("ml-1", statusColor(option).text,)}>{option}</span>
-                                    </div>
-                                )}
-                            />
-                        </div>
-                        <div className="flex items-center gap-x-2">
-                            <Button
-                                variant="outline"
-                                type="button"
-                                className={clsxm("dark:text-primary h-[2.3rem] border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
-                                {t('common.CANCEL')}
-                            </Button>
+	const handleFromChange = (fromDate: Date | null) => {
+		setDateRange((prev) => ({ ...prev, from: fromDate }));
+	};
+	return (
+		<Modal
+			closeModal={closeModal}
+			isOpen={isOpen}
+			showCloseIcon
+			title={'Edit Task'}
+			className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[30rem] justify-start h-[auto]"
+			titleClass="font-bold"
+		>
+			<div className="flex flex-col w-full">
+				<div className="flex flex-col border-b border-b-slate-100 dark:border-b-gray-700">
+					<span> #321 Spike for creating calendar views on mobile</span>
+					<div className="flex items-center gap-x-1 ">
+						<span className="text-gray-400">for</span>
+						<span className="text-primary dark:text-primary-light">Savannah Nguyen </span>
+						<IoMdArrowDropdown className="cursor-pointer" />
+					</div>
+				</div>
+				<div className="flex items-start flex-col justify-center gap-4">
+					<div>
+						<span>Task Time</span>
+						<div className="flex items-center gap-x-2 ">
+							<FaRegClock className="text-[#30B366]" />
+							<span>08:10h</span>
+						</div>
+					</div>
+					<div className="flex items-center w-full">
+						<div className=" w-[48%] mr-[4%]">
+							<label className="block text-gray-500 mb-1">
+								{t('manualTime.START_TIME')}
+								<span className="text-[#de5505e1] ml-1">*</span>
+							</label>
+							<input
+								aria-label="Start time"
+								aria-describedby="start-time-error"
+								type="time"
+								value={startTime}
+								onChange={(e) => setStartTime(e.target.value)}
+								className="w-full p-1 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md"
+								required
+							/>
+						</div>
 
-                            <Button
-                                type="submit"
-                                className={clsxm(
-                                    'bg-[#3826A6] h-[2.3rem] font-normal flex items-center text-white',
-                                )}
-                            >
-                                {t('common.SAVE')}
-                            </Button>
-                        </div>
+						<div className=" w-[48%]">
+							<label className="block text-gray-500 mb-1">
+								{t('manualTime.END_TIME')}
+								<span className="text-[#de5505e1] ml-1">*</span>
+							</label>
 
-                    </div>
-                </div>
-            </div>
+							<input
+								aria-label="End time"
+								aria-describedby="end-time-error"
+								type="time"
+								value={endTime}
+								onChange={(e) => setEndTime(e.target.value)}
+								className="w-full p-1 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md"
+								required
+							/>
+						</div>
+					</div>
+					<div>
+						<span className="block text-gray-500 mr-2">{t('manualTime.DATE')}</span>
+						<DatePickerFilter date={dateRange.from} setDate={handleFromChange} label="Oct 01 2024" />
+					</div>
+					<div className="w-full flex flex-col">
+						<ManageOrMemberComponent
+							fields={fields}
+							itemsLists={memberItemsLists}
+							selectedValues={selectedValues}
+							onSelectedValuesChange={handleSelectedValuesChange}
+							handleChange={handleChange}
+							itemToString={(item, displayKey) => getNestedValue(item, displayKey) || ''}
+							itemToValue={(item, valueKey) => getNestedValue(item, valueKey) || ''}
+						/>
+					</div>
+					<div className=" flex flex-col items-center">
+						<label className="text-gray-500 mr-6 capitalize">
+							{t('pages.timesheet.BILLABLE.BILLABLE')}
+						</label>
+						<div className="flex items-center gap-3">
+							<ToggleButton
+								isActive={isBillable}
+								onClick={() => setIsBillable(!isBillable)}
+								label={t('pages.timesheet.BILLABLE.YES')}
+							/>
+							<ToggleButton
+								isActive={!isBillable}
+								onClick={() => setIsBillable(!isBillable)}
+								label={t('pages.timesheet.BILLABLE.NO')}
+							/>
+						</div>
+					</div>
+					<div className="w-full flex flex-col">
+						<span>Notes</span>
+						<textarea
+							value={notes}
+							onChange={(e) => setNotes(e.target.value)}
+							placeholder="Insert notes here..."
+							className={clsxm(
+								'bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent',
+								'placeholder-gray-300 placeholder:font-normal resize-none p-2 grow w-full',
+								'border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-40',
+								notes.trim().length === 0 && 'border-red-500'
+							)}
+							maxLength={120}
+							minLength={0}
+							aria-label="Insert notes here"
+							required
+						/>
+						<div className="text-sm text-gray-500 text-right">
+							{notes.length}/{120}
+						</div>
+					</div>
+					<div className="border-t border-t-gray-200 dark:border-t-gray-700 w-full"></div>
+					<div className="flex items-center justify-between gap-2 ">
+						<div className="flex flex-col items-start justify-center">
+							<CustomSelect
+								options={statusTable?.flatMap((status) => status.label)}
+								renderOption={(option) => (
+									<div className="flex items-center gap-x-2">
+										<div className={clsxm('p-2 rounded-full', statusColor(option).bg)}></div>
+										<span className={clsxm('ml-1', statusColor(option).text)}>{option}</span>
+									</div>
+								)}
+							/>
+						</div>
+						<div className="flex items-center gap-x-2">
+							<Button
+								variant="outline"
+								type="button"
+								className={clsxm(
+									'dark:text-primary h-[2.3rem] border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light'
+								)}
+							>
+								{t('common.CANCEL')}
+							</Button>
 
-        </Modal>
-    )
+							<Button
+								type="submit"
+								className={clsxm('bg-[#3826A6] h-[2.3rem] font-normal flex items-center text-white')}
+							>
+								{t('common.SAVE')}
+							</Button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Modal>
+	);
 }
 
 interface ToggleButtonProps {
-    isActive: boolean;
-    onClick: () => void;
-    label: string;
+	isActive: boolean;
+	onClick: () => void;
+	label: string;
 }
 
 const ToggleButton = ({ isActive, onClick, label }: ToggleButtonProps) => (
-    <div className="flex items-center gap-x-2">
-        <div
-            className="w-6 h-6 flex items-center bg-[#6c57f4b7] rounded-full p-1 cursor-pointer"
-            onClick={onClick}
-            style={{
-                background: isActive
-                    ? 'linear-gradient(to right, #9d91efb7, #8a7bedb7)'
-                    : '#1f2937'
-            }}
-        >
-            <div className={clsxm("bg-[#3826A6] w-4 h-4 rounded-full shadow-md transform transition-transform translate-x-0", isActive && "bg-white")} />
-        </div>
-        <span>{label}</span>
-    </div>
+	<div className="flex items-center gap-x-2">
+		<div
+			className="w-6 h-6 flex items-center bg-[#6c57f4b7] rounded-full p-1 cursor-pointer"
+			onClick={onClick}
+			style={{
+				background: isActive ? 'linear-gradient(to right, #9d91efb7, #8a7bedb7)' : '#1f2937'
+			}}
+		>
+			<div
+				className={clsxm(
+					'bg-[#3826A6] w-4 h-4 rounded-full shadow-md transform transition-transform translate-x-0',
+					isActive && 'bg-white'
+				)}
+			/>
+		</div>
+		<span>{label}</span>
+	</div>
 );
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
index 0aeb5f5a4..1ce06fadd 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
@@ -1,42 +1,54 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { HTMLAttributes } from 'react';
 import { Button } from 'lib/components';
 import { clsxm } from '@app/utils';
 
-export type FilterStatus = "All Tasks" | "Pending" | "Approved" | "Rejected";
+export type FilterStatus = 'All Tasks' | 'Pending' | 'Approved' | 'Rejected';
 export function FilterWithStatus({
-    activeStatus,
-    onToggle,
-    className
-}: {
-    activeStatus: FilterStatus;
-    onToggle: (status: FilterStatus) => void;
-    className?: HTMLAttributes<HTMLDivElement>
-}) {
-    const buttonData: { label: FilterStatus; count: number; icon: React.ReactNode }[] = [
-        { label: 'All Tasks', count: 46, icon: <i className="icon-all" /> },
-        { label: 'Pending', count: 12, icon: <i className="icon-pending" /> },
-        { label: 'Approved', count: 28, icon: <i className="icon-approved" /> },
-        { label: 'Rejected', count: 6, icon: <i className="icon-rejected" /> },
-    ];
+	activeStatus,
+	onToggle,
+	className
+}: Readonly<{
+	activeStatus: FilterStatus;
+	onToggle: (status: FilterStatus) => void;
+	className?: HTMLAttributes<HTMLDivElement>;
+}>) {
+	const buttonData: { label: FilterStatus; count: number; icon: React.ReactNode }[] = [
+		{ label: 'All Tasks', count: 46, icon: <i className="icon-all" /> },
+		{ label: 'Pending', count: 12, icon: <i className="icon-pending" /> },
+		{ label: 'Approved', count: 28, icon: <i className="icon-approved" /> },
+		{ label: 'Rejected', count: 6, icon: <i className="icon-rejected" /> }
+	];
 
-    return (
-        <div className={clsxm('flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] dark:bg-gray-800 rounded-xl ', className)}>
-            {buttonData.map(({ label, count, icon }, index) => (
-                <Button
-                    key={index}
-                    className={clsxm(
-                        'group flex items-center justify-start h-[2.2rem] rounded-xl w-full',
-                        'dark:bg-gray-800 dark:border-primary-light bg-transparent text-[#71717A] w-[80px]',
-                        activeStatus === label && 'text-primary bg-white shadow-2xl dark:text-primary-light font-bold  border'
-                    )}
-                    onClick={() => onToggle(label)}>
-                    <span className={clsxm(
-                        'font-medium ml-1 text-gray-500 dark:text-gray-200',
-                        activeStatus === label && 'text-primary font-bold dark:text-primary-light'
-                    )}>{label}</span>
-                    <span className='font-medium ml-1 text-gray-500 dark:text-gray-400'>{count}</span>
-                </Button>
-            ))}
-        </div>
-    );
+	return (
+		<div
+			className={clsxm(
+				'flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] dark:bg-gray-800 rounded-xl ',
+				className
+			)}
+		>
+			{buttonData.map(({ label, count, icon }, index) => (
+				<Button
+					key={index}
+					className={clsxm(
+						'group flex items-center justify-start h-[2.2rem] rounded-xl w-full',
+						'dark:bg-gray-800 dark:border-primary-light bg-transparent text-[#71717A] w-[80px]',
+						activeStatus === label &&
+							'text-primary bg-white shadow-2xl dark:text-primary-light font-bold  border'
+					)}
+					onClick={() => onToggle(label)}
+				>
+					<span
+						className={clsxm(
+							'font-medium ml-1 text-gray-500 dark:text-gray-200',
+							activeStatus === label && 'text-primary font-bold dark:text-primary-light'
+						)}
+					>
+						{label}
+					</span>
+					<span className="ml-1 font-medium text-gray-500 dark:text-gray-400">{count}</span>
+				</Button>
+			))}
+		</div>
+	);
 }
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/RejectSelectedModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/RejectSelectedModal.tsx
index b1b4f9904..1aea6661d 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/RejectSelectedModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/RejectSelectedModal.tsx
@@ -1,82 +1,93 @@
-import { clsxm } from "@/app/utils";
-import { Modal } from "@/lib/components";
-import { useTranslations } from "next-intl";
-import { useState } from "react";
+import { clsxm } from '@/app/utils';
+import { Modal } from '@/lib/components';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 export interface IRejectSelectedModalProps {
-    isOpen: boolean;
-    closeModal: () => void;
-    onReject: (reason: string) => void;
-    minReasonLength?: number;
-    maxReasonLength?: number;
+	isOpen: boolean;
+	closeModal: () => void;
+	onReject: (reason: string) => void;
+	minReasonLength?: number;
+	maxReasonLength?: number;
 }
-export function RejectSelectedModal({ isOpen, closeModal, maxReasonLength, onReject, minReasonLength }: IRejectSelectedModalProps) {
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [reason, setReason] = useState('');
-    const t = useTranslations();
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setIsSubmitting(true);
-        try {
-            await onReject(reason);
-            closeModal();
-        } finally {
-            setIsSubmitting(false);
-        }
-    };
-    return (
-        <Modal
-            isOpen={isOpen}
-            showCloseIcon={false}
-            closeModal={closeModal}
-            title={'Reject Selected'}
-            className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[24rem] justify-start"
-            titleClass="font-bold">
-            <form onSubmit={handleSubmit}>
-                <div className="flex flex-col gap-4">
-                    <span className="text-[#71717A] text-center">
-                        {t('pages.timesheet.YOU_ARE_ABOUT_TO_REJECT_ENTRY')}
-                    </span>
-                    <textarea
-                        value={reason}
-                        onChange={(e) => setReason(e.target.value)}
-                        placeholder="Add reason here..."
-                        className={clsxm(
-                            "bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent",
-                            "placeholder-gray-300 placeholder:font-normal resize-none p-2 grow",
-                            "border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-40",
-                            reason.length < minReasonLength! && "border-red-500"
-                        )}
-                        maxLength={120}
-                        minLength={0}
-                        aria-label="Rejection reason"
-                        required
-                    />
-                    <div className="text-sm text-gray-500 text-right">
-                        {reason.length}/{maxReasonLength}
-                    </div>
-                    <div className="flex items-center gap-x-4 justify-end">
-                        <button
-                            onClick={closeModal}
-                            type="button"
-                            disabled={isSubmitting}
-                            aria-label="Cancel rejection"
-                            className="dark:text-primary border-[#E2E8F0] dark:border-slate-600 font-normal dark:bg-dark--theme-light h-[2.2rem] text-gray-700 border px-2 rounded-lg">
-                            {t('common.CANCEL')}
-                        </button>
-                        <button
-                            type="submit"
-                            disabled={isSubmitting || reason.length < minReasonLength!}
-                            aria-label="Confirm rejection"
-                            className={clsxm(
-                                'bg-red-600 h-[2.2rem] font-normal flex items-center text-white px-2 rounded-lg',
-                                'disabled:opacity-50 disabled:cursor-not-allowed'
-                            )} >
-                            {isSubmitting ? 'Rejecting...' : 'Reject Entry'}
-                        </button>
-                    </div>
+export function RejectSelectedModal({
+	isOpen,
+	closeModal,
+	maxReasonLength,
+	onReject,
+	minReasonLength
+}: IRejectSelectedModalProps) {
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [reason, setReason] = useState('');
+	const t = useTranslations();
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setIsSubmitting(true);
+		try {
+			await onReject(reason);
+			closeModal();
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+	return (
+		<Modal
+			isOpen={isOpen}
+			showCloseIcon={false}
+			closeModal={closeModal}
+			title={'Reject Selected'}
+			className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[24rem] justify-start"
+			titleClass="font-bold"
+		>
+			<form onSubmit={handleSubmit}>
+				<div className="flex flex-col gap-4">
+					<span className="text-[#71717A] text-center">
+						{t('pages.timesheet.YOU_ARE_ABOUT_TO_REJECT_ENTRY')}
+					</span>
+					<textarea
+						value={reason}
+						onChange={(e) => setReason(e.target.value)}
+						placeholder="Add reason here..."
+						className={clsxm(
+							'bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent',
+							'placeholder-gray-300 placeholder:font-normal resize-none p-2 grow',
+							'border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-40',
 
-                </div>
-            </form>
-        </Modal>
-    )
+							minReasonLength !== undefined && reason.length < minReasonLength && 'border-red-500'
+						)}
+						maxLength={120}
+						minLength={0}
+						aria-label="Rejection reason"
+						required
+					/>
+					<div className="text-sm text-right text-gray-500">
+						{reason.length}/{maxReasonLength}
+					</div>
+					<div className="flex items-center justify-end gap-x-4">
+						<button
+							onClick={closeModal}
+							type="button"
+							disabled={isSubmitting}
+							aria-label="Cancel rejection"
+							className="dark:text-primary border-[#E2E8F0] dark:border-slate-600 font-normal dark:bg-dark--theme-light h-[2.2rem] text-gray-700 border px-2 rounded-lg"
+						>
+							{t('common.CANCEL')}
+						</button>
+						<button
+							type="submit"
+							disabled={
+								isSubmitting || (minReasonLength !== undefined && reason.length < minReasonLength)
+							}
+							aria-label="Confirm rejection"
+							className={clsxm(
+								'bg-red-600 h-[2.2rem] font-normal flex items-center text-white px-2 rounded-lg',
+								'disabled:opacity-50 disabled:cursor-not-allowed'
+							)}
+						>
+							{isSubmitting ? 'Rejecting...' : 'Reject Entry'}
+						</button>
+					</div>
+				</div>
+			</form>
+		</Modal>
+	);
 }
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
index 48d04748d..9c52023ac 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
@@ -1,129 +1,157 @@
-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 {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@components/ui/popover";
-import { SettingFilterIcon } from "@/assets/svg";
-import { useTranslations } from "next-intl";
-import { clsxm } from "@/app/utils";
-import { useTimelogFilterOptions } from "@/app/hooks";
-
+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 { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover';
+import { SettingFilterIcon } from '@/assets/svg';
+import { useTranslations } from 'next-intl';
+import { clsxm } from '@/app/utils';
+import { useTimelogFilterOptions } from '@/app/hooks';
 
 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();
+	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();
 
-    React.useEffect(() => {
-        if (shouldRemoveItems) {
-            setShouldRemoveItems(false);
-        }
-    }, [shouldRemoveItems]);
+	React.useEffect(() => {
+		if (shouldRemoveItems) {
+			setShouldRemoveItems(false);
+		}
+	}, [shouldRemoveItems]);
 
-    return (
-        <>
-            <Popover>
-                <PopoverTrigger asChild>
-                    <Button variant="outline"
-                        className='flex items-center justify-center  h-[2.2rem] rounded-lg bg-white dark:bg-dark--theme-light border dark:border-gray-700 hover:bg-white p-3 gap-2'>
-                        <SettingFilterIcon className="text-gray-700 dark:text-white w-3.5" strokeWidth="1.8" />
-                        <span className="text-gray-700 dark:text-white">{t('common.FILTER')}</span>
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-96">
-                    <div className="w-full flex flex-col">
-                        <div className="flex mb-3 text-xl font-bold gap-2">
-                            <SettingFilterIcon className="text-gray-700 dark:text-white w-4" strokeWidth="1.8" />
-                            <span className="text-gray-700 dark:text-white">{t('common.FILTER')}</span>
-                        </div>
-                        <div className="grid gap-5">
-                            <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")}>{t('common.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) => setEmployeeState(selectedItems as any)}
-                                    multiSelect={true}
-                                    triggerClassName="dark:border-gray-700"
-                                />
-                            </div>
-                            <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")}>{t('common.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) => setProjectState(selectedItems as any)}
-                                    multiSelect={true}
-                                    triggerClassName="dark:border-gray-700"
-                                />
-                            </div>
-                            <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")}>{t('common.CLEAR')}</span>
-                                </label>
-                                <MultiSelect
-                                    localStorageKey="timesheet-select-filter-task"
-                                    removeItems={shouldRemoveItems}
-                                    items={tasks}
-                                    onValueChange={(selectedItems) => setTaskState(selectedItems as any)}
-                                    itemId={(task) => (task ? task.id : '')}
-                                    itemToString={(task) => (task ? task.title : '')}
-                                    multiSelect={true}
-                                    triggerClassName="dark:border-gray-700"
-                                />
-                            </div>
-                            <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")}>{t('common.CLEAR')}</span>
-                                </label>
-                                <MultiSelect
-                                    localStorageKey="timesheet-select-filter-status"
-                                    removeItems={shouldRemoveItems}
-                                    items={statusOptions}
-                                    itemToString={(status) => (status ? status.value : '')}
-                                    itemId={(item) => item.value}
-                                    onValueChange={(selectedItems) => setStatusState(selectedItems)}
-                                    multiSelect={true}
-                                    triggerClassName="dark:border-gray-700"
-                                />
-                            </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">{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">{t('common.APPLY_FILTER')}</span>
-                                </Button>
-                            </div>
-                        </div>
-                    </div>
-                </PopoverContent>
-            </Popover>
-        </>
-    )
-})
+	return (
+		<>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						variant="outline"
+						className="flex items-center justify-center  h-[2.2rem] rounded-lg bg-white dark:bg-dark--theme-light border dark:border-gray-700 hover:bg-white p-3 gap-2"
+					>
+						<SettingFilterIcon className="text-gray-700 dark:text-white w-3.5" strokeWidth="1.8" />
+						<span className="text-gray-700 dark:text-white">{t('common.FILTER')}</span>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-96">
+					<div className="flex flex-col w-full">
+						<div className="flex gap-2 mb-3 text-xl font-bold">
+							<SettingFilterIcon className="w-4 text-gray-700 dark:text-white" strokeWidth="1.8" />
+							<span className="text-gray-700 dark:text-white">{t('common.FILTER')}</span>
+						</div>
+						<div className="grid gap-5">
+							<div className="">
+								<label className="flex justify-between mb-1 text-sm text-gray-600">
+									<span className="text-[12px]">{t('manualTime.EMPLOYEE')}</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"
+									removeItems={shouldRemoveItems}
+									items={activeTeam?.members ?? []}
+									itemToString={(members) => (members ? members.employee.fullName : '')}
+									itemId={(item) => item.id}
+									onValueChange={(selectedItems) => setEmployeeState(selectedItems as any)}
+									multiSelect={true}
+									triggerClassName="dark:border-gray-700"
+								/>
+							</div>
+							<div className="">
+								<label className="flex justify-between mb-1 text-sm text-gray-600">
+									<span className="text-[12px]">{t('sidebar.PROJECTS')}</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"
+									removeItems={shouldRemoveItems}
+									items={activeTeam?.projects ?? []}
+									itemToString={(project) =>
+										(activeTeam?.projects && project ? project.name : '') || ''
+									}
+									itemId={(item) => item.id}
+									onValueChange={(selectedItems) => setProjectState(selectedItems as any)}
+									multiSelect={true}
+									triggerClassName="dark:border-gray-700"
+								/>
+							</div>
+							<div className="">
+								<label className="flex justify-between mb-1 text-sm text-gray-600">
+									<span className="text-[12px]">{t('hotkeys.TASK')}</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"
+									removeItems={shouldRemoveItems}
+									items={tasks}
+									onValueChange={(selectedItems) => setTaskState(selectedItems as any)}
+									itemId={(task) => (task ? task.id : '')}
+									itemToString={(task) => (task ? task.title : '')}
+									multiSelect={true}
+									triggerClassName="dark:border-gray-700"
+								/>
+							</div>
+							<div className="">
+								<label className="flex justify-between mb-1 text-sm text-gray-600">
+									<span className="text-[12px]">{t('common.STATUS')}</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"
+									removeItems={shouldRemoveItems}
+									items={statusOptions}
+									itemToString={(status) => (status ? status.value : '')}
+									itemId={(item) => item.value}
+									onValueChange={(selectedItems) => setStatusState(selectedItems)}
+									multiSelect={true}
+									triggerClassName="dark:border-gray-700"
+								/>
+							</div>
+							<div className="flex items-center justify-end w-full gap-x-4">
+								<Button
+									onClick={() => setShouldRemoveItems(true)}
+									variant={'outline'}
+									className="flex items-center justify-center h-10 text-sm rounded-lg dark:text-gray-300"
+								>
+									<span className="text-sm">{t('common.CLEAR_FILTER')}</span>
+								</Button>
+								<Button className="flex items-center justify-center h-10 text-sm rounded-lg bg-primary dark:bg-primary-light dark:text-gray-300">
+									<span className="text-sm">{t('common.APPLY_FILTER')}</span>
+								</Button>
+							</div>
+						</div>
+					</div>
+				</PopoverContent>
+			</Popover>
+		</>
+	);
+});
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
index 0331c05a5..89726ea65 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
@@ -1,339 +1,343 @@
-import { clsxm } from "@/app/utils"
-import { checkPastDate, cn } from "@/lib/utils"
-import { DatePicker } from "@components/ui/DatePicker"
-import { Button } from "@components/ui/button"
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@components/ui/popover"
-import { CalendarIcon } from "@radix-ui/react-icons"
-import { format } from "date-fns"
-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';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { clsxm } from '@/app/utils';
+import { checkPastDate, cn } from '@/lib/utils';
+import { DatePicker } from '@components/ui/DatePicker';
+import { Button } from '@components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover';
+import { CalendarIcon } from '@radix-ui/react-icons';
+import { format } from 'date-fns';
+import { TranslationHooks } from 'next-intl';
+import { MdKeyboardArrowRight } from 'react-icons/md';
+import { PiCalendarDotsThin } from 'react-icons/pi';
+import React, { Dispatch, useEffect, useState, SetStateAction, useCallback, useMemo, memo } from 'react';
 import moment from 'moment';
 
 interface DatePickerInputProps {
-    date: Date | null;
-    label: string;
+	date: Date | null;
+	label: string;
 }
 
 export interface TimesheetFilterDateProps {
-    onChange?: (range: { from: Date | null; to: Date | null }) => void;
-    initialRange?: { from: Date | null; to: Date | null };
-    minDate?: Date;
-    maxDate?: Date;
-    t: TranslationHooks
+	onChange?: (range: { from: Date | null; to: Date | null }) => void;
+	initialRange?: { from: Date | null; to: Date | null };
+	minDate?: Date;
+	maxDate?: Date;
+	t: TranslationHooks;
 }
 
 export function TimesheetFilterDate({
-    onChange,
-    initialRange,
-    minDate,
-    maxDate,
-    t
-}: TimesheetFilterDateProps) {
-    const [dateRange, setDateRange] = React.useState<{ from: Date | null; to: Date | null }>({
-        from: initialRange?.from ?? new Date(),
-        to: initialRange?.to ?? new Date(),
-    });
+	onChange,
+	initialRange,
+	minDate,
+	maxDate,
+	t
+}: Readonly<TimesheetFilterDateProps>) {
+	const [dateRange, setDateRange] = React.useState<{ from: Date | null; to: Date | null }>({
+		from: initialRange?.from ?? new Date(),
+		to: initialRange?.to ?? new Date()
+	});
 
-    const [isVisible, setIsVisible] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
 
-    const handleFromChange = (fromDate: Date | null) => {
-        if (maxDate && fromDate && fromDate > maxDate) {
-            return;
-        }
-        setDateRange((prev) => ({ ...prev, from: fromDate }));
-        onChange?.({ ...dateRange, from: fromDate });
-    };
+	const handleFromChange = (fromDate: Date | null) => {
+		if (maxDate && fromDate && fromDate > maxDate) {
+			return;
+		}
+		setDateRange((prev) => ({ ...prev, from: fromDate }));
+		onChange?.({ ...dateRange, from: fromDate });
+	};
 
-    const handleToChange = (toDate: Date | null) => {
-        if (dateRange.from && toDate && toDate < dateRange.from) {
-            return;
-        }
-        setDateRange((prev) => ({ ...prev, to: toDate }));
-    };
+	const handleToChange = (toDate: Date | null) => {
+		if (dateRange.from && toDate && toDate < dateRange.from) {
+			return;
+		}
+		setDateRange((prev) => ({ ...prev, to: toDate }));
+	};
 
-    const handlePresetClick = (preset: string) => {
-        const today = new Date();
-        switch (preset) {
-            case t('common.FILTER_TODAY'):
-                setDateRange({ from: today, to: today });
-                break;
-            case t('common.FILTER_LAST_7_DAYS'):
-                setDateRange({
-                    from: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7),
-                    to: today
-                });
-                break;
-            case t('common.FILTER_LAST_30_DAYS'):
-                setDateRange({
-                    from: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 30),
-                    to: today
-                });
-                break;
-            case t('common.FILTER_THIS_YEAR', { year: new Date().getFullYear() }):
-                setDateRange({
-                    from: new Date(today.getFullYear(), 0, 1),
-                    to: today
-                });
-                break;
-            case t('common.FILTER_CUSTOM_RANGE'):
-                setDateRange({ from: null, to: null });
-                break;
-            default:
-                break;
-        }
-    };
+	const handlePresetClick = (preset: string) => {
+		const today = new Date();
+		switch (preset) {
+			case t('common.FILTER_TODAY'):
+				setDateRange({ from: today, to: today });
+				break;
+			case t('common.FILTER_LAST_7_DAYS'):
+				setDateRange({
+					from: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7),
+					to: today
+				});
+				break;
+			case t('common.FILTER_LAST_30_DAYS'):
+				setDateRange({
+					from: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 30),
+					to: today
+				});
+				break;
+			case t('common.FILTER_THIS_YEAR', { year: new Date().getFullYear() }):
+				setDateRange({
+					from: new Date(today.getFullYear(), 0, 1),
+					to: today
+				});
+				break;
+			case t('common.FILTER_CUSTOM_RANGE'):
+				setDateRange({ from: null, to: null });
+				break;
+			default:
+				break;
+		}
+	};
 
-    useEffect(() => {
-        if (dateRange.from && dateRange.to) {
-            onChange?.(dateRange);
-        }
-    }, [dateRange, onChange]);
+	useEffect(() => {
+		if (dateRange.from && dateRange.to) {
+			onChange?.(dateRange);
+		}
+	}, [dateRange, onChange]);
 
-    const actionButtonClass = "h-4 border-none dark:bg-dark--theme-light text-primary hover:bg-transparent hover:underline"
+	const actionButtonClass =
+		'h-4 border-none dark:bg-dark--theme-light text-primary hover:bg-transparent hover:underline';
 
-    return (<>
-        <Popover>
-            <PopoverTrigger asChild>
-                <Button
-                    variant={"outline"}
-                    role="combobox"
-                    aria-label="Select date range"
-                    aria-expanded="false"
-                    className={cn(
-                        "w-44 justify-start dark:bg-dark--theme-light dark:text-gray-300 h-[2.2rem] items-center gap-x-2 text-left font-normal overflow-hidden text-clip",
-                        !dateRange.from && "text-muted-foreground"
-                    )}>
-                    <CalendarIcon />
-                    {dateRange.from ? (
-                        dateRange.to ? (
-                            <>
-                                {format(dateRange.from, "LLL d")}-{format(dateRange.to, "d, yyyy")}
-                            </>
-                        ) : (
-                            format(dateRange.from, "LLL d, yyyy")
-                        )
-                    ) : (
-                        <span>{t('manualTime.PICK_A_DATE')}</span>
-                    )}
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0 flex dark:bg-dark--theme-light">
-                {isVisible && (
-                    <div className="flex flex-col p-2 gap-2 translate-x-0 justify-between">
-                        <div className="flex flex-col gap-2">
-                            <DatePickerFilter
-                                label="From"
-                                date={dateRange.from}
-                                setDate={handleFromChange}
-                            />
-                            <DatePickerFilter
-                                label="To"
-                                date={dateRange.to}
-                                setDate={handleToChange}
-                                minDate={dateRange.from}
-                            />
-                        </div>
-                        <div className="flex w-full justify-end items-end">
-                            <Button
-                                variant={'outline'}
-                                className={actionButtonClass}
-                                onClick={() => {
-                                    setDateRange(initialRange ?? { from: new Date(), to: new Date() });
-                                    setIsVisible(false);
-                                }}>
-                                {t('common.CANCEL')}
-                            </Button>
-                            <Button
-                                variant={'outline'}
-                                className={actionButtonClass}
-                                onClick={() => {
-                                    onChange?.(dateRange);
-                                    setIsVisible(false);
-                                }} >
-                                {t('common.APPLY')}
-                            </Button>
-                        </div>
-                    </div>
-                )
-                }
-                {isVisible && <div className="border border-slate-100 dark:border-gray-800 my-1"></div>}
-                <div className="flex flex-col p-2">
-                    {[
-                        t('common.FILTER_TODAY'),
-                        t('common.FILTER_LAST_7_DAYS'),
-                        t('common.FILTER_LAST_30_DAYS'),
-                        t('common.FILTER_THIS_YEAR', ({ year: new Date().getFullYear() })),
-                        t('common.FILTER_CUSTOM_RANGE')
-                    ].map((label, index) => (
-                        <Button
-                            key={index}
-                            variant="outline"
-                            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)
-                            }}>
-                            <span> {label}</span>
-                            {label === t('common.FILTER_CUSTOM_RANGE') && <MdKeyboardArrowRight />}
-                        </Button>
-                    ))}
-                </div>
-            </PopoverContent>
-        </Popover>
-    </>
-    )
+	return (
+		<>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						variant={'outline'}
+						role="combobox"
+						aria-label="Select date range"
+						aria-expanded="false"
+						className={cn(
+							'w-44 justify-start dark:bg-dark--theme-light dark:text-gray-300 h-[2.2rem] items-center gap-x-2 text-left font-normal overflow-hidden text-clip',
+							!dateRange.from && 'text-muted-foreground'
+						)}
+					>
+						<CalendarIcon />
+						{dateRange.from ? (
+							dateRange.to ? (
+								<>
+									{format(dateRange.from, 'LLL d')}-{format(dateRange.to, 'd, yyyy')}
+								</>
+							) : (
+								format(dateRange.from, 'LLL d, yyyy')
+							)
+						) : (
+							<span>{t('manualTime.PICK_A_DATE')}</span>
+						)}
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="flex w-auto p-0 dark:bg-dark--theme-light">
+					{isVisible && (
+						<div className="flex flex-col justify-between gap-2 p-2 translate-x-0">
+							<div className="flex flex-col gap-2">
+								<DatePickerFilter label="From" date={dateRange.from} setDate={handleFromChange} />
+								<DatePickerFilter
+									label="To"
+									date={dateRange.to}
+									setDate={handleToChange}
+									minDate={dateRange.from}
+								/>
+							</div>
+							<div className="flex items-end justify-end w-full">
+								<Button
+									variant={'outline'}
+									className={actionButtonClass}
+									onClick={() => {
+										setDateRange(initialRange ?? { from: new Date(), to: new Date() });
+										setIsVisible(false);
+									}}
+								>
+									{t('common.CANCEL')}
+								</Button>
+								<Button
+									variant={'outline'}
+									className={actionButtonClass}
+									onClick={() => {
+										onChange?.(dateRange);
+										setIsVisible(false);
+									}}
+								>
+									{t('common.APPLY')}
+								</Button>
+							</div>
+						</div>
+					)}
+					{isVisible && <div className="my-1 border border-slate-100 dark:border-gray-800"></div>}
+					<div className="flex flex-col p-2">
+						{[
+							t('common.FILTER_TODAY'),
+							t('common.FILTER_LAST_7_DAYS'),
+							t('common.FILTER_LAST_30_DAYS'),
+							t('common.FILTER_THIS_YEAR', { year: new Date().getFullYear() }),
+							t('common.FILTER_CUSTOM_RANGE')
+						].map((label, index) => (
+							<Button
+								key={index}
+								variant="outline"
+								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);
+								}}
+							>
+								<span> {label}</span>
+								{label === t('common.FILTER_CUSTOM_RANGE') && <MdKeyboardArrowRight />}
+							</Button>
+						))}
+					</div>
+				</PopoverContent>
+			</Popover>
+		</>
+	);
 }
 
-
 const DatePickerInput: React.FC<DatePickerInputProps> = ({ date, label }) => (
-    <>
-        <Button
-            variant="outline"
-            className={cn(
-                "w-[150px] justify-start text-left font-normal bg-transparent hover:bg-transparent text-black dark:text-gray-100 h-8 border border-transparent dark:border-transparent",
-                !date && "text-muted-foreground"
-            )}
-        >
-            {date ? format(date, "LLL dd, y") : <span>{label}</span>}
-        </Button>
-        <PiCalendarDotsThin className="h-5 w-5 dark:text-gray-500" />
-    </>
+	<>
+		<Button
+			variant="outline"
+			className={cn(
+				'w-[150px] justify-start text-left font-normal bg-transparent hover:bg-transparent text-black dark:text-gray-100 h-8 border border-transparent dark:border-transparent',
+				!date && 'text-muted-foreground'
+			)}
+		>
+			{date ? format(date, 'LLL dd, y') : <span>{label}</span>}
+		</Button>
+		<PiCalendarDotsThin className="w-5 h-5 dark:text-gray-500" />
+	</>
 );
 
-
 export function DatePickerFilter({
-    label,
-    date,
-    setDate,
-    minDate,
-    maxDate,
+	label,
+	date,
+	setDate,
+	minDate,
+	maxDate
 }: {
-    label: string;
-    date: Date | null;
-    setDate: (date: Date | null) => void;
-    minDate?: Date | null;
-    maxDate?: Date | null;
+	label: string;
+	date: Date | null;
+	setDate: (date: Date | null) => void;
+	minDate?: Date | null;
+	maxDate?: Date | null;
 }) {
-    const isDateDisabled = React.useCallback((date: Date) => {
-        if (minDate && date < minDate) return true;
-        if (maxDate && date > maxDate) return true;
-        return false;
-    }, [minDate, maxDate]);
-
-    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 hover:border-primary'}
-                customInput={<DatePickerInput date={date} label={label} />}
-                mode="single"
-                numberOfMonths={1}
-                initialFocus
-                defaultMonth={date ?? new Date()}
-                selected={date ?? new Date()}
-                onSelect={(selectedDate) => {
-                    if (selectedDate && !isDateDisabled(selectedDate)) {
-                        setDate(selectedDate);
-                    }
-                }}
-                modifiersClassNames={{
-                    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 }] : [])
-                ]}
+	const isDateDisabled = React.useCallback(
+		(date: Date) => {
+			if (minDate && date < minDate) return true;
+			if (maxDate && date > maxDate) return true;
+			return false;
+		},
+		[minDate, maxDate]
+	);
 
-            />
-        </div>
-    );
+	return (
+		<div>
+			<DatePicker
+				captionLayout="dropdown"
+				buttonVariant={'link'}
+				className="bg-white rounded-lg dark:bg-dark--theme-light 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}
+				initialFocus
+				defaultMonth={date ?? new Date()}
+				selected={date ?? new Date()}
+				onSelect={(selectedDate) => {
+					if (selectedDate && !isDateDisabled(selectedDate)) {
+						setDate(selectedDate);
+					}
+				}}
+				modifiersClassNames={{
+					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;
+	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
+	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}
-        />
-    );
+	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 c20e08c90..aed47e2c3 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
@@ -3,22 +3,22 @@ import { DataTableTimeSheet } from 'lib/features/integrations/calendar';
 import { useTranslations } from 'next-intl';
 
 export function TimesheetView({ data }: { data?: GroupedTimesheet[] }) {
-    const t = useTranslations();
-    return (
-        <div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>
-            {data ? (
-                data.length > 0 ? (
-                    <DataTableTimeSheet data={data} />
-                ) : (
-                    <div className="flex items-center justify-center h-full">
-                        <p>{t('pages.timesheet.NO_ENTRIES_FOUND')}</p>
-                    </div>
-                )
-            ) : (
-                <div className="flex items-center justify-center h-full">
-                    <p>{t('pages.timesheet.LOADING')}</p>
-                </div>
-            )}
-        </div>
-    )
+	const t = useTranslations();
+	return (
+		<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme">
+			{data ? (
+				data.length > 0 ? (
+					<DataTableTimeSheet data={data} />
+				) : (
+					<div className="flex items-center justify-center h-full min-h-[280px]">
+						<p>{t('pages.timesheet.NO_ENTRIES_FOUND')}</p>
+					</div>
+				)
+			) : (
+				<div className="flex items-center justify-center h-full">
+					<p>{t('pages.timesheet.LOADING')}</p>
+				</div>
+			)}
+		</div>
+	);
 }
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index 7686deaa1..f3b7df739 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -1,4 +1,4 @@
-"use client"
+'use client';
 import React, { useMemo, useState } from 'react';
 import { useParams } from 'next/navigation';
 import moment from 'moment';
@@ -23,190 +23,197 @@ import { getGreeting } from '@/app/helpers';
 import { useTimesheet } from '@/app/hooks/features/useTimesheet';
 import { endOfDay, startOfDay } from 'date-fns';
 
-
-type TimesheetViewMode = "ListView" | "CalendarView";
+type TimesheetViewMode = 'ListView' | 'CalendarView';
 
 type ViewToggleButtonProps = {
-    mode: TimesheetViewMode;
-    active: boolean;
-    icon: React.ReactNode;
-    onClick: () => void;
-    t: TranslationHooks
+	mode: TimesheetViewMode;
+	active: boolean;
+	icon: React.ReactNode;
+	onClick: () => void;
+	t: TranslationHooks;
 };
 
 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()),
-        to: endOfDay(new Date()),
-    });
-
-    const { timesheet } = useTimesheet({
-        startDate: dateRange.from ?? "",
-        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,
-        openModal: openManualTimeModal,
-        closeModal: closeManualTimeModal
-    } = useModal();
-    const username = user?.name || user?.firstName || user?.lastName || user?.username;
-
-    const [timesheetNavigator, setTimesheetNavigator] = useLocalStorageState<TimesheetViewMode>('timesheet-viewMode', 'ListView');
-
-    const fullWidth = useAtomValue(fullWidthState);
-    const { isTrackingEnabled, activeTeam } = useOrganizationTeams();
-
-    const paramsUrl = useParams<{ locale: string }>();
-    const currentLocale = paramsUrl ? paramsUrl.locale : null;
-    const breadcrumbPath = useMemo(
-        () => [
-            { title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
-            { title: activeTeam?.name || '', href: '/' },
-            { title: t("pages.timesheet.TIMESHEET_TITLE"), href: `/${currentLocale}/timesheet/${params.memberId}` }
-        ],
-        [activeTeam?.name, currentLocale, t]
-    );
-    return (
-        < >
-            <MainLayout
-                showTimer={isTrackingEnabled}
-                className="items-start pb-1 !overflow-hidden w-full"
-                childrenClassName="h-[calc(100vh-_300px)] !overflow-hidden w-full"
-            >
-                <div className="top-14 fixed flex flex-col border-b-[1px] dark:border-gray-800 z-10 mx-0 w-full bg-white dark:bg-dark-high shadow-2xl shadow-transparent dark:shadow-transparent">
-                    <Container fullWidth={fullWidth} className='bg-white'>
-                        <div className="flex flex-row items-start justify-between mt-12 bg-white  dark:bg-dark-high">
-                            <div className="flex items-center justify-center h-10 gap-8">
-                                <ArrowLeftIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
-                                <Breadcrumb paths={breadcrumbPath} className="text-sm" />
-                            </div>
-                        </div>
-                    </Container>
-                </div>
-                <div className="h-full py-4 ">
-                    <Container fullWidth={fullWidth} className='h-full pt-14'>
-                        <div className='py-5'>
-                            <div className='flex flex-col justify-start items-start gap-y-2'>
-                                <h1 className='!text-[23px] font-bold text-[#282048] dark:text-white'>{getGreeting(t)}, {username} !</h1>
-                                <span className='text-[16px] text-[#3D5A80] dark:text-gray-500'>{t('pages.timesheet.HEADING_DESCRIPTION')}</span>
-                            </div>
-                            <div className='flex items-center w-full justify-between gap-6 pt-4'>
-                                <TimesheetCard
-                                    count={72}
-                                    title='Pending Tasks'
-                                    description='Tasks waiting for your approval'
-                                    icon={<GrTask className='font-bold' />}
-                                    classNameIcon='bg-[#FBB650] shadow-[#fbb75095]'
-                                />
-                                <TimesheetCard
-                                    hours='63:00h'
-                                    title='Men Hours'
-                                    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] '
-                                />
-                                <TimesheetCard
-                                    count={8}
-                                    title='Members Worked'
-                                    description='People worked since last time'
-                                    icon={<User2 className='font-bold' />}
-                                    classNameIcon='bg-[#30B366] shadow-[#30b3678f]'
-                                />
-                            </div>
-                        </div>
-                        <div className='border-b-2 border-b-[#E2E8F0] dark:border-b-gray-700 w-full  flex justify-between pt-2 overflow-hidden'>
-                            <div className='w-full flex'>
-                                <ViewToggleButton
-                                    icon={<GrTask className='text-sm' />}
-                                    mode='ListView'
-                                    active={timesheetNavigator === 'ListView'}
-                                    onClick={() => setTimesheetNavigator('ListView')}
-                                    t={t}
-                                />
-                                <ViewToggleButton
-                                    icon={<CalendarDaysIcon size={20} className='!text-sm' />}
-                                    mode='CalendarView'
-                                    active={timesheetNavigator === 'CalendarView'}
-                                    onClick={() => setTimesheetNavigator('CalendarView')}
-                                    t={t}
-                                />
-                            </div>
-                            <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={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) {
-                                        setDateRange(range)
-                                    },
-                                }}
-                                closeModal={closeManualTimeModal}
-                                openModal={openManualTimeModal}
-                                isOpen={isManualTimeModalOpen}
-                                t={t}
-                            />
-                            <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={filterDataTimesheet} />
-                                    : <CalendarView />
-                                }
-                            </div>
-                        </div>
-                    </Container>
-                </div>
-            </MainLayout>
-        </>
-    )
-})
+	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()),
+		to: endOfDay(new Date())
+	});
+
+	const { timesheet } = useTimesheet({
+		startDate: dateRange.from ?? '',
+		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,
+		openModal: openManualTimeModal,
+		closeModal: closeManualTimeModal
+	} = useModal();
+	const username = user?.name || user?.firstName || user?.lastName || user?.username;
+
+	const [timesheetNavigator, setTimesheetNavigator] = useLocalStorageState<TimesheetViewMode>(
+		'timesheet-viewMode',
+		'ListView'
+	);
+
+	const fullWidth = useAtomValue(fullWidthState);
+	const { isTrackingEnabled, activeTeam } = useOrganizationTeams();
+
+	const paramsUrl = useParams<{ locale: string }>();
+	const currentLocale = paramsUrl ? paramsUrl.locale : null;
+	const breadcrumbPath = useMemo(
+		() => [
+			{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+			{ title: activeTeam?.name || '', href: '/' },
+			{ title: t('pages.timesheet.TIMESHEET_TITLE'), href: `/${currentLocale}/timesheet/${params.memberId}` }
+		],
+		[activeTeam?.name, currentLocale, t]
+	);
+	return (
+		<>
+			<MainLayout
+				showTimer={isTrackingEnabled}
+				className="items-start pb-1 !overflow-hidden w-full"
+				childrenClassName="w-full"
+				mainHeaderSlot={
+					<div className="flex flex-col py-4 bg-gray-100 dark:bg-dark--theme">
+						<Container fullWidth={fullWidth} className="flex flex-col gap-y-2">
+							<div className="flex flex-row items-start justify-between">
+								<div className="flex items-center justify-center h-10 gap-8">
+									<ArrowLeftIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
+									<Breadcrumb paths={breadcrumbPath} className="text-sm" />
+								</div>
+							</div>
+
+							<div className="flex flex-col items-start justify-start gap-y-2">
+								<h1 className="!text-[23px] font-bold text-[#282048] dark:text-white">
+									{getGreeting(t)}, {username} !
+								</h1>
+								<span className="text-sm text-[#3D5A80] dark:text-gray-500">
+									{t('pages.timesheet.HEADING_DESCRIPTION')}
+								</span>
+							</div>
+							<div className="flex items-center justify-between w-full gap-6 pt-4">
+								<TimesheetCard
+									count={72}
+									title="Pending Tasks"
+									description="Tasks waiting for your approval"
+									icon={<GrTask className="font-bold" />}
+									classNameIcon="bg-[#FBB650] shadow-[#fbb75095]"
+								/>
+								<TimesheetCard
+									hours="63:00h"
+									title="Men Hours"
+									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] "
+								/>
+								<TimesheetCard
+									count={8}
+									title="Members Worked"
+									description="People worked since last time"
+									icon={<User2 className="font-bold" />}
+									classNameIcon="bg-[#30B366] shadow-[#30b3678f]"
+								/>
+							</div>
+							<div className="flex justify-between w-full overflow-hidden">
+								<div className="flex w-full">
+									<ViewToggleButton
+										icon={<GrTask className="text-sm" />}
+										mode="ListView"
+										active={timesheetNavigator === 'ListView'}
+										onClick={() => setTimesheetNavigator('ListView')}
+										t={t}
+									/>
+									<ViewToggleButton
+										icon={<CalendarDaysIcon size={20} className="!text-sm" />}
+										mode="CalendarView"
+										active={timesheetNavigator === 'CalendarView'}
+										onClick={() => setTimesheetNavigator('CalendarView')}
+										t={t}
+									/>
+								</div>
+								<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={t('common.SEARCH')}
+									/>
+								</div>
+							</div>
+
+							<TimesheetFilter
+								onChangeStatus={setFilterStatus}
+								filterStatus={filterStatus}
+								initDate={{
+									initialRange: dateRange,
+									onChange(range) {
+										setDateRange(range);
+									}
+								}}
+								closeModal={closeManualTimeModal}
+								openModal={openManualTimeModal}
+								isOpen={isManualTimeModalOpen}
+								t={t}
+							/>
+						</Container>
+					</div>
+				}
+			>
+				<div className="flex flex-col  w-full border-1 rounded-lg bg-[#FFFFFF]  dark:bg-dark--theme px-4">
+					<Container fullWidth={fullWidth} className="h-full py-5 mt-3">
+						{/* <DropdownMenuDemo /> */}
+						<div className="border border-gray-200 rounded-lg dark:border-gray-800">
+							{timesheetNavigator === 'ListView' ? (
+								<TimesheetView data={filterDataTimesheet} />
+							) : (
+								<CalendarView />
+							)}
+						</div>
+					</Container>
+				</div>
+			</MainLayout>
+		</>
+	);
+});
 
 export default withAuthentication(TimeSheet, { displayName: 'TimeSheet' });
 
-
-const ViewToggleButton: React.FC<ViewToggleButtonProps> = ({
-    mode,
-    active,
-    icon,
-    onClick,
-    t
-}) => (
-    <button
-        onClick={onClick}
-        className={clsxm(
-            'text-[#7E7991]  font-medium w-[191px] h-[40px] flex items-center gap-x-4 text-[14px] px-2 rounded',
-            active && 'border-b-primary text-primary border-b-2 dark:text-primary-light dark:border-b-primary-light bg-[#F1F5F9] dark:bg-gray-800 font-bold'
-        )}>
-        {icon}
-        <span>{mode === 'ListView' ? t('pages.timesheet.VIEWS.LIST') : t('pages.timesheet.VIEWS.CALENDAR')}</span>
-    </button>
+const ViewToggleButton: React.FC<ViewToggleButtonProps> = ({ mode, active, icon, onClick, t }) => (
+	<button
+		onClick={onClick}
+		className={clsxm(
+			'text-[#7E7991]  font-medium w-[191px] h-[40px] flex items-center gap-x-4 text-[14px] px-2 rounded',
+			active &&
+				'border-b-primary text-primary border-b-2 dark:text-primary-light dark:border-b-primary-light bg-[#F1F5F9] dark:bg-gray-800 font-bold'
+		)}
+	>
+		{icon}
+		<span>{mode === 'ListView' ? t('pages.timesheet.VIEWS.LIST') : t('pages.timesheet.VIEWS.CALENDAR')}</span>
+	</button>
 );
diff --git a/apps/web/app/hooks/features/useKanban.ts b/apps/web/app/hooks/features/useKanban.ts
index 7572c5d8d..e4626d476 100644
--- a/apps/web/app/hooks/features/useKanban.ts
+++ b/apps/web/app/hooks/features/useKanban.ts
@@ -8,152 +8,135 @@ import { IKanban } from '@app/interfaces/IKanban';
 import { TStatusItem } from 'lib/features';
 import { useSearchParams } from 'next/navigation';
 export function useKanban() {
-  const [loading, setLoading] = useState<boolean>(true);
-  const [searchTasks, setSearchTasks] = useState('');
-  const [labels, setLabels] = useState<string[]>([]);
-  const [epics, setEpics] = useState<string[]>([]);
-  const [issues, setIssues] = useState<TStatusItem>({
-    name: 'Issues',
-    icon: null,
-    bgColor: '',
-    value: ''
-  });
-  const [kanbanBoard, setKanbanBoard] = useAtom(kanbanBoardState);
-  const taskStatusHook = useTaskStatus();
-  const { tasks: newTask, tasksFetching, updateTask } = useTeamTasks();
-  const [priority, setPriority] = useState<string[]>([]);
-  const [sizes, setSizes] = useState<string[]>([]);
-  const employee = useSearchParams().get('employee');
-  useEffect(() => {
-    if (!taskStatusHook.loading && !tasksFetching) {
-      let kanban = {};
-      setLoading(true);
-      const tasks = newTask
-        .filter((task: ITeamTask) => {
-          return task.title.toLowerCase().includes(searchTasks.toLowerCase());
-        })
-        .filter((task: ITeamTask) => {
-          return priority.length ? priority.includes(task.priority) : true;
-        })
-        .filter((task: ITeamTask) => {
-          return issues.value ? task.issueType === issues.value : true;
-        })
-        .filter((task: ITeamTask) => {
-          return sizes.length ? sizes.includes(task.size) : true;
-        })
-        .filter((task: ITeamTask) => {
-          return labels.length
-            ? labels.some((label) =>
-                task.tags.some((tag) => tag.name === label)
-              )
-            : true;
-        })
-        .filter((task: ITeamTask) => {
-          return epics.length ? epics.includes(task.id) : true;
-        })
-        .filter((task: ITeamTask) => {
-          if (employee) {
-            return task.members
-              .map((el) => el.fullName)
-              .includes(employee as string);
-          } else {
-            return task;
-          }
-        });
+	const [loading, setLoading] = useState<boolean>(true);
+	const [searchTasks, setSearchTasks] = useState('');
+	const [labels, setLabels] = useState<string[]>([]);
+	const [epics, setEpics] = useState<string[]>([]);
+	const [issues, setIssues] = useState<TStatusItem>({
+		name: 'Issues',
+		icon: null,
+		bgColor: '',
+		value: ''
+	});
+	const [kanbanBoard, setKanbanBoard] = useAtom(kanbanBoardState);
+	const taskStatusHook = useTaskStatus();
+	const { tasks: newTask, tasksFetching, updateTask } = useTeamTasks();
+	const [priority, setPriority] = useState<string[]>([]);
+	const [sizes, setSizes] = useState<string[]>([]);
+	const employee = useSearchParams().get('employee');
+	useEffect(() => {
+		if (!taskStatusHook.loading && !tasksFetching) {
+			let kanban = {};
+			setLoading(true);
+			const tasks = newTask
+				.filter((task: ITeamTask) => {
+					return task.title.toLowerCase().includes(searchTasks.toLowerCase());
+				})
+				.filter((task: ITeamTask) => {
+					return priority.length ? priority.includes(task.priority) : true;
+				})
+				.filter((task: ITeamTask) => {
+					return issues.value ? task.issueType === issues.value : true;
+				})
+				.filter((task: ITeamTask) => {
+					return sizes.length ? sizes.includes(task.size) : true;
+				})
+				.filter((task: ITeamTask) => {
+					return labels.length ? labels.some((label) => task.tags.some((tag) => tag.name === label)) : true;
+				})
+				.filter((task: ITeamTask) => {
+					return epics.length ? epics.includes(task.id) : true;
+				})
+				.filter((task: ITeamTask) => {
+					if (employee) {
+						return task.members.map((el) => el.fullName).includes(employee as string);
+					} else {
+						return task;
+					}
+				});
 
-      const getTasksByStatus = (status: string | undefined) => {
-        return tasks.filter((task: ITeamTask) => {
-          return task.taskStatusId === status;
-        });
-      };
+			const getTasksByStatus = (status: string | undefined) => {
+				return tasks.filter((task: ITeamTask) => {
+					return task.taskStatusId === status;
+				});
+			};
 
-      taskStatusHook.taskStatus.map((taskStatus: ITaskStatusItemList) => {
-        kanban = {
-          ...kanban,
-          [taskStatus.name ? taskStatus.name : '']: getTasksByStatus(
-            taskStatus.id
-          )
-        };
-      });
-      setKanbanBoard(kanban);
-      setLoading(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    taskStatusHook.loading,
-    tasksFetching,
-    newTask,
-    searchTasks,
-    priority,
-    sizes,
-    labels,
-    epics,
-    issues,
-    employee
-  ]);
+			taskStatusHook.taskStatus.map((taskStatus: ITaskStatusItemList) => {
+				kanban = {
+					...kanban,
+					[taskStatus.name ? taskStatus.name : '']: getTasksByStatus(taskStatus.id)
+				};
+			});
+			setKanbanBoard(kanban);
+			setLoading(false);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [taskStatusHook.loading, tasksFetching, newTask, searchTasks, priority, sizes, labels, epics, issues, employee]);
 
-  /**
-   * collapse or show kanban column
-   */
-  const toggleColumn = (column: string, status: boolean) => {
-    const columnData = taskStatusHook.taskStatus.filter(
-      (taskStatus: ITaskStatusItemList) => {
-        return taskStatus.name === column;
-      }
-    );
+	/**
+	 * collapse or show kanban column
+	 */
+	const toggleColumn = (column: string, status: boolean) => {
+		const columnData = taskStatusHook.taskStatus.filter((taskStatus: ITaskStatusItemList) => {
+			return taskStatus.name === column;
+		});
 
-    const columnId = columnData[0].id;
+		const columnId = columnData[0].id;
 
-    taskStatusHook.editTaskStatus(columnId, {
-      isCollapsed: status
-    });
-  };
+		taskStatusHook.editTaskStatus(columnId, {
+			isCollapsed: status
+		});
+	};
 
-  const isColumnCollapse = (column: string) => {
-    const columnData = taskStatusHook.taskStatus.find(
-      (taskStatus: ITaskStatusItemList) => {
-        return taskStatus.name === column;
-      }
-    );
+	const isColumnCollapse = (column: string) => {
+		const columnData = taskStatusHook.taskStatus.find((taskStatus: ITaskStatusItemList) => {
+			return taskStatus.name === column;
+		});
 
-    return columnData?.isCollapsed;
-  };
+		return columnData?.isCollapsed;
+	};
+	const isAllColumnCollapse = () => {
+		return taskStatusHook.taskStatus.every((taskStatus: ITaskStatusItemList) => {
+			return taskStatus.isCollapsed;
+		});
+	};
 
-  const reorderStatus = (itemStatus: string, index: number) => {
-    taskStatusHook.taskStatus
-      .filter((status: ITaskStatusItemList) => {
-        return status.id === itemStatus;
-      })
-      .map((status: ITaskStatusItemList) => {
-        taskStatusHook.editTaskStatus(status.id, {
-          order: index
-        });
-      });
-  };
-  const addNewTask = (task: ITeamTask, status: string) => {
-    const updatedBoard = {
-      ...kanbanBoard,
-      [status]: [...kanbanBoard[status], task]
-    };
-    setKanbanBoard(() => updatedBoard);
-  };
-  return {
-    data: kanbanBoard as IKanban,
-    isLoading: loading,
-    columns: taskStatusHook.taskStatus,
-    searchTasks,
-    issues,
-    setPriority,
-    setLabels,
-    setSizes,
-    setIssues,
-    setEpics,
-    updateKanbanBoard: setKanbanBoard,
-    updateTaskStatus: updateTask,
-    toggleColumn,
-    isColumnCollapse,
-    reorderStatus,
-    addNewTask,
-    setSearchTasks
-  };
+	const reorderStatus = (itemStatus: string, index: number) => {
+		taskStatusHook.taskStatus
+			.filter((status: ITaskStatusItemList) => {
+				return status.id === itemStatus;
+			})
+			.map((status: ITaskStatusItemList) => {
+				taskStatusHook.editTaskStatus(status.id, {
+					order: index
+				});
+			});
+	};
+	const addNewTask = (task: ITeamTask, status: string) => {
+		const updatedBoard = {
+			...kanbanBoard,
+			[status]: [...kanbanBoard[status], task]
+		};
+		setKanbanBoard(() => updatedBoard);
+	};
+	return {
+		data: kanbanBoard as IKanban,
+		isLoading: loading,
+		columns: taskStatusHook.taskStatus,
+		searchTasks,
+		issues,
+		setPriority,
+		setLabels,
+		setSizes,
+		setIssues,
+		setEpics,
+		updateKanbanBoard: setKanbanBoard,
+		updateTaskStatus: updateTask,
+		toggleColumn,
+		isColumnCollapse,
+		isAllColumnCollapse,
+		reorderStatus,
+		addNewTask,
+		setSearchTasks
+	};
 }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index d0f7e7050..bce278a52 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -8,6 +8,6 @@ type Props = {
 
 // Since we have a `not-found.tsx` page on the root, a layout file
 // is required, even if it's just passing children through.
-export default function RootLayout({ children }: Props) {
+export default function RootLayout({ children }: Readonly<Props>) {
 	return <>{children}</>;
 }
diff --git a/apps/web/components/pages/team/tasks/TaskTable.tsx b/apps/web/components/pages/team/tasks/TaskTable.tsx
index 3bcd0f34e..371991853 100644
--- a/apps/web/components/pages/team/tasks/TaskTable.tsx
+++ b/apps/web/components/pages/team/tasks/TaskTable.tsx
@@ -1,30 +1,8 @@
 'use client';
-import { usePagination } from '@/app/hooks/features/usePagination';
 import { columns } from './columns';
 import { TasksDataTable } from './tasks-data-table';
-import { useTeamTasks } from '@/app/hooks';
-import { Paginate } from '@/lib/components';
 import { ITeamTask } from '@/app/interfaces';
 
-export function TaskTable() {
-	const { tasks } = useTeamTasks();
-
-	const { total, onPageChange, itemsPerPage, itemOffset, endOffset, setItemsPerPage, currentItems } =
-		usePagination<ITeamTask>(tasks);
-	return (
-		<div className="w-full flex flex-col min-h-full">
-			<TasksDataTable columns={columns} className="border-none" data={currentItems} />
-
-			<Paginate
-				total={total}
-				onPageChange={onPageChange}
-				pageCount={1} // Set Static to 1 - It will be calculated dynamically in Paginate component
-				itemsPerPage={itemsPerPage}
-				itemOffset={itemOffset}
-				endOffset={endOffset}
-				setItemsPerPage={setItemsPerPage}
-				className="mt-auto"
-			/>
-		</div>
-	);
+export function TaskTable({ currentItems }: Readonly<{ currentItems: ITeamTask[] }>) {
+	return <TasksDataTable columns={columns} className="border-none" data={currentItems} />;
 }
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 65fc87cb8..4bab37fac 100644
--- a/apps/web/components/pages/team/tasks/tasks-data-table.tsx
+++ b/apps/web/components/pages/team/tasks/tasks-data-table.tsx
@@ -1,13 +1,6 @@
 import { ColumnDef, flexRender, getCoreRowModel, getFilteredRowModel, useReactTable } from '@tanstack/react-table';
 import { cn } from '@/lib/utils';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@components/ui/table';
-import { Button } from '@/components/ui/button';
-import FilterButton from './FilterButton';
-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,152 +14,63 @@ export function TasksDataTable<TData, TValue>({ columns, data, className }: Read
 		getCoreRowModel: getCoreRowModel(),
 		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 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">
-							<div className="flex items-start self-stretch gap-1 my-auto">
-								{Array.from(new Set(tasks.map((status) => status.status))).map((taskStatus, index) => (
-									<StatusBadge
-										key={index}
-										color={getStatusColor(taskStatus)}
-										label={taskStatus.split('-').join(' ')}
-										count={tasks.filter((item) => item.status === taskStatus).length}
-									/>
-								))}
-							</div>
-						</div>
-						<FilterButton table={table} />
-						<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 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">
-							<svg
-								className="w-4 h-4"
-								width={24}
-								height={24}
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
+		<div className={cn('rounded-md border', className)}>
+			<Table className="relative w-full min-h-[150px]">
+				<TableHeader className="border-b border-[#B1AEBC]/30 dark:border-gray-300/30 min-h-fit max-h-10 w-full">
+					{table.getHeaderGroups().map((headerGroup) => (
+						<TableRow key={headerGroup.id}>
+							{headerGroup.headers.map((header) => {
+								return (
+									<TableHead key={header.id}>
+										{header.isPlaceholder
+											? null
+											: flexRender(header.column.columnDef.header, header.getContext())}
+									</TableHead>
+								);
+							})}
+						</TableRow>
+					))}
+				</TableHeader>
+				{table.getFilteredRowModel().rows.length ? (
+					<TableBody className="w-full">
+						{table.getFilteredRowModel().rows.map((row) => (
+							<TableRow
+								key={row.id}
+								data-state={row.getIsSelected() && 'selected'}
+								className="relative border-none min-h-10"
 							>
-								<path
-									d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10Z"
-									stroke="currentColor"
-									strokeWidth="1.3"
-								/>
-								<path
-									d="M19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10Z"
-									stroke="currentColor"
-									strokeWidth="1.3"
-								/>
-								<path
-									d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
-									stroke="currentColor"
-									strokeWidth="1.3"
-								/>
-							</svg>
-						</Button>
-					</nav>
-				</div>
-			</div>
-
-			<div className={cn('rounded-md border', className)}>
-				<Table className="relative w-full min-h-[150px]">
-					<TableHeader className="border-b border-[#B1AEBC]/30 dark:border-gray-300/30 min-h-fit max-h-10 w-full">
-						{table.getHeaderGroups().map((headerGroup) => (
-							<TableRow key={headerGroup.id}>
-								{headerGroup.headers.map((header) => {
-									return (
-										<TableHead key={header.id}>
-											{header.isPlaceholder
-												? null
-												: flexRender(header.column.columnDef.header, header.getContext())}
-										</TableHead>
-									);
-								})}
+								{row.getVisibleCells().map((cell) => (
+									<TableCell className="relative" key={cell.id}>
+										{flexRender(cell.column.columnDef.cell, cell.getContext())}
+									</TableCell>
+								))}
 							</TableRow>
 						))}
-					</TableHeader>
-					{table.getFilteredRowModel().rows.length ? (
-						<TableBody className="w-full">
-							{table.getFilteredRowModel().rows.map((row) => (
-								<TableRow
-									key={row.id}
-									data-state={row.getIsSelected() && 'selected'}
-									className="relative border-none min-h-10"
-								>
-									{row.getVisibleCells().map((cell) => (
-										<TableCell className="relative" key={cell.id}>
-											{flexRender(cell.column.columnDef.cell, cell.getContext())}
-										</TableCell>
-									))}
-								</TableRow>
-							))}
-						</TableBody>
-					) : (
-						<div className="absolute bottom-0 flex flex-col items-center justify-center flex-auto w-full h-24 min-w-full p-4 text-center -translate-x-1/2 left-1/2 md:p-5">
-							<svg
-								className="text-gray-500 size-10 dark:text-neutral-500"
-								xmlns="http://www.w3.org/2000/svg"
-								width={24}
-								height={24}
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								strokeWidth={1}
-								strokeLinecap="round"
-								strokeLinejoin="round"
-							>
-								<line x1={22} x2={2} y1={12} y2={12} />
-								<path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-								<line x1={6} x2="6.01" y1={16} y2={16} />
-								<line x1={10} x2="10.01" y1={16} y2={16} />
-							</svg>
-							<p className="mt-2 text-sm text-gray-800 dark:text-neutral-300">No data to show</p>
-						</div>
-					)}
-				</Table>
-			</div>
-		</>
+					</TableBody>
+				) : (
+					<div className="absolute bottom-0 flex flex-col items-center justify-center flex-auto w-full h-24 min-w-full p-4 text-center -translate-x-1/2 left-1/2 md:p-5">
+						<svg
+							className="text-gray-500 size-10 dark:text-column.c500"
+							xmlns="http://www.w3.org/2000/svg"
+							width={24}
+							height={24}
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth={1}
+							strokeLinecap="round"
+							strokeLinejoin="round"
+						>
+							<line x1={22} x2={2} y1={12} y2={12} />
+							<path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+							<line x1={6} x2="6.01" y1={16} y2={16} />
+							<line x1={10} x2="10.01" y1={16} y2={16} />
+						</svg>
+						<p className="mt-2 text-sm text-gray-800 dark:text-neutral-300">No data to show</p>
+					</div>
+				)}
+			</Table>
+		</div>
 	);
 }
-
-function getStatusColor(status: ITaskStatus) {
-	switch (status) {
-		case 'in-review':
-			return 'bg-[#f3d8b0]';
-		case 'backlog':
-			return 'bg-[#ffcc00]';
-		case 'open':
-			return 'bg-[#d6e4f9]';
-		case 'in-progress':
-			return 'bg-[#ece8fc]';
-		case 'ready-for-review':
-			return 'bg-[#f5f1cb]';
-		case 'blocked':
-			return 'bg-[#f5b8b8]';
-		case 'done':
-			return 'bg-[#4caf50] text-gray-100';
-		case 'completed':
-			return 'bg-[#d4efdf]';
-		case 'custom':
-			return 'bg-[#d4efdf]';
-		default:
-			return 'bg-gray-100 text-gray-800';
-	}
-}
diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
index 8a9ceaf8e..c343b27fe 100644
--- a/apps/web/components/ui/data-table.tsx
+++ b/apps/web/components/ui/data-table.tsx
@@ -17,6 +17,7 @@ import {
 import { Table, TableHeader, TableRow, TableHead, TableCell, TableBody, TableFooter } from './table';
 import { Tooltip } from 'lib/components';
 import { clsxm } from '@app/utils';
+import { cn } from '@/lib/utils';
 
 interface DataTableProps<TData, TValue> {
 	columns: ColumnDef<TData, TValue>[];
@@ -28,9 +29,15 @@ interface DataTableProps<TData, TValue> {
 		heading: string;
 		content: string;
 	};
+	isScrollable?: boolean;
 }
 
-function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataTableProps<TData, TValue>) {
+function DataTable<TData, TValue>({
+	columns,
+	data,
+	footerRows,
+	isHeader,
+}: Readonly<DataTableProps<TData, TValue>>) {
 	const [rowSelection, setRowSelection] = React.useState({});
 	const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
 	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
@@ -65,7 +72,7 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
 
 	return (
 		<>
-			<Table className="border-transparent mt-0 w-full rounded-2xl">
+			<Table className="w-full mt-0 border-transparent rounded-2xl">
 				{isHeader && (
 					<TableHeader className="">
 						{table.getHeaderGroups().map((headerGroup) => (
@@ -99,7 +106,11 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
 					</TableHeader>
 				)}
 				<div className="mt-8"></div>
-				<TableBody className="divide-y h-40 overflow-y-auto divide-gray-200 bg-light--theme-light dark:bg-dark--theme-light">
+				<TableBody
+					className={cn(
+						'divide-y h-40 overflow-y-auto divide-gray-200 bg-light--theme-light dark:bg-dark--theme-light'
+					)}
+				>
 					{table.getRowModel().rows?.length ? (
 						table.getRowModel().rows.map((row, i) => {
 							return (
@@ -134,7 +145,7 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
 					) : (
 						<TableRow>
 							<TableCell colSpan={columns.length} className="h-24 text-center">
-								No results.
+								ß No results.
 							</TableCell>
 						</TableRow>
 					)}
diff --git a/apps/web/components/ui/scroll-area.tsx b/apps/web/components/ui/scroll-area.tsx
index c43925b00..4645841c4 100644
--- a/apps/web/components/ui/scroll-area.tsx
+++ b/apps/web/components/ui/scroll-area.tsx
@@ -1,46 +1,40 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
-import { cn } from "lib/utils"
+import { cn } from '@/lib/utils';
 
 const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+	<ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			'flex touch-none select-none transition-colors',
+			orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+			orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+			className
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
index 70aac0ad4..cd6aab7e3 100644
--- a/apps/web/lib/components/Kanban.tsx
+++ b/apps/web/lib/components/Kanban.tsx
@@ -1,5 +1,5 @@
 import ThreeDotIcon from '@components/ui/svgs/three-dot';
-import React from 'react';
+import React, { RefObject } from 'react';
 import { useEffect, useState } from 'react';
 import {
 	Draggable,
@@ -24,6 +24,8 @@ import { Modal } from './modal';
 import CreateTaskModal from '@components/pages/kanban/create-task-modal';
 import Image from 'next/image';
 import EditStatusModal from '@components/pages/kanban/edit-status-modal';
+import { ScrollArea } from '@components/ui/scroll-area';
+import { cn } from '../utils';
 
 const grid = 8;
 
@@ -50,7 +52,7 @@ const getBackgroundColor = (dropSnapshot: DroppableStateSnapshot) => {
 	};
 };
 
-// this function changes column header color when dragged
+/** This function changes column header color when dragged */
 function headerStyleChanger(snapshot: DraggableStateSnapshot, bgColor: any) {
 	const backgroundColor = snapshot.isDragging ? '#3826a6' : bgColor;
 
@@ -70,7 +72,7 @@ function InnerItemList({ items, title }: { title: string; items: ITeamTask[]; dr
 
 	return (
 		<>
-			<section className="flex flex-col pb-2 relative">
+			<section className="relative flex flex-col items-center pb-2">
 				{Array.isArray(items) &&
 					items.length > 0 &&
 					items.map((item: ITeamTask, index: number) => (
@@ -96,15 +98,15 @@ function InnerItemList({ items, title }: { title: string; items: ITeamTask[]; dr
 						</Draggable>
 					))}
 				{Array.isArray(items) && items?.length == 0 && (
-					<div className="bg-[#f2f2f2] dark:bg-[#191a20] absolute">
+					<div className="bg-[#f2f2f2] dark:bg-[#191a20] absolute w-full">
 						<div className="h-[180px] bg-transparent bg-white dark:bg-[#1e2025] w-[340px] mt-3 flex justify-center items-center my-2 rounded-xl">
 							{t('common.NOT_FOUND')}!
 						</div>
 						<div
 							onClick={openModal}
-							className="h-[52px] mt-4 w-[340px] flex flex-row items-center text-sm not-italic font-semibold rounded-2xl gap-4 bg-white dark:bg-dark--theme-light p-4"
+							className="h-[52px] mt-4 w-full flex flex-row items-center text-sm not-italic font-semibold rounded-2xl gap-4 bg-white dark:bg-dark--theme-light p-4"
 						>
-							<AddIcon className=" h-5 w-5" />
+							<AddIcon className="w-5 h-5 " />
 							<p>{t('common.CREATE_TASK')}</p>
 						</div>
 					</div>
@@ -134,11 +136,44 @@ function InnerList(props: {
 	return (
 		<div style={getBackgroundColor(dropSnapshot)} ref={dropProvided.innerRef}>
 			<InnerItemList items={items} title={title} dropSnapshot={dropSnapshot} />
-			<>{dropProvided.placeholder}</>
+			<>{dropProvided.placeholder as React.ReactElement}</>
 		</div>
 	);
 }
-
+/**
+ * Calculates the dynamic height of a Kanban column based on the number of items
+ *
+ * @param {number} itemsLength - The number of items in the column
+ * @param {RefObject<HTMLDivElement> | undefined} containerRef - Reference to the container element
+ * @returns {string} The calculated height with 'px' unit
+ *
+ * Rules:
+ * - 2 items or less: fixed height of 320px
+ * - 3 items: fixed height of 520px
+ * - More than 3 items: uses container height or fallback to 720px
+ *
+ * @example
+ * // For 1 items or less
+ * getKanbanColumnHeight(1, containerRef) // returns '320px'
+ *
+ * // For 3 items
+ * getColumnHeight(3, containerRef) // returns '520px'
+ *
+ * // For more than 3 items
+ * getColumnHeight(4, containerRef) // returns container height or '720px'
+ */
+const getKanbanColumnHeight = (itemsLength: number, containerRef: RefObject<HTMLDivElement> | undefined): string => {
+	switch (true) {
+		case itemsLength <= 1:
+			return '320px';
+		case itemsLength <= 3:
+			return '520px';
+		case itemsLength > 3:
+			return `${containerRef?.current?.offsetHeight || 720}px`;
+		default:
+			return '320px';
+	}
+};
 /**
  * wrapper to allow the inner column to act as
  * a droppable area for cards being dragged
@@ -224,7 +259,7 @@ export const EmptyKanbanDroppable = ({
 							{...provided.draggableProps}
 							{...provided.dragHandleProps}
 							style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
-							className="flex flex-row px-2 w-fit h-40"
+							className="flex flex-row h-40 px-2 w-fit"
 						>
 							{title.length > 0 ? (
 								<>
@@ -293,7 +328,7 @@ export const EmptyKanbanDroppable = ({
 												</div>
 												<div>
 													<h2
-														className="flex flex-row font-semibold text-sm not-italic h-full text-black capitalize font-poppins"
+														className="flex flex-row h-full text-sm not-italic font-semibold text-black capitalize font-poppins"
 														{...provided.dragHandleProps}
 														aria-label={`${title}`}
 													>
@@ -353,7 +388,7 @@ const KanbanDraggableHeader = ({
 					<div className="flex flex-row gap-2.5 items-center">
 						<Image alt={title} src={icon} width={20} height={20} />
 						<h2
-							className="text-sm font-semibold not-italic text-black font-poppins capitalize"
+							className="text-sm not-italic font-semibold text-black capitalize font-poppins"
 							{...provided.dragHandleProps}
 							aria-label={`${title} quote list`}
 						>
@@ -424,7 +459,8 @@ const KanbanDraggable = ({
 	isLoading,
 	icon,
 	items,
-	backgroundColor
+	backgroundColor,
+	containerRef
 }: {
 	index: number;
 	setColumn: any;
@@ -434,6 +470,7 @@ const KanbanDraggable = ({
 	isLoading: boolean;
 	backgroundColor: any;
 	items: ITeamTask[];
+	containerRef?: RefObject<HTMLDivElement>;
 	addNewTask: (value: ITeamTask, status: string) => void;
 }) => {
 	const t = useTranslations();
@@ -445,12 +482,22 @@ const KanbanDraggable = ({
 			{title && (
 				<Draggable key={title} index={index} draggableId={title}>
 					{(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
-						<div
+						<ScrollArea
 							ref={provided.innerRef}
 							{...provided.draggableProps}
 							{...provided.dragHandleProps}
 							// style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
-							className="relative flex flex-col px-2 h-fit w-[355px]"
+							className={cn(
+								'relative flex flex-col w-[355px] h-fit',
+								items.length > 4 ? 'min-h-svh' : 'min-h-fit'
+							)}
+							style={{
+								height:
+									containerRef && items && items.length > 1
+										? getKanbanColumnHeight(items.length, containerRef)
+										: '320px',
+								paddingBottom: `${containerRef && items && items.length > 1 ? 25 : '0'}px`
+							}}
 						>
 							{title ? (
 								<>
@@ -477,15 +524,15 @@ const KanbanDraggable = ({
 										/>
 										<button
 											onClick={() => openModal()}
-											className="flex flex-row items-center text-sm not-italic font-semibold rounded-2xl gap-4 bg-white dark:bg-dark--theme-light p-4"
+											className="flex flex-row items-center gap-4 p-4 text-sm not-italic font-semibold bg-white rounded-2xl dark:bg-dark--theme-light"
 										>
-											<AddIcon className=" h-5 w-5" />
+											<AddIcon className="w-5 h-5 " />
 											<p>{t('common.CREATE_TASK')}</p>
 										</button>
 									</div>
 								</>
 							) : null}
-						</div>
+						</ScrollArea>
 					)}
 				</Draggable>
 			)}
diff --git a/apps/web/lib/components/accordian.tsx b/apps/web/lib/components/accordian.tsx
index a17c2fa71..6e188ddc2 100644
--- a/apps/web/lib/components/accordian.tsx
+++ b/apps/web/lib/components/accordian.tsx
@@ -16,7 +16,7 @@ export const Accordian = ({ children, title, className, isDanger, id, defaultOpe
 	return (
 		<div className={`w-full ${isDanger && !isOpen && 'mb-[500px]'}`} id={id}>
 			<div
-				className={`rounded-2xl p-2 ${className} shadow-[0px 14px 34px rgba(0, 0, 0, 0.05)] bg-light--theme-light dark:bg-dark--theme-light`}
+				className={`rounded-2xl p-2 ${className} shadow-[0px_14px_34px_rgba(0,0,0,0.05)] bg-light--theme-light dark:bg-dark--theme-light`}
 			>
 				<Disclosure defaultOpen={defaultOpen}>
 					{({ open }) => {
diff --git a/apps/web/lib/components/container.tsx b/apps/web/lib/components/container.tsx
index b1b09c4f2..fff9aa9b8 100644
--- a/apps/web/lib/components/container.tsx
+++ b/apps/web/lib/components/container.tsx
@@ -15,7 +15,7 @@ export function Container({ children, className, fullWidth }: PropsWithChildren<
 			leaveTo="opacity-0"
 			className="w-full p-0 m-0"
 		>
-			<div className={clsxm('transition-all', !fullWidth && 'x-container', fullWidth && 'mx-8', className)}>
+			<div className={clsxm('transition-all', !fullWidth && 'x-container', fullWidth && 'px-8', className)}>
 				{children}
 			</div>
 		</Transition>
diff --git a/apps/web/lib/components/sidebar-accordian.tsx b/apps/web/lib/components/sidebar-accordian.tsx
index cae994279..4c36d498b 100644
--- a/apps/web/lib/components/sidebar-accordian.tsx
+++ b/apps/web/lib/components/sidebar-accordian.tsx
@@ -13,7 +13,7 @@ export const SidebarAccordian = ({ children, title, className, wrapperClassName,
 	return (
 		<div className="w-full ">
 			<div
-				className={`rounded-2xl bg-[transparent]  ${className} shadow-[0px 14px 34px rgba(0, 0, 0, 0.05)] dark:bg-dark--theme `}
+				className={`rounded-2xl bg-[transparent]  ${className} shadow-[0px_14px_34px_rgba(0,0,0,0.05)] dark:bg-dark--theme `}
 			>
 				<Disclosure defaultOpen>
 					{({ open }) => (
@@ -34,7 +34,7 @@ export const SidebarAccordian = ({ children, title, className, wrapperClassName,
 								/>
 							</Disclosure.Button>
 							{children && (
-								<Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500 dark:bg-dark--theme shadow-[0px 14px 34px rgba(0, 0, 0, 0.05)] bg-light--theme-light dark:bg-dark--theme-light ">
+								<Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500 dark:bg-dark--theme shadow-[0px_14px_34px_rgba(0,0,0,0.05)] bg-light--theme-light dark:bg-dark--theme-light ">
 									{children}
 								</Disclosure.Panel>
 							)}
diff --git a/apps/web/lib/features/all-teams-members-card-view.tsx b/apps/web/lib/features/all-teams-members-card-view.tsx
index 472b14b84..4c79fbbd5 100644
--- a/apps/web/lib/features/all-teams-members-card-view.tsx
+++ b/apps/web/lib/features/all-teams-members-card-view.tsx
@@ -22,13 +22,13 @@ export default function TeamsMembersCardView({ teams }: { teams: IOrganizationTe
 
 							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme flex flex-col gap-2 mt-4">
 								{team.members.length > 0 ? (
-									<ul>
+									<ul className="w-full">
 										{team.members.map((member) => {
 											return (
-												<li key={member.id} className='mb-4'>
+												<li key={member.id} className="mb-4 w-full">
 													<UserTeamCard key={`${member.id}${team.id}`} member={member} />
 												</li>
-											)
+											);
 										})}
 									</ul>
 								) : (
diff --git a/apps/web/lib/features/all-teams/users-teams-card/member-infos.tsx b/apps/web/lib/features/all-teams/users-teams-card/member-infos.tsx
index a43b32dfd..3aecc4c70 100644
--- a/apps/web/lib/features/all-teams/users-teams-card/member-infos.tsx
+++ b/apps/web/lib/features/all-teams/users-teams-card/member-infos.tsx
@@ -1,8 +1,9 @@
+import { cn } from '@/lib/utils';
 import { useTeamMemberCard } from '@app/hooks';
 import { OT_Member } from '@app/interfaces';
 import { UserInfo } from 'lib/features/team/user-team-card/user-info';
 
-export default function MemberInfo({ member }: { member: OT_Member }) {
+export default function MemberInfo({ member, className }: { member: OT_Member; className?: string }) {
 	const memberInfo = useTeamMemberCard(member);
-	return <UserInfo memberInfo={memberInfo} className="2xl:w-[20.625rem] w-1/4" publicTeam={false} />;
+	return <UserInfo memberInfo={memberInfo} className={cn('2xl:w-[20.625rem] w-1/4', className)} publicTeam={false} />;
 }
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx
index 3957a7797..1920fee16 100644
--- a/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-card.tsx
@@ -12,11 +12,14 @@ import { UserTeamCardMenu } from 'lib/features/team/user-team-card/user-team-car
 import { useTeamMemberCard, useTeamTasks, useTMCardTaskEdit } from '@app/hooks';
 import { useEffect, useState } from 'react';
 
-export default function UserTeamCard({ member }: { member: OT_Member }) {
+export default function UserTeamCard({
+	member,
+	className = 'max-w-full'
+}: Readonly<{ member: OT_Member; className?: string }>) {
 	return (
 		<Transition
 			show={true}
-			enter="transition-opacity duration-75"
+			enter="transition-opacity duration-75 w-full"
 			enterFrom="opacity-0"
 			enterTo="opacity-100"
 			leave="transition-opacity duration-150"
@@ -26,39 +29,43 @@ export default function UserTeamCard({ member }: { member: OT_Member }) {
 			<Card
 				shadow="bigger"
 				className={clsxm(
-					'sm:block hidden transition-all dark:bg-[#1E2025] min-h-[7rem] !py-4',
-					'dark:border border border-transparent dark:border-[#FFFFFF14]'
+					'sm:block hidden transition-all dark:bg-[#1E2025] min-h-[7rem] w-full !py-4',
+					'dark:border border border-transparent dark:border-[#FFFFFF14]',
+					className
 				)}
 			>
-				<div className="flex m-0 relative items-center">
-					<div className="absolute left-0 cursor-pointer">
-						<SixSquareGridIcon className="w-2  text-[#CCCCCC] dark:text-[#4F5662]" />
+				<div className="relative flex items-center w-full m-0">
+					<div className="absolute left-0 cursor-pointer w-fit">
+						<SixSquareGridIcon className="w-2 max-w-fit text-[#CCCCCC] dark:text-[#4F5662]" />
 					</div>
 					{/* User information */}
-					<div className="relative">
-						<MemberInfo member={member} />
+					<div className="relative w-fit">
+						<MemberInfo member={member} className="!w-fit" />
 					</div>
 
 					<VerticalSeparator />
 
 					{/* Task information */}
-					<div className="flex justify-between items-center flex-1 min-w-[40%]">
-						<UserTeamActiveTaskInfo member={member} />
+					<div className="flex items-center justify-between flex-initial w-fit min-w-fit">
+						<UserTeamActiveTaskInfo
+							member={member}
+							className="flex-initial !w-fit !min-w-full !max-w-[280px]"
+						/>
 					</div>
 
 					<VerticalSeparator className="ml-2" />
 
 					{/* Task worked Times */}
-					<UserTeamActiveTaskTimes member={member} />
+					<UserTeamActiveTaskTimes member={member} className="!w-fit max-w-fit" />
 
 					<VerticalSeparator />
 
 					{/* Task estimate Info */}
-					<UserTeamActiveTaskEstimate member={member} />
+					<UserTeamActiveTaskEstimate member={member} className="!w-fit" />
 
 					<VerticalSeparator />
 
-					<UserTeamActiveTaskTodayWorked member={member} />
+					<UserTeamActiveTaskTodayWorked member={member} className="!w-fit !max-w-fit" />
 
 					{/* Card Menu */}
 					<div className="absolute hidden right-2">
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task-times.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task-times.tsx
index 53545b014..438de4847 100644
--- a/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task-times.tsx
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task-times.tsx
@@ -1,9 +1,10 @@
+import { cn } from '@/lib/utils';
 import { useTeamMemberCard, useTeamTasks } from '@app/hooks';
 import { ITeamTask, OT_Member } from '@app/interfaces';
 import { TaskTimes } from 'lib/features/task/task-times';
 import { useEffect, useState } from 'react';
 
-export default function UserTeamActiveTaskTimes({ member }: { member: OT_Member }) {
+export default function UserTeamActiveTaskTimes({ member, className }: { member: OT_Member; className?: string }) {
 	const memberInfo = useTeamMemberCard(member);
 
 	const { getTaskById } = useTeamTasks();
@@ -24,7 +25,10 @@ export default function UserTeamActiveTaskTimes({ member }: { member: OT_Member
 			memberInfo={memberInfo}
 			task={activeTask}
 			isAuthUser={memberInfo.isAuthUser}
-			className="2xl:w-48 3xl:w-[12rem] w-1/5 lg:px-4 px-2 flex flex-col gap-y-[1.125rem] justify-center"
+			className={cn(
+				'2xl:w-48 3xl:w-[12rem] w-1/5 lg:px-4 px-2 flex flex-col gap-y-[1.125rem] justify-center',
+				className
+			)}
 		/>
 	);
 }
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx
index 27a75ce65..f0f8544e9 100644
--- a/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-team-active-task.tsx
@@ -1,9 +1,13 @@
+import { cn } from '@/lib/utils';
 import { useTeamMemberCard, useTeamTasks, useTMCardTaskEdit } from '@app/hooks';
 import { ITeamTask, OT_Member } from '@app/interfaces';
 import { TaskInfo } from 'lib/features/team/user-team-card/task-info';
 import { useEffect, useState } from 'react';
 
-export default function UserTeamActiveTaskInfo({ member }: { member: OT_Member }) {
+export default function UserTeamActiveTaskInfo({
+	member,
+	className
+}: Readonly<{ member: OT_Member; className?: string }>) {
 	const memberInfo = useTeamMemberCard(member);
 	const [activeTask, setActiveTask] = useState<ITeamTask | null | undefined>(null);
 	const taskEdition = useTMCardTaskEdit(activeTask);
@@ -24,12 +28,12 @@ export default function UserTeamActiveTaskInfo({ member }: { member: OT_Member }
 				<TaskInfo
 					edition={{ ...taskEdition, task: activeTask }}
 					memberInfo={memberInfo}
-					className="flex-1 lg:px-4 px-2 overflow-y-hidden"
+					className={cn('flex-1 lg:px-4 px-2 overflow-y-hidden w-full max-w-fit', className)}
 					publicTeam={false}
 					tab="default"
 				/>
 			) : (
-				<div className="w-full text-start px-6">--</div>
+				<div className="w-full px-6 text-start">--</div>
 			)}
 		</>
 	);
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-team-task-estimate.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-team-task-estimate.tsx
index e61f1702e..9fb0f068b 100644
--- a/apps/web/lib/features/all-teams/users-teams-card/user-team-task-estimate.tsx
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-team-task-estimate.tsx
@@ -1,9 +1,13 @@
+import { cn } from '@/lib/utils';
 import { useTeamMemberCard, useTeamTasks, useTMCardTaskEdit } from '@app/hooks';
 import { ITeamTask, OT_Member } from '@app/interfaces';
 import { TaskEstimateInfo } from 'lib/features/team/user-team-card/task-estimate';
 import { useEffect, useState } from 'react';
 
-export default function UserTeamActiveTaskEstimate({ member }: { member: OT_Member }) {
+export default function UserTeamActiveTaskEstimate({
+	member,
+	className
+}: Readonly<{ member: OT_Member; className?: string }>) {
 	const memberInfo = useTeamMemberCard(member);
 	const [activeTask, setActiveTask] = useState<ITeamTask | null | undefined>(null);
 	const taskEdition = useTMCardTaskEdit(activeTask);
@@ -23,7 +27,7 @@ export default function UserTeamActiveTaskEstimate({ member }: { member: OT_Memb
 			memberInfo={memberInfo}
 			edition={taskEdition}
 			activeAuthTask={true}
-			className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64"
+			className={cn('w-1/5 lg:px-3 2xl:w-52 3xl:w-64', className)}
 		/>
 	);
 }
diff --git a/apps/web/lib/features/all-teams/users-teams-card/user-team-today-worked.tsx b/apps/web/lib/features/all-teams/users-teams-card/user-team-today-worked.tsx
index c2319e801..38b58c15e 100644
--- a/apps/web/lib/features/all-teams/users-teams-card/user-team-today-worked.tsx
+++ b/apps/web/lib/features/all-teams/users-teams-card/user-team-today-worked.tsx
@@ -1,11 +1,20 @@
+import { cn } from '@/lib/utils';
 import { useTeamMemberCard } from '@app/hooks';
 import { OT_Member } from '@app/interfaces';
 import { TodayWorkedTime } from 'lib/features/task/task-times';
 
-export default function UserTeamActiveTaskTodayWorked({ member }: { member: OT_Member }) {
+export default function UserTeamActiveTaskTodayWorked({
+	member,
+	className
+}: Readonly<{ member: OT_Member; className?: string }>) {
 	const memberInfo = useTeamMemberCard(member);
 	return (
-		<div className="flex justify-center items-center cursor-pointer w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem]">
+		<div
+			className={cn(
+				'flex justify-center items-center cursor-pointer w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem]',
+				className
+			)}
+		>
 			<TodayWorkedTime isAuthUser={memberInfo.isAuthUser} className="" memberInfo={memberInfo} />
 		</div>
 	);
diff --git a/apps/web/lib/features/integrations/activity-calendar/index.tsx b/apps/web/lib/features/integrations/activity-calendar/index.tsx
index 2676e4a21..42aef0a6c 100644
--- a/apps/web/lib/features/integrations/activity-calendar/index.tsx
+++ b/apps/web/lib/features/integrations/activity-calendar/index.tsx
@@ -8,139 +8,144 @@ import moment from 'moment';
 import Separator from '@components/ui/separator';
 
 export function ActivityCalendar() {
-    const { timerLogsDailyReport, timerLogsDailyReportLoading } = useTimeLogs();
-    const [calendarData, setCalendarData] = useState<CalendarDatum[]>([]);
-    useEffect(() => {
-        setCalendarData(
-            timerLogsDailyReport.map((el) => ({ value: Number((el.sum / 3600).toPrecision(2)), day: el.date }))
-        );
-    }, [timerLogsDailyReport]);
+	const { timerLogsDailyReport, timerLogsDailyReportLoading } = useTimeLogs();
+	const [calendarData, setCalendarData] = useState<CalendarDatum[]>([]);
+	useEffect(() => {
+		setCalendarData(
+			timerLogsDailyReport.map((el) => ({ value: Number((el.sum / 3600).toPrecision(2)), day: el.date }))
+		);
+	}, [timerLogsDailyReport]);
 
-    const colorRange = [
-        '#9370DB',
-        '#6A5ACD',
-        '#4169E1',
-        '#0000FF',
-        '#1E90FF',
-        '#87CEEB',
-        '#FFA500',
-        '#FF8C00',
-        '#FF4500',
-        '#FF0000'
-    ];
+	const colorRange = [
+		'#9370DB',
+		'#6A5ACD',
+		'#4169E1',
+		'#0000FF',
+		'#1E90FF',
+		'#87CEEB',
+		'#FFA500',
+		'#FF8C00',
+		'#FF4500',
+		'#FF0000'
+	];
 
-    return (
-        <div className="h-[650px] w-full flex items-center justify-center overflow-y-hidden overflow-x-auto">
-            {timerLogsDailyReportLoading ? (
-                <ActivityCalendarSkeleton />
-            ) : (
-                <div className='flex flex-col w-full h-full'>
-                    <ActivityLegend />
-                    <div className='h-80 w-full'>
-                        <ResponsiveCalendar
-                            tooltip={(value) => (
-                                <div className="flex items-center mb-2">
-                                    <span className="w-4 h-4 inline-block mr-2" style={{ backgroundColor: value.color }}></span>
-                                    <span className={`text-[14px] font-semibold dark:!text-primary-xlight`}>{value.day}</span>
-                                </div>
-                            )}
-                            yearLegend={(value) => value}
-                            data={calendarData}
-                            from={moment().startOf('year').toDate()}
-                            to={moment().startOf('year').toDate()}
-                            emptyColor="#ffffff"
-                            colors={colorRange}
-                            yearSpacing={40}
-                            monthBorderWidth={0}
-                            dayBorderWidth={0}
-                            daySpacing={2}
-                            monthLegendPosition="before"
-                            margin={{ top: 0, right: 5, bottom: 0, left: 5 }}
-                            legends={[
-                                {
-                                    anchor: 'bottom-right',
-                                    direction: 'row',
-                                    translateY: 36,
-                                    itemCount: 4,
-                                    itemWidth: 70,
-                                    itemHeight: 20,
-                                    itemsSpacing: 14,
-                                    itemDirection: 'left-to-right',
-                                    symbolSize: 20,
-                                    data: [
-                                        { color: '#9370DB', label: '0 - 4 Hours', id: 'legend-purple' },
-                                        { color: '#0000FF', label: '4 - 10 Hours', id: 'legend-blue' },
-                                        { color: '#FFA500', label: '10 - 18 Hours', id: 'legend-orange' },
-                                        { color: '#FF0000', label: '18 - 24 Hours', id: 'legend-red' }
-                                    ]
-                                }
-                            ]}
-                            monthSpacing={20}
-                            monthLegend={(year, month) => {
-                                return new Date(year, month).toLocaleString('en-US', { month: 'short' });
-                            }}
-                            theme={{
-                                labels: {
-                                    text: {
-                                        fill: '#9ca3af',
-                                        fontSize: 16,
-                                        font: 'icon',
-                                        animation: 'ease',
-                                        border: '12',
-                                    }
-                                }
-                            }}
-                        />
-                    </div>
-                </div>
-            )}
-        </div>
-    );
+	return (
+		<div className="h-[650px] w-full flex items-center justify-center overflow-y-hidden overflow-x-auto">
+			{timerLogsDailyReportLoading ? (
+				<ActivityCalendarSkeleton />
+			) : (
+				<div className="flex flex-col w-full h-full">
+					<ActivityLegend />
+					<div className="w-full h-80">
+						<ResponsiveCalendar
+							tooltip={(value) => (
+								<div className="flex items-center mb-2">
+									<span
+										className="inline-block w-4 h-4 mr-2"
+										style={{ backgroundColor: value.color }}
+									></span>
+									<span className={`text-[14px] font-semibold dark:!text-primary-xlight`}>
+										{value.day}
+									</span>
+								</div>
+							)}
+							yearLegend={(value) => value}
+							data={calendarData}
+							from={moment().startOf('year').toDate()}
+							to={moment().startOf('year').toDate()}
+							emptyColor="#ffffff"
+							colors={colorRange}
+							yearSpacing={40}
+							monthBorderWidth={0}
+							dayBorderWidth={0}
+							daySpacing={2}
+							monthLegendPosition="before"
+							margin={{ top: 0, right: 5, bottom: 0, left: 5 }}
+							legends={[
+								{
+									anchor: 'bottom-right',
+									direction: 'row',
+									translateY: 36,
+									itemCount: 4,
+									itemWidth: 70,
+									itemHeight: 20,
+									itemsSpacing: 14,
+									itemDirection: 'left-to-right',
+									symbolSize: 20,
+									data: [
+										{ color: '#9370DB', label: '0 - 4 Hours', id: 'legend-purple' },
+										{ color: '#0000FF', label: '4 - 10 Hours', id: 'legend-blue' },
+										{ color: '#FFA500', label: '10 - 18 Hours', id: 'legend-orange' },
+										{ color: '#FF0000', label: '18 - 24 Hours', id: 'legend-red' }
+									]
+								}
+							]}
+							monthSpacing={20}
+							monthLegend={(year, month) => {
+								return new Date(year, month).toLocaleString('en-US', { month: 'short' });
+							}}
+							theme={{
+								labels: {
+									text: {
+										fill: '#9ca3af',
+										fontSize: 16,
+										font: 'icon',
+										animation: 'ease',
+										border: '12'
+									}
+								}
+							}}
+						/>
+					</div>
+				</div>
+			)}
+		</div>
+	);
 }
 
 // Skeletons
 function ActivityCalendarSkeleton() {
-    const { innerWidth: deviceWith } = window;
+	const { innerWidth: deviceWith } = window;
 
-    const skeletons = Array.from(Array(12));
+	const skeletons = Array.from(Array(12));
 
-    return (
-        <div className="w-full overflow-hidden flex h-32 items-center justify-around">
-            {skeletons.map((_, index) => (
-                <Skeleton
-                    key={index}
-                    width={(deviceWith - (deviceWith * 10) / 100) / 12}
-                    className=" dark:bg-transparent h-32"
-                />
-            ))}
-        </div>
-    );
+	return (
+		<div className="flex items-center justify-around w-full h-32 overflow-hidden">
+			{skeletons.map((_, index) => (
+				<Skeleton
+					key={index}
+					width={(deviceWith - (deviceWith * 10) / 100) / 12}
+					className="h-32 dark:bg-transparent"
+				/>
+			))}
+		</div>
+	);
 }
 
 function ActivityLegend() {
-    return (
-        <div className="flex w-full items-center justify-start p-1 bg-white dark:bg-dark--theme-light rounded-lg shadow shadow-slate-50 dark:shadow-slate-700 space-x-3 px-3">
-            <h3 className="text-lg font-bold mb-2">Legend</h3>
-            <Separator />
-            <div className="flex items-center" id="legend-purple">
-                <span className="w-4 h-4 inline-block mr-2" style={{ backgroundColor: '#9370DB' }}></span>
-                <span>0 - 4 Hours</span>
-            </div>
-            <Separator />
-            <div className="flex items-center" id="legend-blue">
-                <span className="w-4 h-4 inline-block mr-2" style={{ backgroundColor: '#0000FF' }}></span>
-                <span>4 - 10 Hours</span>
-            </div>
-            <Separator />
-            <div className="flex items-center" id="legend-orange">
-                <span className="w-4 h-4 inline-block mr-2" style={{ backgroundColor: '#FFA500' }}></span>
-                <span>10 - 18 Hours</span>
-            </div>
-            <Separator />
-            <div className="flex items-center" id="legend-red">
-                <span className="w-4 h-4 inline-block mr-2" style={{ backgroundColor: '#FF0000' }}></span>
-                <span>18 - 24 Hours</span>
-            </div>
-        </div>
-    );
+	return (
+		<div className="flex w-full flex-wrap items-center gap-3 justify-start p-1 bg-white dark:bg-dark--theme-light rounded-lg shadow shadow-slate-50 dark:shadow-slate-700 space-x-3 px-3 max-w-[100svw] min-w-fit">
+			<h3 className="mb-2 text-lg font-bold">Legend</h3>
+			<Separator className="!w-fit" />
+			<div className="flex items-center" id="legend-purple">
+				<span className="inline-block w-4 h-4 mr-2" style={{ backgroundColor: '#9370DB' }}></span>
+				<span className="text-nowrap">0 - 4 Hours</span>
+			</div>
+			<Separator className="!w-fit" />
+			<div className="flex items-center" id="legend-blue">
+				<span className="inline-block w-4 h-4 mr-2" style={{ backgroundColor: '#0000FF' }}></span>
+				<span className="text-nowrap">4 - 10 Hours</span>
+			</div>
+			<Separator className="!w-fit" />
+			<div className="flex items-center" id="legend-orange">
+				<span className="inline-block w-4 h-4 mr-2" style={{ backgroundColor: '#FFA500' }}></span>
+				<span className="text-nowrap">10 - 18 Hours</span>
+			</div>
+			<Separator className="!w-fit" />
+			<div className="flex items-center" id="legend-red">
+				<span className="inline-block w-4 h-4 mr-2" style={{ backgroundColor: '#FF0000' }}></span>
+				<span className="text-nowrap">18 - 24 Hours</span>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
index 01bc391b0..52fb005b5 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -1,573 +1,545 @@
-"use client"
+'use client';
 
-import * as React from "react"
+import * as React from 'react';
 import {
-    ColumnDef,
-    ColumnFiltersState,
-    SortingState,
-    VisibilityState, getCoreRowModel,
-    getFilteredRowModel,
-    getPaginationRowModel,
-    getSortedRowModel,
-    useReactTable
-} from "@tanstack/react-table"
-import { ArrowUpDownIcon, MoreHorizontal } from "lucide-react"
-import { Button } from "@components/ui/button"
+	ColumnDef,
+	ColumnFiltersState,
+	SortingState,
+	VisibilityState,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	useReactTable
+} from '@tanstack/react-table';
+import { ArrowUpDownIcon, MoreHorizontal } from 'lucide-react';
+import { Button } from '@components/ui/button';
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuPortal,
-    DropdownMenuSeparator,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
-    DropdownMenuTrigger,
-} from "@components/ui/dropdown-menu"
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuPortal,
+	DropdownMenuSeparator,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger
+} from '@components/ui/dropdown-menu';
 import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectLabel,
-    SelectTrigger,
-    SelectValue,
-} from "@components/ui/select"
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue
+} from '@components/ui/select';
 import {
-    MdKeyboardDoubleArrowLeft,
-    MdKeyboardDoubleArrowRight,
-    MdKeyboardArrowLeft,
-    MdKeyboardArrowRight
-} from "react-icons/md"
-import { ConfirmStatusChange, StatusBadge, statusOptions, dataSourceTimeSheet, TimeSheet } from "."
-import { useModal, useTimelogFilterOptions } from "@app/hooks"
-import { Checkbox } from "@components/ui/checkbox"
+	MdKeyboardDoubleArrowLeft,
+	MdKeyboardDoubleArrowRight,
+	MdKeyboardArrowLeft,
+	MdKeyboardArrowRight
+} from 'react-icons/md';
+import { ConfirmStatusChange, StatusBadge, statusOptions, dataSourceTimeSheet, TimeSheet } from '.';
+import { useModal, useTimelogFilterOptions } from '@app/hooks';
+import { Checkbox } from '@components/ui/checkbox';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
+import { clsxm } from '@/app/utils';
+import { AlertDialogConfirmation, statusColor } from '@/lib/components';
+import { Badge } from '@components/ui/badge';
 import {
-    Accordion,
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger,
-} from "@components/ui/accordion"
-import { clsxm } from "@/app/utils"
-import { AlertDialogConfirmation, statusColor } from "@/lib/components"
-import { Badge } from '@components/ui/badge'
-import { EditTaskModal, RejectSelectedModal, StatusAction, StatusType, getTimesheetButtons } from "@/app/[locale]/timesheet/[memberId]/components"
-import { useTranslations } from "next-intl"
-import { formatDate } from "@/app/helpers"
-import { GroupedTimesheet, useTimesheet } from "@/app/hooks/features/useTimesheet"
-import { TaskNameInfoDisplay } from "../../task/task-displays"
-import { TimesheetStatus } from "@/app/interfaces"
+	EditTaskModal,
+	RejectSelectedModal,
+	StatusAction,
+	StatusType,
+	getTimesheetButtons
+} from '@/app/[locale]/timesheet/[memberId]/components';
+import { useTranslations } from 'next-intl';
+import { formatDate } from '@/app/helpers';
+import { GroupedTimesheet, useTimesheet } from '@/app/hooks/features/useTimesheet';
+import { TaskNameInfoDisplay } from '../../task/task-displays';
+import { TimesheetStatus } from '@/app/interfaces';
 import dayjs from 'dayjs';
 
-
 export const columns: ColumnDef<TimeSheet>[] = [
-    {
-        enableHiding: false,
-        id: "select",
-        size: 50,
-        header: ({ table }) => (
-            <div className="gap-x-4 flex items-center" >
-                <Checkbox
-                    checked={
-                        table.getIsAllPageRowsSelected() ||
-                        (table.getIsSomePageRowsSelected() && "indeterminate")
-                    }
-                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-                    aria-label="Select all"
-                />
-                <span>Task</span>
-            </div>
-        ),
-        cell: ({ row }) => (
-
-            <div className="flex items-center gap-x-4 w-full max-w-[640px]" >
-                <Checkbox
-                    checked={row.getIsSelected()}
-                    onCheckedChange={(value) => row.toggleSelected(!!value)}
-                    aria-label="Select row"
-                />
-                <span className="capitalize !text-sm break-words whitespace-break-spaces sm:text-base !truncate !overflow-hidden">{row.original.task}</span>
-            </div>
-        ),
-    },
-    {
-        accessorKey: "name",
-        header: ({ column }) => (
-            <Button
-                variant="ghost"
-                onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-                className="text-sm sm:text-base w-full text-center"
-            >
-                Project
-                <ArrowUpDownIcon className="ml-2 h-4 w-4" />
-            </Button>
-        ),
-        cell: ({ row }) => (
-            <TaskDetails
-                description={row.original.description}
-                name={row.original.name}
-            />
-        ),
-    },
-    {
-        accessorKey: "employee",
-        header: ({ column }) => (
-            <Button
-                variant="ghost"
-                onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-                className="text-center flex items-center justify-center font-medium w-full sm:w-96 text-sm sm:text-base">
-                <span>Employee</span>
-                <ArrowUpDownIcon className="ml-2 h-4 w-4" />
-            </Button>
-        ),
-        cell: ({ row }) => (
-            <div className="text-center font-medium w-full sm:w-96 text-sm sm:text-base">
-                <span>  {row.original.employee}</span>
-            </div>
-        ),
-    },
-    {
-        accessorKey: "status",
-        header: ({ column }) => (
-            <Button
-                variant="ghost"
-                onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-                className=" flex items-center justify-center text-center w-full sm:w-auto text-sm sm:text-base"
-            >
-                <span>Status</span>
-                <ArrowUpDownIcon className="ml-2 h-4 w-4" />
-            </Button>
-
-        ),
-        cell: ({ row }) => {
-            return <StatusBadge
-                selectedStatus={row.original.status} />
-        }
-    },
-    {
-        accessorKey: "time",
-        header: () => (
-            <div className="text-center w-full text-sm sm:text-base">Time</div>
-        ),
-        cell: ({ row }) => (
-            <div className={`text-center font-sans w-full text-sm sm:text-base ${statusColor(row.original.status).text}`}>
-                {row.original.time}
-            </div>
-        ),
-    },
-    {
-        id: "actions",
-        enableHiding: false,
-        cell: ({ row }) => {
-
-            return (
-                <TaskActionMenu idTasks={row?.original?.id} />
-            );
-        },
-    },
+	{
+		enableHiding: false,
+		id: 'select',
+		size: 50,
+		header: ({ table }) => (
+			<div className="flex items-center gap-x-4">
+				<Checkbox
+					checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+					onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+					aria-label="Select all"
+				/>
+				<span>Task</span>
+			</div>
+		),
+		cell: ({ row }) => (
+			<div className="flex items-center gap-x-4 w-full max-w-[640px]">
+				<Checkbox
+					checked={row.getIsSelected()}
+					onCheckedChange={(value) => row.toggleSelected(!!value)}
+					aria-label="Select row"
+				/>
+				<span className="capitalize !text-sm break-words whitespace-break-spaces sm:text-base !truncate !overflow-hidden">
+					{row.original.task}
+				</span>
+			</div>
+		)
+	},
+	{
+		accessorKey: 'name',
+		header: ({ column }) => (
+			<Button
+				variant="ghost"
+				onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+				className="w-full text-sm text-center sm:text-base"
+			>
+				Project
+				<ArrowUpDownIcon className="w-4 h-4 ml-2" />
+			</Button>
+		),
+		cell: ({ row }) => <TaskDetails description={row.original.description} name={row.original.name} />
+	},
+	{
+		accessorKey: 'employee',
+		header: ({ column }) => (
+			<Button
+				variant="ghost"
+				onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+				className="flex items-center justify-center w-full text-sm font-medium text-center sm:w-96 sm:text-base"
+			>
+				<span>Employee</span>
+				<ArrowUpDownIcon className="w-4 h-4 ml-2" />
+			</Button>
+		),
+		cell: ({ row }) => (
+			<div className="w-full text-sm font-medium text-center sm:w-96 sm:text-base">
+				<span> {row.original.employee}</span>
+			</div>
+		)
+	},
+	{
+		accessorKey: 'status',
+		header: ({ column }) => (
+			<Button
+				variant="ghost"
+				onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+				className="flex items-center justify-center w-full text-sm text-center  sm:w-auto sm:text-base"
+			>
+				<span>Status</span>
+				<ArrowUpDownIcon className="w-4 h-4 ml-2" />
+			</Button>
+		),
+		cell: ({ row }) => {
+			return <StatusBadge selectedStatus={row.original.status} />;
+		}
+	},
+	{
+		accessorKey: 'time',
+		header: () => <div className="w-full text-sm text-center sm:text-base">Time</div>,
+		cell: ({ row }) => (
+			<div
+				className={`text-center font-sans w-full text-sm sm:text-base ${statusColor(row.original.status).text}`}
+			>
+				{row.original.time}
+			</div>
+		)
+	},
+	{
+		id: 'actions',
+		enableHiding: false,
+		cell: ({ row }) => {
+			return <TaskActionMenu idTasks={row?.original?.id} />;
+		}
+	}
 ];
 
-
-
 export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
-    const {
-        isOpen,
-        openModal,
-        closeModal
-    } = useModal();
-    const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet } = useTimesheet({})
-    const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet } = useTimelogFilterOptions()
-    const [isDialogOpen, setIsDialogOpen] = React.useState(false);
-    const handleConfirm = () => {
-        try {
-            deleteTaskTimesheet()
-                .then(() => {
-                    setSelectTimesheet([])
-                    setIsDialogOpen(false);
-                })
-                .catch((error) => {
-                    console.error('Delete timesheet error:', error);
-                });
-        } catch (error) {
-            console.error('Delete timesheet error:', error);
-        }
-    };
-    const handleCancel = () => {
-        setIsDialogOpen(false);
-    };
-    const t = useTranslations();
-    const [sorting, setSorting] = React.useState<SortingState>([])
-    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
-    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
-    const [rowSelection, setRowSelection] = React.useState({})
-    const table = useReactTable({
-        data: dataSourceTimeSheet,
-        columns,
-        onSortingChange: setSorting,
-        onColumnFiltersChange: setColumnFilters,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onColumnVisibilityChange: setColumnVisibility,
-        onRowSelectionChange: setRowSelection,
-        state: {
-            sorting,
-            columnFilters,
-            columnVisibility,
-            rowSelection,
-        },
-    })
-
-
-    const handleButtonClick = (action: StatusAction) => {
-        switch (action) {
-            case 'Approved':
-                // TODO: Implement approval logic
-                break;
-            case 'Denied':
-                openModal()
-                break;
-            case 'Deleted':
-                setIsDialogOpen(true)
-                break;
-            default:
-                console.error(`Unsupported action: ${action}`);
-        }
-    };
-
-    return (
-        <div className="w-full dark:bg-dark--theme">
-            <AlertDialogConfirmation
-                title="Are you sure you want to delete this?"
-                description={`This action is irreversible. All related data will be lost. (${selectTimesheet.length})`}
-                confirmText={t('common.DELETE')}
-                cancelText={t('common.CANCEL')}
-                isOpen={isDialogOpen}
-                onOpenChange={setIsDialogOpen}
-                onConfirm={handleConfirm}
-                onCancel={handleCancel}
-                loading={loadingDeleteTimesheet}
-            />
-            <RejectSelectedModal
-                onReject={() => {
-                    // Pending implementation
-                }}
-                maxReasonLength={120}
-                minReasonLength={0}
-                closeModal={closeModal}
-                isOpen={isOpen}
-            />
-            <div className="rounded-md">
-                {data?.map((plan, index) => (
-                    <div key={index}>
-                        <div className={clsxm(
-                            "h-[48px] flex justify-between items-center w-full",
-                            "bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1",
-                            "border-gray-400 px-5 text-[#71717A] font-medium")}>
-                            <span>{formatDate(plan.date)}</span>
-                            <span>64:30h</span>
-                        </div>
-
-                        <Accordion type="single" collapsible>
-                            {Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => (
-                                <AccordionItem key={status}
-                                    value={
-                                        status === 'DENIED'
-                                            ? "REJECTED" : status}
-                                    className="p-1 rounded"
-                                >
-                                    <AccordionTrigger
-                                        style={{ backgroundColor: statusColor(status).bgOpacity }}
-                                        type="button"
-                                        className={clsxm(
-                                            "flex flex-row-reverse justify-end items-center w-full h-[50px] rounded-sm gap-x-2 hover:no-underline px-2",
-                                            statusColor(status).text,
-                                        )}>
-                                        <div className="flex items-center space-x-1 justify-between w-full">
-                                            <div className="flex items-center space-x-1">
-                                                <div className={clsxm("p-2 rounded", statusColor(status).bg)}></div>
-                                                <div className="flex items-center gap-x-1">
-                                                    <span className="text-base font-normal uppercase text-gray-400">
-                                                        {status === 'DENIED' ? "REJECTED" : status}
-                                                    </span>
-                                                    <span className="text-gray-400 text-[14px]">({rows?.length})</span>
-                                                </div>
-                                                <Badge variant={'outline'} className="flex items-center gap-x-2 h-[25px] rounded-md bg-[#E4E4E7] dark:bg-gray-800">
-                                                    <span className="text-[#5f5f61]">Total</span>
-                                                    <span className="text-[#868688]">24:30h</span>
-                                                </Badge>
-                                            </div>
-                                            <div className={clsxm("flex items-center gap-2 p-x-1 capitalize")}>
-                                                {getTimesheetButtons(status as StatusType, t, true, handleButtonClick)}
-                                            </div>
-                                        </div>
-                                    </AccordionTrigger>
-                                    <AccordionContent className="flex flex-col w-full">
-                                        {rows?.map((task) => (
-                                            <div
-                                                key={task.id}
-                                                style={{ backgroundColor: statusColor(status).bgOpacity, borderBottomColor: statusColor(status).bg }}
-                                                className={clsxm("flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1 h-[60px]")}>
-                                                <Checkbox className="h-5 w-5"
-                                                    onCheckedChange={() => handleSelectRowTimesheet(task.id)}
-                                                    checked={selectTimesheet.includes(task.id)}
-                                                />
-                                                <div className="flex-[2]">
-                                                    <TaskNameInfoDisplay
-                                                        task={task.task}
-                                                        className={clsxm('shadow-[0px_0px_15px_0px_#e2e8f0] dark:shadow-transparent')}
-                                                        taskTitleClassName={clsxm('text-sm text-ellipsis overflow-hidden ')}
-                                                        showSize={true}
-                                                        dash
-                                                        taskNumberClassName="text-sm"
-                                                    />
-                                                </div>
-                                                <span className="flex-1">{task.project && task.project.name}</span>
-                                                <div className="flex items-center gap-x-2 flex-1">
-                                                    <img className="h-8 w-8 rounded-full" src={task.employee.user.imageUrl!} alt="" />
-                                                    <span className="flex-1 font-medium">{task.employee.fullName}</span>
-                                                </div>
-                                                <div className="flex-1">
-                                                    <Badge className={`${getBadgeColor(task.timesheet.status as TimesheetStatus)}  rounded-md py-1 px-2 text-center font-medium text-black`}>
-                                                        {task.timesheet.status}
-                                                    </Badge>
-
-                                                </div>
-                                                <span className="flex-1 font-medium">
-                                                    {dayjs(task.timesheet.createdAt).format("HH:mm:ss")}
-                                                </span>
-                                                <TaskActionMenu idTasks={task.id} />
-                                            </div>
-                                        ))}
-                                    </AccordionContent>
-                                </AccordionItem>
-                            ))}
-                        </Accordion>
-                    </div>
-                ))}
-            </div>
-            <div className="flex items-center justify-end space-x-2 py-4">
-                <div className="flex-1 text-sm text-muted-foreground">
-                    {table.getFilteredSelectedRowModel().rows.length} of{" "}
-                    {table.getFilteredRowModel().rows.length} row(s) selected.
-                </div>
-                <div className="gap-x-3 flex items-center">
-                    <span className="text-sm font-medium">
-                        Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-                    </span>
-                    <Button
-                        variant={'outline'}
-                        onClick={() => table.setPageIndex(0)}
-                        disabled={!table.getCanPreviousPage()}
-                    >
-                        <MdKeyboardDoubleArrowLeft />
-                    </Button>
-                    <Button
-                        variant={'outline'}
-                        onClick={() => table.previousPage()}
-                        disabled={!table.getCanPreviousPage()}
-                    >
-                        <MdKeyboardArrowLeft />
-                    </Button>
-                    <Button
-                        variant={'outline'}
-                        onClick={() => table.nextPage()}
-                        disabled={!table.getCanNextPage()}
-                    >
-                        <MdKeyboardArrowRight />
-                    </Button>
-                    <Button
-                        variant={'outline'}
-                        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-                        disabled={!table.getCanNextPage()}
-                    >
-                        <MdKeyboardDoubleArrowRight />
-                    </Button>
-                </div>
-            </div>
-        </div>
-
-
-    )
+	const { isOpen, openModal, closeModal } = useModal();
+	const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet } = useTimesheet({});
+	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet } = useTimelogFilterOptions();
+	const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+	const handleConfirm = () => {
+		try {
+			deleteTaskTimesheet()
+				.then(() => {
+					setSelectTimesheet([]);
+					setIsDialogOpen(false);
+				})
+				.catch((error) => {
+					console.error('Delete timesheet error:', error);
+				});
+		} catch (error) {
+			console.error('Delete timesheet error:', error);
+		}
+	};
+	const handleCancel = () => {
+		setIsDialogOpen(false);
+	};
+	const t = useTranslations();
+	const [sorting, setSorting] = React.useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+	const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+	const [rowSelection, setRowSelection] = React.useState({});
+	const table = useReactTable({
+		data: dataSourceTimeSheet,
+		columns,
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection
+		}
+	});
+
+	const handleButtonClick = (action: StatusAction) => {
+		switch (action) {
+			case 'Approved':
+				// TODO: Implement approval logic
+				break;
+			case 'Denied':
+				openModal();
+				break;
+			case 'Deleted':
+				setIsDialogOpen(true);
+				break;
+			default:
+				console.error(`Unsupported action: ${action}`);
+		}
+	};
+
+	return (
+		<div className="w-full dark:bg-dark--theme">
+			<AlertDialogConfirmation
+				title="Are you sure you want to delete this?"
+				description={`This action is irreversible. All related data will be lost. (${selectTimesheet.length})`}
+				confirmText={t('common.DELETE')}
+				cancelText={t('common.CANCEL')}
+				isOpen={isDialogOpen}
+				onOpenChange={setIsDialogOpen}
+				onConfirm={handleConfirm}
+				onCancel={handleCancel}
+				loading={loadingDeleteTimesheet}
+			/>
+			<RejectSelectedModal
+				onReject={() => {
+					// Pending implementation
+				}}
+				maxReasonLength={120}
+				minReasonLength={0}
+				closeModal={closeModal}
+				isOpen={isOpen}
+			/>
+			<div className="rounded-md">
+				{data?.map((plan, index) => (
+					<div key={index}>
+						<div
+							className={clsxm(
+								'h-[48px] flex justify-between items-center w-full',
+								'bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1',
+								'border-gray-400 px-5 text-[#71717A] font-medium'
+							)}
+						>
+							<span>{formatDate(plan.date)}</span>
+							<span>64:30h</span>
+						</div>
+
+						<Accordion type="single" collapsible>
+							{Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => (
+								<AccordionItem
+									key={status}
+									value={status === 'DENIED' ? 'REJECTED' : status}
+									className="p-1 rounded"
+								>
+									<AccordionTrigger
+										style={{ backgroundColor: statusColor(status).bgOpacity }}
+										type="button"
+										className={clsxm(
+											'flex flex-row-reverse justify-end items-center w-full h-[50px] rounded-sm gap-x-2 hover:no-underline px-2',
+											statusColor(status).text
+										)}
+									>
+										<div className="flex items-center justify-between w-full space-x-1">
+											<div className="flex items-center space-x-1">
+												<div className={clsxm('p-2 rounded', statusColor(status).bg)}></div>
+												<div className="flex items-center gap-x-1">
+													<span className="text-base font-normal text-gray-400 uppercase">
+														{status === 'DENIED' ? 'REJECTED' : status}
+													</span>
+													<span className="text-gray-400 text-[14px]">({rows?.length})</span>
+												</div>
+												<Badge
+													variant={'outline'}
+													className="flex items-center gap-x-2 h-[25px] rounded-md bg-[#E4E4E7] dark:bg-gray-800"
+												>
+													<span className="text-[#5f5f61]">Total</span>
+													<span className="text-[#868688]">24:30h</span>
+												</Badge>
+											</div>
+											<div className={clsxm('flex items-center gap-2 p-x-1 capitalize')}>
+												{getTimesheetButtons(status as StatusType, t, true, handleButtonClick)}
+											</div>
+										</div>
+									</AccordionTrigger>
+									<AccordionContent className="flex flex-col w-full">
+										{rows?.map((task) => (
+											<div
+												key={task.id}
+												style={{
+													backgroundColor: statusColor(status).bgOpacity,
+													borderBottomColor: statusColor(status).bg
+												}}
+												className={clsxm(
+													'flex items-center border-b border-b-gray-200 dark:border-b-gray-600 space-x-4 p-1 h-[60px]'
+												)}
+											>
+												<Checkbox
+													className="w-5 h-5"
+													onCheckedChange={() => handleSelectRowTimesheet(task.id)}
+													checked={selectTimesheet.includes(task.id)}
+												/>
+												<div className="flex-[2]">
+													<TaskNameInfoDisplay
+														task={task.task}
+														className={clsxm(
+															'shadow-[0px_0px_15px_0px_#e2e8f0] dark:shadow-transparent'
+														)}
+														taskTitleClassName={clsxm(
+															'text-sm text-ellipsis overflow-hidden '
+														)}
+														showSize={true}
+														dash
+														taskNumberClassName="text-sm"
+													/>
+												</div>
+												<span className="flex-1">{task.project && task.project.name}</span>
+												<div className="flex items-center flex-1 gap-x-2">
+													<img
+														className="w-8 h-8 rounded-full"
+														src={task.employee.user.imageUrl!}
+														alt=""
+													/>
+													<span className="flex-1 font-medium">{task.employee.fullName}</span>
+												</div>
+												<div className="flex-1">
+													<Badge
+														className={`${getBadgeColor(task.timesheet.status as TimesheetStatus)}  rounded-md py-1 px-2 text-center font-medium text-black`}
+													>
+														{task.timesheet.status}
+													</Badge>
+												</div>
+												<span className="flex-1 font-medium">
+													{dayjs(task.timesheet.createdAt).format('HH:mm:ss')}
+												</span>
+												<TaskActionMenu idTasks={task.id} />
+											</div>
+										))}
+									</AccordionContent>
+								</AccordionItem>
+							))}
+						</Accordion>
+					</div>
+				))}
+			</div>
+			<div className="flex items-center justify-end p-4 space-x-2">
+				<div className="flex-1 text-sm text-muted-foreground">
+					{table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length}{' '}
+					row(s) selected.
+				</div>
+				<div className="flex items-center gap-x-3">
+					<span className="text-sm font-medium">
+						Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+					</span>
+					<Button
+						variant={'outline'}
+						onClick={() => table.setPageIndex(0)}
+						disabled={!table.getCanPreviousPage()}
+					>
+						<MdKeyboardDoubleArrowLeft />
+					</Button>
+					<Button
+						variant={'outline'}
+						onClick={() => table.previousPage()}
+						disabled={!table.getCanPreviousPage()}
+					>
+						<MdKeyboardArrowLeft />
+					</Button>
+					<Button variant={'outline'} onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+						<MdKeyboardArrowRight />
+					</Button>
+					<Button
+						variant={'outline'}
+						onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+						disabled={!table.getCanNextPage()}
+					>
+						<MdKeyboardDoubleArrowRight />
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
 }
 
-
-
-
 export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
-
-    const { isOpen, closeModal, openModal } = useModal();
-    const [selected] = React.useState(selectedStatus);
-    const [newStatus, setNewStatus] = React.useState('');
-
-    const getColorClass = () => {
-        switch (selected) {
-            case "Rejected":
-                return "text-red-500 border-gray-200";
-            case "Approved":
-                return "text-green-500 border-gray-200";
-            case "Pending":
-                return "text-orange-500 border-gray-200";
-            default:
-                return "text-gray-500 border-gray-200";
-        }
-    };
-
-
-    const onValueChanges = (value: string) => {
-        setNewStatus(value);
-        openModal()
-    }
-
-    return (
-        <>
-
-            <ConfirmStatusChange
-                closeModal={closeModal}
-                isOpen={isOpen}
-                oldStatus={selected}
-                newStatus={newStatus}
-            />
-
-            <Select
-                value={selected}
-                onValueChange={(value) => onValueChanges(value)}
-            >
-                <SelectTrigger
-                    className={`min-w-[120px] w-fit border border-gray-200 h-8 dark:border-gray-700 bg-transparent font-normal rounded-md ${getColorClass()}`}
-                >
-                    <SelectValue
-                        placeholder="Select a daily"
-                        className={getColorClass()}
-                    />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectGroup className="rounded">
-                        <SelectLabel>Status</SelectLabel>
-                        {statusOptions.map((option, index) => (
-                            <div key={option.value}>
-                                <SelectItem value={option.value}>{option.label}</SelectItem>
-                                {index < statusOptions.length - 1 && (
-                                    <div className="border w-full border-gray-100 dark:border-gray-700"></div>
-                                )}
-                            </div>
-                        ))}
-                    </SelectGroup>
-                </SelectContent>
-            </Select>
-        </>
-    );
+	const { isOpen, closeModal, openModal } = useModal();
+	const [selected] = React.useState(selectedStatus);
+	const [newStatus, setNewStatus] = React.useState('');
+
+	const getColorClass = () => {
+		switch (selected) {
+			case 'Rejected':
+				return 'text-red-500 border-gray-200';
+			case 'Approved':
+				return 'text-green-500 border-gray-200';
+			case 'Pending':
+				return 'text-orange-500 border-gray-200';
+			default:
+				return 'text-gray-500 border-gray-200';
+		}
+	};
+
+	const onValueChanges = (value: string) => {
+		setNewStatus(value);
+		openModal();
+	};
+
+	return (
+		<>
+			<ConfirmStatusChange closeModal={closeModal} isOpen={isOpen} oldStatus={selected} newStatus={newStatus} />
+
+			<Select value={selected} onValueChange={(value) => onValueChanges(value)}>
+				<SelectTrigger
+					className={`min-w-[120px] w-fit border border-gray-200 h-8 dark:border-gray-700 bg-transparent font-normal rounded-md ${getColorClass()}`}
+				>
+					<SelectValue placeholder="Select a daily" className={getColorClass()} />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectGroup className="rounded">
+						<SelectLabel>Status</SelectLabel>
+						{statusOptions.map((option, index) => (
+							<div key={option.value}>
+								<SelectItem value={option.value}>{option.label}</SelectItem>
+								{index < statusOptions.length - 1 && (
+									<div className="w-full border border-gray-100 dark:border-gray-700"></div>
+								)}
+							</div>
+						))}
+					</SelectGroup>
+				</SelectContent>
+			</Select>
+		</>
+	);
 }
 
 const TaskActionMenu = ({ idTasks }: { idTasks: string | number }) => {
-    const {
-        isOpen: isEditTask,
-        openModal: isOpenModalEditTask,
-        closeModal: isCloseModalEditTask
-    } = useModal();
-    return (
-        <>
-            {
-                <EditTaskModal
-                    closeModal={isCloseModalEditTask}
-                    isOpen={isEditTask}
-                />
-            }
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" className="h-8 w-8 p-0  text-sm sm:text-base">
-                        <span className="sr-only">Open menu</span>
-                        <MoreHorizontal className="h-4 w-4" />
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                    <DropdownMenuItem className="cursor-pointer" onClick={isOpenModalEditTask}>
-                        Edit
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <StatusTask />
-                    <DropdownMenuItem className="text-red-600 hover:!text-red-600 cursor-pointer">Delete</DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-
-        </>
-
-    );
+	const { isOpen: isEditTask, openModal: isOpenModalEditTask, closeModal: isCloseModalEditTask } = useModal();
+	return (
+		<>
+			{<EditTaskModal closeModal={isCloseModalEditTask} isOpen={isEditTask} />}
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button variant="ghost" className="w-8 h-8 p-0 text-sm sm:text-base">
+						<span className="sr-only">Open menu</span>
+						<MoreHorizontal className="w-4 h-4" />
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="end">
+					<DropdownMenuItem className="cursor-pointer" onClick={isOpenModalEditTask}>
+						Edit
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<StatusTask />
+					<DropdownMenuItem className="text-red-600 hover:!text-red-600 cursor-pointer">
+						Delete
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</>
+	);
 };
 
 const TaskDetails = ({ description, name }: { description: string; name: string }) => {
-    return (
-        <div className="flex items-center gap-x-2 w-40 ">
-            <div className="flex items-center justify-center h-8 w-8 rounded-lg bg-primary dark:bg-primary-light text-white shadow p-2">
-                <span className="lowercase font-medium text-[10px]">ever</span>
-            </div>
-            <span className="capitalize font-medium !text-sm sm:text-base text-gray-800 dark:text-white leading-4 whitespace-nowrap">
-                {name}
-            </span>
-            <div style={{ display: 'none' }}>{description}</div>
-        </div>
-    );
+	return (
+		<div className="flex items-center w-40 gap-x-2 ">
+			<div className="flex items-center justify-center w-8 h-8 p-2 text-white rounded-lg shadow bg-primary dark:bg-primary-light">
+				<span className="lowercase font-medium text-[10px]">ever</span>
+			</div>
+			<span className="capitalize font-medium !text-sm sm:text-base text-gray-800 dark:text-white leading-4 whitespace-nowrap">
+				{name}
+			</span>
+			<div style={{ display: 'none' }}>{description}</div>
+		</div>
+	);
 };
 
 export const StatusTask = () => {
-    const t = useTranslations();
-    return (
-        <>
-            <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
-                    <span>Change status</span>
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                    <DropdownMenuSubContent>
-                        {statusOptions?.map((status, index) => (
-                            <DropdownMenuItem key={index} textValue={status.value} className="cursor-pointer">
-                                <div className="flex items-center gap-3">
-                                    <div className={clsxm("h-2 w-2 rounded-full", statusColor(status.value).bg)}></div>
-                                    <span>{status.label}</span>
-                                </div>
-                            </DropdownMenuItem>
-                        ))}
-                    </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-            </DropdownMenuSub>
-            <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
-                    <span>Billable</span>
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                    <DropdownMenuSubContent>
-                        <DropdownMenuItem textValue={'Yes'} className="cursor-pointer">
-                            <div className="flex items-center gap-3">
-                                <span>{t('pages.timesheet.BILLABLE.YES')}</span>
-                            </div>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem textValue={'No'} className="cursor-pointer">
-                            <div className="flex items-center gap-3">
-                                <span>{t('pages.timesheet.BILLABLE.NO')}</span>
-                            </div>
-                        </DropdownMenuItem>
-                    </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-            </DropdownMenuSub>
-        </>
-    )
-}
-
+	const t = useTranslations();
+	return (
+		<>
+			<DropdownMenuSub>
+				<DropdownMenuSubTrigger>
+					<span>Change status</span>
+				</DropdownMenuSubTrigger>
+				<DropdownMenuPortal>
+					<DropdownMenuSubContent>
+						{statusOptions?.map((status, index) => (
+							<DropdownMenuItem key={index} textValue={status.value} className="cursor-pointer">
+								<div className="flex items-center gap-3">
+									<div className={clsxm('h-2 w-2 rounded-full', statusColor(status.value).bg)}></div>
+									<span>{status.label}</span>
+								</div>
+							</DropdownMenuItem>
+						))}
+					</DropdownMenuSubContent>
+				</DropdownMenuPortal>
+			</DropdownMenuSub>
+			<DropdownMenuSub>
+				<DropdownMenuSubTrigger>
+					<span>Billable</span>
+				</DropdownMenuSubTrigger>
+				<DropdownMenuPortal>
+					<DropdownMenuSubContent>
+						<DropdownMenuItem textValue={'Yes'} className="cursor-pointer">
+							<div className="flex items-center gap-3">
+								<span>{t('pages.timesheet.BILLABLE.YES')}</span>
+							</div>
+						</DropdownMenuItem>
+						<DropdownMenuItem textValue={'No'} className="cursor-pointer">
+							<div className="flex items-center gap-3">
+								<span>{t('pages.timesheet.BILLABLE.NO')}</span>
+							</div>
+						</DropdownMenuItem>
+					</DropdownMenuSubContent>
+				</DropdownMenuPortal>
+			</DropdownMenuSub>
+		</>
+	);
+};
 
 const getBadgeColor = (timesheetStatus: TimesheetStatus | null) => {
-    switch (timesheetStatus) {
-        case 'DRAFT':
-            return 'bg-gray-300';
-        case 'PENDING':
-            return 'bg-yellow-400';
-        case 'IN REVIEW':
-            return 'bg-blue-500';
-        case 'DENIED':
-            return 'bg-red-500';
-        case 'APPROVED':
-            return 'bg-green-500';
-        default:
-            return 'bg-gray-100';
-    }
+	switch (timesheetStatus) {
+		case 'DRAFT':
+			return 'bg-gray-300';
+		case 'PENDING':
+			return 'bg-yellow-400';
+		case 'IN REVIEW':
+			return 'bg-blue-500';
+		case 'DENIED':
+			return 'bg-red-500';
+		case 'APPROVED':
+			return 'bg-green-500';
+		default:
+			return 'bg-gray-100';
+	}
 };
diff --git a/apps/web/lib/features/task/daily-plan/future-tasks.tsx b/apps/web/lib/features/task/daily-plan/future-tasks.tsx
index 65cb07acf..48a6e748b 100644
--- a/apps/web/lib/features/task/daily-plan/future-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/future-tasks.tsx
@@ -9,9 +9,8 @@ import { useAtomValue } from 'jotai';
 import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
 import TaskBlockCard from '../task-block-card';
 import { clsxm } from '@app/utils';
-import { HorizontalSeparator } from 'lib/components';
+import { HorizontalSeparator, AlertPopup } from 'lib/components';
 import { useEffect, useState } from 'react';
-import { AlertPopup } from 'lib/components';
 import { filterDailyPlan } from '@app/hooks/useFilterDateRange';
 import { IDailyPlan } from '@app/interfaces';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
@@ -49,7 +48,7 @@ export function FutureTasks({ profile }: { profile: any }) {
 								className="dark:border-slate-600 !border-none"
 							>
 								<AccordionTrigger className="!min-w-full text-start hover:no-underline">
-									<div className="flex items-center justify-between gap-3 w-full">
+									<div className="flex items-center justify-between w-full gap-3">
 										<div className="text-lg min-w-max">
 											{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
 										</div>
@@ -71,6 +70,7 @@ export function FutureTasks({ profile }: { profile: any }) {
 													ref={provided.innerRef}
 													{...provided.droppableProps}
 													className={clsxm(
+														'flex-wrap',
 														view === 'CARDS' && 'flex-col',
 														'flex gap-2 pb-[1.5rem]',
 														view === 'BLOCKS' && 'overflow-x-auto'
@@ -132,9 +132,9 @@ export function FutureTasks({ profile }: { profile: any }) {
 															</Draggable>
 														)
 													)}
-													<>{provided.placeholder}</>
+													<>{provided.placeholder as React.ReactElement}</>
 													{canSeeActivity ? (
-														<div className="flex shrink-0  justify-end">
+														<div className="flex justify-end shrink-0">
 															<AlertPopup
 																open={currentDeleteIndex === index && popupOpen}
 																buttonOpen={
@@ -161,7 +161,7 @@ export function FutureTasks({ profile }: { profile: any }) {
 																	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="animate-spin mr-2 h-4 w-4" />
+																		<ReloadIcon className="w-4 h-4 mr-2 animate-spin" />
 																	)}
 																	Delete
 																</Button>
diff --git a/apps/web/lib/features/task/daily-plan/outstanding-all.tsx b/apps/web/lib/features/task/daily-plan/outstanding-all.tsx
index bf5d565ea..406d1eca7 100644
--- a/apps/web/lib/features/task/daily-plan/outstanding-all.tsx
+++ b/apps/web/lib/features/task/daily-plan/outstanding-all.tsx
@@ -42,9 +42,10 @@ export function OutstandingAll({ profile }: OutstandingAll) {
 									ref={provided.innerRef}
 									{...provided.droppableProps}
 									className={clsxm(
+										'flex-wrap',
 										view === 'CARDS' && 'flex-col',
 										view === 'TABLE' || (view === 'BLOCKS' && 'flex-wrap'),
-										'flex gap-2 pb-[1.5rem] overflow-x-auto'
+										'flex gap-2 pb-[1.5rem] overflow-x-auto !flex-wrap'
 									)}
 								>
 									{tasks?.map((task, index) => {
diff --git a/apps/web/lib/features/task/daily-plan/outstanding-date.tsx b/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
index b3f50d7a4..b0b6097bf 100644
--- a/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
+++ b/apps/web/lib/features/task/daily-plan/outstanding-date.tsx
@@ -37,14 +37,14 @@ export function OutstandingFilterDate({ profile }: IOutstandingFilterDate) {
 								className="dark:border-slate-600 !border-none"
 							>
 								<AccordionTrigger className="!min-w-full text-start hover:no-underline">
-									<div className="flex items-center justify-between gap-3 w-full">
+									<div className="flex items-center justify-between w-full gap-3">
 										<div className="text-lg min-w-max">
 											{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
 										</div>
 										<HorizontalSeparator />
 									</div>
 								</AccordionTrigger>
-								<AccordionContent className="bg-transparent border-none dark:bg-dark--theme pb-12">
+								<AccordionContent className="pb-12 bg-transparent border-none dark:bg-dark--theme">
 									{/* Plan header */}
 									<PlanHeader plan={plan} planMode="Outstanding" />
 									<Droppable droppableId={plan.id as string} key={plan.id} type="task">
@@ -53,6 +53,7 @@ export function OutstandingFilterDate({ profile }: IOutstandingFilterDate) {
 												ref={provided.innerRef}
 												{...provided.droppableProps}
 												className={clsxm(
+													'flex-wrap',
 													view === 'CARDS' && 'flex-col',
 													view === 'TABLE' && 'flex-wrap',
 													'flex gap-2 pb-[1.5rem]',
diff --git a/apps/web/lib/features/task/daily-plan/past-tasks.tsx b/apps/web/lib/features/task/daily-plan/past-tasks.tsx
index d4fdf8cd1..6773c1db5 100644
--- a/apps/web/lib/features/task/daily-plan/past-tasks.tsx
+++ b/apps/web/lib/features/task/daily-plan/past-tasks.tsx
@@ -70,6 +70,7 @@ export function PastTasks({ profile, currentTab = 'Past Tasks' }: { profile: any
 													ref={provided.innerRef}
 													{...provided.droppableProps}
 													className={clsxm(
+														'flex-wrap',
 														view === 'CARDS' && 'flex-col',
 														'flex gap-2 pb-[1.5rem]',
 														view === 'BLOCKS' && 'overflow-x-auto',
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 181ade9af..35cf918e2 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -217,7 +217,7 @@ export function TaskCard(props: Props) {
 				<VerticalSeparator />
 
 				{/* TaskTimes */}
-				<div className="flex items-center justify-between gap-[1.125rem]  px-5 w-1/5 lg:px-3 2xl:w-52 3xl:w-72">
+				<div className="flex items-center justify-between gap-[1.125rem] min-w-fit px-5 w-max lg:px-3 2xl:max-w-52 3xl:max-w-72">
 					<TaskTimes
 						activeAuthTask={activeAuthTask}
 						task={task}
@@ -237,7 +237,7 @@ export function TaskCard(props: Props) {
 				</div>
 				<VerticalSeparator />
 
-				<div className="flex items-center justify-center w-1/5 h-full xl:justify-between lg:px-3 2xl:w-52 3xl:w-80">
+				<div className="flex items-center justify-center w-1/5 h-full min-w-fit xl:justify-between lg:px-3 2xl:max-w-52 3xl:max-w-72">
 					{/* Active Task Status Dropdown (It's a dropdown that allows the user to change the status of the task.)*/}
 					<div className="flex items-center justify-center ">
 						<ActiveTaskStatusDropdown
@@ -646,39 +646,39 @@ export function TaskCardMenu({
 
 									{(viewType == 'default' ||
 										(viewType === 'dailyplan' && planMode === 'Outstanding')) && (
-											<>
-												<Divider type="HORIZONTAL" />
-												<div className="mt-3">
-													{!taskPlannedToday && (
-														<li className="mb-2">
-															<PlanTask
-																planMode="today"
-																taskId={task.id}
-																employeeId={profile?.member?.employeeId ?? ''}
-																taskPlannedToday={taskPlannedToday}
-															/>
-														</li>
-													)}
-													{!taskPlannedTomorrow && (
-														<li className="mb-2">
-															<PlanTask
-																planMode="tomorrow"
-																taskId={task.id}
-																employeeId={profile?.member?.employeeId ?? ''}
-																taskPlannedForTomorrow={taskPlannedTomorrow}
-															/>
-														</li>
-													)}
+										<>
+											<Divider type="HORIZONTAL" />
+											<div className="mt-3">
+												{!taskPlannedToday && (
 													<li className="mb-2">
 														<PlanTask
-															planMode="custom"
+															planMode="today"
 															taskId={task.id}
 															employeeId={profile?.member?.employeeId ?? ''}
+															taskPlannedToday={taskPlannedToday}
 														/>
 													</li>
-												</div>
-											</>
-										)}
+												)}
+												{!taskPlannedTomorrow && (
+													<li className="mb-2">
+														<PlanTask
+															planMode="tomorrow"
+															taskId={task.id}
+															employeeId={profile?.member?.employeeId ?? ''}
+															taskPlannedForTomorrow={taskPlannedTomorrow}
+														/>
+													</li>
+												)}
+												<li className="mb-2">
+													<PlanTask
+														planMode="custom"
+														taskId={task.id}
+														employeeId={profile?.member?.employeeId ?? ''}
+													/>
+												</li>
+											</div>
+										</>
+									)}
 
 									{viewType === 'dailyplan' &&
 										(planMode === 'Today Tasks' || planMode === 'Future Tasks') && (
diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
index 3b4125323..be78ae406 100644
--- a/apps/web/lib/features/task/task-filters.tsx
+++ b/apps/web/lib/features/task/task-filters.tsx
@@ -226,9 +226,9 @@ export function useTaskFilter(profile: I_UserProfilePage) {
 					.every((k) => {
 						return k === 'label'
 							? intersection(
-								statusFilters[k],
-								task['tags'].map((item) => item.name)
-							).length === statusFilters[k].length
+									statusFilters[k],
+									task['tags'].map((item) => item.name)
+								).length === statusFilters[k].length
 							: statusFilters[k].includes(task[k]);
 					});
 			});
@@ -264,7 +264,7 @@ export type I_TaskFilter = ReturnType<typeof useTaskFilter>;
 type Props = { hook: I_TaskFilter; profile: I_UserProfilePage };
 export function TaskFilter({ className, hook, profile }: IClassName & Props) {
 	return (
-		<div className="relative w-full z-10">
+		<div className="relative z-10 w-full">
 			<div
 				className={clsxm(
 					'flex justify-between flex-col xs:flex-row  items-center w-full flex-wrap-reverse lg:flex-nowrap',
@@ -353,7 +353,7 @@ function InputFilters({ hook, profile }: Props) {
 				onClick={() => openManualTimeModal()}
 				className={clsxm(
 					'bg-primary text-white dark:border-from-regal-rose dark:border-to-regal-blue dark:text-transparent dark:bg-clip-text dark:bg-gradient-to-tl  dark:from-regal-rose dark:to-regal-blue h-full px-4 py-3 rounded-xl text-base flex items-center space-x-1 dark:border-gradient-dark dark:border-regal-rose dark:border',
-					'min-w-[8.25rem] h-[2.75rem]'
+					'min-w-[8.25rem] w-fit h-[2.75rem] !text-nowrap whitespace-nowrap'
 				)}
 			>
 				<span className="text-xl">+</span>
@@ -393,7 +393,7 @@ function InputFilters({ hook, profile }: Props) {
 /* It's a function that returns a nav element. */
 function TabsNav({ hook }: { hook: I_TaskFilter }) {
 	return (
-		<nav className="flex justify-center md:justify-start items-center space-x-1 w-full md:space-x-4 md:mt-0">
+		<nav className="flex items-center justify-center w-full -mb-1 space-x-1 md:justify-start md:space-x-4 md:mt-0">
 			{hook.tabs.map((item, i) => {
 				const active = item.tab === hook.tab;
 
@@ -402,7 +402,7 @@ function TabsNav({ hook }: { hook: I_TaskFilter }) {
 						<button
 							onClick={() => hook.setTab(item.tab)}
 							className={clsxm(
-								`md:text-lg text-xs text-gray-500 font-normal outline-none md:py-[.5rem] px-[2.5rem] relative mt-4 md:mt-0 w-full md:min-w-[10.625rem] flex flex-col md:flex-row gap-1 items-center `,
+								`md:text-lg text-xs text-gray-500 font-normal outline-none px-[2.5rem] relative mt-4 md:mt-0 w-full md:min-w-[10.625rem] flex flex-col md:flex-row gap-1 items-center `,
 								active && ['text-primary dark:text-white']
 							)}
 						>
@@ -419,7 +419,7 @@ function TabsNav({ hook }: { hook: I_TaskFilter }) {
 								<div
 									className={clsxm(
 										'bg-primary dark:bg-white',
-										'h-[0.1875rem] absolute -bottom-4 left-0 right-0 w-full'
+										'h-[0.1875rem] absolute -bottom-8 left-0 right-0 w-full'
 									)}
 								/>
 							)}
@@ -444,7 +444,7 @@ export function TaskStatusFilter({ hook, employeeId }: { hook: I_TaskFilter; emp
 		setDailyPlanTab(window.localStorage.getItem('daily-plan-tab') || 'Future Tasks');
 	}, [dailyPlanTab, date]);
 	return (
-		<div className="flex flex-col items-center mt-4 space-x-2 md:justify-between md:flex-row pt-2">
+		<div className="flex flex-col items-center pt-2 mt-4 space-x-2 md:justify-between md:flex-row">
 			<div className="flex flex-wrap justify-center flex-1 space-x-3 md:justify-start">
 				<TaskStatusDropdown
 					key={key + 1}
diff --git a/apps/web/lib/features/task/task-status.tsx b/apps/web/lib/features/task/task-status.tsx
index eb9c4e2d7..f8598bf3d 100644
--- a/apps/web/lib/features/task/task-status.tsx
+++ b/apps/web/lib/features/task/task-status.tsx
@@ -840,7 +840,7 @@ export function TaskStatus({
 	return (
 		<div
 			className={clsxm(
-				`py-2 md:px-3 px-2 flex items-center text-sm relative`,
+				`py-2 md:px-3 px-2 flex items-center text-sm relative gap-x-2 min-w-fit w-auto`,
 
 				sidebarUI ? 'text-dark rounded-md font-[500]' : 'space-x-0 rounded-xl',
 
@@ -861,7 +861,7 @@ export function TaskStatus({
 		>
 			<div
 				className={cn(
-					'flex items-center space-x-1 whitespace-nowrap text-ellipsis overflow-hidden',
+					'flex items-center gap-x-1 whitespace-nowrap text-ellipsis overflow-hidden',
 					titleClassName
 				)}
 			>
diff --git a/apps/web/lib/features/team-member-cell.tsx b/apps/web/lib/features/team-member-cell.tsx
index b16bdd17d..2a065db7a 100644
--- a/apps/web/lib/features/team-member-cell.tsx
+++ b/apps/web/lib/features/team-member-cell.tsx
@@ -1,8 +1,4 @@
-import {
-  useTeamMemberCard,
-  useTMCardTaskEdit,
-  useCollaborative
-} from '@app/hooks';
+import { useTeamMemberCard, useTMCardTaskEdit, useCollaborative } from '@app/hooks';
 import { OT_Member } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { InputField } from 'lib/components';
@@ -16,100 +12,90 @@ import { useAtomValue } from 'jotai';
 import { fullWidthState } from '@app/stores/fullWidth';
 
 export function TaskCell({ row }: { row: any }) {
-  const member = row.original as OT_Member;
-  const memberInfo = useTeamMemberCard(member);
-  const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
-  const publicTeam = false;
-  const fullWidth = useAtomValue(fullWidthState);
+	const member = row.original as OT_Member;
+	const memberInfo = useTeamMemberCard(member);
+	const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
+	const publicTeam = false;
+	const fullWidth = useAtomValue(fullWidthState);
 
-  return (
-    <TaskInfo
-      edition={taskEdition}
-      memberInfo={memberInfo}
-      className={clsxm(
-        'flex-1 flex justify-center items-center px-2',
-        fullWidth ? 'max-w-[40rem]' : 'max-w-[30rem]'
-      )}
-      publicTeam={publicTeam}
-    />
-  );
+	return (
+		<TaskInfo
+			edition={taskEdition}
+			memberInfo={memberInfo}
+			className={clsxm(
+				'flex-1 flex justify-center items-center px-2',
+				fullWidth ? 'max-w-[24rem]' : 'max-w-[20rem]'
+			)}
+			publicTeam={publicTeam}
+		/>
+	);
 }
 
-export function UserInfoCell({ cell }: { cell: any }) {
-  const row = get(cell, 'row', {});
-  const member = row.original as OT_Member;
-  const publicTeam = get(cell, 'column.columnDef.meta.publicTeam', false);
-  const memberInfo = useTeamMemberCard(member);
+export function UserInfoCell({ cell }: Readonly<{ cell: any }>) {
+	const row = get(cell, 'row', {});
+	const member = row.original as OT_Member;
+	const publicTeam = get(cell, 'column.columnDef.meta.publicTeam', false);
+	const memberInfo = useTeamMemberCard(member);
 
-  return (
-    <UserInfo
-      memberInfo={memberInfo}
-      className="w-fit"
-      publicTeam={publicTeam}
-    />
-  );
+	return <UserInfo memberInfo={memberInfo} className="w-fit" publicTeam={publicTeam} />;
 }
 
 export function WorkedOnTaskCell({ row }: { row: any }) {
-  const member = row.original as OT_Member;
-  const memberInfo = useTeamMemberCard(member);
+	const member = row.original as OT_Member;
+	const memberInfo = useTeamMemberCard(member);
 
-  return (
-    <TaskTimes
-      activeAuthTask={true}
-      memberInfo={memberInfo}
-      task={memberInfo.memberTask}
-      isAuthUser={memberInfo.isAuthUser}
-      className={clsxm('flex flex-col justify-center items-center mx-auto')}
-    />
-  );
+	return (
+		<TaskTimes
+			activeAuthTask={true}
+			memberInfo={memberInfo}
+			task={memberInfo.memberTask}
+			isAuthUser={memberInfo.isAuthUser}
+			className={clsxm('flex flex-col justify-center items-center mx-auto')}
+		/>
+	);
 }
 
 export function TaskEstimateInfoCell({ row }: { row: any }) {
-  const member = row.original as OT_Member;
-  const memberInfo = useTeamMemberCard(member);
-  const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
+	const member = row.original as OT_Member;
+	const memberInfo = useTeamMemberCard(member);
+	const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
 
-  return (
-    <TaskEstimateInfo
-      memberInfo={memberInfo}
-      edition={taskEdition}
-      activeAuthTask={true}
-      className={clsxm('flex flex-col justify-center items-center')}
-    />
-  );
+	return (
+		<TaskEstimateInfo
+			memberInfo={memberInfo}
+			edition={taskEdition}
+			activeAuthTask={true}
+			className={clsxm('flex flex-col justify-center items-center')}
+		/>
+	);
 }
 
 export function ActionMenuCell({ cell }: { cell: any }) {
-  const row = get(cell, 'row', {});
-  const member = row.original as OT_Member;
-  const active = get(cell, 'column.columnDef.meta.active', false);
-  const memberInfo = useTeamMemberCard(member);
+	const row = get(cell, 'row', {});
+	const member = row.original as OT_Member;
+	const active = get(cell, 'column.columnDef.meta.active', false);
+	const memberInfo = useTeamMemberCard(member);
 
-  const { collaborativeSelect, user_selected, onUserSelect } = useCollaborative(
-    memberInfo.memberUser
-  );
-  const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
+	const { collaborativeSelect, user_selected, onUserSelect } = useCollaborative(memberInfo.memberUser);
+	const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
 
-  return (
-    <>
-      {(!collaborativeSelect || active) && (
-        <UserTeamCardMenu memberInfo={memberInfo} edition={taskEdition} />
-      )}
+	return (
+		<>
+			{(!collaborativeSelect || active) && <UserTeamCardMenu memberInfo={memberInfo} edition={taskEdition} />}
 
-      {collaborativeSelect && !active && (
-        <InputField
-          type="checkbox"
-          checked={user_selected()}
-          className={clsxm(
-            'border-none w-4 h-4 mr-1 accent-primary-light',
-            'border-2 border-primary-light',
-            '2xl:w-[2rem] w-1/5'
-          )}
-          noWrapper={true}
-          onChange={onUserSelect}
-        />
-      )}
-    </>
-  );
+			{collaborativeSelect && !active && (
+				<InputField
+					type="checkbox"
+					checked={user_selected()}
+					className={clsxm(
+						'border-none w-4 h-4 mr-1 accent-primary-light',
+						'border-2 border-primary-light',
+						'2xl:w-[2rem] w-1/5'
+					)}
+					noWrapper={true}
+					onChange={onUserSelect}
+				/>
+			)}
+		</>
+	);
 }
diff --git a/apps/web/lib/features/team-member-header.tsx b/apps/web/lib/features/team-member-header.tsx
index db213e94d..913a5a4a9 100644
--- a/apps/web/lib/features/team-member-header.tsx
+++ b/apps/web/lib/features/team-member-header.tsx
@@ -7,27 +7,27 @@ import { fullWidthState } from '@app/stores/fullWidth';
 import UserTeamTableHeader from './team/user-team-table/user-team-table-header';
 
 function TeamMemberHeader({ view }: { view: IssuesView }) {
-  const fullWidth = useAtomValue(fullWidthState);
-  let header;
-  switch (true) {
-    case view == IssuesView.CARDS:
-      header = <UserTeamCardHeader />;
-      break;
-    case view == IssuesView.TABLE:
-      header = <UserTeamTableHeader />;
-      break;
-    case view == IssuesView.BLOCKS:
-      header = <UserTeamBlockHeader />;
-      break;
-    default:
-      header = <UserTeamCardHeader />;
-      break;
-  }
-  return (
-    <Container fullWidth={fullWidth} className="!p-0">
-      {header}
-    </Container>
-  );
+	const fullWidth = useAtomValue(fullWidthState);
+	let header;
+	switch (true) {
+		case view == IssuesView.CARDS:
+			header = <UserTeamCardHeader />;
+			break;
+		case view == IssuesView.TABLE:
+			header = <UserTeamTableHeader />;
+			break;
+		case view == IssuesView.BLOCKS:
+			header = <UserTeamBlockHeader />;
+			break;
+		default:
+			header = <UserTeamCardHeader />;
+			break;
+	}
+	return (
+		<Container fullWidth={fullWidth} className="!p-0">
+			{header}
+		</Container>
+	);
 }
 
 export default TeamMemberHeader;
diff --git a/apps/web/lib/features/team-members-card-view.tsx b/apps/web/lib/features/team-members-card-view.tsx
index 9a0e18090..ca461f1c1 100644
--- a/apps/web/lib/features/team-members-card-view.tsx
+++ b/apps/web/lib/features/team-members-card-view.tsx
@@ -51,7 +51,7 @@ const TeamMembersCardView: React.FC<Props> = ({
 
 	return (
 		<>
-			<ul className="mt-7">
+			<ul className="mt-7 overflow-y-auto">
 				{/* Current authenticated user members */}
 				<Transition
 					show={!!currentUser}
@@ -138,7 +138,6 @@ const TeamMembersCardView: React.FC<Props> = ({
 						<InviteUserTeamSkeleton />
 					</li>
 				</Transition>
-
 				{/* Invite button */}
 				<Transition
 					show={isTeamManager}
diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
index adca20f7d..b260e0b76 100644
--- a/apps/web/lib/features/team-members-kanban-view.tsx
+++ b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -3,305 +3,265 @@ import { useKanban } from '@app/hooks/features/useKanban';
 import { ITaskStatusItemList, ITeamTask } from '@app/interfaces';
 import { IKanban } from '@app/interfaces/IKanban';
 import { fullWidthState } from '@app/stores/fullWidth';
-import { clsxm } from '@app/utils';
 import KanbanDraggable, { EmptyKanbanDroppable } from 'lib/components/Kanban';
-import React from 'react';
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
-  DragDropContext,
-  DraggableLocation,
-  DropResult,
-  Droppable,
-  DroppableProvided,
-  DroppableStateSnapshot
+	DragDropContext,
+	DraggableLocation,
+	DropResult,
+	Droppable,
+	DroppableProvided,
+	DroppableStateSnapshot
 } from 'react-beautiful-dnd';
 import { useAtomValue } from 'jotai';
-
-export const KanbanView = ({
-  kanbanBoardTasks,
-  isLoading
-}: {
-  kanbanBoardTasks: IKanban;
-  isLoading: boolean;
-}) => {
-  const {
-    data: items,
-    columns: kanbanColumns,
-    updateKanbanBoard,
-    updateTaskStatus,
-    isColumnCollapse,
-    reorderStatus,
-    addNewTask
-  } = useKanban();
-  const [columns, setColumn] = useState<any[]>(
-    Object.keys(kanbanBoardTasks).map((key) => {
-      const columnInfo = kanbanColumns.find((item) => item.name === key);
-      return {
-        id: columnInfo?.id,
-        name: key,
-        icon: columnInfo ? columnInfo.fullIconUrl : '',
-        color: columnInfo?.color
-      };
-    })
-  );
-  const fullWidth = useAtomValue(fullWidthState);
-
-  const { taskStatus: ts } = useTaskStatus();
-  const reorderTask = (
-    list: ITeamTask[],
-    startIndex: number,
-    endIndex: number
-  ) => {
-    const tasks = Array.from(list);
-    const [removedTask] = tasks.splice(startIndex, 1);
-    tasks.splice(endIndex, 0, removedTask);
-    return tasks;
-  };
-
-  const reorderKanbanTasks = ({
-    kanbanTasks,
-    source,
-    destination
-  }: {
-    kanbanTasks: IKanban;
-    source: DraggableLocation;
-    destination: DraggableLocation;
-  }) => {
-    const sourceDroppableID = source.droppableId;
-    const destinationDroppableID = destination.droppableId;
-    const sourceIndex = source.index;
-    const destinationIndex = destination.index;
-    const currentTaskStatus = [...kanbanTasks[sourceDroppableID]];
-    const nextTaskStatus = [...kanbanTasks[destinationDroppableID]];
-    const targetStatus = currentTaskStatus[source.index];
-
-    // Moving to the same list
-    if (sourceDroppableID === destinationDroppableID) {
-      const reorderedKanbanTasks = reorderTask(
-        currentTaskStatus,
-        sourceIndex,
-        destinationIndex
-      );
-      const result = {
-        ...kanbanTasks,
-        [sourceDroppableID]: reorderedKanbanTasks
-      };
-      return {
-        kanbanBoard: result
-      };
-    }
-
-    // Remove from original
-    currentTaskStatus.splice(sourceIndex, 1);
-
-    const taskstatus = destinationDroppableID as any;
-
-    const updateTaskStatusData = {
-      ...targetStatus,
-      status: taskstatus,
-      taskStatusId: ts.find(
-        (v) => v.name?.toLowerCase() == taskstatus.toLowerCase()
-      )?.id
-    };
-
-    // update task status on the server
-    updateTaskStatus(updateTaskStatusData);
-
-    // insert into next
-    nextTaskStatus.splice(destinationIndex, 0, updateTaskStatusData);
-
-    const result = {
-      ...kanbanTasks,
-      [sourceDroppableID]: currentTaskStatus,
-      [destinationDroppableID]: nextTaskStatus
-    };
-
-    return {
-      kanbanBoard: result
-    };
-  };
-
-  const getHeaderBackground = (
-    columns: ITaskStatusItemList[],
-    column: string
-  ) => {
-    const selectState = columns.find((item: ITaskStatusItemList) => {
-      return item.name === column;
-    });
-
-    return selectState?.color ?? 'white';
-  };
-
-  const reorderColumn = (
-    column: any[],
-    sourceIndex: number,
-    destinationIndex: number
-  ) => {
-    const result = Array.from(column);
-    const [removed] = result.splice(sourceIndex, 1);
-    result.splice(destinationIndex, 0, removed);
-
-    return result;
-  };
-
-  /**
-   * This function handles all drag & drop logic
-   * on the Kanban board.
-   * @param result
-   * @returns
-   */
-  const onDragEnd = (result: DropResult) => {
-    if (result.combine) {
-      if (result.type === 'COLUMN') {
-        const shallow = [...columns];
-        shallow.splice(result.source.index, 1);
-        setColumn(shallow);
-        return;
-      }
-
-      const item = items[result.source.droppableId];
-
-      const withItemRemoved = [...item];
-
-      withItemRemoved.splice(result.source.index, 1);
-
-      const orderedItems = {
-        ...items,
-        [result.source.droppableId]: withItemRemoved
-      };
-
-      updateKanbanBoard(orderedItems);
-
-      return;
-    }
-    // dropped nowhere
-    if (!result.destination) {
-      return;
-    }
-
-    const source = result.source;
-    const destination = result.destination;
-
-    // did not move anywhere - can bail early
-    if (
-      source.droppableId === destination.droppableId &&
-      source.index === destination.index
-    ) {
-      return;
-    }
-
-    if (result.type === 'COLUMN') {
-      const reorderedItem = reorderColumn(
-        columns,
-        source.index,
-        destination.index
-      );
-
-      // Update column order on the server side
-      reorderedItem.map((item: string, index: number) => {
-        return reorderStatus(item, index);
-      });
-
-      setColumn(reorderedItem);
-
-      return;
-    }
-
-    const data = reorderKanbanTasks({
-      kanbanTasks: items,
-      source,
-      destination
-    });
-
-    updateKanbanBoard(() => data.kanbanBoard);
-  };
-
-  const [enabled, setEnabled] = useState(false);
-
-  useEffect(() => {
-    const animation = requestAnimationFrame(() => setEnabled(true));
-
-    return () => {
-      cancelAnimationFrame(animation);
-      setEnabled(false);
-    };
-  }, []);
-
-  if (!enabled) return null; // ['open','close']
-
-  return (
-    <>
-      <DragDropContext onDragEnd={onDragEnd}>
-        {Array.isArray(columns) && columns.length > 0 && (
-          <Droppable
-            droppableId="droppable"
-            type="COLUMN"
-            direction="horizontal"
-          >
-            {(
-              provided: DroppableProvided,
-              snapshot: DroppableStateSnapshot
-            ) => (
-              <div className="flex flex-col h-auto justify-between w-full ">
-                <div
-                  className={clsxm(
-                    'flex flex-row  h-full p-[32px] bg-transparent dark:bg-[#181920]',
-                    snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8',
-                    !fullWidth && 'x-container pl-0'
-                  )}
-                  ref={provided.innerRef}
-                  {...provided.droppableProps}
-                >
-                  {columns.length > 0 ? (
-                    <>
-                      {columns.map((column: any, index: number) => {
-                        return (
-                          <React.Fragment key={index}>
-                            <div key={index}>
-                              {isColumnCollapse(column.name) ? (
-                                <EmptyKanbanDroppable
-                                  index={index}
-                                  title={column.name}
-                                  status={column}
-                                  setColumn={setColumn}
-                                  items={items[column.name]}
-                                  backgroundColor={getHeaderBackground(
-                                    kanbanColumns,
-                                    column.name
-                                  )}
-                                />
-                              ) : (
-                                <>
-                                  <KanbanDraggable
-                                    key={index}
-                                    status={column}
-                                    setColumn={setColumn}
-                                    isLoading={isLoading}
-                                    index={index}
-                                    icon={column.icon}
-                                    addNewTask={addNewTask}
-                                    title={column.name}
-                                    items={items[column.name]}
-                                    backgroundColor={getHeaderBackground(
-                                      kanbanColumns,
-                                      column.name
-                                    )}
-                                  />
-                                </>
-                              )}
-                            </div>
-                          </React.Fragment>
-                        );
-                      })}
-                    </>
-                  ) : null}
-                  <>{provided.placeholder}</>
-                </div>
-              </div>
-            )}
-          </Droppable>
-        )}
-      </DragDropContext>
-    </>
-  );
+import { ScrollArea, ScrollBar } from '@components/ui/scroll-area';
+import { cn } from '../utils';
+
+export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks: IKanban; isLoading: boolean }) => {
+	const {
+		data: items,
+		columns: kanbanColumns,
+		updateKanbanBoard,
+		updateTaskStatus,
+		isColumnCollapse,
+		reorderStatus,
+		addNewTask
+	} = useKanban();
+	const [columns, setColumn] = useState<any[]>(
+		Object.keys(kanbanBoardTasks).map((key) => {
+			const columnInfo = kanbanColumns.find((item) => item.name === key);
+			return {
+				id: columnInfo?.id,
+				name: key,
+				icon: columnInfo ? columnInfo.fullIconUrl : '',
+				color: columnInfo?.color
+			};
+		})
+	);
+	const fullWidth = useAtomValue(fullWidthState);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const { taskStatus: ts } = useTaskStatus();
+	const reorderTask = (list: ITeamTask[], startIndex: number, endIndex: number) => {
+		const tasks = Array.from(list);
+		const [removedTask] = tasks.splice(startIndex, 1);
+		tasks.splice(endIndex, 0, removedTask);
+		return tasks;
+	};
+
+	const reorderKanbanTasks = ({
+		kanbanTasks,
+		source,
+		destination
+	}: {
+		kanbanTasks: IKanban;
+		source: DraggableLocation;
+		destination: DraggableLocation;
+	}) => {
+		const sourceDroppableID = source.droppableId;
+		const destinationDroppableID = destination.droppableId;
+		const sourceIndex = source.index;
+		const destinationIndex = destination.index;
+		const currentTaskStatus = [...kanbanTasks[sourceDroppableID]];
+		const nextTaskStatus = [...kanbanTasks[destinationDroppableID]];
+		const targetStatus = currentTaskStatus[source.index];
+
+		// Moving to the same list
+		if (sourceDroppableID === destinationDroppableID) {
+			const reorderedKanbanTasks = reorderTask(currentTaskStatus, sourceIndex, destinationIndex);
+			const result = {
+				...kanbanTasks,
+				[sourceDroppableID]: reorderedKanbanTasks
+			};
+			return {
+				kanbanBoard: result
+			};
+		}
+
+		// Remove from original
+		currentTaskStatus.splice(sourceIndex, 1);
+
+		const taskstatus = destinationDroppableID as any;
+
+		const updateTaskStatusData = {
+			...targetStatus,
+			status: taskstatus,
+			taskStatusId: ts.find((v) => v.name?.toLowerCase() == taskstatus.toLowerCase())?.id
+		};
+
+		// update task status on the server
+		updateTaskStatus(updateTaskStatusData);
+
+		// insert into next
+		nextTaskStatus.splice(destinationIndex, 0, updateTaskStatusData);
+
+		const result = {
+			...kanbanTasks,
+			[sourceDroppableID]: currentTaskStatus,
+			[destinationDroppableID]: nextTaskStatus
+		};
+
+		return {
+			kanbanBoard: result
+		};
+	};
+
+	const getHeaderBackground = (columns: ITaskStatusItemList[], column: string) => {
+		const selectState = columns.find((item: ITaskStatusItemList) => {
+			return item.name === column;
+		});
+
+		return selectState?.color ?? 'white';
+	};
+
+	const reorderColumn = (column: any[], sourceIndex: number, destinationIndex: number) => {
+		const result = Array.from(column);
+		const [removed] = result.splice(sourceIndex, 1);
+		result.splice(destinationIndex, 0, removed);
+
+		return result;
+	};
+
+	/**
+	 * This function handles all drag & drop logic
+	 * on the Kanban board.
+	 * @param result
+	 * @returns
+	 */
+	const onDragEnd = (result: DropResult) => {
+		if (result.combine) {
+			if (result.type === 'COLUMN') {
+				const shallow = [...columns];
+				shallow.splice(result.source.index, 1);
+				setColumn(shallow);
+				return;
+			}
+
+			const item = items[result.source.droppableId];
+
+			const withItemRemoved = [...item];
+
+			withItemRemoved.splice(result.source.index, 1);
+
+			const orderedItems = {
+				...items,
+				[result.source.droppableId]: withItemRemoved
+			};
+
+			updateKanbanBoard(orderedItems);
+
+			return;
+		}
+		// dropped nowhere
+		if (!result.destination) {
+			return;
+		}
+
+		const source = result.source;
+		const destination = result.destination;
+
+		// did not move anywhere - can bail early
+		if (source.droppableId === destination.droppableId && source.index === destination.index) {
+			return;
+		}
+
+		if (result.type === 'COLUMN') {
+			const reorderedItem = reorderColumn(columns, source.index, destination.index);
+
+			// Update column order on the server side
+			reorderedItem.map((item: string, index: number) => {
+				return reorderStatus(item, index);
+			});
+
+			setColumn(reorderedItem);
+
+			return;
+		}
+
+		const data = reorderKanbanTasks({
+			kanbanTasks: items,
+			source,
+			destination
+		});
+
+		updateKanbanBoard(() => data.kanbanBoard);
+	};
+
+	const [enabled, setEnabled] = useState(false);
+
+	useEffect(() => {
+		const animation = requestAnimationFrame(() => setEnabled(true));
+
+		return () => {
+			cancelAnimationFrame(animation);
+			setEnabled(false);
+		};
+	}, []);
+
+	if (!enabled) return null; // ['open','close']
+
+	return (
+		<ScrollArea
+			className="max-w-[82svw] w-full relative bg-transparent dark:bg-[#181920] min-h-svh h-svh px-5"
+			ref={containerRef}
+		>
+			<div className="w-max">
+				<DragDropContext onDragEnd={onDragEnd}>
+					{Array.isArray(columns) && columns.length > 0 && (
+						<Droppable droppableId="droppable" type="COLUMN" direction="horizontal">
+							{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
+								<div
+									className={cn(
+										'flex flex-1 flex-row gap-2 min-h-fit px-8 lg:px-0 w-full h-full',
+										snapshot.isDraggingOver ? 'bg-slate-200 dark:bg-slate-800' : '',
+										!fullWidth && 'x-container pl-0'
+									)}
+									ref={provided.innerRef}
+									{...provided.droppableProps}
+								>
+									{columns.length > 0
+										? columns.map((column: any, index: number) => (
+												<Fragment key={index}>
+													{isColumnCollapse(column.name) ? (
+														<EmptyKanbanDroppable
+															index={index}
+															title={column.name}
+															status={column}
+															setColumn={setColumn}
+															items={items[column.name]}
+															backgroundColor={getHeaderBackground(
+																kanbanColumns,
+																column.name
+															)}
+														/>
+													) : (
+														<KanbanDraggable
+															key={index}
+															status={column}
+															setColumn={setColumn}
+															isLoading={isLoading}
+															index={index}
+															icon={column.icon}
+															addNewTask={addNewTask}
+															title={column.name}
+															items={items[column.name]}
+															backgroundColor={getHeaderBackground(
+																kanbanColumns,
+																column.name
+															)}
+															containerRef={containerRef}
+														/>
+													)}
+												</Fragment>
+											))
+										: null}
+									{provided.placeholder as React.ReactElement}
+								</div>
+							)}
+						</Droppable>
+					)}
+				</DragDropContext>
+			</div>
+			<ScrollBar className="fixed bottom-[90px] left-0 w-full bg-transparent" orientation="horizontal" />
+		</ScrollArea>
+	);
 };
diff --git a/apps/web/lib/features/team-members-table-view.tsx b/apps/web/lib/features/team-members-table-view.tsx
index 50df9227d..50574475a 100644
--- a/apps/web/lib/features/team-members-table-view.tsx
+++ b/apps/web/lib/features/team-members-table-view.tsx
@@ -76,6 +76,7 @@ const TeamMembersTableView = ({
 				isHeader={false}
 				columns={columns as Column<OT_Member>[]}
 				data={sortedTeamMembers}
+				isScrollable
 				noResultsMessage={{
 					heading: 'No team members found',
 					content: 'Try adjusting your search or filter to find what you’re looking for.'
diff --git a/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx b/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
index 86df31cf4..78835ff5a 100644
--- a/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
+++ b/apps/web/lib/features/team/user-team-block/user-team-block-header.tsx
@@ -1,238 +1,212 @@
-import {
-  useOrganizationTeams,
-  useAuthenticateUser,
-  useModal,
-  useUserProfilePage
-} from '@app/hooks';
+import { useOrganizationTeams, useAuthenticateUser, useModal, useUserProfilePage } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import { InviteFormModal } from '../invite/invite-form-modal';
 import { taskBlockFilterState } from '@app/stores/task-filter';
 import { SearchNormalIcon, TimerPlayIcon } from 'assets/svg';
-import {
-  CheckCircleTickIcon,
-  CrossCircleIcon,
-  StopCircleIcon,
-  PauseIcon
-} from 'assets/svg';
+import { CheckCircleTickIcon, CrossCircleIcon, StopCircleIcon, PauseIcon } from 'assets/svg';
 import { Button, VerticalSeparator } from 'lib/components';
 import { useTaskFilter, TaskNameFilter } from 'lib/features';
 import { useAtom } from 'jotai';
 import { useTranslations } from 'next-intl';
 
 interface IFilter {
-  running: number;
-  online: number;
-  pause: number;
-  idle: number;
-  suspended: number;
+	running: number;
+	online: number;
+	pause: number;
+	idle: number;
+	suspended: number;
 }
 
 export function UserTeamBlockHeader() {
-  const t = useTranslations();
-  const { activeTeam } = useOrganizationTeams();
-  const { user } = useAuthenticateUser();
-  const { openModal, isOpen, closeModal } = useModal();
-  const [activeFilter, setActiveFilter] = useAtom<
-    'all' | 'running' | 'online' | 'pause' | 'idle' | 'suspended'
-  >(taskBlockFilterState);
+	const t = useTranslations();
+	const { activeTeam } = useOrganizationTeams();
+	const { user } = useAuthenticateUser();
+	const { openModal, isOpen, closeModal } = useModal();
+	const [activeFilter, setActiveFilter] = useAtom<'all' | 'running' | 'online' | 'pause' | 'idle' | 'suspended'>(
+		taskBlockFilterState
+	);
 
-  const profile = useUserProfilePage();
-  const hook = useTaskFilter(profile);
+	const profile = useUserProfilePage();
+	const hook = useTaskFilter(profile);
 
-  const membersStatusNumber: IFilter = {
-    running: 0,
-    online: 0,
-    pause: 0,
-    idle: 0,
-    suspended: 0
-  };
+	const membersStatusNumber: IFilter = {
+		running: 0,
+		online: 0,
+		pause: 0,
+		idle: 0,
+		suspended: 0
+	};
 
-  const members = activeTeam?.members ? activeTeam?.members : [];
-  members?.map((item) => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    membersStatusNumber[item.timerStatus!]++;
-    if (item.timerStatus === undefined) membersStatusNumber.idle += 1;
-  });
+	const members = activeTeam?.members ? activeTeam?.members : [];
+	members?.map((item) => {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		membersStatusNumber[item.timerStatus!]++;
+		if (item.timerStatus === undefined) membersStatusNumber.idle += 1;
+	});
 
-  return (
-    <>
-      <div
-        ref={profile.loadTaskStatsIObserverRef}
-        className="hidden sm:flex  dark:bg-dark-high  font-normal pt-7 justify-between dark:text-[#7B8089]"
-      >
-        <div className="flex items-center w-9/12">
-          <div
-            className={clsxm(
-              'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
-              activeFilter == 'all' &&
-                'border-primary dark:border-white  text-primary dark:text-white'
-            )}
-            onClick={() => setActiveFilter('all')}
-          >
-            <StopCircleIcon
-              className={clsxm(
-                'w-7 h-7 p-1 !text-gray-300 dark:!text-white',
-                activeFilter == 'all' && 'text-primary dark:text-white'
-              )}
-            />
-            <p>{t('common.ALL_MEMBERS')}</p>
-            <span
-              className={clsxm(
-                ' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-                activeFilter == 'all' &&
-                  'bg-primary dark:bg-[#47484D] text-white'
-              )}
-            >
-              {members?.length}
-            </span>
-          </div>
-          <div
-            className={clsxm(
-              'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
-              activeFilter == 'idle' &&
-                'border-primary dark:border-white  text-primary dark:text-white'
-            )}
-            onClick={() => setActiveFilter('idle')}
-          >
-            <CrossCircleIcon
-              className={clsxm(
-                'w-7 h-7 p-1 !text-gray-300  dark:!text-white',
-                activeFilter == 'idle' &&
-                  '!text-primary !fill-white  dark:!text-white dark:!fill-white'
-              )}
-            />
-            <p>{t('common.NOT_WORKING')}</p>
-            <span
-              className={clsxm(
-                ' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-                activeFilter == 'idle' &&
-                  'bg-primary dark:bg-[#47484D] text-white'
-              )}
-            >
-              {membersStatusNumber.idle}
-            </span>
-          </div>
-          <div
-            className={clsxm(
-              'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
-              activeFilter == 'running' &&
-                'border-primary dark:border-white  text-primary dark:text-white'
-            )}
-            onClick={() => setActiveFilter('running')}
-          >
-            <TimerPlayIcon
-              className={clsxm(
-                'w-7 h-7 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
-                activeFilter == 'running' &&
-                  '!text-primary !fill-primary  dark:!text-white dark:!fill-white'
-              )}
-            />
-            <p>{t('common.WORKING')}</p>
-            <span
-              className={clsxm(
-                ' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-                activeFilter == 'running' &&
-                  'bg-primary dark:bg-[#47484D] text-white'
-              )}
-            >
-              {membersStatusNumber.running}
-            </span>
-          </div>
-          <div
-            className={clsxm(
-              'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
-              activeFilter == 'pause' &&
-                'border-primary dark:border-white  text-primary dark:text-white'
-            )}
-            onClick={() => setActiveFilter('pause')}
-          >
-            <PauseIcon
-              className={clsxm(
-                'w-7 h-7 p-1 text-gray-400 dark:text-white',
-                activeFilter == 'pause' && 'text-primary dark:text-white'
-              )}
-            />
-            <p>{t('common.PAUSED')}</p>
-            <span
-              className={clsxm(
-                ' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-                activeFilter == 'pause' &&
-                  'bg-primary dark:bg-[#47484D] text-white'
-              )}
-            >
-              {membersStatusNumber.pause}
-            </span>
-          </div>
-          <div
-            className={clsxm(
-              'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
-              activeFilter == 'online' &&
-                'border-primary dark:border-white  text-primary dark:text-white'
-            )}
-            onClick={() => setActiveFilter('online')}
-          >
-            <CheckCircleTickIcon
-              className={clsxm(
-                'w-7 h-7 p-1 !text-gray-400  dark:!text-white',
-                activeFilter == 'online' &&
-                  '!text-primary !fill-white  dark:!text-primary dark:!fill-white'
-              )}
-            />
-            <p>{t('common.ONLINE')}</p>
-            <span
-              className={clsxm(
-                ' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
-                activeFilter == 'online' &&
-                  'bg-primary dark:bg-[#47484D] text-white'
-              )}
-            >
-              {membersStatusNumber.online}
-            </span>
-          </div>
-        </div>
+	return (
+		<>
+			<div
+				ref={profile.loadTaskStatsIObserverRef}
+				className="hidden sm:flex  dark:bg-dark-high  font-normal pt-4 justify-between dark:text-[#7B8089]"
+			>
+				<div className="flex items-center w-9/12">
+					<div
+						className={clsxm(
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
+							activeFilter == 'all' && 'border-primary dark:border-white  text-primary dark:text-white'
+						)}
+						onClick={() => setActiveFilter('all')}
+					>
+						<StopCircleIcon
+							className={clsxm(
+								'w-7 h-7 p-1 !text-gray-300 dark:!text-white',
+								activeFilter == 'all' && 'text-primary dark:text-white'
+							)}
+						/>
+						<p>{t('common.ALL_MEMBERS')}</p>
+						<span
+							className={clsxm(
+								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
+								activeFilter == 'all' && 'bg-primary dark:bg-[#47484D] text-white'
+							)}
+						>
+							{members?.length}
+						</span>
+					</div>
+					<div
+						className={clsxm(
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
+							activeFilter == 'idle' && 'border-primary dark:border-white  text-primary dark:text-white'
+						)}
+						onClick={() => setActiveFilter('idle')}
+					>
+						<CrossCircleIcon
+							className={clsxm(
+								'w-7 h-7 p-1 !text-gray-300  dark:!text-white',
+								activeFilter == 'idle' && '!text-primary !fill-white  dark:!text-white dark:!fill-white'
+							)}
+						/>
+						<p>{t('common.NOT_WORKING')}</p>
+						<span
+							className={clsxm(
+								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
+								activeFilter == 'idle' && 'bg-primary dark:bg-[#47484D] text-white'
+							)}
+						>
+							{membersStatusNumber.idle}
+						</span>
+					</div>
+					<div
+						className={clsxm(
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
+							activeFilter == 'running' &&
+								'border-primary dark:border-white  text-primary dark:text-white'
+						)}
+						onClick={() => setActiveFilter('running')}
+					>
+						<TimerPlayIcon
+							className={clsxm(
+								'w-7 h-7 p-1 !text-gray-300 !fill-gray-400 dark:!text-white',
+								activeFilter == 'running' &&
+									'!text-primary !fill-primary  dark:!text-white dark:!fill-white'
+							)}
+						/>
+						<p>{t('common.WORKING')}</p>
+						<span
+							className={clsxm(
+								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
+								activeFilter == 'running' && 'bg-primary dark:bg-[#47484D] text-white'
+							)}
+						>
+							{membersStatusNumber.running}
+						</span>
+					</div>
+					<div
+						className={clsxm(
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
+							activeFilter == 'pause' && 'border-primary dark:border-white  text-primary dark:text-white'
+						)}
+						onClick={() => setActiveFilter('pause')}
+					>
+						<PauseIcon
+							className={clsxm(
+								'w-7 h-7 p-1 text-gray-400 dark:text-white',
+								activeFilter == 'pause' && 'text-primary dark:text-white'
+							)}
+						/>
+						<p>{t('common.PAUSED')}</p>
+						<span
+							className={clsxm(
+								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
+								activeFilter == 'pause' && 'bg-primary dark:bg-[#47484D] text-white'
+							)}
+						>
+							{membersStatusNumber.pause}
+						</span>
+					</div>
+					<div
+						className={clsxm(
+							'w-1/6 text-center flex items-center justify-center gap-2 py-4 cursor-pointer text-sm border-b-4 border-transparent',
+							activeFilter == 'online' && 'border-primary dark:border-white  text-primary dark:text-white'
+						)}
+						onClick={() => setActiveFilter('online')}
+					>
+						<CheckCircleTickIcon
+							className={clsxm(
+								'w-7 h-7 p-1 !text-gray-400  dark:!text-white',
+								activeFilter == 'online' &&
+									'!text-primary !fill-white  dark:!text-primary dark:!fill-white'
+							)}
+						/>
+						<p>{t('common.ONLINE')}</p>
+						<span
+							className={clsxm(
+								' bg-gray-500/40 p-1 px-2 text-xs rounded-md',
+								activeFilter == 'online' && 'bg-primary dark:bg-[#47484D] text-white'
+							)}
+						>
+							{membersStatusNumber.online}
+						</span>
+					</div>
+				</div>
 
-        <div className="3/12 flex justify-end gap-2 items-center">
-          {/* <Invite /> */}
-          {hook.filterType === 'search' ? (
-            <TaskNameFilter
-              fullWidth={true}
-              value={hook.taskName}
-              setValue={hook.setTaskName}
-              close={() => {
-                hook.toggleFilterType('search');
-              }}
-            />
-          ) : (
-            <div className="flex gap-6">
-              <button
-                ref={hook.outclickFilterCard.ignoreElementRef}
-                className={clsxm('outline-none')}
-                onClick={() => hook.toggleFilterType('search')}
-              >
-                <SearchNormalIcon
-                  className={clsxm(
-                    'dark:stroke-white w-4'
-                    // hook.filterType === 'search' && ['stroke-primary-light dark:stroke-primary-light']
-                  )}
-                />
-              </button>
+				<div className="3/12 flex justify-end gap-2 items-center">
+					{/* <Invite /> */}
+					{hook.filterType === 'search' ? (
+						<TaskNameFilter
+							fullWidth={true}
+							value={hook.taskName}
+							setValue={hook.setTaskName}
+							close={() => {
+								hook.toggleFilterType('search');
+							}}
+						/>
+					) : (
+						<div className="flex gap-6">
+							<button
+								ref={hook.outclickFilterCard.ignoreElementRef}
+								className={clsxm('outline-none')}
+								onClick={() => hook.toggleFilterType('search')}
+							>
+								<SearchNormalIcon
+									className={clsxm(
+										'dark:stroke-white w-4'
+										// hook.filterType === 'search' && ['stroke-primary-light dark:stroke-primary-light']
+									)}
+								/>
+							</button>
 
-              <VerticalSeparator />
+							<VerticalSeparator />
 
-              <Button
-                className="py-3.5 px-4 gap-3 rounded-xl outline-none w-44"
-                onClick={openModal}
-              >
-                Invite
-              </Button>
-            </div>
-          )}
-        </div>
-      </div>
-      <InviteFormModal
-        open={isOpen && !!user?.isEmailVerified}
-        closeModal={closeModal}
-      />
-    </>
-  );
+							<Button className="py-3.5 px-4 gap-3 rounded-xl outline-none w-44" onClick={openModal}>
+								Invite
+							</Button>
+						</div>
+					)}
+				</div>
+			</div>
+			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
+		</>
+	);
 }
diff --git a/apps/web/lib/features/team/user-team-card/index.tsx b/apps/web/lib/features/team/user-team-card/index.tsx
index 2f75e630a..bf5ab103d 100644
--- a/apps/web/lib/features/team/user-team-card/index.tsx
+++ b/apps/web/lib/features/team/user-team-card/index.tsx
@@ -192,7 +192,7 @@ export function UserTeamCard({
 					<VerticalSeparator />
 
 					{/* Task information */}
-					<div className="flex justify-between items-center flex-1 md:min-w-[37%] xl:min-w-[40%]">
+					<div className="flex justify-between items-center flex-1 md:min-w-[25%] xl:min-w-[30%] !max-w-[250px]">
 						<TaskInfo
 							edition={taskEdition}
 							memberInfo={memberInfo}
diff --git a/apps/web/lib/features/team/user-team-card/task-skeleton.tsx b/apps/web/lib/features/team/user-team-card/task-skeleton.tsx
index 7212cee4e..bef1bd8db 100644
--- a/apps/web/lib/features/team/user-team-card/task-skeleton.tsx
+++ b/apps/web/lib/features/team/user-team-card/task-skeleton.tsx
@@ -44,31 +44,36 @@ export function UserTeamCardHeader() {
 	const t = useTranslations();
 	return (
 		<div className="w-full h-14  dark:text-[#7B8089] font-normal  -mt-1 z-50 dark:bg-dark-high px-8 m-0">
-			<div className="px-4 md:px-8 ml-4 h-full">
-				<div className="flex h-full m-0 relative items-center">
-					<a className="flex items-center space-x-2 2xl:w-[20.625rem] w-1/4">
+			<div className="w-full h-full px-4 ml-4 md:px-8">
+				<div className="relative flex items-center justify-around w-full h-full m-0">
+					<div className="inline-flex items-center space-x-2 2xl:w-[20.625rem] w-1/4">
 						<div className="w-[50px] h-full flex justify-center items-center"></div>
-						<div className="lg:w-64 w-1/2 flex flex-col gap-1.5">
+						<div className="lg:w-64 w-1/2 flex flex-col gap-1.5 text-nowrap">
 							{t('common.TEAM')} {t('common.MEMBER')}
 						</div>
-					</a>
+					</div>
 					<div className="w-1 self-stretch border-l-[0.125rem] border-l-transparent" />
-					<div className="flex justify-between items-center flex-1 min-w-[40%]">
-						<div className="h-full w-full flex flex-col items-center justify-center gap-[1.0620rem] max-h-full overflow-hidden flex-1 lg:px-4 px-2 overflow-y-hidden">
+					<div className="flex justify-between items-center min-w-[24%]">
+						<div className="h-full w-full flex flex-col items-center justify-center text-nowrap gap-[1.0620rem] max-h-full overflow-hidden flex-1 lg:px-4 px-2 overflow-y-hidden">
 							{t('common.TASK')}
 						</div>
 					</div>
 					<div className="w-4 self-stretch border-l-[0.125rem] border-l-transparent " />
 					<div className="2xl:w-48 3xl:w-[12rem] capitalize w-1/5 lg:px-4 !pl-6 lg:!pl-8  flex flex-col items-center text-center  justify-center">
-						<Tooltip label={t('task.taskTableHead.WORKED_ON_TASK_HEADER_TOOLTIP')}>
+						<Tooltip label={t('task.taskTableHead.WORKED_ON_TASK_HEADER_TOOLTIP')} className="text-nowrap">
 							{t('dailyPlan.TASK_TIME')}
 						</Tooltip>
 					</div>
 					<div className="w-1 self-stretch border-l-[0.125rem] border-l-transparent" />
-					<div className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64 !pl-14 text-center">{t('common.ESTIMATE')}</div>
+					<div className="w-1/5 lg:px-3 2xl:w-52 3xl:w-64 !pl-14 text-center text-nowrap">
+						{t('common.ESTIMATE')}
+					</div>
 					<div className="w-1 self-stretch border-l-[0.125rem] border-l-transparent" />
 					<div className="flex justify-center items-center cursor-pointer w-1/5 gap-4 lg:px-3 2xl:w-52 max-w-[13rem] !pl-14 text-center">
-						<Tooltip label={t('task.taskTableHead.TOTAL_WORKED_TODAY_HEADER_TOOLTIP')}>
+						<Tooltip
+							label={t('task.taskTableHead.TOTAL_WORKED_TODAY_HEADER_TOOLTIP')}
+							className="text-nowrap"
+						>
 							{t('dailyPlan.TOTAL_TODAY')}
 						</Tooltip>
 					</div>
diff --git a/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx b/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx
index 1a0cf39c1..67163df6f 100644
--- a/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx
+++ b/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx
@@ -1,11 +1,10 @@
 import { Tooltip } from 'lib/components';
 import { useTranslations } from 'next-intl';
-import React from 'react';
 
 function UserTeamTableHeader() {
 	const t = useTranslations();
 	return (
-		<thead className="font-normal h-14 w-full dark:text-[#7B8089] dark:bg-dark-high px-8 pb-[18px] mb-[11px] pt-3">
+		<thead className="font-normal h-14 w-full dark:text-[#7B8089] dark:bg-dark-high px-8 py-3 mb-[11px]">
 			<tr className="text-center w-full items-center">
 				<th className="w-[32%] 2xl:!w-[28%] pl-10 font-normal text-left">
 					{t('common.TEAM')} {t('common.MEMBER')}
diff --git a/apps/web/lib/features/unverified-email.tsx b/apps/web/lib/features/unverified-email.tsx
index dab1cf4e5..799a87062 100644
--- a/apps/web/lib/features/unverified-email.tsx
+++ b/apps/web/lib/features/unverified-email.tsx
@@ -41,7 +41,7 @@ export function UnverifiedEmail() {
 			<Card
 				shadow="bigger"
 				className={clsxm(
-					'w-full mt-6 flex justify-between',
+					'w-full mt-4 flex justify-between',
 					'border dark:border-[#28292F] dark:shadow-lg dark:bg-[#1B1D22]'
 				)}
 			>
diff --git a/apps/web/lib/features/user-nav-menu.tsx b/apps/web/lib/features/user-nav-menu.tsx
index 2ce7dc51a..7762a76ae 100644
--- a/apps/web/lib/features/user-nav-menu.tsx
+++ b/apps/web/lib/features/user-nav-menu.tsx
@@ -46,7 +46,7 @@ export function UserNavAvatar() {
 	}, [timerStatus, currentMember, publicTeam]);
 
 	return (
-		<Popover className="relative flex items-center">
+		<Popover className="relative z-50 flex items-center">
 			<Popover.Button className="outline-none">
 				<div
 					className={clsxm(
@@ -97,7 +97,7 @@ export function UserNavAvatar() {
 				leaveFrom="transform scale-100 opacity-100"
 				leaveTo="transform scale-95 opacity-0"
 			>
-				<Popover.Panel className="absolute  right-0 z-50 mt-5 xl:-right-5">
+				<Popover.Panel className="absolute right-0 z-50 mt-5 xl:-right-5">
 					<MenuIndicator />
 					<UserNavMenu />
 				</Popover.Panel>
@@ -284,13 +284,13 @@ function UserNavMenu() {
 					</li>
 				</ul>
 				<Divider className="mt-4 mb-3" />
-				<ul className="md:hidden flex flex-col gap-2 justify-start items-center">
+				<ul className="flex flex-col items-center justify-start gap-2 md:hidden">
 					{!publicTeam && <Collaborate />}
 
 					{isTeamMember && isTeamDropdownAllowed ? <TeamsDropDown publicTeam={publicTeam || false} /> : null}
 
 					<KeyboardShortcuts />
-					<Divider className="mt-1 mb-3 w-full" />
+					<Divider className="w-full mt-1 mb-3" />
 				</ul>
 				<ul className="w-full">
 					{/* Logout menu */}
diff --git a/apps/web/lib/features/user-profile-plans.tsx b/apps/web/lib/features/user-profile-plans.tsx
index 754622dd6..87c427328 100644
--- a/apps/web/lib/features/user-profile-plans.tsx
+++ b/apps/web/lib/features/user-profile-plans.tsx
@@ -142,8 +142,8 @@ export function UserProfilePlans() {
 			<Container fullWidth={fullWidth} className="">
 				<>
 					{profileDailyPlans?.items?.length > 0 ? (
-						<div className=" space-y-4">
-							<div className="flex items-center justify-between w-full">
+						<div className="space-y-4 ">
+							<div className="flex items-center justify-between w-full min-w-fit max-w-[78svw]">
 								<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">
@@ -184,7 +184,7 @@ export function UserProfilePlans() {
 										</div>
 									))}
 								</div>
-								<div className="flex  items-center gap-2">
+								<div className="flex items-center gap-2">
 									{currentTab === 'Today Tasks' && todayPlan[0] && (
 										<>
 											{canSeeActivity ? (
@@ -353,8 +353,9 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 													ref={provided.innerRef}
 													{...provided.droppableProps}
 													className={clsxm(
+														'flex-wrap',
 														view === 'CARDS' && 'flex-col',
-														'flex gap-2 pb-[1.5rem]',
+														'flex gap-2 pb-[1.5rem] flex-wrap',
 														view === 'BLOCKS' && 'overflow-x-auto',
 														snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
 													)}
@@ -418,7 +419,7 @@ function AllPlans({ profile, currentTab = 'All Tasks' }: { profile: any; current
 															</Draggable>
 														)
 													)}
-													<>{provided.placeholder}</>
+													{provided.placeholder as React.ReactElement}
 												</ul>
 											)}
 										</Droppable>
@@ -472,8 +473,9 @@ export function PlanHeader({ plan, planMode }: { plan: IDailyPlan; planMode: Fil
 
 	return (
 		<div
-			className={`mb-6 flex ${planMode === 'Future Tasks' ? 'justify-start' : 'justify-around'
-				}  items-center gap-5`}
+			className={`mb-6 flex ${
+				planMode === 'Future Tasks' ? 'justify-start' : 'justify-around'
+			}  items-center gap-5`}
 		>
 			{/* Planned Time */}
 
diff --git a/apps/web/lib/features/user-profile-tasks.tsx b/apps/web/lib/features/user-profile-tasks.tsx
index 12c913b02..46b02dfa4 100644
--- a/apps/web/lib/features/user-profile-tasks.tsx
+++ b/apps/web/lib/features/user-profile-tasks.tsx
@@ -54,12 +54,12 @@ export function UserProfileTask({ profile, paginateTasks, tabFiltered }: Props)
 	}, []);
 
 	return (
-		<div className="mt-10">
+		<div className="flex flex-col w-full h-full mt-10">
 			{tabFiltered.tab === 'worked' &&
 				(profile.member?.employee?.isTrackingTime || (profile.isAuthUser && timerStatus?.running)) &&
 				otherTasks.length > 0 && (
 					/* Displaying the current time. */
-					<div className="flex items-center mb-3 space-x-2">
+					<div className="flex items-center mb-3 gap-x-2 w-fit">
 						<Text className="font-normal">{t('common.NOW')}</Text>
 						<Divider className="flex-1" />
 						<div className="flex items-center space-x-4">
diff --git a/apps/web/lib/layout/AppContainer.tsx b/apps/web/lib/layout/AppContainer.tsx
new file mode 100644
index 000000000..4fe495c4d
--- /dev/null
+++ b/apps/web/lib/layout/AppContainer.tsx
@@ -0,0 +1,42 @@
+import { FC, PropsWithChildren } from 'react';
+import { Toaster, ToastMessageManager } from '@components/ui/toaster';
+import { Meta } from '../components/meta';
+import { useAtomValue } from 'jotai';
+import { fullWidthState } from '@/app/stores/fullWidth';
+interface AppContainerProps extends PropsWithChildren {
+	title?: string;
+}
+const AppContainer: FC<AppContainerProps> = ({ children, title = 'Ever Teams' }) => {
+	const fullWidth = useAtomValue(fullWidthState);
+	return (
+		<>
+			<style jsx global>
+				{`
+					:root {
+						--tw-color-dark--theme: #191a20;
+					}
+					.mx-8-container {
+						min-width: fit-content;
+						${fullWidth
+							? `
+						margin-left: 2rem;
+						margin-right: 2rem;
+						`
+							: `	--tblr-gutter-x: 1.5rem;
+					--tblr-gutter-y: 0;
+					padding-right: calc(var(--tblr-gutter-x) * 0.5);
+					padding-left: calc(var(--tblr-gutter-x) * 0.5);
+					margin-right: auto;
+					margin-left: auto;`}
+					}
+				`}
+			</style>
+			<Meta title={title} />
+			{children}
+			<Toaster />
+			<ToastMessageManager />
+		</>
+	);
+};
+
+export default AppContainer;
diff --git a/apps/web/lib/layout/GlobalFooter.tsx b/apps/web/lib/layout/GlobalFooter.tsx
new file mode 100644
index 000000000..426ab8fec
--- /dev/null
+++ b/apps/web/lib/layout/GlobalFooter.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable react/display-name */
+'use client';
+import { forwardRef, LegacyRef } from 'react';
+
+import { cn } from '@/lib/utils';
+import { Container, Divider } from 'lib/components';
+import { Footer } from '.';
+import { useSidebar } from '@components/ui/sidebar';
+interface GlobalFooterProps {
+	footerClassName?: string;
+	fullWidth?: boolean;
+	isFixed?: boolean;
+}
+
+const GlobalFooter = forwardRef(({ fullWidth, footerClassName, isFixed = false }: GlobalFooterProps, ref) => {
+	const { state } = useSidebar();
+	return (
+		<div
+			ref={ref as LegacyRef<HTMLDivElement>}
+			className={cn(
+				'bg-white dark:bg-[#1e2025] shrink-0 transition-all duration-300 mt-auto',
+				isFixed
+					? `fixed z-50 bottom-0 left-0 right-0 !lg:pl-[${state === 'expanded' ? '--sidebar-width' : '--sidebar-width-icon'}] !lg:pl-[var(${state === 'expanded' ? '--sidebar-width' : '--sidebar-width-icon'})]`
+					: ''
+			)}
+			style={
+				isFixed
+					? {
+							paddingLeft: `var(${state === 'expanded' ? '--sidebar-width' : '--sidebar-width-icon'})`
+						}
+					: undefined
+			}
+		>
+			<Divider />
+			<Container fullWidth={fullWidth} className={cn('w-full px-8 mt-auto', fullWidth && '!mx-0')}>
+				<Footer className={cn('justify-between w-full px-0 mx-auto', footerClassName)} />
+			</Container>
+		</div>
+	);
+});
+
+export default GlobalFooter;
diff --git a/apps/web/lib/layout/GlobalHeader.tsx b/apps/web/lib/layout/GlobalHeader.tsx
new file mode 100644
index 000000000..3b012d79a
--- /dev/null
+++ b/apps/web/lib/layout/GlobalHeader.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable react/display-name */
+import React, { forwardRef, LegacyRef, useState } from 'react';
+import { Navbar } from '.';
+import { cn } from '../utils';
+import { useSidebar } from '@components/ui/sidebar';
+import { ResizableHandle, ResizablePanel } from '@components/ui/resizable';
+export interface GlobalHeaderProps {
+	fullWidth?: boolean;
+	showTimer?: boolean;
+	publicTeam?: boolean;
+	notFound?: boolean;
+	mainHeaderSlot: React.ReactNode;
+	mainHeaderSlotClassName?: string;
+}
+const GlobalHeader = forwardRef(
+	(
+		{ fullWidth, showTimer, publicTeam, notFound, mainHeaderSlot, mainHeaderSlotClassName }: GlobalHeaderProps,
+		ref
+	) => {
+		const { state } = useSidebar();
+		const [headerSize, setHeaderSize] = useState(10);
+		return (
+			<div
+				ref={ref as LegacyRef<HTMLDivElement>}
+				className={cn(
+					'fixed flex flex-col top-0 left-0 right-0 z-50 bg-white border-b min-h-fit shrink-0 h-max bg-background ',
+					`!lg:pl-[${state === 'expanded' ? '--sidebar-width' : '--sidebar-width-icon'}]`,
+					`!lg:pl-[var(${state === 'expanded' ? '--sidebar-width' : '--sidebar-width-icon'})]`
+				)}
+				style={{
+					paddingLeft: `var(${state === 'expanded' ? '--sidebar-width' : '--sidebar-width-icon'})`
+				}}
+			>
+				<header
+					className={cn(
+						'flex max-h-fit flex-col flex-1  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-20 bg-white dark:bg-dark-high !mx-0 !nav-items--shadow dark:!shadow-none border-b-[0.5px] dark:border-b-[0.125rem] border-gray-200 relative z-50 dark:border-b-[#26272C]',
+						!fullWidth ? 'lg:px-8' : 'px-8'
+					)}
+				>
+					<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 ? (
+					<ResizablePanel
+						defaultSize={30}
+						className={cn(
+							headerSize < 20 ? '!overflow-hidden h-fit' : '!overflow-visible',
+							'dark:bg-dark-high border-b-[0.125rem] dark:border-[#26272C]'
+						)}
+						onResize={(size) => setHeaderSize(size)}
+					>
+						<div className={cn('flex-1 w-full', mainHeaderSlotClassName)}>{mainHeaderSlot}</div>
+					</ResizablePanel>
+				) : null}
+				<ResizableHandle withHandle />
+			</div>
+		);
+	}
+);
+
+export default GlobalHeader;
diff --git a/apps/web/lib/layout/footer.tsx b/apps/web/lib/layout/footer.tsx
index fcfa71659..39777bab2 100644
--- a/apps/web/lib/layout/footer.tsx
+++ b/apps/web/lib/layout/footer.tsx
@@ -10,38 +10,33 @@ import { fullWidthState } from '@app/stores/fullWidth';
 import { clsxm } from '@app/utils';
 
 export function Footer({ className }: IClassName) {
-  const t = useTranslations();
+	const t = useTranslations();
 
-  const [showChatwoot, setShowChatwoot] = useState(false);
-  const fullWidth = useAtomValue(fullWidthState);
-  useEffect(() => {
-    const websiteToken = CHATWOOT_API_KEY.value;
-    if (websiteToken) {
-      setShowChatwoot(true);
-    }
-  }, []);
+	const [showChatwoot, setShowChatwoot] = useState(false);
+	const fullWidth = useAtomValue(fullWidthState);
+	useEffect(() => {
+		const websiteToken = CHATWOOT_API_KEY.value;
+		if (websiteToken) {
+			setShowChatwoot(true);
+		}
+	}, []);
 
-  return (
-    <footer
-      className={clsxm(
-        'flex flex-col xs:flex-row justify-around items-center w-full py-6 px-3',
-        className
-      )}
-    >
-      <p className="text-neutral text-xs font-normal leading-4 -tracking-[-0.02em] text-center md:mb-2 mb-7">
-        {t('layout.footer.COPY_RIGHT1', { date: new Date().getFullYear() })}{' '}
-        <Text.Link href={APP_LINK}>{APP_NAME}</Text.Link>{' '}
-        {t('layout.footer.BY')}{' '}
-        <Text.Link href={COMPANY_LINK!}>{COMPANY_NAME}</Text.Link>{' '}
-        {t('layout.footer.RIGHTS_RESERVED')}
-      </p>
-      <div
-        className="flex"
-        style={{ marginRight: fullWidth && showChatwoot ? '66px' : 0 }}
-      >
-        <LanguageDropDownWithFlags />
-        <ThemeToggler />
-      </div>
-    </footer>
-  );
+	return (
+		<footer
+			className={clsxm(
+				'flex flex-col gap-7 md:gap-2 xs:flex-row justify-around items-center w-full py-4 px-3',
+				className
+			)}
+		>
+			<p className="text-neutral text-xs font-normal leading-4 -tracking-[-0.02em] text-center">
+				{t('layout.footer.COPY_RIGHT1', { date: new Date().getFullYear() })}{' '}
+				<Text.Link href={APP_LINK}>{APP_NAME}</Text.Link> {t('layout.footer.BY')}{' '}
+				<Text.Link href={COMPANY_LINK!}>{COMPANY_NAME}</Text.Link> {t('layout.footer.RIGHTS_RESERVED')}
+			</p>
+			<div className="flex items-center" style={{ marginRight: fullWidth && showChatwoot ? '66px' : 0 }}>
+				<LanguageDropDownWithFlags />
+				<ThemeToggler />
+			</div>
+		</footer>
+	);
 }
diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx
index 17cfcbce3..84923e728 100644
--- a/apps/web/lib/layout/main-layout.tsx
+++ b/apps/web/lib/layout/main-layout.tsx
@@ -1,28 +1,105 @@
 'use client';
-
 import { cn } from '@/lib/utils';
-import { Toaster, ToastMessageManager } from '@components/ui/toaster';
-import { Container, Divider, Meta } from 'lib/components';
 import { PropsWithChildren, useRef, ReactNode } from 'react';
-import { Footer, Navbar } from '.';
 import { useAtomValue } from 'jotai';
 import { fullWidthState } from '@app/stores/fullWidth';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@components/ui/resizable';
 import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';
 import { AppSidebar } from '@components/app-sidebar';
 import MainSidebarTrigger from './MainSidebarTrigger';
+import AppContainer from './AppContainer';
+import GlobalHeader from './GlobalHeader';
+import GlobalFooter from './GlobalFooter';
 
+/**
+ * Props interface for the MainLayout component
+ * @interface MainLayoutProps
+ */
 type Props = PropsWithChildren<{
+	/** Page title - updates both document title and header */
 	title?: string;
+
+	/** Displays a timer in the header - useful for timed features */
 	showTimer?: boolean;
+
+	/** Enables public team mode with specific layout adjustments */
 	publicTeam?: boolean;
+
+	/** Indicates if the current route is a 404 page */
 	notFound?: boolean;
+
+	/** Additional CSS classes for the main container */
 	className?: string;
+
+	/** Additional CSS classes for the children wrapper */
 	childrenClassName?: string;
+
+	/** Additional CSS classes for the footer */
 	footerClassName?: string;
+
+	/** Custom content to be rendered in the header slot */
 	mainHeaderSlot?: JSX.Element | ReactNode;
+
+	/** Additional CSS classes for the header slot */
 	mainHeaderSlotClassName?: string;
+
+	/** Controls whether the footer is fixed to the bottom */
+	isFooterFixed?: boolean;
 }>;
 
+/**
+ * MainLayout - A responsive layout component with resizable sidebar
+ *
+ * This component serves as the main layout structure for the application,
+ * providing a consistent layout with header, footer, and resizable sidebar.
+ * It handles complex layout calculations and provides a robust structure
+ * for content organization.
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <MainLayout title="Dashboard">
+ *   <DashboardContent />
+ * </MainLayout>
+ *
+ * @example
+ * // Advanced usage with custom header content and fixed footer
+ * <MainLayout
+ *   title="Analytics"
+ *   showTimer={true}
+ *   isFooterFixed={true}
+ *   mainHeaderSlot={<AnalyticsHeader />}
+ * >
+ *   <AnalyticsContent />
+ * </MainLayout>
+ *
+ * * USAGE NOTES:
+ *
+ * 1. Content Height Management:
+ *    The layout automatically handles content height calculations.
+ *    Avoid setting fixed heights on direct children.
+ *
+ *    @example
+ *    // ✅ Correct usage
+ *    <MainLayout>
+ *      <div className="h-full">Content</div>
+ *    </MainLayout>
+ *
+ *    // ❌ Avoid
+ *    <MainLayout>
+ *      <div style={{ height: '100vh' }}>Content</div>
+ *    </MainLayout>
+ *
+ * 2. Scroll Behavior:
+ *    The component implements custom scrolling.
+ *    Don't add additional scroll containers.
+ *
+ * 3. Header Customization:
+ *    Use `mainHeaderSlot` for custom header content.
+ *    This ensures proper layout integration.
+ *
+ *
+ */
 export function MainLayout({
 	children,
 	title,
@@ -32,81 +109,75 @@ export function MainLayout({
 	className,
 	childrenClassName,
 	mainHeaderSlot,
+	isFooterFixed = false,
 	mainHeaderSlotClassName = '',
 	footerClassName = ''
 }: Props) {
+	// Global state for full-width mode
 	const fullWidth = useAtomValue(fullWidthState);
+
+	// Refs for dynamic height calculations
 	const headerRef = useRef<HTMLDivElement>(null);
-	return (
-		<div className="w-full h-full overflow-x-hidden min-w-fit">
-			<style jsx global>
-				{`
-					:root {
-						--tw-color-dark--theme: #191a20;
-					}
-					.mx-8-container {
-						${fullWidth
-							? `
-							margin-left: 2rem;
-							margin-right: 2rem;
-							`
-							: `	--tblr-gutter-x: 1.5rem;
-						--tblr-gutter-y: 0;
-						width: 100%;
-						padding-right: calc(var(--tblr-gutter-x) * 0.5);
-						padding-left: calc(var(--tblr-gutter-x) * 0.5);
-						margin-right: auto;
-						margin-left: auto;`}
-					}
-				`}
-			</style>
+	const footerRef = useRef<HTMLDivElement>(null);
 
-			<Meta title={title} />
-			<SidebarProvider>
+	return (
+		<AppContainer title={title}>
+			<SidebarProvider className="flex-1 w-full h-full">
+				{/* Left sidebar structure implementation */}
 				<AppSidebar publicTeam={publicTeam || false} />
+				{/* Layout content structure implementation */}
+				<SidebarInset className="relative flex-1 overflow-x-hidden !h-full !w-full">
+					<ResizablePanelGroup direction="vertical" className="min-h-full">
+						<GlobalHeader
+							ref={headerRef}
+							fullWidth={fullWidth}
+							showTimer={showTimer}
+							publicTeam={publicTeam || false}
+							notFound={notFound || false}
+							mainHeaderSlot={mainHeaderSlot}
+							mainHeaderSlotClassName={mainHeaderSlotClassName}
+						/>
 
-				<SidebarInset>
-					<div ref={headerRef} className="min-h-fit h-max">
-						<header
-							className={cn(
-								'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'
-							)}
+						<ResizableHandle withHandle />
+						{/* </Container> */}
+						<ResizablePanel
+							defaultSize={75}
+							className="!overflow-y-auto custom-scrollbar w-full min-h-svh h-full"
+							style={{ flex: 'none', minHeight: '90svh' }}
 						>
-							<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-1 p-4 w-full h-full', className)}>
+								<MainSidebarTrigger />
+								{/* Warning: this is to remove the unwanted double scroll on the Dashboard */}
+								<div
+									className={cn('min-h-[calc(100vh_-_240px)] h-full flex-1', childrenClassName)}
+									style={{
+										/*
+								marginTop: `${headerRef?.current?.offsetHeight ? headerRef.current.offsetHeight : 95}px`,*/
+										marginBottom: `${isFooterFixed ? (footerRef?.current?.offsetHeight ? footerRef.current.offsetHeight : 96) : 0}px`
+									}}
+								>
+									{headerRef?.current?.offsetHeight && (
+										<div
+											className="w-full"
+											style={{
+												height: `${headerRef?.current?.offsetHeight ? headerRef.current.offsetHeight + (mainHeaderSlot ? -30 : 0) : 95}px`
+											}}
+										></div>
+									)}
 
-					<div className={cn('flex flex-1 flex-col gap-4 p-4 h-max pt-5', className)}>
-						<MainSidebarTrigger />
-						{/* 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
+									{children}
+								</div>
+							</div>
+						</ResizablePanel>
+					</ResizablePanelGroup>
+					<GlobalFooter
+						ref={footerRef}
 						fullWidth={fullWidth}
-						className={cn('w-full px-8 mt-auto', fullWidth && '!mx-0', footerClassName)}
-					>
-						<Divider />
-						<Footer className="justify-between w-full px-0 mx-auto" />
-					</Container>
+						isFixed={isFooterFixed}
+						footerClassName={footerClassName}
+					/>
 				</SidebarInset>
-				<Toaster />
-				<ToastMessageManager />
 			</SidebarProvider>
-		</div>
+		</AppContainer>
 	);
 }
diff --git a/apps/web/lib/utils.ts b/apps/web/lib/utils.ts
index 4053228c7..d55d5379f 100644
--- a/apps/web/lib/utils.ts
+++ b/apps/web/lib/utils.ts
@@ -2,6 +2,7 @@ import { type ClassValue, clsx } from 'clsx';
 import moment from 'moment';
 import { twMerge } from 'tailwind-merge';
 import React, { ReactNode } from 'react';
+import { ITaskStatus } from '@/app/interfaces';
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
@@ -88,3 +89,28 @@ export function isJSXElement(node: any | ReactNode): node is JSX.Element | JSX.E
 
 	return false;
 }
+
+export function getStatusColor(status: ITaskStatus) {
+	switch (status) {
+		case 'in-review':
+			return 'bg-[#f3d8b0]';
+		case 'backlog':
+			return 'bg-[#ffcc00]';
+		case 'open':
+			return 'bg-[#d6e4f9]';
+		case 'in-progress':
+			return 'bg-[#ece8fc]';
+		case 'ready-for-review':
+			return 'bg-[#f5f1cb]';
+		case 'blocked':
+			return 'bg-[#f5b8b8]';
+		case 'done':
+			return 'bg-[#4caf50] text-gray-100';
+		case 'completed':
+			return 'bg-[#d4efdf]';
+		case 'custom':
+			return 'bg-[#d4efdf]';
+		default:
+			return 'bg-gray-100 text-gray-800';
+	}
+}
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 941c1e47e..8ea592699 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -30,12 +30,21 @@ const sentryConfig = isSentryEnabled && {
 		disableLogger: true
 	}
 };
-
+const eslintBuildConfig = process.env.NEXT_IGNORE_ESLINT_ERROR_ON_BUILD
+	? {
+			// Warning: IF TRUE This allows production builds to successfully complete even if
+			// your project has ESLint errors.
+			eslint: {
+				ignoreDuringBuilds: true
+			}
+		}
+	: {};
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	output: ['standalone', 'export'].includes(BUILD_OUTPUT_MODE) ? BUILD_OUTPUT_MODE : undefined,
 	reactStrictMode: false,
+	...eslintBuildConfig,
 	swcMinify: true,
 	webpack: (config, { isServer }) => {
 		config.resolve.alias['@app'] = path.join(__dirname, 'app');
diff --git a/apps/web/package.json b/apps/web/package.json
index 32e4781f6..2f70e08b0 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -61,7 +61,7 @@
 		"@radix-ui/react-hover-card": "^1.0.6",
 		"@radix-ui/react-icons": "^1.3.0",
 		"@radix-ui/react-popover": "^1.0.6",
-		"@radix-ui/react-scroll-area": "^1.0.5",
+		"@radix-ui/react-scroll-area": "^1.2.1",
 		"@radix-ui/react-select": "^2.1.1",
 		"@radix-ui/react-separator": "^1.1.0",
 		"@radix-ui/react-slot": "^1.1.0",
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 7fedc5b52..91ea4af66 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -1,5 +1,30 @@
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Poppins:ital,wght@0,300;0,500;0,700;0,800;1,400;1,600&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100;1,200;1,300;1,400;1,700&display=swap');
 
+@font-face {
+	font-family: 'Plus-Jakarta-Sans-VariableFont_wght';
+	src: url('/assets/fonts/PlusJakartaSans-VariableFont_wght.ttf');
+}
+@font-face {
+	font-family: 'Plus-Jakarta-Sans-Regular';
+	src: url('/assets/fonts/PlusJakartaSans-Regular.ttf');
+}
+@font-face {
+	font-family: 'Plus-Jakarta-Sans-Bold';
+	src: url('/assets/fonts/PlusJakartaSans-Bold.ttf');
+}
+@font-face {
+	font-family: 'Plus-Jakarta-Sans-Light';
+	src: url('/assets/fonts/PlusJakartaSans-Light.ttf');
+}
+@font-face {
+	font-family: 'Plus-Jakarta-Sans-Medium';
+	src: url('/assets/fonts/PlusJakartaSans-Medium.ttf');
+}
+@font-face {
+	font-family: 'Plus-Jakarta-Sans-SemiBold';
+	src: url('/assets/fonts/PlusJakartaSans-SemiBold.ttf');
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -9,41 +34,15 @@
 	--tooltipBackground: #000;
 }
 
-body {
-	@apply bg-[#F2F2F2];
-}
-
 html.dark {
 	--tooltipBackground: #000;
 }
 
 .font-poppins {
-	font-family: 'Poppins' !important;
+	font-family: 'Poppins', sans-serif !important;
 }
 
 @layer base {
-	* {
-		@apply border-border;
-	}
-	body {
-		@apply bg-background text-foreground;
-	}
-	html {
-		font-family: 'Poppins', sans-serif;
-	}
-
-	body {
-		font-style: normal;
-		font-weight: 300;
-		font-size: 16px;
-		line-height: 160%;
-		@apply text-default dark:text-white;
-	}
-
-	.x-container {
-		@apply 3xl:max-w-[1540px] 2xl:max-w-[1320px] xl:max-w-[1140px];
-	}
-
 	:root {
 		--background: 0 0% 100%;
 		--foreground: 222.2 84% 4.9%;
@@ -139,6 +138,24 @@ html.dark {
 
 		--sidebar-ring: 217.2 91.2% 59.8%;
 	}
+	* {
+		@apply border-border;
+	}
+	html {
+		font-family: 'Poppins', sans-serif;
+	}
+
+	body {
+		font-style: normal;
+		font-weight: 300;
+		font-size: 16px;
+		line-height: 160%;
+		@apply text-default dark:text-white bg-[rgb(242,242,242)] dark:bg-background text-foreground;
+	}
+
+	.x-container {
+		@apply 3xl:max-w-[1540px] 2xl:max-w-[1320px] xl:max-w-[1140px];
+	}
 }
 
 @layer components {
@@ -187,7 +204,7 @@ html.dark {
 
 	/* Shadow */
 	.nav-items--shadow {
-		box-shadow: 0px 14px 24px -10px rgba(0, 0, 0, 0.04);
+		box-shadow: 0px 14px 24px -10px rgba(0, 0, 0, 0.04) !important;
 	}
 
 	.main--card-border {
@@ -267,31 +284,6 @@ html.dark {
 	display: none;
 }
 
-@font-face {
-	font-family: 'Plus-Jakarta-Sans-VariableFont_wght';
-	src: url('/fonts/PlusJakartaSans-VariableFont_wght.ttf');
-}
-@font-face {
-	font-family: 'Plus-Jakarta-Sans-Regular';
-	src: url('/fonts/PlusJakartaSans-Regular.ttf');
-}
-@font-face {
-	font-family: 'Plus-Jakarta-Sans-Bold';
-	src: url('/fonts/PlusJakartaSans-Bold.ttf');
-}
-@font-face {
-	font-family: 'Plus-Jakarta-Sans-Light';
-	src: url('/fonts/PlusJakartaSans-Light.ttf');
-}
-@font-face {
-	font-family: 'Plus-Jakarta-Sans-Medium';
-	src: url('/fonts/PlusJakartaSans-Medium.ttf');
-}
-@font-face {
-	font-family: 'Plus-Jakarta-Sans-SemiBold';
-	src: url('/fonts/PlusJakartaSans-SemiBold.ttf');
-}
-
 .search-class {
 	height: 100%;
 	width: 100%;
diff --git a/yarn.lock b/yarn.lock
index 6e68a578d..e64a251b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6003,13 +6003,6 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
-"@radix-ui/number@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.1.tgz#644161a3557f46ed38a042acf4a770e826021674"
-  integrity sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
 "@radix-ui/number@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.0.tgz#1e95610461a09cdf8bb05c152e76ca1278d5da46"
@@ -6586,21 +6579,20 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
-"@radix-ui/react-scroll-area@^1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz#01160c6893f24a2ddb5aa399ae5b3ba84ad4d3cc"
-  integrity sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==
+"@radix-ui/react-scroll-area@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.1.tgz#610c53e07d017e24b62bd73a0a6eb23fa7331b3b"
+  integrity sha512-FnM1fHfCtEZ1JkyfH/1oMiTcFBQvHKl4vD9WnpwkLgtF+UmnXMCad6ECPTaAjcDjam+ndOEJWgHyKDGNteWSHw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/number" "1.0.1"
-    "@radix-ui/primitive" "1.0.1"
-    "@radix-ui/react-compose-refs" "1.0.1"
-    "@radix-ui/react-context" "1.0.1"
-    "@radix-ui/react-direction" "1.0.1"
-    "@radix-ui/react-presence" "1.0.1"
-    "@radix-ui/react-primitive" "1.0.3"
-    "@radix-ui/react-use-callback-ref" "1.0.1"
-    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/number" "1.1.0"
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
 
 "@radix-ui/react-select@^2.1.1":
   version "2.1.1"

From 858ac6c22223b54e22145287b5e24ec1790cd7df Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 20 Nov 2024 21:44:07 +0000
Subject: [PATCH 23/41] chore(deps): bump cross-spawn from 7.0.3 to 7.0.6 in
 /apps/extensions

Bumps [cross-spawn](https://github.com/moxystudio/node-cross-spawn) from 7.0.3 to 7.0.6.
- [Changelog](https://github.com/moxystudio/node-cross-spawn/blob/master/CHANGELOG.md)
- [Commits](https://github.com/moxystudio/node-cross-spawn/compare/v7.0.3...v7.0.6)

---
updated-dependencies:
- dependency-name: cross-spawn
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 apps/extensions/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/extensions/yarn.lock b/apps/extensions/yarn.lock
index aab83a967..3e4478338 100644
--- a/apps/extensions/yarn.lock
+++ b/apps/extensions/yarn.lock
@@ -2684,9 +2684,9 @@ cosmiconfig@^7.0.1:
     yaml "^1.10.0"
 
 cross-spawn@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"

From 681714b52fa80907953b365bf75704379dc5d474 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Wed, 20 Nov 2024 23:45:28 +0200
Subject: [PATCH 24/41] [Improvement] Create task and assign another team
 member (#3353)

* implement the assignee dropdown

* add the task assignees dropdowm

* Update settings.json

---------

Co-authored-by: Ruslan Konviser <evereq@gmail.com>
---
 .vscode/settings.json                         |   3 +-
 apps/web/app/hooks/features/useTaskInput.ts   |  12 +-
 apps/web/app/hooks/features/useTeamTasks.ts   |  20 +--
 apps/web/app/services/client/api/tasks.ts     |   4 +-
 .../pages/kanban/menu-kanban-card.tsx         |   4 +-
 .../add-task-estimation-hours-modal.tsx       |   2 +-
 apps/web/lib/features/task/task-input.tsx     | 149 +++++++++++++++---
 7 files changed, 146 insertions(+), 48 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index be7e65f57..1d7d9e1ce 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,8 +18,7 @@
 		"source.fixAll": "explicit",
 		"source.organizeImports": "never",
 		"source.sortMembers": "never",
-		"organizeImports": "never",
-		// "source.removeUnusedImports": "always"
+		"organizeImports": "never"		
 	},
 	"vsicons.presets.angular": true,
 	"deepscan.enable": true,
diff --git a/apps/web/app/hooks/features/useTaskInput.ts b/apps/web/app/hooks/features/useTaskInput.ts
index d5d803128..4c124edbc 100644
--- a/apps/web/app/hooks/features/useTaskInput.ts
+++ b/apps/web/app/hooks/features/useTaskInput.ts
@@ -64,6 +64,7 @@ export function useTaskInput({
   const taskDescription = useRef<null | string>(null);
   const taskLabels = useRef<[] | ITaskLabelsItemList[]>([]);
   const taskProject = useRef<null | string>(null);
+  const taskAssignees = useRef<{id:string}[]>([]);
 
   const tasks = customTasks || teamTasks;
 
@@ -134,7 +135,6 @@ export function useTaskInput({
   const handleTaskCreation = ({
     autoActiveTask = true,
     autoAssignTaskAuth = true,
-    assignToUsers = []
   }: {
     autoActiveTask?: boolean;
     autoAssignTaskAuth?: boolean;
@@ -152,19 +152,20 @@ export function useTaskInput({
     const statusId = taskStatusList.find(
       (item) => item.name === taskStatus.current
     )?.id;
+
     return createTask(
       {
-        taskName: query.trim(),
+        title: query.trim(),
         issueType: taskIssue || 'Bug',
         taskStatusId: statusId || (openId as string),
         status: taskStatus.current || undefined,
         priority: taskPriority.current || undefined,
         size: taskSize.current || undefined,
         tags: taskLabels.current || [],
-        description: taskDescription.current,
-		projectId : taskProject.current
+        description: taskDescription.current ?? '',
+		projectId : taskProject.current,
+		members : [...(autoAssignTaskAuth && user?.employee.id ? [{id : user?.employee.id}] : []  ), ...taskAssignees.current]
       },
-      !autoAssignTaskAuth ? assignToUsers : undefined
     ).then((res) => {
       setQuery('');
       localStorage.setItem('lastTaskIssue', taskIssue || 'Bug');
@@ -237,6 +238,7 @@ export function useTaskInput({
     user,
     userRef,
 	taskProject,
+	taskAssignees
   };
 }
 
diff --git a/apps/web/app/hooks/features/useTeamTasks.ts b/apps/web/app/hooks/features/useTeamTasks.ts
index 8b1fa8e9f..ef3ad5307 100644
--- a/apps/web/app/hooks/features/useTeamTasks.ts
+++ b/apps/web/app/hooks/features/useTeamTasks.ts
@@ -289,7 +289,7 @@ export function useTeamTasks() {
 	const createTask = useCallback(
 		(
 			{
-				taskName,
+				title,
 				issueType,
 				taskStatusId,
 				status = taskStatus[0]?.name,
@@ -297,9 +297,10 @@ export function useTeamTasks() {
 				size,
 				tags,
 				description,
-				projectId
+				projectId,
+				members
 			}: {
-				taskName: string;
+				title: string;
 				issueType?: string;
 				status?: string;
 				taskStatusId: string;
@@ -308,12 +309,13 @@ export function useTeamTasks() {
 				tags?: ITaskLabelsItemList[];
 				description?: string | null;
 				projectId?: string | null;
+				members?: { id: string }[]
 			},
-			members?: { id: string }[]
 		) => {
+
 			return createQueryCall(
 				{
-					title: taskName,
+					title,
 					issueType,
 					status,
 					priority,
@@ -322,17 +324,11 @@ export function useTeamTasks() {
 					// Set Project Id to cookie
 					// TODO: Make it dynamic when we add Dropdown in Navbar
 
-					// ...(activeTeam?.projects && activeTeam?.projects.length > 0
-					// 	? {
-					// 			projectId: activeTeam.projects[0].id
-					// 		}
-					// 	: {}),
 					projectId,
 					...(description ? { description: `<p>${description}</p>` } : {}),
-					...(members ? { members } : {}),
+					members,
 					taskStatusId: taskStatusId
 				},
-				$user.current
 			).then((res) => {
 				deepCheckAndUpdateTasks(res?.data?.items || [], true);
 				return res;
diff --git a/apps/web/app/services/client/api/tasks.ts b/apps/web/app/services/client/api/tasks.ts
index 4635b1f43..4e6c4313d 100644
--- a/apps/web/app/services/client/api/tasks.ts
+++ b/apps/web/app/services/client/api/tasks.ts
@@ -10,7 +10,6 @@ import {
 	getOrganizationIdCookie,
 	getTenantIdCookie
 } from '@app/helpers';
-import { IUser } from '@app/interfaces';
 import { TTasksTimesheetStatisticsParams } from '@app/services/server/requests';
 import qs from 'qs';
 
@@ -108,7 +107,7 @@ export async function updateTaskAPI(taskId: string, body: Partial<ITeamTask>) {
 	return put<PaginationResponse<ITeamTask>>(`/tasks/${taskId}`, body);
 }
 
-export async function createTeamTaskAPI(body: Partial<ICreateTask> & { title: string }, user: IUser | undefined) {
+export async function createTeamTaskAPI(body: Partial<ICreateTask> & { title: string }) {
 	if (GAUZY_API_BASE_SERVER_URL.value) {
 		const organizationId = getOrganizationIdCookie();
 		const teamId = getActiveTeamIdCookie();
@@ -118,7 +117,6 @@ export async function createTeamTaskAPI(body: Partial<ICreateTask> & { title: st
 
 		const datas: ICreateTask = {
 			description: '',
-			members: user?.employee?.id ? [{ id: user.employee.id }] : [],
 			teams: [
 				{
 					id: teamId
diff --git a/apps/web/components/pages/kanban/menu-kanban-card.tsx b/apps/web/components/pages/kanban/menu-kanban-card.tsx
index 26ebbc833..4d9bb806c 100644
--- a/apps/web/components/pages/kanban/menu-kanban-card.tsx
+++ b/apps/web/components/pages/kanban/menu-kanban-card.tsx
@@ -82,7 +82,7 @@ export default function MenuKanbanCard({ item: task, member }: { item: ITeamTask
 					await createTask({
 						...task,
 						taskStatusId: task.taskStatusId ?? taskStatus[0].id,
-						taskName: `Copy ${task.title}`,
+						title: `Copy ${task.title}`,
 						issueType: task.issueType ?? 'Bug'
 					});
 				} catch (error) {
@@ -201,7 +201,7 @@ interface ITeamMemberSelectProps {
  *
  * @return {JSX.Element} The multi select component
  */
-function TeamMembersSelect(props: ITeamMemberSelectProps): JSX.Element {
+export function TeamMembersSelect(props: ITeamMemberSelectProps): JSX.Element {
 	const { teamMembers, task } = props;
 	const t = useTranslations();
 
diff --git a/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx b/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
index 22880e1f6..c77d45c2b 100644
--- a/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
+++ b/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
@@ -591,7 +591,7 @@ export function SearchTaskInput(props: ISearchTaskInputProps) {
 			setCreateTaskLoading(true);
 			if (taskName.trim().length < 5) return;
 			await createTask({
-				taskName: taskName.trim(),
+				title: taskName.trim(),
 				status: taskStatus[0].name,
 				taskStatusId: taskStatus[0].id,
 				issueType: 'Bug' // TODO: Let the user choose the issue type
diff --git a/apps/web/lib/features/task/task-input.tsx b/apps/web/lib/features/task/task-input.tsx
index 31d551d49..f63ad9ed9 100644
--- a/apps/web/lib/features/task/task-input.tsx
+++ b/apps/web/lib/features/task/task-input.tsx
@@ -20,12 +20,13 @@ import {
   ITaskSize,
   ITaskStatus,
   ITeamTask,
-  Nullable
+  Nullable,
+  OT_Member
 } from '@app/interfaces';
 import { activeTeamTaskId, timerStatusState } from '@app/stores';
 import { clsxm } from '@app/utils';
-import { Popover, Transition } from '@headlessui/react';
-import { PlusIcon } from '@heroicons/react/20/solid';
+import { Combobox, Popover, Transition } from '@headlessui/react';
+import { CheckIcon, ChevronUpDownIcon, PlusIcon } from '@heroicons/react/20/solid';
 import {
   Button,
   Card,
@@ -37,6 +38,7 @@ import {
 } from 'lib/components';
 import { CheckCircleTickIcon as TickCircleIcon } from 'assets/svg';
 import {
+  Fragment,
   MutableRefObject,
   PropsWithChildren,
   useCallback,
@@ -86,7 +88,6 @@ type Props = {
   onTaskCreated?: (task: ITeamTask | undefined) => void;
   cardWithoutShadow?: boolean;
   assignTaskPopup?: boolean;
-
   forParentChildRelationship?: boolean;
 } & PropsWithChildren;
 
@@ -107,7 +108,7 @@ export function TaskInput(props: Props) {
   const {
     viewType = 'input-trigger',
     showTaskNumber = false,
-    showCombobox = true
+    showCombobox = true,
   } = props;
 
   const datas = useTaskInput({
@@ -449,22 +450,18 @@ export function TaskInput(props: Props) {
   );
 
   const taskCard = (
-    <TaskCard
-      datas={datas}
-      onItemClick={
-        props.task !== undefined || props.onTaskClick
-          ? onTaskClick
-          : setAuthActiveTask
-      }
-      inputField={viewType === 'one-view' ? inputField : undefined}
-      fullWidth={props.fullWidthCombobox}
-      fullHeight={props.fullHeightCombobox}
-      handleTaskCreation={handleTaskCreation}
-      cardWithoutShadow={props.cardWithoutShadow}
-      assignTaskPopup={props.assignTaskPopup}
-      updatedTaskList={updatedTaskList}
-      forParentChildRelationship={props.forParentChildRelationship}
-    />
+		<TaskCard
+			datas={datas}
+			onItemClick={props.task !== undefined || props.onTaskClick ? onTaskClick : setAuthActiveTask}
+			inputField={viewType === 'one-view' ? inputField : undefined}
+			fullWidth={props.fullWidthCombobox}
+			fullHeight={props.fullHeightCombobox}
+			handleTaskCreation={handleTaskCreation}
+			cardWithoutShadow={props.cardWithoutShadow}
+			assignTaskPopup={props.assignTaskPopup}
+			updatedTaskList={updatedTaskList}
+			forParentChildRelationship={props.forParentChildRelationship}
+		/>
   );
 
   return viewType === 'one-view' ? (
@@ -518,7 +515,7 @@ function TaskCard({
   cardWithoutShadow,
   forParentChildRelationship,
   updatedTaskList,
-  assignTaskPopup
+  assignTaskPopup,
 }: {
   datas: Partial<RTuseTaskInput>;
   onItemClick?: (task: ITeamTask) => void;
@@ -535,6 +532,7 @@ function TaskCard({
   const t = useTranslations();
   const activeTaskEl = useRef<HTMLLIElement | null>(null);
   const { taskLabels: taskLabelsData } = useTaskLabels();
+  const { activeTeam } = useOrganizationTeams();
 
   const {
     taskStatus,
@@ -542,7 +540,8 @@ function TaskCard({
     taskSize,
     taskLabels,
     taskDescription,
-	taskProject
+	taskProject,
+	taskAssignees
   } = datas;
   const { nextOffset, data } = useInfinityScrolling(updatedTaskList ?? [], 5);
 
@@ -643,6 +642,9 @@ function TaskCard({
                     task={datas.inputTask}
                   />
 
+				{taskAssignees !== undefined && <AssigneesSelect assignees={taskAssignees}  teamMembers={activeTeam?.members ?? []}/>}
+
+
 					<ProjectDropDown
 						styles={{
 							container: 'rounded-xl w-[10.625rem] !max-w-[10.625rem]',
@@ -797,3 +799,104 @@ function TaskCard({
     </>
   );
 }
+
+
+/**
+ * ----------------------------------------------
+ * ----------- ASSIGNEES MULTI SELECT -----------
+ * ----------------------------------------------
+ */
+
+interface ITeamMemberSelectProps {
+	teamMembers: OT_Member[];
+	assignees : MutableRefObject<{
+		id: string;
+	}[]>
+}
+/**
+ * A multi select component for assignees
+ *
+ * @param {object} props - The props object
+ * @param {string[]} props.teamMembers - Members of the current team
+ * @param {ITeamMemberSelectProps["assignees"]} props.assignees - Assigned members
+ *
+ * @return {JSX.Element} The multi select component
+ */
+ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
+	const { teamMembers , assignees} = props;
+	const t = useTranslations();
+	const {user} = useAuthenticateUser()
+	const authMember = useMemo(() => teamMembers.find(member => member.employee.user?.id == user?.id), [teamMembers, user?.id])
+
+	return (
+		<div className=" w-40 rounded-xl bg-[#F2F2F2] py-2 px-3">
+			<Combobox multiple={true}>
+				<div className="relative my-auto">
+					<div className="relative w-full cursor-default overflow-hidden rounded-lg text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm">
+						<Combobox.Input readOnly className="w-0 h-0" />
+						<Combobox.Button className="absolute hover:transition-all inset-y-0 right-0 flex justify-between w-full items-center">
+							<span>{t('common.ASSIGNEE')}</span>
+							<ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+						</Combobox.Button>
+					</div>
+					<Transition
+						as={Fragment}
+						leave="transition ease-in duration-100"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<Combobox.Options className="absolute mt-1 max-h-60 h-auto w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+							{authMember && (
+								<Combobox.Option
+									className={({ active }) =>
+										`relative cursor-default select-none py-2 pl-10 pr-4 ${
+											active ? 'bg-primary/5' : 'text-gray-900'
+										}`
+									}
+									value={authMember}
+								>
+									<span className={`absolute inset-y-0 left-0 flex items-center pl-3 `}>
+										<CheckIcon className="h-5 w-5" aria-hidden="true" />
+									</span>
+									{authMember.employee.fullName}
+								</Combobox.Option>
+							)}
+
+							{teamMembers
+								.filter((member) => member.employee.user?.id != user?.id)
+								.map((member) => (
+									<Combobox.Option
+										key={member.id}
+										className={({ active }) =>
+											`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+												active ? 'bg-primary/5' : 'text-gray-900'
+											}`
+										}
+										onClick={() => {
+											const isAssigned = assignees.current.map(el => el.id).includes(member.employee.id);
+
+
+											if (isAssigned) {
+												assignees.current = assignees.current.filter((el) => el.id != member.employee.id)
+											} else {
+												assignees.current = [...assignees.current, {id:member.employee.id}];
+											}
+										}}
+										value={member}
+									>
+										{assignees.current.map(el => el.id).includes(member.employee.id) && (
+											<span className={`absolute inset-y-0 left-0 flex items-center pl-3 `}>
+												<CheckIcon className="h-5 w-5" aria-hidden="true" />
+											</span>
+										)}
+
+										{member.employee.fullName}
+									</Combobox.Option>
+								))}
+						</Combobox.Options>
+					</Transition>
+				</div>
+			</Combobox>
+		</div>
+	);
+}

From 360c0bb16a10811f26d6dece77c41eb20e54bf85 Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Thu, 21 Nov 2024 14:34:33 +0200
Subject: [PATCH 25/41] feat: add project information in task card

---
 .../features/task/task-all-status-type.tsx    | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/web/lib/features/task/task-all-status-type.tsx b/apps/web/lib/features/task/task-all-status-type.tsx
index 979871820..673decd92 100644
--- a/apps/web/lib/features/task/task-all-status-type.tsx
+++ b/apps/web/lib/features/task/task-all-status-type.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useCustomEmblaCarousel, useDailyPlan, useSyncRef } from '@app/hooks';
-import { ITeamTask, Nullable } from '@app/interfaces';
+import { useCustomEmblaCarousel, useDailyPlan, useOrganizationProjects, useSyncRef } from '@app/hooks';
+import { IProject, ITeamTask, Nullable } from '@app/interfaces';
 import { RoundedButton } from 'lib/components';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
 	TaskStatus,
 	useTaskLabelsValue,
@@ -15,6 +15,7 @@ import { clsxm } from '@app/utils';
 import { planBadgeContent, planBadgeContPast } from '@app/helpers';
 import { CalendarIcon } from '@radix-ui/react-icons';
 import { FilterTabs } from '../user-profile-plans';
+import ProjectIcon from '@components/ui/svgs/project-icon';
 
 export function TaskAllStatusTypes({
 	task,
@@ -35,6 +36,8 @@ export function TaskAllStatusTypes({
 	const taskSizes = useTaskSizesValue();
 	const taskLabels = useTaskLabelsValue();
 	const taskStatus = useTaskStatusValue();
+	const { getOrganizationProject } = useOrganizationProjects();
+	const [project, setProject] = useState<IProject>();
 
 	const { dailyPlan } = useDailyPlan();
 
@@ -68,6 +71,17 @@ export function TaskAllStatusTypes({
 
 	const taskId = task ? planBadgeContPast(dailyPlan.items, task.id) : '';
 
+	useEffect(() => {
+		const fetchProject = async () => {
+			if (task?.projectId) {
+				const res = await getOrganizationProject(task.projectId);
+				setProject(res?.data);
+			}
+		};
+
+		fetchProject();
+	}, [getOrganizationProject, task?.projectId]);
+
 	return (
 		<div className="relative w-full h-full flex flex-col justify-center">
 			<div ref={viewportRef} className="overflow-hidden w-full relative">
@@ -81,7 +95,6 @@ export function TaskAllStatusTypes({
 							titleClassName={'text-[0.625rem] font-[500]'}
 						/>
 					)}
-
 					{task?.priority && (
 						<TaskStatus
 							{...taskPriorities[task?.priority || 'Low']}
@@ -91,7 +104,6 @@ export function TaskAllStatusTypes({
 							titleClassName={'text-[0.625rem] font-[500]'}
 						/>
 					)}
-
 					{task?.size && !toBlockCard && (
 						<TaskStatus
 							{...taskSizes[task?.size || 'Medium']}
@@ -101,7 +113,11 @@ export function TaskAllStatusTypes({
 							titleClassName={'text-[0.625rem] font-[500]'}
 						/>
 					)}
-
+					{project && (
+						<div className="flex items-center justify-center gap-1 h-full px-2 bg-slate-200">
+							<ProjectIcon /> <span className=" text-xs truncate">{project.name}</span>
+						</div>
+					)}
 					{planBadgeContent(dailyPlan.items, task?.id ?? '', tab) && (
 						<div
 							className={clsxm(

From e8d0801bcc3e515ee035527e08e1ca9b353381c7 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Fri, 22 Nov 2024 00:48:57 +0200
Subject: [PATCH 26/41] [Feat]: Timesheet-Duration-Display (#3352)

* feat: add DisplayTimeForTimesheet and TotalTimeDisplay components for formatted timesheet duration

* fix: coderabbitai

* feat: total duration by date

* fix: conflit and display date time

* fix: deepscan
---
 .../hooks/features/useTimelogFilterOptions.ts |  2 +-
 .../calendar/table-time-sheet.tsx             | 23 +++----
 apps/web/lib/features/task/task-displays.tsx  | 60 ++++++++++++++++++-
 3 files changed, 72 insertions(+), 13 deletions(-)

diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
index ca39217a3..c246038a8 100644
--- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -31,6 +31,6 @@ export function useTimelogFilterOptions() {
         setStatusState,
         handleSelectRowTimesheet,
         selectTimesheet,
-        setSelectTimesheet
+        setSelectTimesheet,
     };
 }
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 52fb005b5..592c24c89 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -57,9 +57,8 @@ import {
 import { useTranslations } from 'next-intl';
 import { formatDate } from '@/app/helpers';
 import { GroupedTimesheet, useTimesheet } from '@/app/hooks/features/useTimesheet';
-import { TaskNameInfoDisplay } from '../../task/task-displays';
+import { DisplayTimeForTimesheet, TaskNameInfoDisplay, TotalDurationByDate, TotalTimeDisplay } from '../../task/task-displays';
 import { TimesheetStatus } from '@/app/interfaces';
-import dayjs from 'dayjs';
 
 export const columns: ColumnDef<TimeSheet>[] = [
 	{
@@ -249,10 +248,11 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 								'h-[48px] flex justify-between items-center w-full',
 								'bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1',
 								'border-gray-400 px-5 text-[#71717A] font-medium'
-							)}
-						>
+							)}>
 							<span>{formatDate(plan.date)}</span>
-							<span>64:30h</span>
+							<TotalDurationByDate
+								timesheetLog={plan.tasks}
+								createdAt={formatDate(plan.date)} />
 						</div>
 
 						<Accordion type="single" collapsible>
@@ -283,8 +283,8 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 													variant={'outline'}
 													className="flex items-center gap-x-2 h-[25px] rounded-md bg-[#E4E4E7] dark:bg-gray-800"
 												>
-													<span className="text-[#5f5f61]">Total</span>
-													<span className="text-[#868688]">24:30h</span>
+													<span className="text-[#5f5f61]">{t('timer.TOTAL_HOURS')}</span>
+													<TotalTimeDisplay timesheetLog={rows} />
 												</Badge>
 											</div>
 											<div className={clsxm('flex items-center gap-2 p-x-1 capitalize')}>
@@ -339,10 +339,11 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 														{task.timesheet.status}
 													</Badge>
 												</div>
-												<span className="flex-1 font-medium">
-													{dayjs(task.timesheet.createdAt).format('HH:mm:ss')}
-												</span>
-												<TaskActionMenu idTasks={task.id} />
+												<DisplayTimeForTimesheet
+													duration={task.timesheet.duration}
+												/>
+												<TaskActionMenu
+													idTasks={task.id} />
 											</div>
 										))}
 									</AccordionContent>
diff --git a/apps/web/lib/features/task/task-displays.tsx b/apps/web/lib/features/task/task-displays.tsx
index 1f37c924a..0bca22f27 100644
--- a/apps/web/lib/features/task/task-displays.tsx
+++ b/apps/web/lib/features/task/task-displays.tsx
@@ -1,7 +1,10 @@
-import { ITeamTask, Nullable } from '@app/interfaces';
+import { ITeamTask, Nullable, TimesheetLog } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { Tooltip } from 'lib/components';
 import { TaskIssueStatus } from './task-issue';
+import { formatDate, secondsToTime } from '@/app/helpers';
+import { ClockIcon } from "@radix-ui/react-icons"
+import React from 'react';
 
 type Props = {
 	task: Nullable<ITeamTask>;
@@ -61,3 +64,58 @@ export function TaskNameInfoDisplay({
 		</Tooltip>
 	);
 }
+
+const formatTime = (hours: number, minutes: number) => (
+	<div className="flex items-center">
+		<span>{String(hours).padStart(2, '0')}</span>
+		<span>:</span>
+		<span>{String(minutes).padStart(2, '0')}</span>
+	</div>
+);
+
+export const DisplayTimeForTimesheet = ({ duration }: { duration: number }) => {
+	if (duration < 0) {
+		console.warn('Negative duration provided to DisplayTimeForTimesheet');
+		duration = 0;
+	}
+	const { h: hours, m: minute } = secondsToTime(duration || 0);
+	return (
+		<div className='flex items-center font-medium gap-x-1'>
+			<ClockIcon className='text-green-400 text-[14px] h-4 w-4' />
+			<div className='flex items-center'>
+				{formatTime(hours, minute)}
+			</div>
+		</div>
+	)
+
+}
+
+export const TotalTimeDisplay = React.memo(({ timesheetLog }: { timesheetLog: TimesheetLog[] }) => {
+	const totalDuration = Array.isArray(timesheetLog)
+		? timesheetLog.reduce((acc, curr) => acc + (curr.timesheet?.duration || 0), 0)
+		: 0;
+	const { h: hours, m: minute } = secondsToTime(totalDuration || 0);
+	return (
+		<div className="flex items-center text-[#868688]">
+			{formatTime(hours, minute)}
+		</div>)
+});
+TotalTimeDisplay.displayName = 'TotalTimeDisplay';
+
+
+export const TotalDurationByDate = React.memo(
+	({ timesheetLog, createdAt }: { timesheetLog: TimesheetLog[]; createdAt: Date | string }) => {
+		const targetDateISO = new Date(createdAt).toISOString();
+		const filteredLogs = timesheetLog.filter(
+			(item) => formatDate(item.timesheet.createdAt) === formatDate(targetDateISO));
+		const totalDurationInSeconds = filteredLogs.reduce(
+			(total, log) => total + (log.timesheet?.duration || 0), 0);
+		const { h: hours, m: minutes } = secondsToTime(totalDurationInSeconds);
+		return (
+			<div className="flex items-center text-[#868688]">
+				{formatTime(hours, minutes)}
+			</div>
+		);
+	}
+);
+TotalDurationByDate.displayName = 'TotalDurationByDate';

From 74bdec529858e1644b0c96bb53fd1ec40beb38ed Mon Sep 17 00:00:00 2001
From: Arick Bulakali <85836702+NdekoCode@users.noreply.github.com>
Date: Fri, 22 Nov 2024 00:59:00 +0200
Subject: [PATCH 27/41] [Web] Refactor/sidebar (#3361)

* refactor(web): [Sidebar] improve sidebar, styles, add form and workspace switter

* refactor(web): [Sidebar] fix broken spaces

* feat(web): [Subscribe] add subscription user email

* fix: spelling errors
---
 .cspell.json                                  |    7 +-
 apps/web/.env                                 |    4 +
 apps/web/.env.sample                          |    4 +
 apps/web/app/[locale]/layout.tsx              |    2 +-
 apps/web/app/[locale]/page-component.tsx      |    4 +-
 apps/web/app/api/subscribe/route.ts           |   67 +
 apps/web/components/app-sidebar.tsx           |  132 +-
 apps/web/components/nav-main.tsx              |   34 +-
 apps/web/components/nav-projects.tsx          |  158 +-
 apps/web/components/nav-secondary.tsx         |    6 +-
 .../pages/all-teams/header-tabs.tsx           |   70 +-
 .../web/components/pages/main/header-tabs.tsx |  103 +-
 .../editor-components/LinkElement.tsx         |    2 +-
 apps/web/components/sidebar-opt-in-form.tsx   |  111 ++
 apps/web/components/ui/card.tsx               |   43 +
 apps/web/components/ui/form.tsx               |  135 ++
 apps/web/components/ui/label.tsx              |   19 +
 apps/web/components/ui/sidebar.tsx            |    4 +-
 ...am-switcher.tsx => workspace-switcher.tsx} |   27 +-
 .../task/daily-plan/views-header-tabs.tsx     |   78 +-
 .../lib/features/task/task-input-kanban.tsx   |  864 +++++-----
 apps/web/lib/features/task/task-input.tsx     | 1437 ++++++++---------
 apps/web/lib/features/user-nav-menu.tsx       |    4 +-
 apps/web/lib/layout/main-layout.tsx           |    2 +-
 apps/web/next.config.js                       |    1 +
 apps/web/package.json                         |    8 +-
 apps/web/styles/globals.css                   |    3 +-
 apps/web/tailwind.config.js                   |  344 ++--
 yarn.lock                                     |   30 +-
 29 files changed, 1997 insertions(+), 1706 deletions(-)
 create mode 100644 apps/web/app/api/subscribe/route.ts
 create mode 100644 apps/web/components/sidebar-opt-in-form.tsx
 create mode 100644 apps/web/components/ui/card.tsx
 create mode 100644 apps/web/components/ui/form.tsx
 create mode 100644 apps/web/components/ui/label.tsx
 rename apps/web/components/{team-switcher.tsx => workspace-switcher.tsx} (76%)

diff --git a/.cspell.json b/.cspell.json
index 9c47d01cc..b22d44a42 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -6,6 +6,7 @@
 	"words": [
 		" X",
 		" X ",
+		"hookform",
 		"accepte",
 		"Accordian",
 		"adipiscing",
@@ -24,6 +25,7 @@
 		"apidemodt",
 		"apidemodts",
 		"apidev",
+		"apikey",
 		"apisauce",
 		"apistage",
 		"apistagecivo",
@@ -92,6 +94,7 @@
 		"creatoe",
 		"dailyplan",
 		"Darkmode",
+		"DATACENTER",
 		"datas",
 		"dataToDisplay",
 		"daygrid",
@@ -240,6 +243,7 @@
 		"longpress",
 		"Lorem",
 		"lucide",
+		"mailchimp",
 		"mainconfig",
 		"mappagination",
 		"mathieudutour",
@@ -355,7 +359,6 @@
 		"tailess",
 		"Tailess",
 		"tailwindcss",
-		"timesheet-viewMode",
 		"tanstack",
 		"taskid",
 		"taskstatus",
@@ -367,6 +370,7 @@
 		"testid",
 		"timegrid",
 		"Timesheet",
+		"timesheet-viewMode",
 		"Timesheets",
 		"Timeslot",
 		"tinvitations",
@@ -400,6 +404,7 @@
 		"VERSONS",
 		"vertificalline",
 		"vhidden",
+		"Waitlist",
 		"WARNING️",
 		"wasabisys",
 		"webm",
diff --git a/apps/web/.env b/apps/web/.env
index 9180c30c7..b6a667a29 100644
--- a/apps/web/.env
+++ b/apps/web/.env
@@ -137,3 +137,7 @@ NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 # Warning: IF TRUE This allows production builds to successfully complete even if
 # your project has ESLint errors.
 NEXT_IGNORE_ESLINT_ERROR_ON_BUILD=true
+
+# Mailchimp
+MAILCHIMP_API_KEY=
+MAILCHIMP_LIST_ID=
diff --git a/apps/web/.env.sample b/apps/web/.env.sample
index 62ae03258..1989758f4 100644
--- a/apps/web/.env.sample
+++ b/apps/web/.env.sample
@@ -87,3 +87,7 @@ MEET_JWT_APP_SECRET=
 # Warning: IF TRUE This allows production builds to successfully complete even if
 # your project has ESLint errors.
 NEXT_IGNORE_ESLINT_ERROR_ON_BUILD=true
+
+# Mailchimp
+MAILCHIMP_API_KEY=
+MAILCHIMP_LIST_ID=
diff --git a/apps/web/app/[locale]/layout.tsx b/apps/web/app/[locale]/layout.tsx
index 8dd5ce0ce..7353f53b4 100644
--- a/apps/web/app/[locale]/layout.tsx
+++ b/apps/web/app/[locale]/layout.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 'use client';
 import 'react-loading-skeleton/dist/skeleton.css';
-import '../../styles/globals.css';
+import '@/styles/globals.css';
 
 import clsx from 'clsx';
 import { Provider } from 'jotai';
diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
index 68f697eed..ddb2d6b58 100644
--- a/apps/web/app/[locale]/page-component.tsx
+++ b/apps/web/app/[locale]/page-component.tsx
@@ -66,9 +66,9 @@ function MainPage() {
 					showTimer={headerSize <= 11.8 && isTrackingEnabled}
 					className="h-full"
 					mainHeaderSlot={
-						<div className="sticky z-40 bg-white dark:bg-dark-high">
+						<div className="bg-white dark:bg-dark-high">
 							<div className={clsxm('bg-white dark:bg-dark-high ', !fullWidth && 'x-container')}>
-								<div className="mx-8-container mt-7 !px-0 flex flex-row items-start justify-between ">
+								<div className="mx-8-container my-3 !px-0 flex flex-row items-start justify-between ">
 									<div className="flex items-center justify-center h-10 gap-8">
 										<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
 
diff --git a/apps/web/app/api/subscribe/route.ts b/apps/web/app/api/subscribe/route.ts
new file mode 100644
index 000000000..e7a08d50d
--- /dev/null
+++ b/apps/web/app/api/subscribe/route.ts
@@ -0,0 +1,67 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export const POST = async (req: NextRequest) => {
+	// 1. Destructure the email address from the request body.
+	const reqData = (await req.json()) as {
+		email_address: string;
+		tags: string[];
+		captcha?: string;
+	};
+
+	if (!reqData.email_address) {
+		// 2. Throw an error if an email wasn't provided.
+		return NextResponse.json({ error: 'Email is required' }, { status: 400 });
+	}
+
+	if (!reqData.captcha) {
+		// 2. Display an error if the captcha code wasn't provided.
+		console.error('ERROR: Please provide required fields', 'STATUS: 400');
+	}
+
+	try {
+		// 3. Fetch the environment variables.
+		const LIST_ID = process.env.MAILCHIMP_LIST_ID;
+		const API_KEY = process.env.MAILCHIMP_API_KEY ? process.env.MAILCHIMP_API_KEY : '';
+		if (!LIST_ID || !API_KEY) {
+			throw new Error('Missing Mailchimp environment variables');
+		}
+		// 4. API keys are in the form <key>-us3.
+		const DATACENTER = API_KEY.split('-')[1];
+		const mailchimpData = {
+			email_address: reqData.email_address,
+			status: 'subscribed',
+			tags: reqData.tags ? [...reqData.tags] : ['Ever Teams']
+		};
+		// 5. Send a POST request to Mailchimp.
+		const response = await fetch(`https://${DATACENTER}.api.mailchimp.com/3.0/lists/${LIST_ID}/members`, {
+			body: JSON.stringify(mailchimpData),
+			headers: {
+				Authorization: `apikey ${API_KEY}`,
+				'Content-Type': 'application/json'
+			},
+			method: 'POST'
+		});
+		console.log(response);
+		// 6. Swallow any errors from Mailchimp and return a better error message.
+		if (response.status >= 400) {
+			const errorResponse = await response.json();
+			return NextResponse.json(
+				{
+					error: `There was an error subscribing to the newsletter: ${errorResponse.detail}`
+				},
+				{ status: 400 }
+			);
+		}
+
+		// 7. If we made it this far, it was a success! 🎉
+		return NextResponse.json({ error: '', resp: response }, { status: 201 });
+	} catch (error) {
+		return NextResponse.json(
+			{
+				error: (error as Error).message || (error as Error).toString(),
+				resp: null
+			},
+			{ status: 500 }
+		);
+	}
+};
diff --git a/apps/web/components/app-sidebar.tsx b/apps/web/components/app-sidebar.tsx
index eaf3048e7..8c304672e 100644
--- a/apps/web/components/app-sidebar.tsx
+++ b/apps/web/components/app-sidebar.tsx
@@ -3,38 +3,36 @@ import {
 	MonitorSmartphone,
 	LayoutDashboard,
 	Heart,
-	FolderKanban,
 	SquareActivity,
-	PlusIcon,
 	Files,
-	X
+	X,
+	Command,
+	AudioWaveform,
+	GalleryVerticalEnd
 } from 'lucide-react';
 
-import { EverTeamsLogo, SymbolAppLogo } from '@/lib/components/svgs';
 import { NavMain } from '@/components/nav-main';
 import {
 	Sidebar,
 	SidebarContent,
 	SidebarHeader,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
 	SidebarRail,
 	SidebarTrigger,
 	useSidebar,
-	SidebarMenuSubButton
+	SidebarMenuSubButton,
+	SidebarFooter
 } from '@/components/ui/sidebar';
 import Link from 'next/link';
 import { cn } from '@/lib/utils';
-import { useOrganizationAndTeamManagers } from '@/app/hooks/features/useOrganizationTeamManagers';
 import { useAuthenticateUser, useModal, useOrganizationTeams } from '@/app/hooks';
 import { useFavoritesTask } from '@/app/hooks/features/useFavoritesTask';
-import { Button } from '@/lib/components/button';
 import { CreateTeamModal, TaskIssueStatus } from '@/lib/features';
 import { useTranslations } from 'next-intl';
+import { WorkspacesSwitcher } from './workspace-switcher';
+import { SidebarOptInForm } from './sidebar-opt-in-form';
+import { NavProjects } from './nav-projects';
 type AppSidebarProps = React.ComponentProps<typeof Sidebar> & { publicTeam: boolean | undefined };
 export function AppSidebar({ publicTeam, ...props }: AppSidebarProps) {
-	const { userManagedTeams } = useOrganizationAndTeamManagers();
 	const { user } = useAuthenticateUser();
 	const username = user?.name || user?.firstName || user?.lastName || user?.username;
 	const { isTeamManager } = useOrganizationTeams();
@@ -44,11 +42,57 @@ export function AppSidebar({ publicTeam, ...props }: AppSidebarProps) {
 	const t = useTranslations();
 	// This is sample data.
 	const data = {
-		user: {
-			name: 'evereq',
-			email: 'evereq@ever.co',
-			avatar: '/assets/svg/profile.svg'
-		},
+		workspaces: [
+			{
+				name: 'Ever Teams',
+				logo: ({ className }: { className?: string }) => (
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width={25}
+						height={26}
+						viewBox="0 0 25 26"
+						fill="none"
+						className={cn('size-5', className)}
+					>
+						<path
+							fillRule="evenodd"
+							clipRule="evenodd"
+							d="M.55 18.186l.325-.773 2.04-4.855-.007-.012-1.555-3.127-.167 6.846-.437-.01.173-7.14.283.006-.463-.93-.376-.756.814-.222 4.758-1.298L8.187.935l.348-.773.688.494.805.579.055-.27 7.701 1.565-.057.283 1.34-.367.915-.25-.039.947-.049 1.188.262-.13 3.286 6.604-.392.195-3.168-6.366-.164 4.005 4.177 3.116.701.524-.67.563-4.023 3.38v.003l-.018.015-.123 4.096 3.26-6.716.395.191-3.43 7.063-.238-.116-.03.997-.024.822-.806-.163-5.184-1.047-3.92 3.117-.67.533-.383-.767-.497-.999-.249.317-5.856-4.61.27-.344L8.2 23.177 6.324 19.41 1.37 18.36l-.82-.173zM13.743 3.905L10.35 1.466 17.408 2.9l-3.666 1.005zM2.479 17.177l1.25-2.98 1.806 3.627-3.056-.647zm4.788 1.015l.018.036 6.066 1.617 5.147-4.258-.17-6.256-.025-.018.002-.051-4.86-3.844-6.516 1.67-2.484 5.433 2.821 5.67zm2.325 4.673l-1.484-2.982 3.92 1.045-2.436 1.937zm8.766-1.973l-3.293-.665 3.397-2.81-.104 3.475zm4.005-8.549l-2.508 2.108-.111-4.063 2.62 1.955zM18.52 4.034l-.144 3.515-3.264-2.581 3.408-.934zM9.102 2.277l2.894 2.08-4.335 1.111 1.441-3.19zM2.359 8.33l2.83-.773-1.539 3.367L2.36 8.33zm-.087-1.78l5.134-4.742-.297-.322-5.134 4.742.297.322zm15.641 16.259l-6.936 1.61-.099-.426 6.936-1.61.1.426z"
+							fill="url(#paint0_linear_11058_107682)"
+						/>
+						<defs>
+							<linearGradient
+								id="paint0_linear_11058_107682"
+								x1="-2.65811"
+								y1="11.7373"
+								x2="11.928"
+								y2="4.38343"
+								gradientUnits="userSpaceOnUse"
+							>
+								<stop stopColor="#D24F39" />
+								<stop offset={1} stopColor="#791EEC" />
+							</linearGradient>
+						</defs>
+					</svg>
+				),
+				plan: 'Enterprise'
+			},
+			{
+				name: 'Ever Gauzy',
+				logo: AudioWaveform,
+				plan: 'Startup'
+			},
+			{
+				name: 'Ever Cloc',
+				logo: GalleryVerticalEnd,
+				plan: 'Free'
+			},
+			{
+				name: 'Ever Rec',
+				logo: Command,
+				plan: 'Free'
+			}
+		],
 		navMain: [
 			{
 				title: t('sidebar.DASHBOARD'),
@@ -138,35 +182,6 @@ export function AppSidebar({ publicTeam, ...props }: AppSidebarProps) {
 					}
 				]
 			},
-			...(userManagedTeams && userManagedTeams.length > 0
-				? [
-						{
-							title: t('sidebar.PROJECTS'),
-							label: 'projects',
-							url: '#',
-							icon: FolderKanban,
-							items: [
-								{
-									title: t('common.NO_PROJECT'),
-									label: 'no-project',
-									url: '#',
-									component: (
-										<SidebarMenuSubButton asChild>
-											<Button
-												className="w-full text-xs mt-3 dark:text-white rounded-xl border-[0.0938rem]"
-												variant="outline"
-												disabled={!user?.isEmailVerified}
-											>
-												<PlusIcon className="w-4 h-4" />
-												{t('common.CREATE_PROJECT')}
-											</Button>
-										</SidebarMenuSubButton>
-									)
-								}
-							]
-						}
-					]
-				: []),
 			{
 				title: t('sidebar.MY_WORKS'),
 				url: '#',
@@ -232,7 +247,8 @@ export function AppSidebar({ publicTeam, ...props }: AppSidebarProps) {
 						}
 					]
 				: [])
-		]
+		],
+		projects: []
 	};
 
 	return (
@@ -245,30 +261,20 @@ export function AppSidebar({ publicTeam, ...props }: AppSidebarProps) {
 				<SidebarTrigger
 					className={cn(
 						state === 'collapsed' ? 'right-[-20%]' : ' right-[-5%]',
-						'absolute  top-[10.5%] size-7 !bg-[#1C75FD] flex items-center justify-center !rounded-full transition-all duration-300 filter drop-shadow-[0px_0px_6px_rgba(28,117,253,0.30)] z-[55]'
+						'absolute  top-[8%] size-7 !bg-[#1C75FD] flex items-center justify-center !rounded-full transition-all duration-300 filter drop-shadow-[0px_0px_6px_rgba(28,117,253,0.30)] z-[55]'
 					)}
 				/>
 				<SidebarHeader className={cn('mb-[1.4rem]', state === 'collapsed' ? 'items-center' : '')}>
-					<SidebarMenu>
-						<SidebarMenuItem>
-							<SidebarMenuButton
-								className={cn(state === 'collapsed' ? 'items-center justify-center' : '')}
-								size="lg"
-								asChild
-							>
-								<Link href="/">
-									<div className="flex items-center justify-center rounded-lg aspect-square size-8 text-sidebar-primary-foreground">
-										<SymbolAppLogo className="size-5" />
-									</div>
-									{state === 'expanded' && <EverTeamsLogo dash />}
-								</Link>
-							</SidebarMenuButton>
-						</SidebarMenuItem>
-					</SidebarMenu>
+					<WorkspacesSwitcher workspaces={data.workspaces} />
 				</SidebarHeader>
 				<SidebarContent>
 					<NavMain items={data.navMain} />
+					<NavProjects projects={data.projects} />
 				</SidebarContent>
+
+				<SidebarFooter className="p-1 mt-auto">
+					<SidebarOptInForm />
+				</SidebarFooter>
 				<SidebarRail />
 			</Sidebar>
 
diff --git a/apps/web/components/nav-main.tsx b/apps/web/components/nav-main.tsx
index de5446bdf..79934f941 100644
--- a/apps/web/components/nav-main.tsx
+++ b/apps/web/components/nav-main.tsx
@@ -5,6 +5,7 @@ import { cn } from '@/lib/utils';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import {
 	SidebarGroup,
+	SidebarGroupLabel,
 	SidebarMenu,
 	SidebarMenuAction,
 	SidebarMenuButton,
@@ -64,7 +65,10 @@ export function NavMain({
 	};
 	return (
 		<SidebarGroup>
-			<SidebarMenu className={cn(state === 'collapsed' ? 'items-center' : '', 'gap-y-5')}>
+			<SidebarGroupLabel>Platform</SidebarGroupLabel>
+			<SidebarMenu
+				className={cn('w-full max-w-[230px]', state === 'collapsed' ? 'items-center gap-y-2' : '', 'gap-y-1')}
+			>
 				{items.map((item, index) => (
 					<Collapsible
 						key={item.title}
@@ -78,11 +82,11 @@ export function NavMain({
 								<CollapsibleTrigger className="cursor-pointer" asChild>
 									<SidebarMenuButton
 										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',
+											'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 !text-sm',
 											state === 'collapsed' ? ' justify-center' : '',
 											index === activeMenuIndex
-												? 'font-medium bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
-												: '!font-normal' // Style for active menu
+												? 'font-normal bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
+												: '!font-light' // Style for active menu
 										)}
 										asChild
 										tooltip={item.title}
@@ -98,7 +102,7 @@ export function NavMain({
 
 											<span
 												className={cn(
-													'transition-all font-medium',
+													'transition-all font-light !text-sm',
 													state === 'collapsed' ? 'opacity-0 hidden' : 'opacity-100'
 												)}
 											>
@@ -110,11 +114,11 @@ export function NavMain({
 							) : (
 								<SidebarMenuButton
 									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',
+										'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 !text-sm',
 										state === 'collapsed' ? ' justify-center' : '',
 										index === activeMenuIndex
-											? 'font-medium bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
-											: '!font-normal'
+											? 'font-normal bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
+											: '!font-light'
 									)}
 									asChild
 									tooltip={item.title}
@@ -129,7 +133,7 @@ export function NavMain({
 										)}
 										<span
 											className={cn(
-												'transition-all font-medium',
+												'transition-all font-light text-sm',
 												state === 'collapsed' ? 'opacity-0 hidden' : 'opacity-100'
 											)}
 										>
@@ -142,23 +146,23 @@ export function NavMain({
 							{item.items?.length ? (
 								<>
 									<CollapsibleTrigger asChild>
-										<SidebarMenuAction className="data-[state=open]:rotate-90">
+										<SidebarMenuAction className="data-[state=open]:rotate-90 mt-1">
 											<ChevronRight />
 											<span className="sr-only">Toggle</span>
 										</SidebarMenuAction>
 									</CollapsibleTrigger>
 									<CollapsibleContent>
-										<SidebarMenuSub className={cn('flex flex-col gap-y-3')}>
+										<SidebarMenuSub className={cn('flex flex-col !gap-y-1.5 !px-2')}>
 											{item.items.map((subItem, key) => (
-												<SidebarMenuSubItem key={key}>
+												<SidebarMenuSubItem className="w-full max-w-[230px]" key={key}>
 													{subItem?.component || (
 														<SidebarMenuSubButton
 															className={cn(
-																'hover:bg-[#eaeef4] text-[#1F2937] dark:text-gray-50 data-[active=true]:bg-[#eaeef4] min-h-10 h-10 dark:hover:bg-sidebar-accent transition-colors duration-300',
+																'hover:bg-[#eaeef4] text-[#1F2937] dark:text-gray-50 data-[active=true]:bg-[#eaeef4] min-h-10 h-10 dark:hover:bg-sidebar-accent transition-colors duration-300 !text-sm',
 
 																// Style for active sub-menu
 																key === activeSubMenuIndex
-																	? 'font-medium bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
+																	? 'font-normal bg-[#eaeef4] dark:text-gray-50 dark:bg-sidebar-accent'
 																	: '!font-light'
 															)}
 															onClick={() => handleSubMenuToggle(key)}
@@ -167,7 +171,7 @@ export function NavMain({
 															<Link href={subItem.url}>
 																<span
 																	className={cn(
-																		'transition-all font-medium',
+																		'transition-all font-light !text-sm',
 																		state === 'collapsed'
 																			? 'opacity-0 hidden'
 																			: 'opacity-100'
diff --git a/apps/web/components/nav-projects.tsx b/apps/web/components/nav-projects.tsx
index d9212d987..e9d9d3c52 100644
--- a/apps/web/components/nav-projects.tsx
+++ b/apps/web/components/nav-projects.tsx
@@ -1,5 +1,7 @@
-import { Folder, MoreHorizontal, Share, Trash2, type LucideIcon } from 'lucide-react';
-import { cn } from '@/lib/utils';
+'use client';
+
+import { Folder, Forward, MoreHorizontal, Trash2, type LucideIcon, PlusIcon } from 'lucide-react';
+
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -14,100 +16,94 @@ import {
 	SidebarMenuAction,
 	SidebarMenuButton,
 	SidebarMenuItem,
+	SidebarMenuSubButton,
 	useSidebar
 } from '@/components/ui/sidebar';
+import { useOrganizationAndTeamManagers } from '@/app/hooks/features/useOrganizationTeamManagers';
+import { useAuthenticateUser } from '@/app/hooks';
+import { Button } from '@/lib/components/button';
+import { useTranslations } from 'next-intl';
 
 export function NavProjects({
 	projects
-}: Readonly<{
+}: {
 	projects: {
 		name: string;
 		url: string;
 		icon: LucideIcon;
 	}[];
-}>) {
-	const { isMobile, state } = useSidebar();
+}) {
+	const { isMobile } = useSidebar();
 
-	return (
+	const { user } = useAuthenticateUser();
+
+	const { userManagedTeams } = useOrganizationAndTeamManagers();
+	const t = useTranslations();
+	return userManagedTeams && userManagedTeams.length > 0 ? (
 		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
 			<SidebarGroupLabel>Projects</SidebarGroupLabel>
-			<SidebarMenu className="gap-y-3">
-				{projects.map((item) => (
-					<SidebarMenuItem key={item.name}>
-						<SidebarMenuButton asChild>
-							<a href={item.url}>
-								<item.icon />
-								<span
-									className={cn(
-										'transition-all',
-										state === 'collapsed' ? 'opacity-0 hidden' : 'opacity-100'
-									)}
-								>
-									{item.name}
-								</span>
-							</a>
-						</SidebarMenuButton>
-						<DropdownMenu>
-							<DropdownMenuTrigger asChild>
-								<SidebarMenuAction showOnHover>
-									<MoreHorizontal />
-									<span className="sr-only">More</span>
-								</SidebarMenuAction>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent
-								className="w-48"
-								side={isMobile ? 'bottom' : 'right'}
-								align={isMobile ? 'end' : 'start'}
-							>
-								<DropdownMenuItem>
-									<Folder className="text-muted-foreground" />
-									<span
-										className={cn(
-											'transition-all',
-											state === 'collapsed' ? 'opacity-0 hidden' : 'opacity-100'
-										)}
+			<SidebarMenu className="w-full max-w-[230px]">
+				{projects && projects.length ? (
+					<>
+						{projects.map((item) => (
+							<SidebarMenuItem className="w-full max-w-[230px]" key={item.name}>
+								<SidebarMenuButton asChild>
+									<a href={item.url}>
+										<item.icon />
+										<span>{item.name}</span>
+									</a>
+								</SidebarMenuButton>
+								<DropdownMenu>
+									<DropdownMenuTrigger asChild>
+										<SidebarMenuAction showOnHover>
+											<MoreHorizontal />
+											<span className="sr-only">More</span>
+										</SidebarMenuAction>
+									</DropdownMenuTrigger>
+									<DropdownMenuContent
+										className="w-48 rounded-lg"
+										side={isMobile ? 'bottom' : 'right'}
+										align={isMobile ? 'end' : 'start'}
 									>
-										View Project
-									</span>
-								</DropdownMenuItem>
-								<DropdownMenuItem>
-									<Share className="text-muted-foreground" />
-									<span
-										className={cn(
-											'transition-all',
-											state === 'collapsed' ? 'opacity-0 hidden' : 'opacity-100'
-										)}
-									>
-										Share Project
-									</span>
-								</DropdownMenuItem>
-								<DropdownMenuSeparator />
-								<DropdownMenuItem>
-									<Trash2 className="text-muted-foreground" />
-									<span
-										className={cn(
-											'transition-all',
-											state === 'collapsed' ? 'opacity-0 hidden' : 'opacity-100'
-										)}
-									>
-										Delete Project
-									</span>
-								</DropdownMenuItem>
-							</DropdownMenuContent>
-						</DropdownMenu>
+										<DropdownMenuItem>
+											<Folder className="text-muted-foreground" />
+											<span>View Project</span>
+										</DropdownMenuItem>
+										<DropdownMenuItem>
+											<Forward className="text-muted-foreground" />
+											<span>Share Project</span>
+										</DropdownMenuItem>
+										<DropdownMenuSeparator />
+										<DropdownMenuItem>
+											<Trash2 className="text-muted-foreground" />
+											<span>Delete Project</span>
+										</DropdownMenuItem>
+									</DropdownMenuContent>
+								</DropdownMenu>
+							</SidebarMenuItem>
+						))}
+						<SidebarMenuItem className="w-full max-w-[230px]">
+							<SidebarMenuButton className="text-sidebar-foreground/70">
+								<MoreHorizontal className="text-sidebar-foreground/70" />
+								<span>More</span>
+							</SidebarMenuButton>
+						</SidebarMenuItem>
+					</>
+				) : (
+					<SidebarMenuItem className="w-full max-w-[230px]">
+						<SidebarMenuSubButton asChild>
+							<Button
+								className="w-full text-xs mt-3 dark:text-white rounded-xl border-[0.0938rem] w-full max-w-[230px]"
+								variant="outline"
+								disabled={!user?.isEmailVerified}
+							>
+								<PlusIcon className="w-4 h-4" />
+								{t('common.CREATE_PROJECT')}
+							</Button>
+						</SidebarMenuSubButton>
 					</SidebarMenuItem>
-				))}
-				<SidebarMenuItem>
-					<SidebarMenuButton>
-						<MoreHorizontal />
-						<span
-							className={cn('transition-all', state === 'collapsed' ? 'opacity-0 hidden' : 'opacity-100')}
-						>
-							More
-						</span>
-					</SidebarMenuButton>
-				</SidebarMenuItem>
+				)}
 			</SidebarMenu>
 		</SidebarGroup>
-	);
+	) : null;
 }
diff --git a/apps/web/components/nav-secondary.tsx b/apps/web/components/nav-secondary.tsx
index 3b1bd5394..b4e2aec2b 100644
--- a/apps/web/components/nav-secondary.tsx
+++ b/apps/web/components/nav-secondary.tsx
@@ -25,10 +25,10 @@ export function NavSecondary({
 	return (
 		<SidebarGroup {...props}>
 			<SidebarGroupContent>
-				<SidebarMenu className="gap-y-3">
+				<SidebarMenu className="gap-y-1">
 					{items.map((item) => (
-						<SidebarMenuItem key={item.title}>
-							<SidebarMenuButton asChild size="sm">
+						<SidebarMenuItem key={item.title} className="w-full max-w-[230px]">
+							<SidebarMenuButton asChild size="sm" className="w-full max-w-[230px]">
 								<a href={item.url}>
 									<item.icon className="size-4" />
 									<span
diff --git a/apps/web/components/pages/all-teams/header-tabs.tsx b/apps/web/components/pages/all-teams/header-tabs.tsx
index cc7b28236..3a0dedf12 100644
--- a/apps/web/components/pages/all-teams/header-tabs.tsx
+++ b/apps/web/components/pages/all-teams/header-tabs.tsx
@@ -7,41 +7,41 @@ import { Tooltip } from 'lib/components';
 import { clsxm } from '@app/utils';
 
 export function HeaderTabs() {
-  const t = useTranslations();
-  const options = [
-    { label: 'TEAMS', icon: QueueListIcon, view: IssuesView.CARDS },
-    { label: 'COMBINE', icon: Squares2X2Icon, view: IssuesView.BLOCKS }
-  ];
+	const t = useTranslations();
+	const options = [
+		{ label: 'TEAMS', icon: QueueListIcon, view: IssuesView.CARDS },
+		{ label: 'COMBINE', icon: Squares2X2Icon, view: IssuesView.BLOCKS }
+	];
 
-  const [view, setView] = useAtom(allTeamsHeaderTabs);
+	const [view, setView] = useAtom(allTeamsHeaderTabs);
 
-  return (
-    <>
-      {options.map(({ label, icon: Icon, view: optionView }) => (
-        <Tooltip
-          key={label}
-          label={t(`common.${label}` as DottedLanguageObjectStringPaths)}
-          placement="top-start"
-        >
-          <button
-            className={clsxm(
-              'rounded-md p-2 text-gray-700 dark:text-gray-300',
-              view === optionView &&
-                'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-            )}
-            onClick={() => {
-              setView(optionView);
-            }}
-          >
-            <Icon
-              className={clsxm(
-                'w-5 h-5 inline text-gray-600 dark:text-gray-400',
-                view === optionView && 'dark:text-white text-gray-800'
-              )}
-            />
-          </button>
-        </Tooltip>
-      ))}
-    </>
-  );
+	return (
+		<>
+			{options.map(({ label, icon: Icon, view: optionView }) => (
+				<Tooltip
+					className="z-20"
+					key={label}
+					label={t(`common.${label}` as DottedLanguageObjectStringPaths)}
+					placement="top-start"
+				>
+					<button
+						className={clsxm(
+							'rounded-md p-2 text-gray-700 dark:text-gray-300',
+							view === optionView && 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+						)}
+						onClick={() => {
+							setView(optionView);
+						}}
+					>
+						<Icon
+							className={clsxm(
+								'w-5 h-5 inline text-gray-600 dark:text-gray-400',
+								view === optionView && 'dark:text-white text-gray-800'
+							)}
+						/>
+					</button>
+				</Tooltip>
+			))}
+		</>
+	);
 }
diff --git a/apps/web/components/pages/main/header-tabs.tsx b/apps/web/components/pages/main/header-tabs.tsx
index 3cb3561e4..ee7fadb5c 100644
--- a/apps/web/components/pages/main/header-tabs.tsx
+++ b/apps/web/components/pages/main/header-tabs.tsx
@@ -1,69 +1,58 @@
 import { clsxm } from '@app/utils';
 import { Tooltip } from 'lib/components';
 import LinkWrapper from '../kanban/link-wrapper';
-import {
-  QueueListIcon,
-  Squares2X2Icon,
-  TableCellsIcon
-} from '@heroicons/react/20/solid';
+import { QueueListIcon, Squares2X2Icon, TableCellsIcon } from '@heroicons/react/20/solid';
 import KanbanIcon from '@components/ui/svgs/kanban';
 import { IssuesView } from '@app/constants';
 import { useAtom } from 'jotai';
 import { headerTabs } from '@app/stores/header-tabs';
 import { DottedLanguageObjectStringPaths, useTranslations } from 'next-intl';
 
-const HeaderTabs = ({
-  linkAll,
-  kanban = false
-}: {
-  linkAll: boolean;
-  kanban?: boolean;
-}) => {
-  const t = useTranslations();
-  const options = [
-    { label: 'CARDS', icon: QueueListIcon, view: IssuesView.CARDS },
-    { label: 'TABLE', icon: TableCellsIcon, view: IssuesView.TABLE },
-    { label: 'BLOCKS', icon: Squares2X2Icon, view: IssuesView.BLOCKS },
-    { label: 'KANBAN', icon: KanbanIcon, view: IssuesView.KANBAN }
-  ];
-  const links = linkAll
-    ? ['/', '/', '/', '/kanban']
-    : [undefined, undefined, undefined, '/kanban'];
-  const [view, setView] = useAtom(headerTabs);
-  const activeView = kanban ? IssuesView.KANBAN : view;
-  return (
-    <>
-      {options.map(({ label, icon: Icon, view: optionView }, index) => (
-        <Tooltip
-          key={label}
-          label={t(`common.${label}` as DottedLanguageObjectStringPaths)}
-          placement="top-start"
-        >
-          <LinkWrapper isRoute={!!links[index]} href={links[index]}>
-            <button
-              className={clsxm(
-                'rounded-md p-2 text-gray-700 dark:text-gray-300',
-                activeView === optionView &&
-                  'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-              )}
-              onClick={() => {
-                if (links[index] !== '/kanban') {
-                  setView(optionView);
-                }
-              }}
-            >
-              <Icon
-                className={clsxm(
-                  'w-5 h-5 inline text-gray-600 dark:text-gray-400',
-                  activeView === optionView && 'dark:text-white text-gray-800'
-                )}
-              />
-            </button>
-          </LinkWrapper>
-        </Tooltip>
-      ))}
-    </>
-  );
+const HeaderTabs = ({ linkAll, kanban = false }: { linkAll: boolean; kanban?: boolean }) => {
+	const t = useTranslations();
+	const options = [
+		{ label: 'CARDS', icon: QueueListIcon, view: IssuesView.CARDS },
+		{ label: 'TABLE', icon: TableCellsIcon, view: IssuesView.TABLE },
+		{ label: 'BLOCKS', icon: Squares2X2Icon, view: IssuesView.BLOCKS },
+		{ label: 'KANBAN', icon: KanbanIcon, view: IssuesView.KANBAN }
+	];
+	const links = linkAll ? ['/', '/', '/', '/kanban'] : [undefined, undefined, undefined, '/kanban'];
+	const [view, setView] = useAtom(headerTabs);
+	const activeView = kanban ? IssuesView.KANBAN : view;
+	return (
+		<>
+			{options.map(({ label, icon: Icon, view: optionView }, index) => (
+				<Tooltip
+					key={label}
+					label={t(`common.${label}` as DottedLanguageObjectStringPaths)}
+					placement="top-start"
+					className="z-20"
+				>
+					<LinkWrapper isRoute={!!links[index]} href={links[index]}>
+						<button
+							className={clsxm(
+								'rounded-md p-2 text-gray-700 dark:text-gray-300',
+								activeView === optionView &&
+									'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+							)}
+							onClick={() => {
+								if (links[index] !== '/kanban') {
+									setView(optionView);
+								}
+							}}
+						>
+							<Icon
+								className={clsxm(
+									'w-5 h-5 inline text-gray-600 dark:text-gray-400',
+									activeView === optionView && 'dark:text-white text-gray-800'
+								)}
+							/>
+						</button>
+					</LinkWrapper>
+				</Tooltip>
+			))}
+		</>
+	);
 };
 
 export default HeaderTabs;
diff --git a/apps/web/components/pages/task/description-block/editor-components/LinkElement.tsx b/apps/web/components/pages/task/description-block/editor-components/LinkElement.tsx
index 3bc09d970..033e97093 100644
--- a/apps/web/components/pages/task/description-block/editor-components/LinkElement.tsx
+++ b/apps/web/components/pages/task/description-block/editor-components/LinkElement.tsx
@@ -53,7 +53,7 @@ const LinkElement = ({ attributes, element, children }: any) => {
 							href={href}
 							rel="noreferrer"
 							target="_blank"
-							className=" text-[#5000B9] dark:text-primary-light truncate max-w-[240px] overflow-hidden whitespace-nowrap mr-0"
+							className=" text-[#5000B9] dark:text-primary-light truncate max-w-[230px] overflow-hidden whitespace-nowrap mr-0"
 							style={{ textOverflow: 'ellipsis' }}
 						>
 							{element.href}
diff --git a/apps/web/components/sidebar-opt-in-form.tsx b/apps/web/components/sidebar-opt-in-form.tsx
new file mode 100644
index 000000000..670acd645
--- /dev/null
+++ b/apps/web/components/sidebar-opt-in-form.tsx
@@ -0,0 +1,111 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { SidebarInput, useSidebar } from '@/components/ui/sidebar';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
+import { ToastAction } from './ui/toast';
+import { toast } from './ui/use-toast';
+import { useState } from 'react';
+
+export function SidebarOptInForm() {
+	const { state } = useSidebar();
+	const [isLoading, setLoading] = useState(false);
+	const subscribeFormSchema = z
+		.object({
+			email: z.string().email()
+		})
+		.required();
+	const form = useForm<z.infer<typeof subscribeFormSchema>>({
+		resolver: zodResolver(subscribeFormSchema)
+	});
+
+	const subscribe = async () => {
+		let tags = ['Ever Teams, Ever Teams App', 'Open', 'Cloud'];
+		setLoading((prev) => true);
+		const res = await fetch('/api/subscribe', {
+			body: JSON.stringify({
+				email_address: form.getValues('email'),
+				captcha: '',
+				tags: tags,
+				status: 'subscribed'
+			}),
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			method: 'POST'
+		});
+		const { error } = (await res.json()) as {
+			error: string;
+			status: number;
+			[key: string]: unknown;
+		};
+
+		if (error) {
+			setLoading((prev) => false);
+			toast({
+				title: 'Waiting list registration error',
+				description: `We have encountered a problem ${error} with your registration to our waiting list for Ever Teams`,
+				variant: 'destructive'
+			});
+			return;
+		}
+
+		setLoading(() => false);
+		toast({
+			title: 'Confirmation of registration on waiting list',
+			description: "Thank you for joining our waiting list! We're delighted you're interested in Ever Teams",
+			variant: 'default',
+			className: 'bg-green-50 text-green-600 border-green-500',
+			action: <ToastAction altText="Goto Waitlist to undo">Undo</ToastAction>
+		});
+	};
+
+	const onSubmit = (data: z.infer<typeof subscribeFormSchema>) => {
+		console.log(data);
+		(async () => await subscribe())();
+	};
+
+	return state == 'expanded' ? (
+		<Form {...form}>
+			<Card className="p-1 mt-auto shadow-none">
+				<form onSubmit={form.handleSubmit(onSubmit)}>
+					<CardHeader className="flex flex-col gap-1 p-4 pb-0">
+						<CardTitle className="text-sm font-medium">Subscribe to our newsletter</CardTitle>
+						<CardDescription className="text-xs">
+							Opt-in to receive updates and news about Ever Teams.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="grid gap-2.5 p-4">
+						<FormField
+							control={form.control}
+							name="email"
+							render={({ field }) => (
+								<FormItem>
+									<FormControl>
+										<SidebarInput
+											type="email"
+											placeholder="Email"
+											className="placeholder:text-xs"
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage className="text-xs" />
+								</FormItem>
+							)}
+						/>
+						<Button
+							type="submit"
+							className="w-full shadow-none bg-sidebar-primary text-sidebar-primary-foreground"
+							size="sm"
+						>
+							{isLoading ? 'Subscribing...' : 'Subscribe'}
+						</Button>
+					</CardContent>
+				</form>
+			</Card>
+		</Form>
+	) : null;
+}
diff --git a/apps/web/components/ui/card.tsx b/apps/web/components/ui/card.tsx
new file mode 100644
index 000000000..fbb0c3772
--- /dev/null
+++ b/apps/web/components/ui/card.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+	)
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+	)
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+	)
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+	)
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/apps/web/components/ui/form.tsx b/apps/web/components/ui/form.tsx
new file mode 100644
index 000000000..4bcc587c8
--- /dev/null
+++ b/apps/web/components/ui/form.tsx
@@ -0,0 +1,135 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form';
+
+import { cn } from '@/lib/utils';
+import { Label } from 'components/ui/label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+	name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+	...props
+}: ControllerProps<TFieldValues, TName>) => {
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
+};
+
+const useFormField = () => {
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
+
+	if (!fieldContext) {
+		throw new Error('useFormField should be used within <FormField>');
+	}
+		const fieldState = getFieldState(fieldContext.name, formState);
+
+	const { id } = itemContext;
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+};
+
+type FormItemContextValue = {
+	id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => {
+		const id = React.useId();
+
+		return (
+			<FormItemContext.Provider value={{ id }}>
+				<div ref={ref} className={cn('space-y-2', className)} {...props} />
+			</FormItemContext.Provider>
+		);
+	}
+);
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+	const { error, formItemId } = useFormField();
+
+	return <Label ref={ref} className={cn(error && 'text-destructive', className)} htmlFor={formItemId} {...props} />;
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+	({ ...props }, ref) => {
+		const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+		return (
+			<Slot
+				ref={ref}
+				id={formItemId}
+				aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+				aria-invalid={!!error}
+				{...props}
+			/>
+		);
+	}
+);
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, ...props }, ref) => {
+		const { formDescriptionId } = useFormField();
+
+		return (
+			<p ref={ref} id={formDescriptionId} className={cn('text-sm text-muted-foreground', className)} {...props} />
+		);
+	}
+);
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, children, ...props }, ref) => {
+		const { error, formMessageId } = useFormField();
+		const body = error ? String(error?.message) : children;
+
+		if (!body) {
+			return null;
+		}
+
+		return (
+			<p
+				ref={ref}
+				id={formMessageId}
+				className={cn('text-sm font-medium text-destructive', className)}
+				{...props}
+			>
+				{body}
+			</p>
+		);
+	}
+);
+FormMessage.displayName = 'FormMessage';
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
diff --git a/apps/web/components/ui/label.tsx b/apps/web/components/ui/label.tsx
new file mode 100644
index 000000000..084b15b79
--- /dev/null
+++ b/apps/web/components/ui/label.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+
+const Label = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+	<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/apps/web/components/ui/sidebar.tsx b/apps/web/components/ui/sidebar.tsx
index 092b081de..824cb1469 100644
--- a/apps/web/components/ui/sidebar.tsx
+++ b/apps/web/components/ui/sidebar.tsx
@@ -13,9 +13,9 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 
 const SIDEBAR_COOKIE_NAME = 'sidebar:state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '17rem';
+const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_MOBILE = '19rem';
-const SIDEBAR_WIDTH_ICON = '5rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
 type SidebarContext = {
diff --git a/apps/web/components/team-switcher.tsx b/apps/web/components/workspace-switcher.tsx
similarity index 76%
rename from apps/web/components/team-switcher.tsx
rename to apps/web/components/workspace-switcher.tsx
index 858ee426e..fa6329608 100644
--- a/apps/web/components/team-switcher.tsx
+++ b/apps/web/components/workspace-switcher.tsx
@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { ChevronsUpDown, Plus } from 'lucide-react';
 
@@ -12,17 +13,17 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
 
-export function TeamSwitcher({
-	teams
+export function WorkspacesSwitcher({
+	workspaces
 }: Readonly<{
-	teams: {
+	workspaces: {
 		name: string;
 		logo: React.ElementType;
 		plan: string;
 	}[];
 }>) {
 	const { isMobile } = useSidebar();
-	const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+	const [activeWorkspace, setActiveWorkspace] = React.useState(workspaces[0]);
 
 	return (
 		<SidebarMenu>
@@ -34,11 +35,11 @@ export function TeamSwitcher({
 							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
 						>
 							<div className="flex items-center justify-center rounded-lg aspect-square size-8 bg-sidebar-primary text-sidebar-primary-foreground">
-								<activeTeam.logo className="size-4" />
+								<activeWorkspace.logo className="size-4" />
 							</div>
 							<div className="grid flex-1 text-sm leading-tight text-left">
-								<span className="font-semibold truncate">{activeTeam.name}</span>
-								<span className="text-xs truncate">{activeTeam.plan}</span>
+								<span className="font-semibold truncate">{activeWorkspace.name}</span>
+								<span className="text-xs truncate">{activeWorkspace.plan}</span>
 							</div>
 							<ChevronsUpDown className="ml-auto" />
 						</SidebarMenuButton>
@@ -50,12 +51,16 @@ export function TeamSwitcher({
 						sideOffset={4}
 					>
 						<DropdownMenuLabel className="text-xs text-muted-foreground">Teams</DropdownMenuLabel>
-						{teams.map((team, index) => (
-							<DropdownMenuItem key={team.name} onClick={() => setActiveTeam(team)} className="gap-2 p-2">
+						{workspaces.map((workspace, index) => (
+							<DropdownMenuItem
+								key={workspace.name}
+								onClick={() => setActiveWorkspace(workspace)}
+								className="gap-2 p-2"
+							>
 								<div className="flex items-center justify-center border rounded-sm size-6">
-									<team.logo className="size-4 shrink-0" />
+									<workspace.logo className="size-4 shrink-0" />
 								</div>
-								{team.name}
+								{workspace.name}
 								<DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
 							</DropdownMenuItem>
 						))}
diff --git a/apps/web/lib/features/task/daily-plan/views-header-tabs.tsx b/apps/web/lib/features/task/daily-plan/views-header-tabs.tsx
index dc4c61dd5..837d33e8d 100644
--- a/apps/web/lib/features/task/daily-plan/views-header-tabs.tsx
+++ b/apps/web/lib/features/task/daily-plan/views-header-tabs.tsx
@@ -1,52 +1,48 @@
 import { IssuesView } from '@app/constants';
 import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs';
 import { clsxm } from '@app/utils';
-import {
-  QueueListIcon,
-  Squares2X2Icon,
-  TableCellsIcon
-} from '@heroicons/react/20/solid';
+import { QueueListIcon, Squares2X2Icon, TableCellsIcon } from '@heroicons/react/20/solid';
 import { Tooltip } from 'lib/components';
 import { DottedLanguageObjectStringPaths, useTranslations } from 'next-intl';
 import { useAtom } from 'jotai';
 
 export default function ViewsHeaderTabs() {
-  const t = useTranslations();
-  const options = [
-    { label: 'CARDS', icon: QueueListIcon, view: IssuesView.CARDS },
-    { label: 'TABLE', icon: TableCellsIcon, view: IssuesView.TABLE },
-    { label: 'BLOCKS', icon: Squares2X2Icon, view: IssuesView.BLOCKS }
-  ];
+	const t = useTranslations();
+	const options = [
+		{ label: 'CARDS', icon: QueueListIcon, view: IssuesView.CARDS },
+		{ label: 'TABLE', icon: TableCellsIcon, view: IssuesView.TABLE },
+		{ label: 'BLOCKS', icon: Squares2X2Icon, view: IssuesView.BLOCKS }
+	];
 
-  const [view, setView] = useAtom(dailyPlanViewHeaderTabs);
+	const [view, setView] = useAtom(dailyPlanViewHeaderTabs);
 
-  return (
-    <div className="flex items-center gap-1">
-      {options.map(({ label, icon: Icon, view: optionView }) => (
-        <Tooltip
-          key={label}
-          label={t(`common.${label}` as DottedLanguageObjectStringPaths)}
-          placement="top-start"
-        >
-          <button
-            className={clsxm(
-              'rounded-md p-2 text-gray-700 dark:text-gray-300',
-              view === optionView &&
-                'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-            )}
-            onClick={() => {
-              setView(optionView);
-            }}
-          >
-            <Icon
-              className={clsxm(
-                'w-5 h-5 inline text-gray-600 dark:text-gray-400',
-                view === optionView && 'dark:text-white text-gray-800'
-              )}
-            />
-          </button>
-        </Tooltip>
-      ))}
-    </div>
-  );
+	return (
+		<div className="flex items-center gap-1">
+			{options.map(({ label, icon: Icon, view: optionView }) => (
+				<Tooltip
+					key={label}
+					className="z-20"
+					label={t(`common.${label}` as DottedLanguageObjectStringPaths)}
+					placement="top-start"
+				>
+					<button
+						className={clsxm(
+							'rounded-md p-2 text-gray-700 dark:text-gray-300',
+							view === optionView && 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+						)}
+						onClick={() => {
+							setView(optionView);
+						}}
+					>
+						<Icon
+							className={clsxm(
+								'w-5 h-5 inline text-gray-600 dark:text-gray-400',
+								view === optionView && 'dark:text-white text-gray-800'
+							)}
+						/>
+					</button>
+				</Tooltip>
+			))}
+		</div>
+	);
 }
diff --git a/apps/web/lib/features/task/task-input-kanban.tsx b/apps/web/lib/features/task/task-input-kanban.tsx
index 59000339f..2430c2580 100644
--- a/apps/web/lib/features/task/task-input-kanban.tsx
+++ b/apps/web/lib/features/task/task-input-kanban.tsx
@@ -1,72 +1,55 @@
 'use client';
 
 import {
-  HostKeys,
-  RTuseTaskInput,
-  useCallbackRef,
-  useHotkeys,
-  useOutsideClick,
-  useTaskInput,
-  useTaskLabels,
-  useTaskStatus
+	HostKeys,
+	RTuseTaskInput,
+	useCallbackRef,
+	useHotkeys,
+	useOutsideClick,
+	useTaskInput,
+	useTaskLabels,
+	useTaskStatus
 } from '@app/hooks';
 import { ITaskPriority, ITaskSize, ITeamTask, Nullable } from '@app/interfaces';
 import { timerStatusState } from '@app/stores';
 import { clsxm } from '@app/utils';
 import { PlusIcon } from '@heroicons/react/20/solid';
-import {
-  Button,
-  Card,
-  InputField,
-  SpinnerLoader,
-  Tooltip
-} from 'lib/components';
-import {
-  MutableRefObject,
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
+import { Button, Card, InputField, SpinnerLoader, Tooltip } from 'lib/components';
+import { MutableRefObject, PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import { TaskIssuesDropdown } from './task-issue';
-import {
-  ActiveTaskPropertiesDropdown,
-  ActiveTaskSizesDropdown
-} from './task-status';
+import { ActiveTaskPropertiesDropdown, ActiveTaskSizesDropdown } from './task-status';
 import { useTranslations } from 'next-intl';
 import { TaskLabels } from './task-labels';
 
 type Props = {
-  task?: Nullable<ITeamTask>;
-  tasks?: ITeamTask[];
-  kanbanTitle?: string;
-  onTaskClick?: (task: ITeamTask) => void;
-  initEditMode?: boolean;
-  onCloseCombobox?: () => void;
-  inputLoader?: boolean;
-  onEnterKey?: (taskName: string, task: ITeamTask) => void;
-  keepOpen?: boolean;
-  loadingRef?: MutableRefObject<boolean>;
-  closeable_fc?: () => void;
-  viewType?: 'input-trigger' | 'one-view';
-  createOnEnterClick?: boolean;
-  showTaskNumber?: boolean;
-  showCombobox?: boolean;
-  autoAssignTaskAuth?: boolean;
-  fullWidthCombobox?: boolean;
-  fullHeightCombobox?: boolean;
-  placeholder?: string;
-  autoFocus?: boolean;
-  autoInputSelectText?: boolean;
-  usersTaskCreatedAssignTo?: { id: string }[];
-  onTaskCreated?: (task: ITeamTask | undefined) => void;
-  cardWithoutShadow?: boolean;
-  onClose: any;
-
-  forParentChildRelationship?: boolean;
+	task?: Nullable<ITeamTask>;
+	tasks?: ITeamTask[];
+	kanbanTitle?: string;
+	onTaskClick?: (task: ITeamTask) => void;
+	initEditMode?: boolean;
+	onCloseCombobox?: () => void;
+	inputLoader?: boolean;
+	onEnterKey?: (taskName: string, task: ITeamTask) => void;
+	keepOpen?: boolean;
+	loadingRef?: MutableRefObject<boolean>;
+	closeable_fc?: () => void;
+	viewType?: 'input-trigger' | 'one-view';
+	createOnEnterClick?: boolean;
+	showTaskNumber?: boolean;
+	showCombobox?: boolean;
+	autoAssignTaskAuth?: boolean;
+	fullWidthCombobox?: boolean;
+	fullHeightCombobox?: boolean;
+	placeholder?: string;
+	autoFocus?: boolean;
+	autoInputSelectText?: boolean;
+	usersTaskCreatedAssignTo?: { id: string }[];
+	onTaskCreated?: (task: ITeamTask | undefined) => void;
+	cardWithoutShadow?: boolean;
+	onClose: any;
+
+	forParentChildRelationship?: boolean;
 } & PropsWithChildren;
 
 /**
@@ -77,414 +60,387 @@ type Props = {
  */
 
 export function TaskInputKanban(props: Props) {
-  const t = useTranslations();
-
-  const { viewType = 'input-trigger', showTaskNumber = false } = props;
-
-  const datas = useTaskInput({
-    task: props.task,
-    initEditMode: props.initEditMode,
-    tasks: props.tasks
-  });
-
-  const onCloseComboboxRef = useCallbackRef(props.onCloseCombobox);
-  const closeable_fcRef = useCallbackRef(props.closeable_fc);
-  const $onTaskCreated = useCallbackRef(props.onTaskCreated);
-  const inputRef = useRef<HTMLDivElement>(null);
-  const timerStatus = useAtomValue(timerStatusState);
-  const timerRunningStatus = useMemo(() => {
-    return Boolean(timerStatus?.running);
-  }, [timerStatus]);
-
-  const onTaskCreated = useCallback(
-    (task: ITeamTask | undefined) =>
-      $onTaskCreated.current && $onTaskCreated.current(task),
-    [$onTaskCreated]
-  );
-
-  const {
-    inputTask,
-    setTaskIssue,
-    editMode,
-    setEditMode,
-    setQuery,
-    updateLoading,
-    updateTaskTitleHandler,
-    setFilter
-  } = datas;
-
-  const inputTaskTitle = useMemo(() => inputTask?.title || '', [
-    inputTask?.title
-  ]);
-
-  const [taskName, setTaskName] = useState('');
-
-  const { targetEl, ignoreElementRef } = useOutsideClick<HTMLInputElement>(
-    () => !props.keepOpen && setEditMode(false)
-  );
-
-  useEffect(() => {
-    setQuery(taskName === inputTask?.title ? '' : taskName);
-  }, [taskName, inputTask, setQuery]);
-
-  useEffect(() => {
-    setTaskName(inputTaskTitle);
-  }, [editMode, inputTaskTitle]);
-
-  useEffect(() => {
-    /**
-     * Call onCloseCombobox only when the menu has been closed
-     */
-    !editMode && onCloseComboboxRef.current && onCloseComboboxRef.current();
-  }, [editMode, onCloseComboboxRef]);
-
-  /**
-   * On update task name
-   */
-  const updateTaskNameHandler = useCallback(
-    (task: ITeamTask, title: string) => {
-      if (task.title !== title) {
-        !updateLoading && updateTaskTitleHandler(task, title);
-      }
-    },
-    [updateLoading, updateTaskTitleHandler]
-  );
-
-  /**
-   * Signle parent about updating and close event (that can trigger close component e.g)
-   */
-  useEffect(() => {
-    if (props.loadingRef?.current && !updateLoading) {
-      closeable_fcRef.current && closeable_fcRef.current();
-    }
-
-    if (props.loadingRef) {
-      props.loadingRef.current = updateLoading;
-    }
-  }, [updateLoading, props.loadingRef, closeable_fcRef]);
-
-  /* Setting the filter to open when the edit mode is true. */
-  useEffect(() => {
-    editMode && setFilter('open');
-  }, [editMode, setFilter]);
-
-  /*
+	const t = useTranslations();
+
+	const { viewType = 'input-trigger', showTaskNumber = false } = props;
+
+	const datas = useTaskInput({
+		task: props.task,
+		initEditMode: props.initEditMode,
+		tasks: props.tasks
+	});
+
+	const onCloseComboboxRef = useCallbackRef(props.onCloseCombobox);
+	const closeable_fcRef = useCallbackRef(props.closeable_fc);
+	const $onTaskCreated = useCallbackRef(props.onTaskCreated);
+	const inputRef = useRef<HTMLDivElement>(null);
+	const timerStatus = useAtomValue(timerStatusState);
+	const timerRunningStatus = useMemo(() => {
+		return Boolean(timerStatus?.running);
+	}, [timerStatus]);
+
+	const onTaskCreated = useCallback(
+		(task: ITeamTask | undefined) => $onTaskCreated.current && $onTaskCreated.current(task),
+		[$onTaskCreated]
+	);
+
+	const {
+		inputTask,
+		setTaskIssue,
+		editMode,
+		setEditMode,
+		setQuery,
+		updateLoading,
+		updateTaskTitleHandler,
+		setFilter
+	} = datas;
+
+	const inputTaskTitle = useMemo(() => inputTask?.title || '', [inputTask?.title]);
+
+	const [taskName, setTaskName] = useState('');
+
+	const { targetEl, ignoreElementRef } = useOutsideClick<HTMLInputElement>(
+		() => !props.keepOpen && setEditMode(false)
+	);
+
+	useEffect(() => {
+		setQuery(taskName === inputTask?.title ? '' : taskName);
+	}, [taskName, inputTask, setQuery]);
+
+	useEffect(() => {
+		setTaskName(inputTaskTitle);
+	}, [editMode, inputTaskTitle]);
+
+	useEffect(() => {
+		/**
+		 * Call onCloseCombobox only when the menu has been closed
+		 */
+		!editMode && onCloseComboboxRef.current && onCloseComboboxRef.current();
+	}, [editMode, onCloseComboboxRef]);
+
+	/**
+	 * On update task name
+	 */
+	const updateTaskNameHandler = useCallback(
+		(task: ITeamTask, title: string) => {
+			if (task.title !== title) {
+				!updateLoading && updateTaskTitleHandler(task, title);
+			}
+		},
+		[updateLoading, updateTaskTitleHandler]
+	);
+
+	/**
+	 * Signle parent about updating and close event (that can trigger close component e.g)
+	 */
+	useEffect(() => {
+		if (props.loadingRef?.current && !updateLoading) {
+			closeable_fcRef.current && closeable_fcRef.current();
+		}
+
+		if (props.loadingRef) {
+			props.loadingRef.current = updateLoading;
+		}
+	}, [updateLoading, props.loadingRef, closeable_fcRef]);
+
+	/* Setting the filter to open when the edit mode is true. */
+	useEffect(() => {
+		editMode && setFilter('open');
+	}, [editMode, setFilter]);
+
+	/*
     If task is passed then we don't want to set the active task for the authenticated user.
     after task creation
    */
-  const handleTaskCreation = useCallback(async () => {
-    /* Checking if the `handleTaskCreation` is available and if the `hasCreateForm` is true. */
-    datas &&
-      datas.handleTaskCreation &&
-      datas.hasCreateForm &&
-      datas
-        .handleTaskCreation({
-          autoActiveTask: true,
-          autoAssignTaskAuth: props.autoAssignTaskAuth,
-          assignToUsers: props.usersTaskCreatedAssignTo || []
-        })
-        ?.then(onTaskCreated)
-        .finally(async () => {
-          setTaskName('');
-
-          props.onClose && props.onClose();
-        });
-  }, [datas, props, onTaskCreated]);
-
-  const updatedTaskList = useMemo(() => {
-    let updatedTaskList: ITeamTask[] = [];
-    if (props.forParentChildRelationship) {
-      if (
-        // Story can have ParentId set to Epic ID
-        props.task?.issueType === 'Story'
-      ) {
-        updatedTaskList = datas.filteredTasks.filter(
-          (item) => item.issueType === 'Epic'
-        );
-      } else if (
-        // TASK|BUG can have ParentId to be set either to Story ID or Epic ID
-        props.task?.issueType === 'Task' ||
-        props.task?.issueType === 'Bug' ||
-        !props.task?.issueType
-      ) {
-        updatedTaskList = datas.filteredTasks.filter(
-          (item) => item.issueType === 'Epic' || item.issueType === 'Story'
-        );
-      } else {
-        updatedTaskList = datas.filteredTasks;
-      }
-
-      if (props.task?.children && props.task?.children?.length) {
-        const childrenTaskIds = props.task?.children?.map((item) => item.id);
-        updatedTaskList = updatedTaskList.filter(
-          (item) => !childrenTaskIds.includes(item.id)
-        );
-      }
-    }
-
-    return updatedTaskList;
-  }, [props.task, datas.filteredTasks]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        inputRef.current &&
-        !inputRef.current.contains(event.target as Node) &&
-        editMode
-      ) {
-        inputTask && updateTaskNameHandler(inputTask, taskName);
-      }
-    };
-
-    // Attach the event listener
-    document.addEventListener('mousedown', handleClickOutside);
-
-    // Clean up the event listener on component unmount
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [inputTask, taskName, updateTaskNameHandler, editMode]);
-
-  // Handling Hotkeys
-  const handleCommandKeySequence = useCallback(() => {
-    if (!editMode) {
-      setEditMode(true);
-      if (targetEl.current) {
-        targetEl.current.focus();
-      }
-    } else {
-      setEditMode(false);
-    }
-  }, [setEditMode, editMode, targetEl]);
-  useHotkeys(HostKeys.CREATE_TASK, handleCommandKeySequence);
-
-  useEffect(() => {
-    if (props.autoFocus && targetEl.current) {
-      targetEl.current.focus();
-    }
-  }, [props.autoFocus, targetEl]);
-
-  const inputField = (
-    <InputField
-      // value={taskName}
-      disabled={timerRunningStatus}
-      // ref={targetEl}
-      autoFocus={props.autoFocus}
-      wrapperClassName={`rounded-lg dark:bg-[#1B1D22]`}
-      placeholder={props.placeholder || t('form.TASK_INPUT_PLACEHOLDER')}
-      onFocus={(e) => {
-        setEditMode(true);
-        props.autoInputSelectText && setTimeout(() => e?.target?.select(), 10);
-      }}
-      onChange={(event) => {
-        setTaskName(event.target.value);
-      }}
-      onKeyUp={(e) => {
-        if (e.key === 'Enter' && inputTask) {
-          /* If createOnEnterClick is false then updateTaskNameHandler is called. */
-          !props.createOnEnterClick &&
-            updateTaskNameHandler(inputTask, taskName);
-
-          props.onEnterKey && props.onEnterKey(taskName, inputTask);
-        }
-        /* Creating a new task when the enter key is pressed. */
-        if (e.key === 'Enter') {
-          props.createOnEnterClick && handleTaskCreation();
-        }
-      }}
-      trailingNode={
-        /* Showing the spinner when the task is being updated. */
-        <div className="flex items-center justify-center h-full p-2">
-          {props.task ? (
-            (updateLoading || props.inputLoader) && <SpinnerLoader size={25} />
-          ) : (
-            <>{updateLoading && <SpinnerLoader size={25} />}</>
-          )}
-        </div>
-      }
-      className={clsxm(
-        showTaskNumber && inputTask && ['pl-2'],
-        'dark:bg-[#1B1D22]',
-        props.initEditMode && 'h-10'
-      )}
-      /* Showing the task number. */
-      leadingNode={
-        // showTaskNumber &&
-        // inputTask &&
-        <div
-          className="flex items-center pl-3 space-x-2"
-          ref={ignoreElementRef}
-        >
-          <TaskIssuesDropdown
-            taskStatusClassName="!px-1 py-1 rounded-sm"
-            showIssueLabels={false}
-            onValueChange={(v) => setTaskIssue(v)}
-          />
-        </div>
-      }
-    />
-  );
-
-  const taskCard = (
-    <TaskCard
-      datas={datas}
-      inputField={viewType ? inputField : undefined}
-      fullWidth={props.fullWidthCombobox}
-      fullHeight={props.fullHeightCombobox}
-      kanbanTitle={props.kanbanTitle ?? 'open'}
-      handleTaskCreation={handleTaskCreation}
-      cardWithoutShadow={props.cardWithoutShadow}
-      updatedTaskList={updatedTaskList}
-    />
-  );
-
-  return taskCard;
+	const handleTaskCreation = useCallback(async () => {
+		/* Checking if the `handleTaskCreation` is available and if the `hasCreateForm` is true. */
+		datas &&
+			datas.handleTaskCreation &&
+			datas.hasCreateForm &&
+			datas
+				.handleTaskCreation({
+					autoActiveTask: true,
+					autoAssignTaskAuth: props.autoAssignTaskAuth,
+					assignToUsers: props.usersTaskCreatedAssignTo || []
+				})
+				?.then(onTaskCreated)
+				.finally(async () => {
+					setTaskName('');
+
+					props.onClose && props.onClose();
+				});
+	}, [datas, props, onTaskCreated]);
+
+	const updatedTaskList = useMemo(() => {
+		let updatedTaskList: ITeamTask[] = [];
+		if (props.forParentChildRelationship) {
+			if (
+				// Story can have ParentId set to Epic ID
+				props.task?.issueType === 'Story'
+			) {
+				updatedTaskList = datas.filteredTasks.filter((item) => item.issueType === 'Epic');
+			} else if (
+				// TASK|BUG can have ParentId to be set either to Story ID or Epic ID
+				props.task?.issueType === 'Task' ||
+				props.task?.issueType === 'Bug' ||
+				!props.task?.issueType
+			) {
+				updatedTaskList = datas.filteredTasks.filter(
+					(item) => item.issueType === 'Epic' || item.issueType === 'Story'
+				);
+			} else {
+				updatedTaskList = datas.filteredTasks;
+			}
+
+			if (props.task?.children && props.task?.children?.length) {
+				const childrenTaskIds = props.task?.children?.map((item) => item.id);
+				updatedTaskList = updatedTaskList.filter((item) => !childrenTaskIds.includes(item.id));
+			}
+		}
+
+		return updatedTaskList;
+	}, [props.task, datas.filteredTasks]);
+
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (inputRef.current && !inputRef.current.contains(event.target as Node) && editMode) {
+				inputTask && updateTaskNameHandler(inputTask, taskName);
+			}
+		};
+
+		// Attach the event listener
+		document.addEventListener('mousedown', handleClickOutside);
+
+		// Clean up the event listener on component unmount
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [inputTask, taskName, updateTaskNameHandler, editMode]);
+
+	// Handling Hotkeys
+	const handleCommandKeySequence = useCallback(() => {
+		if (!editMode) {
+			setEditMode(true);
+			if (targetEl.current) {
+				targetEl.current.focus();
+			}
+		} else {
+			setEditMode(false);
+		}
+	}, [setEditMode, editMode, targetEl]);
+	useHotkeys(HostKeys.CREATE_TASK, handleCommandKeySequence);
+
+	useEffect(() => {
+		if (props.autoFocus && targetEl.current) {
+			targetEl.current.focus();
+		}
+	}, [props.autoFocus, targetEl]);
+
+	const inputField = (
+		<InputField
+			// value={taskName}
+			disabled={timerRunningStatus}
+			// ref={targetEl}
+			autoFocus={props.autoFocus}
+			wrapperClassName={`rounded-lg dark:bg-[#1B1D22]`}
+			placeholder={props.placeholder || t('form.TASK_INPUT_PLACEHOLDER')}
+			onFocus={(e) => {
+				setEditMode(true);
+				props.autoInputSelectText && setTimeout(() => e?.target?.select(), 10);
+			}}
+			onChange={(event) => {
+				setTaskName(event.target.value);
+			}}
+			onKeyUp={(e) => {
+				if (e.key === 'Enter' && inputTask) {
+					/* If createOnEnterClick is false then updateTaskNameHandler is called. */
+					!props.createOnEnterClick && updateTaskNameHandler(inputTask, taskName);
+
+					props.onEnterKey && props.onEnterKey(taskName, inputTask);
+				}
+				/* Creating a new task when the enter key is pressed. */
+				if (e.key === 'Enter') {
+					props.createOnEnterClick && handleTaskCreation();
+				}
+			}}
+			trailingNode={
+				/* Showing the spinner when the task is being updated. */
+				<div className="flex items-center justify-center h-full p-2">
+					{props.task ? (
+						(updateLoading || props.inputLoader) && <SpinnerLoader size={25} />
+					) : (
+						<>{updateLoading && <SpinnerLoader size={25} />}</>
+					)}
+				</div>
+			}
+			className={clsxm(
+				showTaskNumber && inputTask && ['pl-2'],
+				'dark:bg-[#1B1D22]',
+				props.initEditMode && 'h-10'
+			)}
+			/* Showing the task number. */
+			leadingNode={
+				// showTaskNumber &&
+				// inputTask &&
+				<div className="flex items-center pl-3 space-x-2" ref={ignoreElementRef}>
+					<TaskIssuesDropdown
+						taskStatusClassName="!px-1 py-1 rounded-sm"
+						showIssueLabels={false}
+						onValueChange={(v) => setTaskIssue(v)}
+					/>
+				</div>
+			}
+		/>
+	);
+
+	const taskCard = (
+		<TaskCard
+			datas={datas}
+			inputField={viewType ? inputField : undefined}
+			fullWidth={props.fullWidthCombobox}
+			fullHeight={props.fullHeightCombobox}
+			kanbanTitle={props.kanbanTitle ?? 'open'}
+			handleTaskCreation={handleTaskCreation}
+			cardWithoutShadow={props.cardWithoutShadow}
+			updatedTaskList={updatedTaskList}
+		/>
+	);
+
+	return taskCard;
 }
 
 /**
  * A component that is used to render the task list.
  */
 function TaskCard({
-  datas,
-  inputField,
-  kanbanTitle,
-  handleTaskCreation
+	datas,
+	inputField,
+	kanbanTitle,
+	handleTaskCreation
 }: {
-  datas: Partial<RTuseTaskInput>;
-  inputField?: JSX.Element;
-  kanbanTitle: string;
-  fullWidth?: boolean;
-  fullHeight?: boolean;
-  handleTaskCreation: () => void;
-  cardWithoutShadow?: boolean;
-  updatedTaskList?: ITeamTask[];
+	datas: Partial<RTuseTaskInput>;
+	inputField?: JSX.Element;
+	kanbanTitle: string;
+	fullWidth?: boolean;
+	fullHeight?: boolean;
+	handleTaskCreation: () => void;
+	cardWithoutShadow?: boolean;
+	updatedTaskList?: ITeamTask[];
 }) {
-  const t = useTranslations();
-  const activeTaskEl = useRef<HTMLLIElement | null>(null);
-  const { taskLabels: taskLabelsData } = useTaskLabels();
-
-  const {
-    taskStatus,
-    taskPriority,
-    taskSize,
-    taskDescription,
-    taskLabels
-  } = datas;
-  useEffect(() => {
-    if (taskStatus) {
-      taskStatus.current = kanbanTitle ?? 'open';
-    }
-  }, [taskStatus, datas.hasCreateForm, kanbanTitle]);
-  useEffect(() => {
-    if (datas.editMode) {
-      window.setTimeout(() => {
-        activeTaskEl?.current?.scrollIntoView({
-          block: 'nearest',
-          inline: 'start'
-        });
-      }, 10);
-    }
-  }, [datas.editMode]);
-  const taskStatusHook = useTaskStatus();
-  return (
-    <>
-      <Card shadow="custom">
-        {inputField}
-        <div>
-          {/* Create team button */}
-
-          <div className="flex flex-col gap-y-2">
-            {datas.hasCreateForm && (
-              <div>
-                <InputField
-                  placeholder="Description"
-                  onChange={(e) => {
-                    if (taskDescription) {
-                      taskDescription.current = e.target.value;
-                    }
-                  }}
-                  className={'dark:bg-[#1B1D22]'}
-                />
-
-                <div className="flex flex-wrap justify-start gap-2">
-                  <ActiveTaskPropertiesDropdown
-                    className="lg:min-w-[170px]"
-                    taskStatusClassName="h-7 text-xs"
-                    onValueChange={(v) => {
-                      if (v && taskPriority) {
-                        taskPriority.current = v;
-                      }
-                    }}
-                    defaultValue={taskPriority?.current as ITaskPriority}
-                    task={null}
-                  />
-
-                  <ActiveTaskSizesDropdown
-                    className="lg:min-w-[170px]"
-                    taskStatusClassName="h-7 text-xs"
-                    onValueChange={(v) => {
-                      if (v && taskSize) {
-                        taskSize.current = v;
-                      }
-                    }}
-                    defaultValue={taskSize?.current as ITaskSize}
-                    task={null}
-                  />
-                  <TaskLabels
-                    className="lg:min-w-[170px] text-xs"
-                    forDetails={false}
-                    taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] h-7 text-xs"
-                    onValueChange={(_: any, values: string[] | undefined) => {
-                      taskLabelsData.filter((tag) =>
-                        tag.name ? values?.includes(tag.name) : false
-                      );
-
-                      if (taskLabels && values?.length) {
-                        taskLabels.current = taskLabelsData.filter((tag) =>
-                          tag.name ? values?.includes(tag.name) : false
-                        );
-                      }
-                    }}
-                    task={datas.inputTask}
-                  />
-                </div>
-              </div>
-            )}
-
-            <Tooltip
-              enabled={!datas.user?.isEmailVerified}
-              label={t('common.VERIFY_ACCOUNT_MSG')}
-              placement="top-start"
-              className="inline-block"
-            >
-              <Button
-                variant="outline"
-                disabled={
-                  !datas.hasCreateForm ||
-                  datas.createLoading ||
-                  !datas.user?.isEmailVerified
-                }
-                loading={datas.createLoading}
-                className="font-normal text-sm rounded-xl min-w-[240px] max-w-[240px] inline-flex"
-                onClick={() => {
-                  handleTaskCreation();
-                  setTimeout(() => {
-                    taskStatusHook.loadTaskStatusData();
-                  }, 4000);
-                }}
-              >
-                {!datas.createLoading && (
-                  <PlusIcon className="w-[16px] h-[16px]" />
-                )}
-                {t('common.CREATE_TASK')}
-              </Button>
-            </Tooltip>
-          </div>
-        </div>
-      </Card>
-
-      {/* Just some spaces at the end */}
-      <div className="w-2 h-5 opacity-0">{'|'}</div>
-    </>
-  );
+	const t = useTranslations();
+	const activeTaskEl = useRef<HTMLLIElement | null>(null);
+	const { taskLabels: taskLabelsData } = useTaskLabels();
+
+	const { taskStatus, taskPriority, taskSize, taskDescription, taskLabels } = datas;
+	useEffect(() => {
+		if (taskStatus) {
+			taskStatus.current = kanbanTitle ?? 'open';
+		}
+	}, [taskStatus, datas.hasCreateForm, kanbanTitle]);
+	useEffect(() => {
+		if (datas.editMode) {
+			window.setTimeout(() => {
+				activeTaskEl?.current?.scrollIntoView({
+					block: 'nearest',
+					inline: 'start'
+				});
+			}, 10);
+		}
+	}, [datas.editMode]);
+	const taskStatusHook = useTaskStatus();
+	return (
+		<>
+			<Card shadow="custom">
+				{inputField}
+				<div>
+					{/* Create team button */}
+
+					<div className="flex flex-col gap-y-2">
+						{datas.hasCreateForm && (
+							<div>
+								<InputField
+									placeholder="Description"
+									onChange={(e) => {
+										if (taskDescription) {
+											taskDescription.current = e.target.value;
+										}
+									}}
+									className={'dark:bg-[#1B1D22]'}
+								/>
+
+								<div className="flex flex-wrap justify-start gap-2">
+									<ActiveTaskPropertiesDropdown
+										className="lg:min-w-[170px]"
+										taskStatusClassName="h-7 text-xs"
+										onValueChange={(v) => {
+											if (v && taskPriority) {
+												taskPriority.current = v;
+											}
+										}}
+										defaultValue={taskPriority?.current as ITaskPriority}
+										task={null}
+									/>
+
+									<ActiveTaskSizesDropdown
+										className="lg:min-w-[170px]"
+										taskStatusClassName="h-7 text-xs"
+										onValueChange={(v) => {
+											if (v && taskSize) {
+												taskSize.current = v;
+											}
+										}}
+										defaultValue={taskSize?.current as ITaskSize}
+										task={null}
+									/>
+									<TaskLabels
+										className="lg:min-w-[170px] text-xs"
+										forDetails={false}
+										taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] h-7 text-xs"
+										onValueChange={(_: any, values: string[] | undefined) => {
+											taskLabelsData.filter((tag) =>
+												tag.name ? values?.includes(tag.name) : false
+											);
+
+											if (taskLabels && values?.length) {
+												taskLabels.current = taskLabelsData.filter((tag) =>
+													tag.name ? values?.includes(tag.name) : false
+												);
+											}
+										}}
+										task={datas.inputTask}
+									/>
+								</div>
+							</div>
+						)}
+
+						<Tooltip
+							enabled={!datas.user?.isEmailVerified}
+							label={t('common.VERIFY_ACCOUNT_MSG')}
+							placement="top-start"
+							className="inline-block"
+						>
+							<Button
+								variant="outline"
+								disabled={!datas.hasCreateForm || datas.createLoading || !datas.user?.isEmailVerified}
+								loading={datas.createLoading}
+								className="font-normal text-sm rounded-xl min-w-[240px] max-w-[230px] inline-flex"
+								onClick={() => {
+									handleTaskCreation();
+									setTimeout(() => {
+										taskStatusHook.loadTaskStatusData();
+									}, 4000);
+								}}
+							>
+								{!datas.createLoading && <PlusIcon className="w-[16px] h-[16px]" />}
+								{t('common.CREATE_TASK')}
+							</Button>
+						</Tooltip>
+					</div>
+				</div>
+			</Card>
+
+			{/* Just some spaces at the end */}
+			<div className="w-2 h-5 opacity-0">{'|'}</div>
+		</>
+	);
 }
diff --git a/apps/web/lib/features/task/task-input.tsx b/apps/web/lib/features/task/task-input.tsx
index f63ad9ed9..a05abd268 100644
--- a/apps/web/lib/features/task/task-input.tsx
+++ b/apps/web/lib/features/task/task-input.tsx
@@ -1,61 +1,49 @@
 'use client';
 
 import {
-  HostKeys,
-  RTuseTaskInput,
-  useAuthenticateUser,
-  useCallbackRef,
-  useHotkeys,
-  useIssueType,
-  useOrganizationEmployeeTeams,
-  useOrganizationTeams,
-  useOutsideClick,
-  useTaskInput,
-  useTaskLabels
+	HostKeys,
+	RTuseTaskInput,
+	useAuthenticateUser,
+	useCallbackRef,
+	useHotkeys,
+	useIssueType,
+	useOrganizationEmployeeTeams,
+	useOrganizationTeams,
+	useOutsideClick,
+	useTaskInput,
+	useTaskLabels
 } from '@app/hooks';
 import {
-  IIssueTypesItemList,
-  ITaskIssue,
-  ITaskPriority,
-  ITaskSize,
-  ITaskStatus,
-  ITeamTask,
-  Nullable,
-  OT_Member
+	IIssueTypesItemList,
+	ITaskIssue,
+	ITaskPriority,
+	ITaskSize,
+	ITaskStatus,
+	ITeamTask,
+	Nullable,
+	OT_Member
 } from '@app/interfaces';
 import { activeTeamTaskId, timerStatusState } from '@app/stores';
 import { clsxm } from '@app/utils';
 import { Combobox, Popover, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon, PlusIcon } from '@heroicons/react/20/solid';
-import {
-  Button,
-  Card,
-  Divider,
-  InputField,
-  OutlineBadge,
-  SpinnerLoader,
-  Tooltip
-} from 'lib/components';
+import { Button, Card, Divider, InputField, OutlineBadge, SpinnerLoader, Tooltip } from 'lib/components';
 import { CheckCircleTickIcon as TickCircleIcon } from 'assets/svg';
 import {
-  Fragment,
-  MutableRefObject,
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
+	Fragment,
+	MutableRefObject,
+	PropsWithChildren,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState
 } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { ActiveTaskIssuesDropdown, TaskIssuesDropdown } from './task-issue';
 import { TaskItem } from './task-item';
 import { TaskLabels } from './task-labels';
-import {
-  ActiveTaskPropertiesDropdown,
-  ActiveTaskSizesDropdown,
-  ActiveTaskStatusDropdown
-} from './task-status';
+import { ActiveTaskPropertiesDropdown, ActiveTaskSizesDropdown, ActiveTaskStatusDropdown } from './task-status';
 import { useTranslations } from 'next-intl';
 import { useInfinityScrolling } from '@app/hooks/useInfinityFetch';
 import { ObserverComponent } from '@components/shared/Observer';
@@ -63,32 +51,32 @@ import { LazyRender } from 'lib/components/lazy-render';
 import { ProjectDropDown } from '@components/pages/task/details-section/blocks/task-secondary-info';
 
 type Props = {
-  task?: Nullable<ITeamTask>;
-  tasks?: ITeamTask[];
-  onTaskClick?: (task: ITeamTask) => void;
-  initEditMode?: boolean;
-  onCloseCombobox?: () => void;
-  inputLoader?: boolean;
-  onEnterKey?: (taskName: string, task: ITeamTask) => void;
-  keepOpen?: boolean;
-  loadingRef?: MutableRefObject<boolean>;
-  closeable_fc?: () => void;
-  viewType?: 'input-trigger' | 'one-view';
-  createOnEnterClick?: boolean;
-  showTaskNumber?: boolean;
-  showCombobox?: boolean;
-  showEmoji?: boolean;
-  autoAssignTaskAuth?: boolean;
-  fullWidthCombobox?: boolean;
-  fullHeightCombobox?: boolean;
-  placeholder?: string;
-  autoFocus?: boolean;
-  autoInputSelectText?: boolean;
-  usersTaskCreatedAssignTo?: { id: string }[];
-  onTaskCreated?: (task: ITeamTask | undefined) => void;
-  cardWithoutShadow?: boolean;
-  assignTaskPopup?: boolean;
-  forParentChildRelationship?: boolean;
+	task?: Nullable<ITeamTask>;
+	tasks?: ITeamTask[];
+	onTaskClick?: (task: ITeamTask) => void;
+	initEditMode?: boolean;
+	onCloseCombobox?: () => void;
+	inputLoader?: boolean;
+	onEnterKey?: (taskName: string, task: ITeamTask) => void;
+	keepOpen?: boolean;
+	loadingRef?: MutableRefObject<boolean>;
+	closeable_fc?: () => void;
+	viewType?: 'input-trigger' | 'one-view';
+	createOnEnterClick?: boolean;
+	showTaskNumber?: boolean;
+	showCombobox?: boolean;
+	showEmoji?: boolean;
+	autoAssignTaskAuth?: boolean;
+	fullWidthCombobox?: boolean;
+	fullHeightCombobox?: boolean;
+	placeholder?: string;
+	autoFocus?: boolean;
+	autoInputSelectText?: boolean;
+	usersTaskCreatedAssignTo?: { id: string }[];
+	onTaskCreated?: (task: ITeamTask | undefined) => void;
+	cardWithoutShadow?: boolean;
+	assignTaskPopup?: boolean;
+	forParentChildRelationship?: boolean;
 } & PropsWithChildren;
 
 /**
@@ -99,357 +87,324 @@ type Props = {
  */
 
 export function TaskInput(props: Props) {
-  const t = useTranslations();
-  const { issueTypes } = useIssueType();
-  const defaultIssueType: IIssueTypesItemList | undefined = issueTypes.find(
-    (issue) => issue.isDefault
-  );
-
-  const {
-    viewType = 'input-trigger',
-    showTaskNumber = false,
-    showCombobox = true,
-  } = props;
-
-  const datas = useTaskInput({
-    task: props.task,
-    initEditMode: props.initEditMode,
-    tasks: props.tasks
-  });
-
-  const { updateOrganizationTeamEmployee } = useOrganizationEmployeeTeams();
-  const { activeTeam } = useOrganizationTeams();
-  const { user } = useAuthenticateUser();
-
-  const onCloseComboboxRef = useCallbackRef(props.onCloseCombobox);
-  const closeable_fcRef = useCallbackRef(props.closeable_fc);
-  const $onTaskClick = useCallbackRef(props.onTaskClick);
-  const $onTaskCreated = useCallbackRef(props.onTaskCreated);
-  const inputRef = useRef<HTMLDivElement>(null);
-  const timerStatus = useAtomValue(timerStatusState);
-  const timerRunningStatus = useMemo(() => {
-    return Boolean(timerStatus?.running);
-  }, [timerStatus]);
-
-  const onTaskCreated = useCallback(
-    (task: ITeamTask | undefined) =>
-      $onTaskCreated.current && $onTaskCreated.current(task),
-    [$onTaskCreated]
-  );
-
-  const onTaskClick = useCallback(
-    (task: ITeamTask) => $onTaskClick.current && $onTaskClick.current(task),
-    [$onTaskClick]
-  );
-
-  const {
-    inputTask,
-    setTaskIssue,
-    editMode,
-    setEditMode,
-    setQuery,
-    updateLoading,
-    updateTaskTitleHandler,
-    setFilter
-  } = datas;
-  const setActiveTask = useSetAtom(activeTeamTaskId);
-
-  const inputTaskTitle = useMemo(() => inputTask?.title || '', [
-    inputTask?.title
-  ]);
-
-  const [taskName, setTaskName] = useState('');
-
-  const { targetEl, ignoreElementRef } = useOutsideClick<HTMLInputElement>(
-    () => !props.keepOpen && setEditMode(false)
-  );
-
-  useEffect(() => {
-    setQuery(taskName === inputTask?.title ? '' : taskName);
-  }, [taskName, inputTask, setQuery]);
-
-  useEffect(() => {
-    setTaskName(inputTaskTitle);
-  }, [editMode, inputTaskTitle]);
-
-  useEffect(() => {
-    /**
-     * Call onCloseCombobox only when the menu has been closed
-     */
-    !editMode && onCloseComboboxRef.current && onCloseComboboxRef.current();
-  }, [editMode, onCloseComboboxRef]);
-
-  /**
-   * set the active task for the authenticated user
-   */
-  const setAuthActiveTask = useCallback(
-    (task: ITeamTask) => {
-      if (datas.setActiveTask) {
-        datas.setActiveTask(task);
-
-        // Update Current user's active task to sync across multiple devices
-        const currentEmployeeDetails = activeTeam?.members.find(
-          (member) => member.employeeId === user?.employee?.id
-        );
-        if (currentEmployeeDetails && currentEmployeeDetails.id) {
-          updateOrganizationTeamEmployee(currentEmployeeDetails.id, {
-            organizationId: task.organizationId,
-            activeTaskId: task.id,
-            organizationTeamId: activeTeam?.id,
-            tenantId: activeTeam?.tenantId
-          });
-        }
-      }
-      setEditMode(false);
-    },
-    [datas, setEditMode, activeTeam, user, updateOrganizationTeamEmployee]
-  );
-
-  /**
-   * On update task name
-   */
-  const updateTaskNameHandler = useCallback(
-    (task: ITeamTask, title: string) => {
-      if (task.title !== title) {
-        !updateLoading && updateTaskTitleHandler(task, title);
-      }
-    },
-    [updateLoading, updateTaskTitleHandler]
-  );
-
-  /**
-   * Signle parent about updating and close event (that can trigger close component e.g)
-   */
-  useEffect(() => {
-    if (props.loadingRef?.current && !updateLoading) {
-      closeable_fcRef.current && closeable_fcRef.current();
-    }
-
-    if (props.loadingRef) {
-      props.loadingRef.current = updateLoading;
-    }
-  }, [updateLoading, props.loadingRef, closeable_fcRef]);
-
-  /* Setting the filter to open when the edit mode is true. */
-  useEffect(() => {
-    editMode && setFilter('open');
-  }, [editMode, setFilter]);
-
-  /*
+	const t = useTranslations();
+	const { issueTypes } = useIssueType();
+	const defaultIssueType: IIssueTypesItemList | undefined = issueTypes.find((issue) => issue.isDefault);
+
+	const { viewType = 'input-trigger', showTaskNumber = false, showCombobox = true } = props;
+
+	const datas = useTaskInput({
+		task: props.task,
+		initEditMode: props.initEditMode,
+		tasks: props.tasks
+	});
+
+	const { updateOrganizationTeamEmployee } = useOrganizationEmployeeTeams();
+	const { activeTeam } = useOrganizationTeams();
+	const { user } = useAuthenticateUser();
+
+	const onCloseComboboxRef = useCallbackRef(props.onCloseCombobox);
+	const closeable_fcRef = useCallbackRef(props.closeable_fc);
+	const $onTaskClick = useCallbackRef(props.onTaskClick);
+	const $onTaskCreated = useCallbackRef(props.onTaskCreated);
+	const inputRef = useRef<HTMLDivElement>(null);
+	const timerStatus = useAtomValue(timerStatusState);
+	const timerRunningStatus = useMemo(() => {
+		return Boolean(timerStatus?.running);
+	}, [timerStatus]);
+
+	const onTaskCreated = useCallback(
+		(task: ITeamTask | undefined) => $onTaskCreated.current && $onTaskCreated.current(task),
+		[$onTaskCreated]
+	);
+
+	const onTaskClick = useCallback(
+		(task: ITeamTask) => $onTaskClick.current && $onTaskClick.current(task),
+		[$onTaskClick]
+	);
+
+	const {
+		inputTask,
+		setTaskIssue,
+		editMode,
+		setEditMode,
+		setQuery,
+		updateLoading,
+		updateTaskTitleHandler,
+		setFilter
+	} = datas;
+	const setActiveTask = useSetAtom(activeTeamTaskId);
+
+	const inputTaskTitle = useMemo(() => inputTask?.title || '', [inputTask?.title]);
+
+	const [taskName, setTaskName] = useState('');
+
+	const { targetEl, ignoreElementRef } = useOutsideClick<HTMLInputElement>(
+		() => !props.keepOpen && setEditMode(false)
+	);
+
+	useEffect(() => {
+		setQuery(taskName === inputTask?.title ? '' : taskName);
+	}, [taskName, inputTask, setQuery]);
+
+	useEffect(() => {
+		setTaskName(inputTaskTitle);
+	}, [editMode, inputTaskTitle]);
+
+	useEffect(() => {
+		/**
+		 * Call onCloseCombobox only when the menu has been closed
+		 */
+		!editMode && onCloseComboboxRef.current && onCloseComboboxRef.current();
+	}, [editMode, onCloseComboboxRef]);
+
+	/**
+	 * set the active task for the authenticated user
+	 */
+	const setAuthActiveTask = useCallback(
+		(task: ITeamTask) => {
+			if (datas.setActiveTask) {
+				datas.setActiveTask(task);
+
+				// Update Current user's active task to sync across multiple devices
+				const currentEmployeeDetails = activeTeam?.members.find(
+					(member) => member.employeeId === user?.employee?.id
+				);
+				if (currentEmployeeDetails && currentEmployeeDetails.id) {
+					updateOrganizationTeamEmployee(currentEmployeeDetails.id, {
+						organizationId: task.organizationId,
+						activeTaskId: task.id,
+						organizationTeamId: activeTeam?.id,
+						tenantId: activeTeam?.tenantId
+					});
+				}
+			}
+			setEditMode(false);
+		},
+		[datas, setEditMode, activeTeam, user, updateOrganizationTeamEmployee]
+	);
+
+	/**
+	 * On update task name
+	 */
+	const updateTaskNameHandler = useCallback(
+		(task: ITeamTask, title: string) => {
+			if (task.title !== title) {
+				!updateLoading && updateTaskTitleHandler(task, title);
+			}
+		},
+		[updateLoading, updateTaskTitleHandler]
+	);
+
+	/**
+	 * Signle parent about updating and close event (that can trigger close component e.g)
+	 */
+	useEffect(() => {
+		if (props.loadingRef?.current && !updateLoading) {
+			closeable_fcRef.current && closeable_fcRef.current();
+		}
+
+		if (props.loadingRef) {
+			props.loadingRef.current = updateLoading;
+		}
+	}, [updateLoading, props.loadingRef, closeable_fcRef]);
+
+	/* Setting the filter to open when the edit mode is true. */
+	useEffect(() => {
+		editMode && setFilter('open');
+	}, [editMode, setFilter]);
+
+	/*
     If task is passed then we don't want to set the active task for the authenticated user.
     after task creation
    */
-  const autoActiveTask: boolean = props.task === undefined;
-  const handleTaskCreation = useCallback(() => {
-    /* Checking if the `handleTaskCreation` is available and if the `hasCreateForm` is true. */
-    datas &&
-      datas.handleTaskCreation &&
-      datas.hasCreateForm &&
-      datas
-        .handleTaskCreation({
-          autoActiveTask,
-          autoAssignTaskAuth: props.autoAssignTaskAuth,
-          assignToUsers: props.usersTaskCreatedAssignTo || []
-        })
-        ?.then(onTaskCreated)
-        .finally(() => {
-          viewType === 'one-view' && setTaskName('');
-        });
-  }, [datas, props, autoActiveTask, onTaskCreated, viewType]);
-
-  const updatedTaskList = useMemo(() => {
-    let updatedTaskList: ITeamTask[] = [];
-    if (props.forParentChildRelationship) {
-      if (
-        // Story can have ParentId set to Epic ID
-        props.task?.issueType === 'Story'
-      ) {
-        updatedTaskList = datas.filteredTasks.filter(
-          (item) => item.issueType === 'Epic'
-        );
-      } else if (
-        // TASK|BUG can have ParentId to be set either to Story ID or Epic ID
-        props.task?.issueType === 'Task' ||
-        props.task?.issueType === 'Bug' ||
-        !props.task?.issueType
-      ) {
-        updatedTaskList = datas.filteredTasks.filter(
-          (item) => item.issueType === 'Epic' || item.issueType === 'Story'
-        );
-      } else {
-        updatedTaskList = datas.filteredTasks;
-      }
-
-      if (props.task?.children && props.task?.children?.length) {
-        const childrenTaskIds = props.task?.children?.map((item) => item.id);
-        updatedTaskList = updatedTaskList.filter(
-          (item) => !childrenTaskIds.includes(item.id)
-        );
-      }
-    }
-
-    return updatedTaskList;
-  }, [props.task, datas.filteredTasks]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        inputRef.current &&
-        !inputRef.current.contains(event.target as Node) &&
-        editMode
-      ) {
-        // inputTask && updateTaskNameHandler(inputTask, taskName);
-        if (taskName == inputTaskTitle) {
-          setEditMode(false);
-          setActiveTask({
-            id: ''
-          });
-        }
-      }
-    };
-
-    // Attach the event listener
-    document.addEventListener('mousedown', handleClickOutside);
-
-    // Clean up the event listener on component unmount
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [
-    inputTask,
-    taskName,
-    setActiveTask,
-    updateTaskNameHandler,
-    editMode,
-    inputTaskTitle,
-    setEditMode
-  ]);
-  const [openPopoverId, setOpenPopoverId] = useState<string | null>(null);
-  const handlePopoverToggle = useCallback((popoverId: string) => {
-    if (openPopoverId === popoverId) {
-      setOpenPopoverId(null);
-    } else {
-      setOpenPopoverId(popoverId);
-    }
-  }, [openPopoverId]);
-
-  // Handling Hotkeys
-  const handleCommandKeySequence = useCallback(() => {
-    if (!editMode) {
-      setEditMode(true);
-      if (targetEl.current) {
-        targetEl.current.focus();
-      }
-    } else {
-      setEditMode(false);
-    }
-  }, [setEditMode, editMode, targetEl]);
-
-  useHotkeys(HostKeys.CREATE_TASK, handleCommandKeySequence);
-
-  useEffect(() => {
-    if (props.autoFocus && targetEl.current) {
-      targetEl.current.focus();
-    }
-  }, [props.autoFocus, targetEl]);
-
-  // const savedIssueType : string | null = localStorage.getItem('savedIssueType') as string && null;
-
-  const inputField = (
-    <InputField
-      value={taskName}
-      disabled={timerRunningStatus}
-      ref={targetEl}
-      emojis={
-        props.showEmoji === undefined || props.showCombobox ? true : false
-      }
-      setTaskName={setTaskName}
-      ignoreElementRefForTitle={
-        (ignoreElementRef as unknown) as MutableRefObject<HTMLDivElement>
-      }
-      autoFocus={props.autoFocus}
-      wrapperClassName={`rounded-lg dark:bg-[#1B1D22]`}
-      placeholder={props.placeholder || t('form.TASK_INPUT_PLACEHOLDER')}
-      onFocus={(e) => {
-        setEditMode(true);
-        props.autoInputSelectText && setTimeout(() => e?.target?.select(), 10);
-      }}
-      onChange={(event) => {
-        setTaskName(event.target.value);
-      }}
-      onKeyUp={(e) => {
-        if (e.key === 'Enter' && inputTask) {
-          /* If createOnEnterClick is false then updateTaskNameHandler is called. */
-          !props.createOnEnterClick &&
-            updateTaskNameHandler(inputTask, taskName);
-
-          props.onEnterKey && props.onEnterKey(taskName, inputTask);
-        }
-        /* Creating a new task when the enter key is pressed. */
-        if (e.key === 'Enter') {
-          props.createOnEnterClick && handleTaskCreation();
-        }
-      }}
-      trailingNode={
-        /* Showing the spinner when the task is being updated. */
-        <div className="flex items-center justify-center h-full p-2">
-          {props.task ? (
-            (updateLoading || props.inputLoader) && <SpinnerLoader size={25} />
-          ) : (
-            <>{updateLoading && <SpinnerLoader size={25} />}</>
-          )}
-        </div>
-      }
-      className={clsxm(
-        showTaskNumber && inputTask && ['pl-2'],
-        'dark:bg-[#1B1D22]',
-        props.initEditMode && 'h-10'
-      )}
-      /* Showing the task number and issue type */
-      leadingNode={
-        // showTaskNumber &&
-        // inputTask &&
-        <div
-          className="flex items-center pl-3 space-x-2"
-          ref={ignoreElementRef}
-        >
-          {!datas.hasCreateForm ? (
-            <ActiveTaskIssuesDropdown
-              key={(inputTask && inputTask.id) || ''}
-              task={inputTask}
-              forParentChildRelationship={true}
-              taskStatusClassName={clsxm(
-                inputTask && inputTask.issueType === 'Bug'
-                  ? '!px-[0.3312rem] py-[0.2875rem] rounded-sm'
-                  : '!px-[0.375rem] py-[0.375rem] rounded-sm',
-                'border-none'
-              )}
-            />
-          ) : (
-            <TaskIssuesDropdown
-              taskStatusClassName="!px-1 py-1 rounded-sm"
-              showIssueLabels={false}
-              onValueChange={(v) => setTaskIssue(v)}
-              defaultValue={
-                defaultIssueType
-                  ? defaultIssueType.name
-                  : (localStorage.getItem('lastTaskIssue') as ITaskIssue) ||
-                  null
-              }
-            />
-          )}
-
-          {!datas.hasCreateForm && (
-            <span className="text-sm text-gray-500">
-              #{(inputTask && inputTask.taskNumber) || ''}
-            </span>
-          )}
-        </div>
-      }
-    />
-  );
-
-  const taskCard = (
+	const autoActiveTask: boolean = props.task === undefined;
+	const handleTaskCreation = useCallback(() => {
+		/* Checking if the `handleTaskCreation` is available and if the `hasCreateForm` is true. */
+		datas &&
+			datas.handleTaskCreation &&
+			datas.hasCreateForm &&
+			datas
+				.handleTaskCreation({
+					autoActiveTask,
+					autoAssignTaskAuth: props.autoAssignTaskAuth,
+					assignToUsers: props.usersTaskCreatedAssignTo || []
+				})
+				?.then(onTaskCreated)
+				.finally(() => {
+					viewType === 'one-view' && setTaskName('');
+				});
+	}, [datas, props, autoActiveTask, onTaskCreated, viewType]);
+
+	const updatedTaskList = useMemo(() => {
+		let updatedTaskList: ITeamTask[] = [];
+		if (props.forParentChildRelationship) {
+			if (
+				// Story can have ParentId set to Epic ID
+				props.task?.issueType === 'Story'
+			) {
+				updatedTaskList = datas.filteredTasks.filter((item) => item.issueType === 'Epic');
+			} else if (
+				// TASK|BUG can have ParentId to be set either to Story ID or Epic ID
+				props.task?.issueType === 'Task' ||
+				props.task?.issueType === 'Bug' ||
+				!props.task?.issueType
+			) {
+				updatedTaskList = datas.filteredTasks.filter(
+					(item) => item.issueType === 'Epic' || item.issueType === 'Story'
+				);
+			} else {
+				updatedTaskList = datas.filteredTasks;
+			}
+
+			if (props.task?.children && props.task?.children?.length) {
+				const childrenTaskIds = props.task?.children?.map((item) => item.id);
+				updatedTaskList = updatedTaskList.filter((item) => !childrenTaskIds.includes(item.id));
+			}
+		}
+
+		return updatedTaskList;
+	}, [props.task, datas.filteredTasks]);
+
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (inputRef.current && !inputRef.current.contains(event.target as Node) && editMode) {
+				// inputTask && updateTaskNameHandler(inputTask, taskName);
+				if (taskName == inputTaskTitle) {
+					setEditMode(false);
+					setActiveTask({
+						id: ''
+					});
+				}
+			}
+		};
+
+		// Attach the event listener
+		document.addEventListener('mousedown', handleClickOutside);
+
+		// Clean up the event listener on component unmount
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [inputTask, taskName, setActiveTask, updateTaskNameHandler, editMode, inputTaskTitle, setEditMode]);
+	const [openPopoverId, setOpenPopoverId] = useState<string | null>(null);
+	const handlePopoverToggle = useCallback(
+		(popoverId: string) => {
+			if (openPopoverId === popoverId) {
+				setOpenPopoverId(null);
+			} else {
+				setOpenPopoverId(popoverId);
+			}
+		},
+		[openPopoverId]
+	);
+
+	// Handling Hotkeys
+	const handleCommandKeySequence = useCallback(() => {
+		if (!editMode) {
+			setEditMode(true);
+			if (targetEl.current) {
+				targetEl.current.focus();
+			}
+		} else {
+			setEditMode(false);
+		}
+	}, [setEditMode, editMode, targetEl]);
+
+	useHotkeys(HostKeys.CREATE_TASK, handleCommandKeySequence);
+
+	useEffect(() => {
+		if (props.autoFocus && targetEl.current) {
+			targetEl.current.focus();
+		}
+	}, [props.autoFocus, targetEl]);
+
+	// const savedIssueType : string | null = localStorage.getItem('savedIssueType') as string && null;
+
+	const inputField = (
+		<InputField
+			value={taskName}
+			disabled={timerRunningStatus}
+			ref={targetEl}
+			emojis={props.showEmoji === undefined || props.showCombobox ? true : false}
+			setTaskName={setTaskName}
+			ignoreElementRefForTitle={ignoreElementRef as unknown as MutableRefObject<HTMLDivElement>}
+			autoFocus={props.autoFocus}
+			wrapperClassName={`rounded-lg dark:bg-[#1B1D22]`}
+			placeholder={props.placeholder || t('form.TASK_INPUT_PLACEHOLDER')}
+			onFocus={(e) => {
+				setEditMode(true);
+				props.autoInputSelectText && setTimeout(() => e?.target?.select(), 10);
+			}}
+			onChange={(event) => {
+				setTaskName(event.target.value);
+			}}
+			onKeyUp={(e) => {
+				if (e.key === 'Enter' && inputTask) {
+					/* If createOnEnterClick is false then updateTaskNameHandler is called. */
+					!props.createOnEnterClick && updateTaskNameHandler(inputTask, taskName);
+
+					props.onEnterKey && props.onEnterKey(taskName, inputTask);
+				}
+				/* Creating a new task when the enter key is pressed. */
+				if (e.key === 'Enter') {
+					props.createOnEnterClick && handleTaskCreation();
+				}
+			}}
+			trailingNode={
+				/* Showing the spinner when the task is being updated. */
+				<div className="flex items-center justify-center h-full p-2">
+					{props.task ? (
+						(updateLoading || props.inputLoader) && <SpinnerLoader size={25} />
+					) : (
+						<>{updateLoading && <SpinnerLoader size={25} />}</>
+					)}
+				</div>
+			}
+			className={clsxm(
+				showTaskNumber && inputTask && ['pl-2'],
+				'dark:bg-[#1B1D22]',
+				props.initEditMode && 'h-10'
+			)}
+			/* Showing the task number and issue type */
+			leadingNode={
+				// showTaskNumber &&
+				// inputTask &&
+				<div className="flex items-center pl-3 space-x-2" ref={ignoreElementRef}>
+					{!datas.hasCreateForm ? (
+						<ActiveTaskIssuesDropdown
+							key={(inputTask && inputTask.id) || ''}
+							task={inputTask}
+							forParentChildRelationship={true}
+							taskStatusClassName={clsxm(
+								inputTask && inputTask.issueType === 'Bug'
+									? '!px-[0.3312rem] py-[0.2875rem] rounded-sm'
+									: '!px-[0.375rem] py-[0.375rem] rounded-sm',
+								'border-none'
+							)}
+						/>
+					) : (
+						<TaskIssuesDropdown
+							taskStatusClassName="!px-1 py-1 rounded-sm"
+							showIssueLabels={false}
+							onValueChange={(v) => setTaskIssue(v)}
+							defaultValue={
+								defaultIssueType
+									? defaultIssueType.name
+									: (localStorage.getItem('lastTaskIssue') as ITaskIssue) || null
+							}
+						/>
+					)}
+
+					{!datas.hasCreateForm && (
+						<span className="text-sm text-gray-500">#{(inputTask && inputTask.taskNumber) || ''}</span>
+					)}
+				</div>
+			}
+		/>
+	);
+
+	const taskCard = (
 		<TaskCard
 			datas={datas}
 			onItemClick={props.task !== undefined || props.onTaskClick ? onTaskClick : setAuthActiveTask}
@@ -462,344 +417,306 @@ export function TaskInput(props: Props) {
 			updatedTaskList={updatedTaskList}
 			forParentChildRelationship={props.forParentChildRelationship}
 		/>
-  );
-
-  return viewType === 'one-view' ? (
-    taskCard
-  ) : (
-    <Popover
-      onClick={() => handlePopoverToggle('popover1')}
-      className="relative z-20 w-full" ref={inputRef}>
-      <Tooltip
-        label={t('common.TASK_INPUT_DISABLED_MESSAGE_WHEN_TIMER_RUNNING')}
-        placement="top"
-        enabled={timerRunningStatus}
-      >
-        {inputField}
-      </Tooltip>
-      {props.children}
-
-      <Transition
-        show={editMode && showCombobox}
-        enter="transition duration-100 ease-out"
-        enterFrom="transform scale-95 opacity-0"
-        enterTo="transform scale-100 opacity-100"
-        leave="transition duration-75 ease-out"
-        leaveFrom="transform scale-100 opacity-100"
-        leaveTo="transform scale-95 opacity-0"
-      >
-        <Popover.Panel
-          className={clsxm(
-            'absolute -mt-3',
-            props.fullWidthCombobox && ['w-full left-0 right-0']
-          )}
-          ref={ignoreElementRef}
-        >
-          {taskCard}
-        </Popover.Panel>
-      </Transition>
-    </Popover>
-  );
+	);
+
+	return viewType === 'one-view' ? (
+		taskCard
+	) : (
+		<Popover onClick={() => handlePopoverToggle('popover1')} className="relative z-20 w-full" ref={inputRef}>
+			<Tooltip
+				label={t('common.TASK_INPUT_DISABLED_MESSAGE_WHEN_TIMER_RUNNING')}
+				placement="top"
+				enabled={timerRunningStatus}
+			>
+				{inputField}
+			</Tooltip>
+			{props.children}
+
+			<Transition
+				show={editMode && showCombobox}
+				enter="transition duration-100 ease-out"
+				enterFrom="transform scale-95 opacity-0"
+				enterTo="transform scale-100 opacity-100"
+				leave="transition duration-75 ease-out"
+				leaveFrom="transform scale-100 opacity-100"
+				leaveTo="transform scale-95 opacity-0"
+			>
+				<Popover.Panel
+					className={clsxm('absolute -mt-3', props.fullWidthCombobox && ['w-full left-0 right-0'])}
+					ref={ignoreElementRef}
+				>
+					{taskCard}
+				</Popover.Panel>
+			</Transition>
+		</Popover>
+	);
 }
 
 /**
  * A component that is used to render the task list.
  */
 function TaskCard({
-  datas,
-  onItemClick,
-  inputField,
-  fullWidth,
-  fullHeight,
-  handleTaskCreation,
-  cardWithoutShadow,
-  forParentChildRelationship,
-  updatedTaskList,
-  assignTaskPopup,
+	datas,
+	onItemClick,
+	inputField,
+	fullWidth,
+	fullHeight,
+	handleTaskCreation,
+	cardWithoutShadow,
+	forParentChildRelationship,
+	updatedTaskList,
+	assignTaskPopup
 }: {
-  datas: Partial<RTuseTaskInput>;
-  onItemClick?: (task: ITeamTask) => void;
-  inputField?: JSX.Element;
-  fullWidth?: boolean;
-  fullHeight?: boolean;
-  handleTaskCreation: () => void;
-  cardWithoutShadow?: boolean;
-  forParentChildRelationship?: boolean;
-  updatedTaskList?: ITeamTask[];
-  assignTaskPopup?: boolean;
+	datas: Partial<RTuseTaskInput>;
+	onItemClick?: (task: ITeamTask) => void;
+	inputField?: JSX.Element;
+	fullWidth?: boolean;
+	fullHeight?: boolean;
+	handleTaskCreation: () => void;
+	cardWithoutShadow?: boolean;
+	forParentChildRelationship?: boolean;
+	updatedTaskList?: ITeamTask[];
+	assignTaskPopup?: boolean;
 }) {
-  const [, setCount] = useState(0);
-  const t = useTranslations();
-  const activeTaskEl = useRef<HTMLLIElement | null>(null);
-  const { taskLabels: taskLabelsData } = useTaskLabels();
-  const { activeTeam } = useOrganizationTeams();
-
-  const {
-    taskStatus,
-    taskPriority,
-    taskSize,
-    taskLabels,
-    taskDescription,
-	taskProject,
-	taskAssignees
-  } = datas;
-  const { nextOffset, data } = useInfinityScrolling(updatedTaskList ?? [], 5);
-
-  useEffect(() => {
-    if (datas.editMode) {
-      window.setTimeout(() => {
-        activeTaskEl?.current?.scrollIntoView({
-          block: 'nearest',
-          inline: 'start'
-        });
-      }, 10);
-    }
-  }, [datas.editMode]);
-
-  return (
-    <>
-      <Card
-        shadow="custom"
-        className={clsxm(
-          'rounded-xl md:px-4 md:py-4 overflow-hidden',
-          !cardWithoutShadow && ['shadow-xlcard'],
-          fullWidth ? ['w-full'] : ['md:w-[500px]'],
-          fullHeight ? 'h-full' : 'max-h-96'
-        )}
-      >
-        {inputField}
-        <div>
-          {/* Create team button */}
-          <div className="flex flex-col gap-y-2">
-            {datas.hasCreateForm && (
-              <div>
-                <InputField
-                  placeholder="Description"
-                  emojis={true}
-                  onChange={(e) => {
-                    if (taskDescription) {
-                      taskDescription.current = e.target.value;
-                    }
-                  }}
-                  className={'dark:bg-[#1B1D22]'}
-                />
-
-                <div className="flex justify-start gap-2">
-                  <ActiveTaskStatusDropdown
-                    className="lg:min-w-[170px]"
-                    taskStatusClassName="h-7 text-xs"
-                    onValueChange={(v) => {
-                      if (v && taskStatus) {
-                        taskStatus.current = v;
-                      }
-                      setCount((c) => c + 1);
-                    }}
-                    defaultValue={taskStatus?.current as ITaskStatus}
-                    task={null}
-                  />
-
-                  <ActiveTaskPropertiesDropdown
-                    className="lg:min-w-[170px]"
-                    taskStatusClassName="h-7 text-xs"
-                    onValueChange={(v) => {
-                      if (v && taskPriority) {
-                        taskPriority.current = v;
-                      }
-                      setCount((c) => c + 1);
-                    }}
-                    defaultValue={taskPriority?.current as ITaskPriority}
-                    task={null}
-                  />
-
-                  <ActiveTaskSizesDropdown
-                    className="lg:min-w-[170px]"
-                    taskStatusClassName="h-7 text-xs"
-                    onValueChange={(v) => {
-                      if (v && taskSize) {
-                        taskSize.current = v;
-                      }
-                      setCount((c) => c + 1);
-                    }}
-                    defaultValue={taskSize?.current as ITaskSize}
-                    task={null}
-                  />
-
-                  <TaskLabels
-                    className="lg:min-w-[170px] text-xs z-[9999]"
-                    forDetails={false}
-                    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
-                      );
-
-                      if (taskLabels && values?.length) {
-                        taskLabels.current = taskLabelsData.filter((tag) =>
-                          tag.name ? values?.includes(tag.name) : false
-                        );
-                      }
-                    }}
-                    task={datas.inputTask}
-                  />
-
-				{taskAssignees !== undefined && <AssigneesSelect assignees={taskAssignees}  teamMembers={activeTeam?.members ?? []}/>}
-
-
-					<ProjectDropDown
-						styles={{
-							container: 'rounded-xl w-[10.625rem] !max-w-[10.625rem]',
-							listCard: 'rounded-xl'
-						}}
-						controlled
-						onChange={(project) => {
-							if (taskProject) {
-								taskProject.current = project.id
-							}
-						}}
-					/>
-
-                </div>
-              </div>
-            )}
-
-            <Tooltip
-              enabled={!datas.user?.isEmailVerified}
-              label={t('common.VERIFY_ACCOUNT_MSG')}
-              placement="top-start"
-              className="inline-block"
-            >
-              <Button
-                variant="outline"
-                disabled={
-                  !datas.hasCreateForm ||
-                  datas.createLoading ||
-                  !datas.user?.isEmailVerified
-                }
-                loading={datas.createLoading}
-                className="font-normal text-sm rounded-xl min-w-[240px] max-w-[240px] inline-flex"
-                onClick={handleTaskCreation}
-              >
-                {!datas.createLoading && (
-                  <PlusIcon className="w-[16px] h-[16px]" />
-                )}
-                {t('common.CREATE_TASK')}
-              </Button>
-            </Tooltip>
-          </div>
-
-          {/* Task filter buttons  */}
-          <div className="flex mt-4 space-x-3">
-            <OutlineBadge
-              className="py-2 text-xs cursor-pointer input-border"
-              onClick={() => datas.setFilter && datas.setFilter('open')}
-            >
-              <div
-                className={clsxm(
-                  'w-4 h-4 rounded-full opacity-50 bg-green-300'
-                )}
-              />
-              <span
-                className={clsxm(
-                  datas.filter === 'open' && [
-                    'text-primary dark:text-primary-light font-semibold'
-                  ]
-                )}
-              >
-                {datas.openTaskCount || 0} {t('common.OPEN')}
-              </span>
-            </OutlineBadge>
-
-            <OutlineBadge
-              className="py-2 text-xs cursor-pointer input-border"
-              onClick={() => datas.setFilter && datas.setFilter('closed')}
-            >
-              <TickCircleIcon className="opacity-50 w-full max-w-[17px]" />
-              <span
-                className={clsxm(
-                  datas.filter === 'closed' && [
-                    'text-primary dark:text-primary-light font-semibold'
-                  ]
-                )}
-              >
-                {datas.closedTaskCount || 0} {t('common.CLOSED')}
-              </span>
-            </OutlineBadge>
-          </div>
-        </div>
-
-        <Divider className="mt-4" />
-        {/* Task list */}
-        <ul
-          className={
-            assignTaskPopup
-              ? 'py-6 max-h-[40vh] overflow-y-auto'
-              : 'py-6 max-h-56 overflow-y-auto'
-          }
-        >
-          {forParentChildRelationship && (
-            <LazyRender items={data || []}>
-              {(task, i) => {
-                const last = (datas.filteredTasks?.length || 0) - 1 === i;
-                const active = datas.inputTask === task;
-
-                return (
-                  <li key={task.id} ref={active ? activeTaskEl : undefined}>
-                    <TaskItem
-                      task={task}
-                      selected={active}
-                      onClick={onItemClick}
-                      className="cursor-pointer"
-                    />
-                    <ObserverComponent
-                      isLast={i === data.length - 1}
-                      getNextData={nextOffset}
-                    />
-                    {!last && <Divider className="my-5" />}
-                  </li>
-                );
-              }}
-            </LazyRender>
-          )}
-
-          {!forParentChildRelationship && (
-            <LazyRender items={datas.filteredTasks || []}>
-              {(task, i) => {
-                const last = (datas.filteredTasks?.length || 0) - 1 === i;
-                const active = datas.inputTask === task;
-
-                return (
-                  <li key={task.id} ref={active ? activeTaskEl : undefined}>
-                    <TaskItem
-                      task={task}
-                      selected={active}
-                      onClick={onItemClick}
-                      className="cursor-pointer"
-                    />
-
-                    {!last && <Divider className="my-5" />}
-                  </li>
-                );
-              }}
-            </LazyRender>
-          )}
-
-          {(forParentChildRelationship &&
-            updatedTaskList &&
-            updatedTaskList.length === 0) ||
-            (!forParentChildRelationship &&
-              datas.filteredTasks &&
-              datas.filteredTasks.length === 0 && (
-                <div className="text-center">{t('common.NO_TASKS')}</div>
-              ))}
-        </ul>
-      </Card>
-
-      {/* Just some spaces at the end */}
-      <div className="w-2 h-5 opacity-0">{'|'}</div>
-    </>
-  );
-}
+	const [, setCount] = useState(0);
+	const t = useTranslations();
+	const activeTaskEl = useRef<HTMLLIElement | null>(null);
+	const { taskLabels: taskLabelsData } = useTaskLabels();
+	const { activeTeam } = useOrganizationTeams();
+
+	const { taskStatus, taskPriority, taskSize, taskLabels, taskDescription, taskProject, taskAssignees } = datas;
+	const { nextOffset, data } = useInfinityScrolling(updatedTaskList ?? [], 5);
+
+	useEffect(() => {
+		if (datas.editMode) {
+			window.setTimeout(() => {
+				activeTaskEl?.current?.scrollIntoView({
+					block: 'nearest',
+					inline: 'start'
+				});
+			}, 10);
+		}
+	}, [datas.editMode]);
+
+	return (
+		<>
+			<Card
+				shadow="custom"
+				className={clsxm(
+					'rounded-xl md:px-4 md:py-4 overflow-hidden',
+					!cardWithoutShadow && ['shadow-xlcard'],
+					fullWidth ? ['w-full'] : ['md:w-[500px]'],
+					fullHeight ? 'h-full' : 'max-h-96'
+				)}
+			>
+				{inputField}
+				<div>
+					{/* Create team button */}
+					<div className="flex flex-col gap-y-2">
+						{datas.hasCreateForm && (
+							<div>
+								<InputField
+									placeholder="Description"
+									emojis={true}
+									onChange={(e) => {
+										if (taskDescription) {
+											taskDescription.current = e.target.value;
+										}
+									}}
+									className={'dark:bg-[#1B1D22]'}
+								/>
+
+								<div className="flex justify-start gap-2">
+									<ActiveTaskStatusDropdown
+										className="lg:min-w-[170px]"
+										taskStatusClassName="h-7 text-xs"
+										onValueChange={(v) => {
+											if (v && taskStatus) {
+												taskStatus.current = v;
+											}
+											setCount((c) => c + 1);
+										}}
+										defaultValue={taskStatus?.current as ITaskStatus}
+										task={null}
+									/>
+
+									<ActiveTaskPropertiesDropdown
+										className="lg:min-w-[170px]"
+										taskStatusClassName="h-7 text-xs"
+										onValueChange={(v) => {
+											if (v && taskPriority) {
+												taskPriority.current = v;
+											}
+											setCount((c) => c + 1);
+										}}
+										defaultValue={taskPriority?.current as ITaskPriority}
+										task={null}
+									/>
+
+									<ActiveTaskSizesDropdown
+										className="lg:min-w-[170px]"
+										taskStatusClassName="h-7 text-xs"
+										onValueChange={(v) => {
+											if (v && taskSize) {
+												taskSize.current = v;
+											}
+											setCount((c) => c + 1);
+										}}
+										defaultValue={taskSize?.current as ITaskSize}
+										task={null}
+									/>
+
+									<TaskLabels
+										className="lg:min-w-[170px] text-xs z-[9999]"
+										forDetails={false}
+										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
+											);
+
+											if (taskLabels && values?.length) {
+												taskLabels.current = taskLabelsData.filter((tag) =>
+													tag.name ? values?.includes(tag.name) : false
+												);
+											}
+										}}
+										task={datas.inputTask}
+									/>
+
+									{taskAssignees !== undefined && (
+										<AssigneesSelect
+											assignees={taskAssignees}
+											teamMembers={activeTeam?.members ?? []}
+										/>
+									)}
+
+									<ProjectDropDown
+										styles={{
+											container: 'rounded-xl w-[10.625rem] !max-w-[10.625rem]',
+											listCard: 'rounded-xl'
+										}}
+										controlled
+										onChange={(project) => {
+											if (taskProject) {
+												taskProject.current = project.id;
+											}
+										}}
+									/>
+								</div>
+							</div>
+						)}
+
+						<Tooltip
+							enabled={!datas.user?.isEmailVerified}
+							label={t('common.VERIFY_ACCOUNT_MSG')}
+							placement="top-start"
+							className="inline-block"
+						>
+							<Button
+								variant="outline"
+								disabled={!datas.hasCreateForm || datas.createLoading || !datas.user?.isEmailVerified}
+								loading={datas.createLoading}
+								className="font-normal text-sm rounded-xl min-w-[240px] max-w-[230px] inline-flex"
+								onClick={handleTaskCreation}
+							>
+								{!datas.createLoading && <PlusIcon className="w-[16px] h-[16px]" />}
+								{t('common.CREATE_TASK')}
+							</Button>
+						</Tooltip>
+					</div>
 
+					{/* Task filter buttons  */}
+					<div className="flex mt-4 space-x-3">
+						<OutlineBadge
+							className="py-2 text-xs cursor-pointer input-border"
+							onClick={() => datas.setFilter && datas.setFilter('open')}
+						>
+							<div className={clsxm('w-4 h-4 rounded-full opacity-50 bg-green-300')} />
+							<span
+								className={clsxm(
+									datas.filter === 'open' && ['text-primary dark:text-primary-light font-semibold']
+								)}
+							>
+								{datas.openTaskCount || 0} {t('common.OPEN')}
+							</span>
+						</OutlineBadge>
+
+						<OutlineBadge
+							className="py-2 text-xs cursor-pointer input-border"
+							onClick={() => datas.setFilter && datas.setFilter('closed')}
+						>
+							<TickCircleIcon className="opacity-50 w-full max-w-[17px]" />
+							<span
+								className={clsxm(
+									datas.filter === 'closed' && ['text-primary dark:text-primary-light font-semibold']
+								)}
+							>
+								{datas.closedTaskCount || 0} {t('common.CLOSED')}
+							</span>
+						</OutlineBadge>
+					</div>
+				</div>
+
+				<Divider className="mt-4" />
+				{/* Task list */}
+				<ul className={assignTaskPopup ? 'py-6 max-h-[40vh] overflow-y-auto' : 'py-6 max-h-56 overflow-y-auto'}>
+					{forParentChildRelationship && (
+						<LazyRender items={data || []}>
+							{(task, i) => {
+								const last = (datas.filteredTasks?.length || 0) - 1 === i;
+								const active = datas.inputTask === task;
+
+								return (
+									<li key={task.id} ref={active ? activeTaskEl : undefined}>
+										<TaskItem
+											task={task}
+											selected={active}
+											onClick={onItemClick}
+											className="cursor-pointer"
+										/>
+										<ObserverComponent isLast={i === data.length - 1} getNextData={nextOffset} />
+										{!last && <Divider className="my-5" />}
+									</li>
+								);
+							}}
+						</LazyRender>
+					)}
+
+					{!forParentChildRelationship && (
+						<LazyRender items={datas.filteredTasks || []}>
+							{(task, i) => {
+								const last = (datas.filteredTasks?.length || 0) - 1 === i;
+								const active = datas.inputTask === task;
+
+								return (
+									<li key={task.id} ref={active ? activeTaskEl : undefined}>
+										<TaskItem
+											task={task}
+											selected={active}
+											onClick={onItemClick}
+											className="cursor-pointer"
+										/>
+
+										{!last && <Divider className="my-5" />}
+									</li>
+								);
+							}}
+						</LazyRender>
+					)}
+
+					{(forParentChildRelationship && updatedTaskList && updatedTaskList.length === 0) ||
+						(!forParentChildRelationship && datas.filteredTasks && datas.filteredTasks.length === 0 && (
+							<div className="text-center">{t('common.NO_TASKS')}</div>
+						))}
+				</ul>
+			</Card>
+
+			{/* Just some spaces at the end */}
+			<div className="w-2 h-5 opacity-0">{'|'}</div>
+		</>
+	);
+}
 
 /**
  * ----------------------------------------------
@@ -809,9 +726,11 @@ function TaskCard({
 
 interface ITeamMemberSelectProps {
 	teamMembers: OT_Member[];
-	assignees : MutableRefObject<{
-		id: string;
-	}[]>
+	assignees: MutableRefObject<
+		{
+			id: string;
+		}[]
+	>;
 }
 /**
  * A multi select component for assignees
@@ -822,11 +741,14 @@ interface ITeamMemberSelectProps {
  *
  * @return {JSX.Element} The multi select component
  */
- function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
-	const { teamMembers , assignees} = props;
+function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
+	const { teamMembers, assignees } = props;
 	const t = useTranslations();
-	const {user} = useAuthenticateUser()
-	const authMember = useMemo(() => teamMembers.find(member => member.employee.user?.id == user?.id), [teamMembers, user?.id])
+	const { user } = useAuthenticateUser();
+	const authMember = useMemo(
+		() => teamMembers.find((member) => member.employee.user?.id == user?.id),
+		[teamMembers, user?.id]
+	);
 
 	return (
 		<div className=" w-40 rounded-xl bg-[#F2F2F2] py-2 px-3">
@@ -873,18 +795,21 @@ interface ITeamMemberSelectProps {
 											}`
 										}
 										onClick={() => {
-											const isAssigned = assignees.current.map(el => el.id).includes(member.employee.id);
-
+											const isAssigned = assignees.current
+												.map((el) => el.id)
+												.includes(member.employee.id);
 
 											if (isAssigned) {
-												assignees.current = assignees.current.filter((el) => el.id != member.employee.id)
+												assignees.current = assignees.current.filter(
+													(el) => el.id != member.employee.id
+												);
 											} else {
-												assignees.current = [...assignees.current, {id:member.employee.id}];
+												assignees.current = [...assignees.current, { id: member.employee.id }];
 											}
 										}}
 										value={member}
 									>
-										{assignees.current.map(el => el.id).includes(member.employee.id) && (
+										{assignees.current.map((el) => el.id).includes(member.employee.id) && (
 											<span className={`absolute inset-y-0 left-0 flex items-center pl-3 `}>
 												<CheckIcon className="h-5 w-5" aria-hidden="true" />
 											</span>
diff --git a/apps/web/lib/features/user-nav-menu.tsx b/apps/web/lib/features/user-nav-menu.tsx
index 7762a76ae..f2ce88a50 100644
--- a/apps/web/lib/features/user-nav-menu.tsx
+++ b/apps/web/lib/features/user-nav-menu.tsx
@@ -46,7 +46,7 @@ export function UserNavAvatar() {
 	}, [timerStatus, currentMember, publicTeam]);
 
 	return (
-		<Popover className="relative z-50 flex items-center">
+		<Popover className="relative z-[60] flex items-center">
 			<Popover.Button className="outline-none">
 				<div
 					className={clsxm(
@@ -97,7 +97,7 @@ export function UserNavAvatar() {
 				leaveFrom="transform scale-100 opacity-100"
 				leaveTo="transform scale-95 opacity-0"
 			>
-				<Popover.Panel className="absolute right-0 z-50 mt-5 xl:-right-5">
+				<Popover.Panel className="absolute right-0 z-[60] mt-5 xl:-right-5">
 					<MenuIndicator />
 					<UserNavMenu />
 				</Popover.Panel>
diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx
index 84923e728..9a4a284b1 100644
--- a/apps/web/lib/layout/main-layout.tsx
+++ b/apps/web/lib/layout/main-layout.tsx
@@ -5,11 +5,11 @@ import { useAtomValue } from 'jotai';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@components/ui/resizable';
 import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';
-import { AppSidebar } from '@components/app-sidebar';
 import MainSidebarTrigger from './MainSidebarTrigger';
 import AppContainer from './AppContainer';
 import GlobalHeader from './GlobalHeader';
 import GlobalFooter from './GlobalFooter';
+import { AppSidebar } from '@components/app-sidebar';
 
 /**
  * Props interface for the MainLayout component
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 8ea592699..74c755633 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -44,6 +44,7 @@ const eslintBuildConfig = process.env.NEXT_IGNORE_ESLINT_ERROR_ON_BUILD
 const nextConfig = {
 	output: ['standalone', 'export'].includes(BUILD_OUTPUT_MODE) ? BUILD_OUTPUT_MODE : undefined,
 	reactStrictMode: false,
+	transpilePackages: ['geist'],
 	...eslintBuildConfig,
 	swcMinify: true,
 	webpack: (config, { isServer }) => {
diff --git a/apps/web/package.json b/apps/web/package.json
index 2f70e08b0..608b20c86 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -37,6 +37,7 @@
 		"@fullcalendar/timegrid": "^6.1.15",
 		"@headlessui/react": "^1.7.7",
 		"@heroicons/react": "^2.0.12",
+		"@hookform/resolvers": "^3.9.1",
 		"@jitsi/react-sdk": "^1.3.0",
 		"@jitsu/jitsu-react": "^1.3.0",
 		"@livekit/components-react": "^2.4.1",
@@ -60,6 +61,7 @@
 		"@radix-ui/react-dropdown-menu": "^2.1.2",
 		"@radix-ui/react-hover-card": "^1.0.6",
 		"@radix-ui/react-icons": "^1.3.0",
+		"@radix-ui/react-label": "^2.1.0",
 		"@radix-ui/react-popover": "^1.0.6",
 		"@radix-ui/react-scroll-area": "^1.2.1",
 		"@radix-ui/react-select": "^2.1.1",
@@ -86,6 +88,7 @@
 		"emoji-mart": "^5.5.2",
 		"eslint-config-next": "^14.0.4",
 		"firebase": "8.3.3",
+		"geist": "^1.3.1",
 		"hotkeys-js": "^3.12.0",
 		"i18next": "^23.6.0",
 		"jotai": "^2.9.3",
@@ -115,7 +118,7 @@
 		"react-day-picker": "^8.8.0",
 		"react-dom": "^18.2.0",
 		"react-google-recaptcha": "^2.1.0",
-		"react-hook-form": "^7.42.1",
+		"react-hook-form": "^7.53.2",
 		"react-icons": "^5.2.0",
 		"react-loading-skeleton": "^3.1.1",
 		"react-paginate": "^8.2.0",
@@ -130,7 +133,8 @@
 		"slate-serializers": "^0.4.0",
 		"sonner": "^1.5.0",
 		"string-to-color": "^2.2.2",
-		"tailwind-merge": "^1.14.0"
+		"tailwind-merge": "^1.14.0",
+		"zod": "^3.23.8"
 	},
 	"devDependencies": {
 		"@svgr/webpack": "^8.1.0",
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 91ea4af66..2b15ec5a8 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -148,9 +148,8 @@ html.dark {
 	body {
 		font-style: normal;
 		font-weight: 300;
-		font-size: 16px;
 		line-height: 160%;
-		@apply text-default dark:text-white bg-[rgb(242,242,242)] dark:bg-background text-foreground;
+		@apply text-default dark:text-white bg-[rgb(242,242,242)] dark:bg-background text-foreground text-sm;
 	}
 
 	.x-container {
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index cc39fabe1..b66c6486c 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -12,177 +12,177 @@ module.exports = {
 		...createGlobPatternsForDependencies(__dirname)
 	],
 	theme: {
-    	screens: {
-    		xs: '414px',
-    		sm: '576px',
-    		md: '768px',
-    		lg: '992px',
-    		xl: '1200px',
-    		'2xl': '1400px',
-    		'3xl': '1600px'
-    	},
-    	container: {
-    		center: 'true',
-    		padding: '2rem',
-    		screens: {
-    			'2xl': '1400px'
-    		}
-    	},
-    	extend: {
-    		colors: {
-    			transparent: 'transparent',
-    			current: 'currentColor',
-    			neutral: '#7E7991',
-    			chetwodeBlue: '#8C7AE4',
-    			indianRed: '#D95F5F',
-    			grey: '#868296',
-    			transparentWhite: 'rgba(255, 255, 255, 0.30)',
-    			default: {
-    				DEFAULT: '#282048'
-    			},
-    			'light--theme': {
-    				light: '#fff',
-    				DEFAULT: '#f7f7f8',
-    				dark: '#E7E7EA'
-    			},
-    			'dark--theme': {
-    				light: '#1E2025',
-    				DEFAULT: 'var(--tw-color-dark--theme)'
-    			},
-    			primary: {
-    				DEFAULT: '#3826A6',
-    				light: '#6755C9',
-    				xlight: '#8E76FA',
-    				mid: '#483A95',
-    				foreground: 'hsl(var(--primary-foreground))'
-    			},
-    			dark: {
-    				high: '#16171B',
-    				lighter: '#1E2430',
-    				DEFAULT: '#1A1C1E'
-    			},
-    			'regal-blue': '#6A71E7',
-    			'regal-rose': '#E93CB9',
-    			border: 'hsl(var(--border))',
-    			ring: 'hsl(var(--ring))',
-    			background: 'hsl(var(--background))',
-    			foreground: 'hsl(var(--foreground))',
-    			secondary: {
-    				DEFAULT: 'hsl(var(--secondary))',
-    				foreground: 'hsl(var(--secondary-foreground))'
-    			},
-    			destructive: {
-    				DEFAULT: 'hsl(var(--destructive))',
-    				foreground: 'hsl(var(--destructive-foreground))'
-    			},
-    			muted: {
-    				DEFAULT: 'hsl(var(--muted))',
-    				foreground: 'hsl(var(--muted-foreground))'
-    			},
-    			accent: {
-    				DEFAULT: 'hsl(var(--accent))',
-    				foreground: 'hsl(var(--accent-foreground))'
-    			},
-    			popover: {
-    				DEFAULT: 'hsl(var(--popover))',
-    				foreground: 'hsl(var(--popover-foreground))'
-    			},
-    			card: {
-    				DEFAULT: 'hsl(var(--card))',
-    				foreground: 'hsl(var(--card-foreground))'
-    			},
-    			sidebar: {
-    				DEFAULT: 'hsl(var(--sidebar-background))',
-    				foreground: 'hsl(var(--sidebar-foreground))',
-    				primary: 'hsl(var(--sidebar-primary))',
-    				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-    				accent: 'hsl(var(--sidebar-accent))',
-    				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-    				border: 'hsl(var(--sidebar-border))',
-    				ring: 'hsl(var(--sidebar-ring))'
-    			}
-    		},
-    		fontFamily: {
-    			PlusJakartaSans: ['Plus-Jakarta-Sans-VariableFont_wght'],
-    			PlusJakartaSansRegular: ['Plus-Jakarta-Sans-Regular'],
-    			PlusJakartaSansBold: ['Plus-Jakarta-Sans-Bold'],
-    			PlusJakartaSansLight: ['Plus-Jakarta-Sans-Light'],
-    			PlusJakartaSansMedium: ['Plus-Jakarta-Sans-Medium'],
-    			PlusJakartaSansSemiBold: ['Plus-Jakarta-Sans-SemiBold']
-    		},
-    		boxShadow: {
-    			lgcard: '0px 50px 200px rgba(0, 0, 0, 0.1)',
-    			xlcard: '0px 16px 79px rgba(0, 0, 0, 0.12)',
-    			'lgcard-white': '0px 50px 200px rgba(255, 255, 255, 0.1)',
-    			'xlcard-white': '0px 16px 79px rgba(255, 255, 255, 0.12)',
-    			darker: '-8px -9px 14px rgba(255, 255, 255, 0.05), 10px 14px 34px rgba(0, 0, 0, 0.6), 0px 4px 24px rgba(0, 0, 0, 0.25)'
-    		},
-    		borderRadius: {
-    			lg: 'var(--radius)',
-    			md: 'calc(var(--radius) - 2px)',
-    			sm: 'calc(var(--radius) - 4px)'
-    		},
-    		keyframes: {
-    			'accordion-down': {
-    				from: {
-    					height: '0'
-    				},
-    				to: {
-    					height: 'var(--radix-accordion-content-height)'
-    				}
-    			},
-    			'accordion-up': {
-    				from: {
-    					height: 'var(--radix-accordion-content-height)'
-    				},
-    				to: {
-    					height: '0'
-    				}
-    			}
-    		},
-    		animation: {
-    			'accordion-down': 'accordion-down 0.2s ease-out',
-    			'accordion-up': 'accordion-up 0.2s ease-out',
-    			spine: 'spin 10s linear infinite'
-    		},
-    		typography: {
-    			DEFAULT: {
-    				css: {
-    					maxWidth: '100ch',
-    					'h3, h4, h5, h6, p, span, em, ul, ol, dl, blockquote, code, figure, pre': {
-    						marginTop: '0.5rem',
-    						marginBottom: '0.5rem',
-    						lineHeight: '1.25rem',
-    						fontSize: '14px',
-    						wordSpacing: '-1px',
-    						fontWeight: '400'
-    					},
-    					h1: {
-    						fontSize: '1.3rem',
-    						marginTop: '0.65rem',
-    						marginBottom: '0.65rem',
-    						lineHeight: '40px'
-    					},
-    					h2: {
-    						fontSize: '1.1rem',
-    						marginTop: '0.35rem',
-    						marginBottom: '0.35rem',
-    						lineHeight: '30px'
-    					},
-    					'h1 span': {
-    						fontSize: '1.3rem'
-    					},
-    					'h2 span': {
-    						fontSize: '1.1rem',
-    						fontWeight: 'bold'
-    					},
-    					'strong span': {
-    						fontWeight: '600'
-    					}
-    				}
-    			}
-    		}
-    	}
-    },
+		screens: {
+			xs: '414px',
+			sm: '576px',
+			md: '768px',
+			lg: '992px',
+			xl: '1200px',
+			'2xl': '1400px',
+			'3xl': '1600px'
+		},
+		container: {
+			center: 'true',
+			padding: '2rem',
+			screens: {
+				'2xl': '1400px'
+			}
+		},
+		extend: {
+			colors: {
+				transparent: 'transparent',
+				current: 'currentColor',
+				neutral: '#7E7991',
+				chetwodeBlue: '#8C7AE4',
+				indianRed: '#D95F5F',
+				grey: '#868296',
+				transparentWhite: 'rgba(255, 255, 255, 0.30)',
+				default: {
+					DEFAULT: '#282048'
+				},
+				'light--theme': {
+					light: '#fff',
+					DEFAULT: '#f7f7f8',
+					dark: '#E7E7EA'
+				},
+				'dark--theme': {
+					light: '#1E2025',
+					DEFAULT: 'var(--tw-color-dark--theme)'
+				},
+				primary: {
+					DEFAULT: '#3826A6',
+					light: '#6755C9',
+					xlight: '#8E76FA',
+					mid: '#483A95',
+					foreground: 'hsl(var(--primary-foreground))'
+				},
+				dark: {
+					high: '#16171B',
+					lighter: '#1E2430',
+					DEFAULT: '#1A1C1E'
+				},
+				'regal-blue': '#6A71E7',
+				'regal-rose': '#E93CB9',
+				border: 'hsl(var(--border))',
+				ring: 'hsl(var(--ring))',
+				background: 'hsl(var(--background))',
+				foreground: 'hsl(var(--foreground))',
+				secondary: {
+					DEFAULT: 'hsl(var(--secondary))',
+					foreground: 'hsl(var(--secondary-foreground))'
+				},
+				destructive: {
+					DEFAULT: 'hsl(var(--destructive))',
+					foreground: 'hsl(var(--destructive-foreground))'
+				},
+				muted: {
+					DEFAULT: 'hsl(var(--muted))',
+					foreground: 'hsl(var(--muted-foreground))'
+				},
+				accent: {
+					DEFAULT: 'hsl(var(--accent))',
+					foreground: 'hsl(var(--accent-foreground))'
+				},
+				popover: {
+					DEFAULT: 'hsl(var(--popover))',
+					foreground: 'hsl(var(--popover-foreground))'
+				},
+				card: {
+					DEFAULT: 'hsl(var(--card))',
+					foreground: 'hsl(var(--card-foreground))'
+				},
+				sidebar: {
+					DEFAULT: 'hsl(var(--sidebar-background))',
+					foreground: 'hsl(var(--sidebar-foreground))',
+					primary: 'hsl(var(--sidebar-primary))',
+					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+					accent: 'hsl(var(--sidebar-accent))',
+					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+					border: 'hsl(var(--sidebar-border))',
+					ring: 'hsl(var(--sidebar-ring))'
+				}
+			},
+			fontFamily: {
+				PlusJakartaSans: ['Plus-Jakarta-Sans-VariableFont_wght'],
+				PlusJakartaSansRegular: ['Plus-Jakarta-Sans-Regular'],
+				PlusJakartaSansBold: ['Plus-Jakarta-Sans-Bold'],
+				PlusJakartaSansLight: ['Plus-Jakarta-Sans-Light'],
+				PlusJakartaSansMedium: ['Plus-Jakarta-Sans-Medium'],
+				PlusJakartaSansSemiBold: ['Plus-Jakarta-Sans-SemiBold']
+			},
+			boxShadow: {
+				lgcard: '0px 50px 200px rgba(0, 0, 0, 0.1)',
+				xlcard: '0px 16px 79px rgba(0, 0, 0, 0.12)',
+				'lgcard-white': '0px 50px 200px rgba(255, 255, 255, 0.1)',
+				'xlcard-white': '0px 16px 79px rgba(255, 255, 255, 0.12)',
+				darker: '-8px -9px 14px rgba(255, 255, 255, 0.05), 10px 14px 34px rgba(0, 0, 0, 0.6), 0px 4px 24px rgba(0, 0, 0, 0.25)'
+			},
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)'
+			},
+			keyframes: {
+				'accordion-down': {
+					from: {
+						height: '0'
+					},
+					to: {
+						height: 'var(--radix-accordion-content-height)'
+					}
+				},
+				'accordion-up': {
+					from: {
+						height: 'var(--radix-accordion-content-height)'
+					},
+					to: {
+						height: '0'
+					}
+				}
+			},
+			animation: {
+				'accordion-down': 'accordion-down 0.2s ease-out',
+				'accordion-up': 'accordion-up 0.2s ease-out',
+				spine: 'spin 10s linear infinite'
+			},
+			typography: {
+				DEFAULT: {
+					css: {
+						maxWidth: '100ch',
+						'h3, h4, h5, h6, p, span, em, ul, ol, dl, blockquote, code, figure, pre': {
+							marginTop: '0.5rem',
+							marginBottom: '0.5rem',
+							lineHeight: '1.25rem',
+							fontSize: '14px',
+							wordSpacing: '-1px',
+							fontWeight: '400'
+						},
+						h1: {
+							fontSize: '1.3rem',
+							marginTop: '0.65rem',
+							marginBottom: '0.65rem',
+							lineHeight: '40px'
+						},
+						h2: {
+							fontSize: '1.1rem',
+							marginTop: '0.35rem',
+							marginBottom: '0.35rem',
+							lineHeight: '30px'
+						},
+						'h1 span': {
+							fontSize: '1.3rem'
+						},
+						'h2 span': {
+							fontSize: '1.1rem',
+							fontWeight: 'bold'
+						},
+						'strong span': {
+							fontWeight: '600'
+						}
+					}
+				}
+			}
+		}
+	},
 	plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')]
 };
diff --git a/yarn.lock b/yarn.lock
index e64a251b5..5bbcaf487 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2772,6 +2772,11 @@
   resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
   integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
 
+"@hookform/resolvers@^3.9.1":
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.9.1.tgz#a23883c40bfd449cb6c6ab5a0fa0729184c950ff"
+  integrity sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"
@@ -6396,6 +6401,13 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-label@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.1.0.tgz#3aa2418d70bb242be37c51ff5e51a2adcbc372e3"
+  integrity sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/react-menu@2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.2.tgz#91f6815845a4298dde775563ed2d80b7ad667899"
@@ -15367,6 +15379,11 @@ gcp-metadata@^6.0.0:
     gaxios "^6.0.0"
     json-bigint "^1.0.0"
 
+geist@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/geist/-/geist-1.3.1.tgz#bbd95db23b2a00baf6020e3b1b63a5752f4787d2"
+  integrity sha512-Q4gC1pBVPN+D579pBaz0TRRnGA4p9UK6elDY/xizXdFk/g4EKR5g0I+4p/Kj6gM0SajDBZ/0FvDV9ey9ud7BWw==
+
 gensequence@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/gensequence/-/gensequence-6.0.0.tgz#ae46a0f89ebd7cc334e45cfb8f1c99a65248694e"
@@ -22770,10 +22787,10 @@ react-google-recaptcha@^2.1.0:
     prop-types "^15.5.0"
     react-async-script "^1.1.1"
 
-react-hook-form@^7.42.1:
-  version "7.46.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.46.0.tgz#dba3491e4bc0968346e5615d9d669af780b47cd4"
-  integrity sha512-sc22pXwuKgbWBR5/EYWOVoFw4i/w893tDRUgQY2/Xb7wlpajJBrqAMFhb4z1CDhZ0TSFFfX62+iKx3gCXnCHHw==
+react-hook-form@^7.53.2:
+  version "7.53.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.2.tgz#6fa37ae27330af81089baadd7f322cc987b8e2ac"
+  integrity sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==
 
 react-i18next@^14.1.0:
   version "14.1.2"
@@ -27172,3 +27189,8 @@ yup@^0.32.11:
     nanoclone "^0.2.1"
     property-expr "^2.0.4"
     toposort "^2.0.2"
+
+zod@^3.23.8:
+  version "3.23.8"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
+  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==

From dc1b07b8699f6ba69c1441e8a91a52b4997c28ca Mon Sep 17 00:00:00 2001
From: Arick Bulakali <85836702+NdekoCode@users.noreply.github.com>
Date: Fri, 22 Nov 2024 08:57:39 +0200
Subject: [PATCH 28/41] Fix Build Error (#3362)

* fix: lint errors

* refactor(web): update the Docker file by adding the environment variable `NEXT_IGNORE_ESLINT_ERROR_ON_BUILD`.

* fix(web): fix coderabbitai suggestions

* refactor(web): update Docker file
---
 Dockerfile                                          | 9 +++++----
 apps/web/app/hooks/features/useOrganizationTeams.ts | 8 ++++----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 51fc2c4cb..4d1894984 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -18,10 +18,12 @@ ARG NEXT_PUBLIC_JITSU_BROWSER_URL
 ARG NEXT_PUBLIC_JITSU_BROWSER_WRITE_KEY
 ARG NEXT_PUBLIC_GITHUB_APP_NAME=ever-github
 ARG NEXT_PUBLIC_CHATWOOT_API_KEY
+ARG NEXT_IGNORE_ESLINT_ERROR_ON_BUILD=true
 
-FROM node:${NODE_VERSION}-slim as base
+FROM node:${NODE_VERSION}-slim AS base
 
 # Output the environment variable value
+ARG NEXT_PUBLIC_GAUZY_API_SERVER_URL
 RUN echo "NEXT_PUBLIC_GAUZY_API_SERVER_URL=${NEXT_PUBLIC_GAUZY_API_SERVER_URL}"
 
 LABEL maintainer="ever@ever.co"
@@ -42,7 +44,7 @@ RUN mkdir /temp && cd /temp && \
 RUN npm cache clean --force
 
 # Throw-away build stage to reduce size of final image
-FROM base as build
+FROM base AS build
 
 # We make env vars passed as build argument to be available in this build stage because we prebuild the NextJs app
 ARG NEXT_PUBLIC_GAUZY_API_SERVER_URL
@@ -80,6 +82,7 @@ RUN cd apps/web && \
 COPY . .
 
 ENV NODE_ENV=production
+ENV NEXT_IGNORE_ESLINT_ERROR_ON_BUILD=true
 
 RUN echo $NEXT_PUBLIC_GAUZY_API_SERVER_URL
 
@@ -96,8 +99,6 @@ RUN yarn cache clean
 # Final stage for app image
 FROM base
 
-ENV NODE_ENV=production
-
 # Copy built application
 COPY --from=build /app/apps/web/.next/standalone ./
 COPY --from=build /app/apps/web/.next/static ./apps/web/.next/static
diff --git a/apps/web/app/hooks/features/useOrganizationTeams.ts b/apps/web/app/hooks/features/useOrganizationTeams.ts
index c44a89972..50e394b4b 100644
--- a/apps/web/app/hooks/features/useOrganizationTeams.ts
+++ b/apps/web/app/hooks/features/useOrganizationTeams.ts
@@ -26,7 +26,7 @@ import {
 	teamsFetchingState,
 	timerStatusState
 } from '@app/stores';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import isEqual from 'lodash/isEqual';
 import { useFirstLoad } from '../useFirstLoad';
@@ -305,8 +305,8 @@ export function useOrganizationTeams() {
 	const [isTeamManager, setIsTeamManager] = useState(false);
 	// const setMemberActiveTaskId = useSetAtom(memberActiveTaskIdState);
 
-	const members = activeTeam?.members || [];
-	const currentUser = activeTeam?.members?.find((member) => member.employee.userId === user?.id);
+	const members = useMemo(() => activeTeam?.members || [], [activeTeam?.members]);
+	const currentUser = members.find((member) => member.employee.userId === user?.id);
 
 	const memberActiveTaskId =
 		(timerStatus?.running && timerStatus?.lastLog?.taskId) || currentUser?.activeTaskId || null;
@@ -492,7 +492,7 @@ export function useOrganizationTeams() {
 			setActiveProjectIdCookie(activeTeam?.projects[0]?.id);
 		}
 		isManager();
-	}, [activeTeam]);
+	}, [activeTeam, isManager]);
 
 	return {
 		loadTeamsData,

From bfde5c7eac8bf786009bdf58571b33f25b630c70 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Fri, 22 Nov 2024 09:00:20 +0200
Subject: [PATCH 29/41] [Feat]: Improve Modal For Updating Tasks and Filter
 (#3358)

* feat: improve modal for updating tasks

* fix: cspell

* fix: deepScan

* fix: deepScan

* fix: deepScan

* fix: conflit
---
 .../[memberId]/components/EditTaskModal.tsx   | 188 ++++++++++--------
 .../components/TimeSheetFilterPopover.tsx     |   2 +-
 .../[memberId]/components/TimesheetAction.tsx |  11 +-
 apps/web/app/hooks/features/useTimesheet.ts   |  10 +-
 .../services/client/api/timer/timer-log.ts    |  17 +-
 apps/web/app/stores/time-logs.ts              |   2 +-
 .../calendar/table-time-sheet.tsx             |  20 +-
 .../manual-time/manage-member-component.tsx   |   2 +
 .../lib/features/multiple-select/index.tsx    |  24 ++-
 9 files changed, 166 insertions(+), 110 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
index 1828d9a9b..ae018d1b1 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
@@ -1,53 +1,69 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Button, Modal, statusColor } from '@/lib/components';
-import { IoMdArrowDropdown } from 'react-icons/io';
-import { FaRegClock } from 'react-icons/fa';
-import { DatePickerFilter } from './TimesheetFilterDate';
-import { useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { clsxm } from '@/app/utils';
-import { Item, ManageOrMemberComponent, getNestedValue } from '@/lib/features/manual-time/manage-member-component';
-import { useTeamTasks } from '@/app/hooks';
-import { CustomSelect } from '@/lib/features';
-import { statusTable } from './TimesheetAction';
+import { Modal, statusColor } from "@/lib/components";
+import { IoMdArrowDropdown } from "react-icons/io";
+import { FaRegClock } from "react-icons/fa";
+import { DatePickerFilter } from "./TimesheetFilterDate";
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { clsxm } from "@/app/utils";
+import { Item, ManageOrMemberComponent, getNestedValue } from "@/lib/features/manual-time/manage-member-component";
+import { useTeamTasks } from "@/app/hooks";
+import { CustomSelect, TaskNameInfoDisplay } from "@/lib/features";
+import { statusTable } from "./TimesheetAction";
+import { TimesheetLog } from "@/app/interfaces";
 
 export interface IEditTaskModalProps {
 	isOpen: boolean;
 	closeModal: () => void;
+	dataTimesheet: TimesheetLog
 }
-export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {
+export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskModalProps) {
 	const { activeTeam } = useTeamTasks();
 	const t = useTranslations();
+	// const [dateRange, setDateRange] = useState<{ from: Date | null }>({
+	// 	from: new Date(),
+	// });
+	// const [endTime, setEndTime] = useState<string>('');
+	// const [startTime, setStartTime] = useState<string>('');
+	// const [isBillable, setIsBillable] = useState<boolean>(dataTimesheet.isBillable);
+	// const [notes, setNotes] = useState('');
+
 	const [dateRange, setDateRange] = useState<{ from: Date | null }>({
-		from: new Date()
+		from: dataTimesheet.timesheet?.startedAt ? new Date(dataTimesheet.timesheet.startedAt) : new Date(),
 	});
-	const [endTime, setEndTime] = useState<string>('');
-	const [startTime, setStartTime] = useState<string>('');
-	const [isBillable, setIsBillable] = useState<boolean>(false);
-	const [notes, setNotes] = useState('');
+	const [endTime, setEndTime] = useState<string>(
+		dataTimesheet.timesheet?.stoppedAt
+			? new Date(dataTimesheet.timesheet.stoppedAt).toLocaleTimeString('en-US', { hour12: false }).slice(0, 5)
+			: ''
+	);
+	const [startTime, setStartTime] = useState<string>(
+		dataTimesheet.timesheet?.startedAt
+			? new Date(dataTimesheet.timesheet.startedAt).toLocaleTimeString('en-US', { hour12: false }).slice(0, 5)
+			: ''
+	);
+	const [isBillable, setIsBillable] = useState<boolean>(dataTimesheet.isBillable);
+	const [notes, setNotes] = useState<string>('');
 	const memberItemsLists = {
-		Project: activeTeam?.projects as []
+		Project: activeTeam?.projects as [],
 	};
 	const handleSelectedValuesChange = (values: { [key: string]: Item | null }) => {
 		// Handle value changes
 	};
 	const selectedValues = {
-		Teams: null
+		Teams: null,
 	};
-
 	const handleChange = (field: string, selectedItem: Item | null) => {
 		// Handle field changes
 	};
 
 	const fields = [
 		{
-			label: 'Project',
+			label: t('sidebar.PROJECTS'),
 			placeholder: 'Select a project',
 			isRequired: true,
 			valueKey: 'id',
 			displayKey: 'name',
 			element: 'Project'
-		}
+		},
 	];
 
 	const handleFromChange = (fromDate: Date | null) => {
@@ -60,20 +76,26 @@ export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {
 			showCloseIcon
 			title={'Edit Task'}
 			className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[30rem] justify-start h-[auto]"
-			titleClass="font-bold"
-		>
+			titleClass="font-bold flex justify-start w-full">
 			<div className="flex flex-col w-full">
 				<div className="flex flex-col border-b border-b-slate-100 dark:border-b-gray-700">
-					<span> #321 Spike for creating calendar views on mobile</span>
+					<TaskNameInfoDisplay
+						task={dataTimesheet.task}
+						className={clsxm('shadow-[0px_0px_15px_0px_#e2e8f0] dark:shadow-transparent')}
+						taskTitleClassName={clsxm('text-sm text-ellipsis overflow-hidden ')}
+						showSize={true}
+						dash
+						taskNumberClassName="text-sm"
+					/>
 					<div className="flex items-center gap-x-1 ">
 						<span className="text-gray-400">for</span>
-						<span className="text-primary dark:text-primary-light">Savannah Nguyen </span>
+						<span className="text-primary dark:text-primary-light">{dataTimesheet.employee?.fullName ?? ""}</span>
 						<IoMdArrowDropdown className="cursor-pointer" />
 					</div>
 				</div>
 				<div className="flex items-start flex-col justify-center gap-4">
 					<div>
-						<span>Task Time</span>
+						<span className="text-[#282048] dark:text-gray-500 ">Task Time</span>
 						<div className="flex items-center gap-x-2 ">
 							<FaRegClock className="text-[#30B366]" />
 							<span>08:10h</span>
@@ -81,7 +103,7 @@ export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {
 					</div>
 					<div className="flex items-center w-full">
 						<div className=" w-[48%] mr-[4%]">
-							<label className="block text-gray-500 mb-1">
+							<label className="block text-[#282048] dark:text-gray-500   mb-1">
 								{t('manualTime.START_TIME')}
 								<span className="text-[#de5505e1] ml-1">*</span>
 							</label>
@@ -97,7 +119,7 @@ export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {
 						</div>
 
 						<div className=" w-[48%]">
-							<label className="block text-gray-500 mb-1">
+							<label className="block text-[#282048] dark:text-gray-500   mb-1">
 								{t('manualTime.END_TIME')}
 								<span className="text-[#de5505e1] ml-1">*</span>
 							</label>
@@ -112,13 +134,19 @@ export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {
 								required
 							/>
 						</div>
+
 					</div>
 					<div>
-						<span className="block text-gray-500 mr-2">{t('manualTime.DATE')}</span>
-						<DatePickerFilter date={dateRange.from} setDate={handleFromChange} label="Oct 01 2024" />
+						<span className="block text-[#282048] dark:text-gray-500   mr-2">{t("manualTime.DATE")}</span>
+						<DatePickerFilter
+							date={dateRange.from}
+							setDate={handleFromChange}
+							label="Oct 01 2024"
+						/>
 					</div>
 					<div className="w-full flex flex-col">
 						<ManageOrMemberComponent
+							classNameTitle={'text-[#282048] dark:text-gray-500  '}
 							fields={fields}
 							itemsLists={memberItemsLists}
 							selectedValues={selectedValues}
@@ -129,79 +157,77 @@ export function EditTaskModal({ isOpen, closeModal }: IEditTaskModalProps) {
 						/>
 					</div>
 					<div className=" flex flex-col items-center">
-						<label className="text-gray-500 mr-6 capitalize">
-							{t('pages.timesheet.BILLABLE.BILLABLE')}
-						</label>
+						<label className="text-[#282048] dark:text-gray-500   mr-12 capitalize">{t('pages.timesheet.BILLABLE.BILLABLE').toLowerCase()}</label>
 						<div className="flex items-center gap-3">
 							<ToggleButton
 								isActive={isBillable}
-								onClick={() => setIsBillable(!isBillable)}
+								onClick={() => setIsBillable(true)}
 								label={t('pages.timesheet.BILLABLE.YES')}
 							/>
 							<ToggleButton
 								isActive={!isBillable}
-								onClick={() => setIsBillable(!isBillable)}
+								onClick={() => setIsBillable(false)}
 								label={t('pages.timesheet.BILLABLE.NO')}
 							/>
 						</div>
 					</div>
 					<div className="w-full flex flex-col">
-						<span>Notes</span>
+						<span className="text-[#282048] dark:text-gray-500  ">Notes</span>
 						<textarea
 							value={notes}
 							onChange={(e) => setNotes(e.target.value)}
 							placeholder="Insert notes here..."
 							className={clsxm(
-								'bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent',
-								'placeholder-gray-300 placeholder:font-normal resize-none p-2 grow w-full',
-								'border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-40',
-								notes.trim().length === 0 && 'border-red-500'
+								"bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent",
+								"placeholder-gray-300 placeholder:font-normal resize-none p-2 grow w-full",
+								"border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-40 bg-[#FBB6500D]",
+								notes.trim().length === 0 && "border-red-500"
 							)}
 							maxLength={120}
 							minLength={0}
 							aria-label="Insert notes here"
 							required
 						/>
-						<div className="text-sm text-gray-500 text-right">
+						<div className="text-sm text-[#282048] dark:text-gray-500   text-right">
 							{notes.length}/{120}
 						</div>
 					</div>
 					<div className="border-t border-t-gray-200 dark:border-t-gray-700 w-full"></div>
-					<div className="flex items-center justify-between gap-2 ">
-						<div className="flex flex-col items-start justify-center">
+					<div className="!flex items-center justify-between gap-2 w-full">
+						<div className="flex flex-col items-start justify-center ">
 							<CustomSelect
+								defaultValue={dataTimesheet.timesheet?.status ?? ""}
+								ariaLabel={dataTimesheet.timesheet?.status ?? ""}
+								className="ring-offset-sidebar-primary-foreground w-[150px]"
 								options={statusTable?.flatMap((status) => status.label)}
 								renderOption={(option) => (
-									<div className="flex items-center gap-x-2">
-										<div className={clsxm('p-2 rounded-full', statusColor(option).bg)}></div>
-										<span className={clsxm('ml-1', statusColor(option).text)}>{option}</span>
+									<div className="flex items-center gap-x-2 cursor-pointer">
+										<div className={clsxm("p-2 rounded-full", statusColor(option).bg)}></div>
+										<span className={clsxm("ml-1", statusColor(option).text,)}>{option}</span>
 									</div>
 								)}
 							/>
 						</div>
-						<div className="flex items-center gap-x-2">
-							<Button
-								variant="outline"
+						<div className="flex items-center gap-x-2 justify-end w-full">
+							<button
 								type="button"
-								className={clsxm(
-									'dark:text-primary h-[2.3rem] border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light'
-								)}
-							>
+								className={clsxm("dark:text-primary h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
 								{t('common.CANCEL')}
-							</Button>
-
-							<Button
+							</button>
+							<button
 								type="submit"
-								className={clsxm('bg-[#3826A6] h-[2.3rem] font-normal flex items-center text-white')}
-							>
+								className={clsxm(
+									'bg-[#4435a1] h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
+								)}>
 								{t('common.SAVE')}
-							</Button>
+							</button>
 						</div>
 					</div>
 				</div>
 			</div>
+
 		</Modal>
-	);
+	)
 }
 
 interface ToggleButtonProps {
@@ -210,22 +236,24 @@ interface ToggleButtonProps {
 	label: string;
 }
 
-const ToggleButton = ({ isActive, onClick, label }: ToggleButtonProps) => (
-	<div className="flex items-center gap-x-2">
+export const ToggleButton = ({ isActive, onClick, label }: ToggleButtonProps) => (
+	<button
+		type="button"
+		onClick={onClick}
+		aria-pressed={isActive}
+		className={clsxm(
+			'flex items-center gap-x-2 p-2 rounded focus:outline-none focus:ring-2 focus:ring-primary/50',
+			'transition-colors duration-200 ease-in-out'
+		)}
+	>
 		<div
-			className="w-6 h-6 flex items-center bg-[#6c57f4b7] rounded-full p-1 cursor-pointer"
-			onClick={onClick}
-			style={{
-				background: isActive ? 'linear-gradient(to right, #9d91efb7, #8a7bedb7)' : '#1f2937'
-			}}
-		>
-			<div
-				className={clsxm(
-					'bg-[#3826A6] w-4 h-4 rounded-full shadow-md transform transition-transform translate-x-0',
-					isActive && 'bg-white'
-				)}
-			/>
-		</div>
-		<span>{label}</span>
-	</div>
-);
+			className={clsxm(
+				'w-4 h-4 rounded-full transition-colors duration-200 ease-in-out',
+				isActive ? 'bg-primary' : 'bg-gray-200'
+			)}
+		/>
+		<span className={clsxm('', isActive && 'text-primary')}>
+			{label}
+		</span>
+	</button>
+)
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
index 9c52023ac..f93bc0b05 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
@@ -131,7 +131,7 @@ export const TimeSheetFilterPopover = React.memo(function TimeSheetFilterPopover
 									items={statusOptions}
 									itemToString={(status) => (status ? status.value : '')}
 									itemId={(item) => item.value}
-									onValueChange={(selectedItems) => setStatusState(selectedItems)}
+									onValueChange={(selectedItems) => setStatusState(selectedItems as any)}
 									multiSelect={true}
 									triggerClassName="dark:border-gray-700"
 								/>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
index 5e1de381d..5ba36512b 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
@@ -1,3 +1,4 @@
+import { TimesheetStatus } from "@/app/interfaces";
 import { clsxm } from "@/app/utils";
 import { TranslationHooks } from "next-intl";
 import { ReactNode } from "react";
@@ -61,8 +62,10 @@ export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, dis
     ));
 };
 
-export const statusTable: { label: StatusType; description: string }[] = [
-    { label: "Pending", description: "Awaiting approval or review" },
-    { label: "Approved", description: "The item has been approved" },
-    { label: "Denied", description: "The item has been rejected" },
+export const statusTable: { label: TimesheetStatus; description: string }[] = [
+    { label: "PENDING", description: "Awaiting approval or review" },
+    { label: "IN REVIEW", description: "The item is being reviewed" },
+    { label: "APPROVED", description: "The item has been approved" },
+    { label: "DRAFT", description: "The item is saved as draft" },
+    { label: "DENIED", description: "The item has been rejected" },
 ];
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index 3352f9861..9c75b2b4e 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -60,7 +60,7 @@ export function useTimesheet({
 }: TimesheetParams) {
     const { user } = useAuthenticateUser();
     const [timesheet, setTimesheet] = useAtom(timesheetRapportState);
-    const { employee, project, selectTimesheet: logIds } = useTimelogFilterOptions();
+    const { employee, project, task, statusState, selectTimesheet: logIds } = useTimelogFilterOptions();
     const { loading: loadingTimesheet, queryCall: queryTimesheet } = useQuery(getTaskTimesheetLogsApi);
     const { loading: loadingDeleteTimesheet, queryCall: queryDeleteTimesheet } = useQuery(deleteTaskTimesheetLogsApi)
 
@@ -77,7 +77,9 @@ export function useTimesheet({
                 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)
+                projectIds: project?.map((project) => project.id).filter((id) => id !== undefined),
+                taskIds: task?.map((task) => task.id).filter((id) => id !== undefined),
+                status: statusState?.map((status) => status.value).filter((value) => value !== undefined)
             }).then((response) => {
                 setTimesheet(response.data);
             }).catch((error) => {
@@ -89,7 +91,9 @@ export function useTimesheet({
             queryTimesheet,
             setTimesheet,
             employee,
-            project
+            project,
+            task,
+            statusState
         ]
     );
 
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 b35b7abea..7ba7347c5 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -22,7 +22,9 @@ export async function getTaskTimesheetLogsApi({
 	endDate,
 	timeZone,
 	projectIds = [],
-	employeeIds = []
+	employeeIds = [],
+	taskIds = [],
+	status = []
 }: {
 	organizationId: string,
 	tenantId: string,
@@ -30,7 +32,9 @@ export async function getTaskTimesheetLogsApi({
 	endDate: string | Date,
 	timeZone?: string,
 	projectIds?: string[],
-	employeeIds?: string[]
+	employeeIds?: string[],
+	taskIds?: string[],
+	status?: string[]
 }) {
 
 	if (!organizationId || !tenantId || !startDate || !endDate) {
@@ -65,6 +69,15 @@ export async function getTaskTimesheetLogsApi({
 	employeeIds.forEach((id, index) => {
 		params.append(`employeeIds[${index}]`, id);
 	});
+
+	taskIds.forEach((id, index) => {
+		params.append(`taskIds[${index}]`, id)
+	});
+
+	status.forEach((name, index) => {
+		params.append(`status[${index}]`, name);
+	})
+
 	const endpoint = `/timesheet/time-log?${params.toString()}`;
 	return get<TimesheetLog[]>(endpoint, { tenantId });
 }
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index d015ab9bf..41354870f 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -15,5 +15,5 @@ export const timesheetFilterEmployeeState = atom<OT_Member[]>([]);
 export const timesheetFilterProjectState = atom<IProject[]>([]);
 export const timesheetFilterTaskState = atom<ITeamTask[]>([]);
 
-export const timesheetFilterStatusState = atom<IFilterOption | IFilterOption[] | null>([]);
+export const timesheetFilterStatusState = atom<IFilterOption[]>([]);
 export const timesheetDeleteState = atom<string[]>([])
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 592c24c89..8d7c19c4b 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -58,7 +58,7 @@ import { useTranslations } from 'next-intl';
 import { formatDate } from '@/app/helpers';
 import { GroupedTimesheet, useTimesheet } from '@/app/hooks/features/useTimesheet';
 import { DisplayTimeForTimesheet, TaskNameInfoDisplay, TotalDurationByDate, TotalTimeDisplay } from '../../task/task-displays';
-import { TimesheetStatus } from '@/app/interfaces';
+import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
 
 export const columns: ColumnDef<TimeSheet>[] = [
 	{
@@ -146,13 +146,6 @@ export const columns: ColumnDef<TimeSheet>[] = [
 				{row.original.time}
 			</div>
 		)
-	},
-	{
-		id: 'actions',
-		enableHiding: false,
-		cell: ({ row }) => {
-			return <TaskActionMenu idTasks={row?.original?.id} />;
-		}
 	}
 ];
 
@@ -342,8 +335,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 												<DisplayTimeForTimesheet
 													duration={task.timesheet.duration}
 												/>
-												<TaskActionMenu
-													idTasks={task.id} />
+												<TaskActionMenu dataTimesheet={task} />
 											</div>
 										))}
 									</AccordionContent>
@@ -443,11 +435,15 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
 	);
 }
 
-const TaskActionMenu = ({ idTasks }: { idTasks: string | number }) => {
+const TaskActionMenu = ({ dataTimesheet }: { dataTimesheet: TimesheetLog }) => {
 	const { isOpen: isEditTask, openModal: isOpenModalEditTask, closeModal: isCloseModalEditTask } = useModal();
 	return (
 		<>
-			{<EditTaskModal closeModal={isCloseModalEditTask} isOpen={isEditTask} />}
+			{<EditTaskModal
+				closeModal={isCloseModalEditTask}
+				isOpen={isEditTask}
+				dataTimesheet={dataTimesheet}
+			/>}
 			<DropdownMenu>
 				<DropdownMenuTrigger asChild>
 					<Button variant="ghost" className="w-8 h-8 p-0 text-sm sm:text-base">
diff --git a/apps/web/lib/features/manual-time/manage-member-component.tsx b/apps/web/lib/features/manual-time/manage-member-component.tsx
index 427b27623..056a04db0 100644
--- a/apps/web/lib/features/manual-time/manage-member-component.tsx
+++ b/apps/web/lib/features/manual-time/manage-member-component.tsx
@@ -75,6 +75,8 @@ interface ManageOrMemberComponentProps<T extends Item> {
      * @returns {string} - The value string for the item.
      */
     itemToValue: (item: T | null, valueKey: string) => string;
+
+    classNameTitle?: string
 }
 
 /**
diff --git a/apps/web/lib/features/multiple-select/index.tsx b/apps/web/lib/features/multiple-select/index.tsx
index 6eaafea70..b379d9b8c 100644
--- a/apps/web/lib/features/multiple-select/index.tsx
+++ b/apps/web/lib/features/multiple-select/index.tsx
@@ -91,6 +91,7 @@ type CustomSelectProps = {
 
     className?: string,
     ariaLabel?: string
+    defaultValue?: string
     /**
      * Array of string options to be displayed in the dropdown.
      * Each string represents a selectable , such as "daily" or "weekly".
@@ -127,15 +128,24 @@ type CustomSelectProps = {
  *    )}
  * />
  */
-export function CustomSelect({ options, renderOption, ariaLabel, className }: CustomSelectProps) {
-    // State to store the currently selected value in the dropdown.
-    const [selectedValue, setSelectedValue] = React.useState<string>();
-
+export function CustomSelect({
+    options,
+    renderOption,
+    ariaLabel,
+    className,
+    value,
+    onChange,
+    defaultValue
+}: CustomSelectProps & {
+    value?: string,
+    onChange?: (value: string) => void
+}) {
     // Render the select component with dynamic options and optional custom rendering.
     return (
         <Select
-            value={selectedValue}
-            onValueChange={setSelectedValue}
+            defaultValue={defaultValue}
+            value={value}
+            onValueChange={onChange}
             aria-label={ariaLabel || "Select an option"} >
 
             <SelectTrigger
@@ -143,7 +153,7 @@ export function CustomSelect({ options, renderOption, ariaLabel, className }: Cu
             >
                 <SelectValue placeholder="Select an option" />
             </SelectTrigger>
-            <SelectContent className='z-[10000] dark:bg-dark--theme-light'>
+            <SelectContent className='z-[10000] dark:bg-dark--theme-light w-auto'>
                 <SelectGroup>
                     {options.map((value) => (
                         <SelectItem key={value} value={value}>

From 8f6352dba1f95000bf2bcb639fd0b322691cfcd3 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Fri, 22 Nov 2024 19:12:46 +0200
Subject: [PATCH 30/41] [Feat]: Add Component for Timesheet Creation and
 Optimize Task Button (#3359)

* feat: add component for timesheet creation and optimize task button

* feat(timesheet): add grouping by week and month functionality

* fix: simplify and improve readability of conditional rendering in timesheet display

* feat: timesheet creation task buttons

* fix:coderabbitai
---
 .../[memberId]/components/AddTaskModal.tsx    | 157 ++++++++++++++++++
 .../components/FilterWithStatus.tsx           |  42 ++++-
 .../[memberId]/components/FrequencySelect.tsx |  15 +-
 .../[memberId]/components/TimesheetAction.tsx |   9 +-
 .../[memberId]/components/TimesheetFilter.tsx |  14 +-
 .../[locale]/timesheet/[memberId]/page.tsx    |  37 +++--
 .../hooks/features/useTimelogFilterOptions.ts |   5 +-
 apps/web/app/hooks/features/useTimesheet.ts   |  66 +++++++-
 apps/web/app/interfaces/ITask.ts              |   4 +
 apps/web/app/stores/time-logs.ts              |   5 +-
 .../calendar/table-time-sheet.tsx             |  41 +++--
 11 files changed, 330 insertions(+), 65 deletions(-)
 create mode 100644 apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
new file mode 100644
index 000000000..86a6812f0
--- /dev/null
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
@@ -0,0 +1,157 @@
+import { useTeamTasks } from '@/app/hooks';
+import { ITaskIssue } from '@/app/interfaces';
+import { clsxm } from '@/app/utils';
+import { Modal } from '@/lib/components'
+import { CustomSelect, TaskStatus, taskIssues } from '@/lib/features';
+import { Item, ManageOrMemberComponent, getNestedValue } from '@/lib/features/manual-time/manage-member-component';
+import { useTranslations } from 'next-intl';
+import React from 'react'
+import { ToggleButton } from './EditTaskModal';
+export interface IAddTaskModalProps {
+    isOpen: boolean;
+    closeModal: () => void;
+}
+export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
+    const t = useTranslations();
+    const { activeTeam } = useTeamTasks();
+    const [notes, setNotes] = React.useState('');
+    const [task, setTasks] = React.useState('')
+    const [isBillable, setIsBillable] = React.useState<boolean>(true);
+
+    const projectItemsLists = {
+        Project: activeTeam?.projects ?? [],
+    };
+
+    const handleSelectedValuesChange = (values: { [key: string]: Item | null }) => {
+        // Handle value changes
+    };
+    const selectedValues = {
+        Project: null,
+    };
+    const handleChange = (field: string, selectedItem: Item | null) => {
+        // Handle field changes
+    };
+
+    const fields = [
+        {
+            label: t('sidebar.PROJECTS'),
+            placeholder: 'Select a project',
+            isRequired: true,
+            valueKey: 'id',
+            displayKey: 'name',
+            element: 'Project'
+        },
+    ];
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            closeModal={closeModal}
+            title={'ADD TASK'}
+            showCloseIcon
+            className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[30rem] justify-start h-[auto]"
+            titleClass="font-bold flex justify-start w-full">
+            <div className="flex flex-col w-full gap-4 justify-start">
+                <div className=" w-full mr-[4%]">
+                    <label className="block text-[#282048] font-medium mb-1">
+                        Task
+                        <span className="text-[#de5505e1] ml-1">*</span>
+                    </label>
+                    <input
+                        aria-label="Task"
+                        aria-describedby="start-time-error"
+                        type="Task"
+                        value={task}
+                        onChange={(e) => setTasks(e.target?.value)}
+                        className="w-full p-1 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md"
+                        required
+                    />
+                </div>
+                <div className=" w-full mr-[4%] flex items-center">
+                    <label className="block text-[#282048]  mb-1 px-2">
+                        {t('common.ISSUE_TYPE')}
+                        <span className="text-[#de5505e1] ml-1">*</span>:
+                    </label>
+                    <CustomSelect
+                        className='w-auto'
+                        options={Object.keys(taskIssues).flatMap((items) => items)}
+                        renderOption={(option) => (
+                            <div className="flex items-center gap-x-2">
+                                <TaskStatus
+                                    {...taskIssues[option as ITaskIssue]}
+                                    showIssueLabels={false}
+                                    issueType="issue"
+                                    className={clsxm('rounded-md px-2 text-white bg-primary')}
+                                />
+                                {option}
+                            </div>
+                        )}
+                    />
+                </div>
+                <div className=" flex flex-col items-center w-full">
+                    <label className="text-[#282048] font-medium mr-12 capitalize">
+                        {t('pages.timesheet.BILLABLE.BILLABLE').toLowerCase()
+                        }</label>
+                    <div className="flex items-center gap-3">
+                        <ToggleButton
+                            isActive={isBillable}
+                            onClick={() => setIsBillable(true)}
+                            label={t('pages.timesheet.BILLABLE.YES')}
+                        />
+                        <ToggleButton
+                            isActive={!isBillable}
+                            onClick={() => setIsBillable(false)}
+                            label={t('pages.timesheet.BILLABLE.NO')}
+                        />
+                    </div>
+                </div>
+                <div className="w-full flex flex-col">
+                    <ManageOrMemberComponent
+                        fields={fields}
+                        itemsLists={projectItemsLists}
+                        selectedValues={selectedValues}
+                        onSelectedValuesChange={handleSelectedValuesChange}
+                        handleChange={handleChange}
+                        itemToString={(item, displayKey) => getNestedValue(item, displayKey) || ''}
+                        itemToValue={(item, valueKey) => getNestedValue(item, valueKey) || ''}
+                    />
+                </div>
+                <div className="w-full flex flex-col">
+                    <span className="text-[#282048] font-medium">Notes</span>
+                    <textarea
+                        value={notes}
+                        onChange={(e) => setNotes(e.target.value)}
+                        placeholder="Insert notes here..."
+                        className={clsxm(
+                            "bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent",
+                            "placeholder-gray-300 placeholder:font-normal resize-none p-2 grow w-full",
+                            "border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-40 bg-[#FBB6500D]",
+                            notes.trim().length === 0 && "border-red-500"
+                        )}
+                        maxLength={120}
+                        minLength={0}
+                        aria-label="Insert notes here"
+                        required
+                    />
+                    <div className="text-sm text-[#282048] font-medium text-right">
+                        {notes.length}/{120}
+                    </div>
+                </div>
+                <div className="flex items-center gap-x-2 justify-end w-full">
+                    <button
+                        type="button"
+                        className={clsxm("dark:text-primary h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
+                        {t('common.CANCEL')}
+                    </button>
+                    <button
+                        type="submit"
+                        className={clsxm(
+                            'bg-[#3826A6] h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
+                        )}>
+                        {t('common.SAVE')}
+                    </button>
+                </div>
+            </div>
+        </Modal>
+    )
+}
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
index 1ce06fadd..14ac28f0c 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/FilterWithStatus.tsx
@@ -2,23 +2,47 @@
 import React, { HTMLAttributes } from 'react';
 import { Button } from 'lib/components';
 import { clsxm } from '@app/utils';
+import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
 
-export type FilterStatus = 'All Tasks' | 'Pending' | 'Approved' | 'Rejected';
+export type FilterStatus = 'All Tasks' | 'Pending' | 'Approved' | 'In review' | 'Draft' | 'Rejected';
 export function FilterWithStatus({
 	activeStatus,
 	onToggle,
-	className
+	className,
+	data
 }: Readonly<{
 	activeStatus: FilterStatus;
+	data?: Record<TimesheetStatus, TimesheetLog[]>
+
 	onToggle: (status: FilterStatus) => void;
 	className?: HTMLAttributes<HTMLDivElement>;
 }>) {
-	const buttonData: { label: FilterStatus; count: number; icon: React.ReactNode }[] = [
-		{ label: 'All Tasks', count: 46, icon: <i className="icon-all" /> },
-		{ label: 'Pending', count: 12, icon: <i className="icon-pending" /> },
-		{ label: 'Approved', count: 28, icon: <i className="icon-approved" /> },
-		{ label: 'Rejected', count: 6, icon: <i className="icon-rejected" /> }
-	];
+
+	const statusIcons: Record<FilterStatus, string> = {
+		'All Tasks': 'icon-all',
+		Pending: 'icon-pending',
+		Approved: 'icon-approved',
+		'In review': 'icon-rejected',
+		Draft: 'icon-approved',
+		Rejected: 'icon-rejected',
+	};
+
+	const buttonData = React.useMemo(() => {
+		const counts = {
+			'All Tasks': Object.values(data ?? {}).reduce((total, tasks) => total + (tasks?.length ?? 0), 0),
+			Pending: data?.PENDING?.length ?? 0,
+			Approved: data?.APPROVED?.length ?? 0,
+			'In review': data?.['IN REVIEW']?.length ?? 0,
+			Draft: data?.DRAFT?.length ?? 0,
+			Rejected: data?.DENIED?.length ?? 0,
+		};
+		return Object.entries(counts).map(([label, count]) => ({
+			label: label as FilterStatus,
+			count,
+			icon: <i className={statusIcons[label as FilterStatus]} />,
+		}));
+	}, [data]);
+
 
 	return (
 		<div
@@ -34,7 +58,7 @@ export function FilterWithStatus({
 						'group flex items-center justify-start h-[2.2rem] rounded-xl w-full',
 						'dark:bg-gray-800 dark:border-primary-light bg-transparent text-[#71717A] w-[80px]',
 						activeStatus === label &&
-							'text-primary bg-white shadow-2xl dark:text-primary-light font-bold  border'
+						'text-primary bg-white shadow-2xl dark:text-primary-light font-bold  border'
 					)}
 					onClick={() => onToggle(label)}
 				>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx
index ef2f316d1..7cad6ab32 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx
@@ -22,6 +22,8 @@ import { DatePicker } from "@components/ui/DatePicker";
 import { cn } from "@/lib/utils";
 import { format } from "date-fns";
 import { PiCalendarDotsThin } from "react-icons/pi";
+import { useTimelogFilterOptions } from "@/app/hooks";
+import { TimesheetFilterByDays } from "@/app/interfaces";
 
 interface DatePickerInputProps {
     date: Date | null;
@@ -29,24 +31,23 @@ interface DatePickerInputProps {
 }
 
 export function FrequencySelect() {
-    const [selectedValue, setSelectedValue] = React.useState<string | undefined>(undefined);
-
+    const { setTimesheetGroupByDays, timesheetGroupByDays } = useTimelogFilterOptions();
     const handleSelectChange = (value: string) => {
-        setSelectedValue(value);
+        setTimesheetGroupByDays(value as TimesheetFilterByDays);
     };
 
     return (
         <Select
-            value={selectedValue}
+            value={timesheetGroupByDays}
             onValueChange={handleSelectChange}>
             <SelectTrigger className="w-36 overflow-hidden  h-[2.2rem]  text-clip border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
                 <SelectValue placeholder="Select a daily" />
             </SelectTrigger>
             <SelectContent>
                 <SelectGroup>
-                    <SelectItem value="daily">Daily</SelectItem>
-                    <SelectItem value="weekly">Weekly</SelectItem>
-                    <SelectItem value="monthly">Monthly</SelectItem>
+                    <SelectItem value="Daily">Daily</SelectItem>
+                    <SelectItem value="Weekly">Weekly</SelectItem>
+                    <SelectItem value="Monthly">Monthly</SelectItem>
                 </SelectGroup>
             </SelectContent>
         </Select>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
index 5ba36512b..1909dcd13 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx
@@ -1,4 +1,4 @@
-import { TimesheetStatus } from "@/app/interfaces";
+import { TimesheetFilterByDays, TimesheetStatus } from "@/app/interfaces";
 import { clsxm } from "@/app/utils";
 import { TranslationHooks } from "next-intl";
 import { ReactNode } from "react";
@@ -31,6 +31,7 @@ export type StatusType = "Pending" | "Approved" | "Denied";
 export type StatusAction = "Deleted" | "Approved" | "Denied";
 
 
+
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export const getTimesheetButtons = (status: StatusType, t: TranslationHooks, disabled: boolean, onClick: (action: StatusAction) => void) => {
 
@@ -69,3 +70,9 @@ export const statusTable: { label: TimesheetStatus; description: string }[] = [
     { label: "DRAFT", description: "The item is saved as draft" },
     { label: "DENIED", description: "The item has been rejected" },
 ];
+
+export const DailyTable: { label: TimesheetFilterByDays; description: string }[] = [
+    { label: "Daily", description: 'Group by Daily' },
+    { label: "Weekly", description: 'Group by Weekly' },
+    { label: "Monthly", description: 'Group by Monthly' },
+];
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
index a1e3c9de2..71d9c6fb0 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
@@ -1,8 +1,9 @@
 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';
 import { TranslationHooks } from 'next-intl';
+import { AddTaskModal } from './AddTaskModal';
+import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
 
 interface ITimesheetFilter {
     isOpen: boolean,
@@ -11,22 +12,23 @@ interface ITimesheetFilter {
     t: TranslationHooks,
     initDate?: Pick<TimesheetFilterDateProps, 'initialRange' | 'onChange' | 'maxDate' | 'minDate'>,
     onChangeStatus?: (status: FilterStatus) => void;
-    filterStatus?: FilterStatus
+    filterStatus?: FilterStatus,
+    data?: Record<TimesheetStatus, TimesheetLog[]>
+
 }
 
-export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate, filterStatus, onChangeStatus }: ITimesheetFilter,) {
+export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate, filterStatus, onChangeStatus, data }: ITimesheetFilter,) {
     return (
         <>
             {
-                isOpen && <AddManualTimeModal
+                isOpen && <AddTaskModal
                     closeModal={closeModal}
                     isOpen={isOpen}
-                    params="AddManuelTime"
-                    timeSheetStatus="ManagerTimesheet"
                 />}
             <div className="flex w-full justify-between items-center">
                 <div>
                     <FilterWithStatus
+                        data={data}
                         activeStatus={filterStatus || "All Tasks"}
                         onToggle={(label) => onChangeStatus?.(label)}
                     />
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index f3b7df739..d8efb8505 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -43,25 +43,30 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 		from: startOfDay(new Date()),
 		to: endOfDay(new Date())
 	});
-
-	const { timesheet } = useTimesheet({
+	const { timesheet, statusTimesheet } = useTimesheet({
 		startDate: dateRange.from ?? '',
 		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 filterDataTimesheet = useMemo(() => {
+		const filteredTimesheet =
+			timesheet
+				.filter((v) =>
+					v.tasks.some(
+						(task) =>
+							task.task?.title?.toLowerCase()?.includes(lowerCaseSearch) ||
+							task.employee?.fullName?.toLowerCase()?.includes(lowerCaseSearch) ||
+							task.project?.name?.toLowerCase()?.includes(lowerCaseSearch)
+					)
+				);
+
+		return filteredTimesheet;
+	}, [
+		timesheet,
+		lowerCaseSearch,
+	]);
+
 
 	const {
 		isOpen: isManualTimeModalOpen,
@@ -166,8 +171,8 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 									/>
 								</div>
 							</div>
-
 							<TimesheetFilter
+								data={statusTimesheet}
 								onChangeStatus={setFilterStatus}
 								filterStatus={filterStatus}
 								initDate={{
@@ -210,7 +215,7 @@ const ViewToggleButton: React.FC<ViewToggleButtonProps> = ({ mode, active, icon,
 		className={clsxm(
 			'text-[#7E7991]  font-medium w-[191px] h-[40px] flex items-center gap-x-4 text-[14px] px-2 rounded',
 			active &&
-				'border-b-primary text-primary border-b-2 dark:text-primary-light dark:border-b-primary-light bg-[#F1F5F9] dark:bg-gray-800 font-bold'
+			'border-b-primary text-primary border-b-2 dark:text-primary-light dark:border-b-primary-light bg-[#F1F5F9] dark:bg-gray-800 font-bold'
 		)}
 	>
 		{icon}
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
index c246038a8..98d431873 100644
--- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -1,4 +1,4 @@
-import { timesheetDeleteState, timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState } from '@/app/stores';
+import { timesheetDeleteState, timesheetGroupByDayState, timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState } from '@/app/stores';
 import { useAtom } from 'jotai';
 import React from 'react';
 
@@ -8,6 +8,7 @@ export function useTimelogFilterOptions() {
     const [statusState, setStatusState] = useAtom(timesheetFilterStatusState);
     const [taskState, setTaskState] = useAtom(timesheetFilterTaskState);
     const [selectTimesheet, setSelectTimesheet] = useAtom(timesheetDeleteState);
+    const [timesheetGroupByDays, setTimesheetGroupByDays] = useAtom(timesheetGroupByDayState)
 
     const employee = employeeState;
     const project = projectState;
@@ -32,5 +33,7 @@ export function useTimelogFilterOptions() {
         handleSelectRowTimesheet,
         selectTimesheet,
         setSelectTimesheet,
+        timesheetGroupByDays,
+        setTimesheetGroupByDays
     };
 }
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index 9c75b2b4e..ecd130a95 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -2,7 +2,7 @@ import { useAuthenticateUser } from './useAuthenticateUser';
 import { useAtom } from 'jotai';
 import { timesheetRapportState } from '@/app/stores/time-logs';
 import { useQuery } from '../useQuery';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
 import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
@@ -29,7 +29,6 @@ interface DeleteTimesheetParams {
 const groupByDate = (items: TimesheetLog[]): GroupedTimesheet[] => {
     if (!items?.length) return [];
     type GroupedMap = Record<string, TimesheetLog[]>;
-
     const groupedByDate = items.reduce<GroupedMap>((acc, item) => {
         if (!item?.timesheet?.createdAt) {
             console.warn('Skipping item with missing timesheet or createdAt:', item);
@@ -52,7 +51,48 @@ const groupByDate = (items: TimesheetLog[]): GroupedTimesheet[] => {
         .map(([date, tasks]) => ({ date, tasks }))
         .sort((a, b) => b.date.localeCompare(a.date));
 }
+const getWeekYearKey = (date: Date): string => {
+    const startOfYear = new Date(date.getFullYear(), 0, 1);
+    const daysSinceStart = Math.floor((date.getTime() - startOfYear.getTime()) / (1000 * 60 * 60 * 24));
+    const week = Math.ceil((daysSinceStart + startOfYear.getDay() + 1) / 7);
+    return `${date.getFullYear()}-W${week}`;
+};
+
 
+type GroupingKeyFunction = (date: Date) => string;
+
+const createGroupingFunction = (getKey: GroupingKeyFunction) => (items: TimesheetLog[]): GroupedTimesheet[] => {
+    if (!items?.length) return [];
+    type GroupedMap = Record<string, TimesheetLog[]>;
+
+    const grouped = items.reduce<GroupedMap>((acc, item) => {
+        if (!item?.timesheet?.createdAt) {
+            console.warn('Skipping item with missing timesheet or createdAt:', item);
+            return acc;
+        }
+        try {
+            const date = new Date(item.timesheet.createdAt);
+            const key = getKey(date);
+            if (!acc[key]) acc[key] = [];
+            acc[key].push(item);
+        } catch (error) {
+            console.error(
+                `Failed to process date for timesheet ${item.timesheet.id}:`,
+                { createdAt: item.timesheet.createdAt, error }
+            );
+        }
+        return acc;
+    }, {});
+
+    return Object.entries(grouped)
+        .map(([key, tasks]) => ({ date: key, tasks }))
+        .sort((a, b) => b.date.localeCompare(a.date));
+};
+
+const groupByWeek = createGroupingFunction(date => getWeekYearKey(date));
+const groupByMonth = createGroupingFunction(date =>
+    `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`
+);
 
 export function useTimesheet({
     startDate,
@@ -60,7 +100,7 @@ export function useTimesheet({
 }: TimesheetParams) {
     const { user } = useAuthenticateUser();
     const [timesheet, setTimesheet] = useAtom(timesheetRapportState);
-    const { employee, project, task, statusState, selectTimesheet: logIds } = useTimelogFilterOptions();
+    const { employee, project, task, statusState, selectTimesheet: logIds, timesheetGroupByDays } = useTimelogFilterOptions();
     const { loading: loadingTimesheet, queryCall: queryTimesheet } = useQuery(getTaskTimesheetLogsApi);
     const { loading: loadingDeleteTimesheet, queryCall: queryDeleteTimesheet } = useQuery(deleteTaskTimesheetLogsApi)
 
@@ -159,19 +199,29 @@ export function useTimesheet({
     },
         [user, queryDeleteTimesheet, logIds, handleDeleteTimesheet] // deepscan-disable-line
     );
+    const timesheetElementGroup = useMemo(() => {
+        if (timesheetGroupByDays === 'Daily') {
+            return groupByDate(timesheet);
+        }
+        if (timesheetGroupByDays === 'Weekly') {
+            return groupByWeek(timesheet);
+        }
+        return groupByMonth(timesheet);
+    }, [timesheetGroupByDays, timesheet]);
+
 
     useEffect(() => {
         getTaskTimesheet({ startDate, endDate });
-    }, [getTaskTimesheet, startDate, endDate]);
-
-
+    }, [getTaskTimesheet, startDate, endDate, timesheetGroupByDays]);
 
     return {
         loadingTimesheet,
-        timesheet: groupByDate(timesheet),
+        timesheet: timesheetElementGroup,
         getTaskTimesheet,
         loadingDeleteTimesheet,
         deleteTaskTimesheet,
-        getStatusTimesheet
+        getStatusTimesheet,
+        timesheetGroupByDays,
+        statusTimesheet: getStatusTimesheet(timesheet.flat())
     };
 }
diff --git a/apps/web/app/interfaces/ITask.ts b/apps/web/app/interfaces/ITask.ts
index 1a50b539c..173288e0f 100644
--- a/apps/web/app/interfaces/ITask.ts
+++ b/apps/web/app/interfaces/ITask.ts
@@ -144,6 +144,10 @@ export type TimesheetStatus =
 	| "DENIED"
 	| "APPROVED";
 
+export type TimesheetFilterByDays =
+	| "Daily"
+	| "Weekly"
+	| "Monthly"
 
 export type ITaskStatusStack = {
 	status: ITaskStatus;
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index 41354870f..3292d8690 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -1,6 +1,6 @@
 import { ITimerLogsDailyReport } from '@app/interfaces/timer/ITimerLogs';
 import { atom } from 'jotai';
-import { IProject, ITeamTask, OT_Member, TimesheetLog } from '../interfaces';
+import { IProject, ITeamTask, OT_Member, TimesheetFilterByDays, TimesheetLog } from '../interfaces';
 
 interface IFilterOption {
     value: string;
@@ -16,4 +16,5 @@ export const timesheetFilterProjectState = atom<IProject[]>([]);
 export const timesheetFilterTaskState = atom<ITeamTask[]>([]);
 
 export const timesheetFilterStatusState = atom<IFilterOption[]>([]);
-export const timesheetDeleteState = atom<string[]>([])
+export const timesheetDeleteState = atom<string[]>([]);
+export const timesheetGroupByDayState = atom<TimesheetFilterByDays>('Daily')
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 8d7c19c4b..60f1dfb29 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -52,7 +52,8 @@ import {
 	RejectSelectedModal,
 	StatusAction,
 	StatusType,
-	getTimesheetButtons
+	getTimesheetButtons,
+	statusTable
 } from '@/app/[locale]/timesheet/[memberId]/components';
 import { useTranslations } from 'next-intl';
 import { formatDate } from '@/app/helpers';
@@ -152,7 +153,7 @@ export const columns: ColumnDef<TimeSheet>[] = [
 export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 	const { isOpen, openModal, closeModal } = useModal();
 	const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet } = useTimesheet({});
-	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet } = useTimelogFilterOptions();
+	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet, timesheetGroupByDays } = useTimelogFilterOptions();
 	const [isDialogOpen, setIsDialogOpen] = React.useState(false);
 	const handleConfirm = () => {
 		try {
@@ -234,20 +235,25 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 				isOpen={isOpen}
 			/>
 			<div className="rounded-md">
-				{data?.map((plan, index) => (
-					<div key={index}>
+				{data?.map((plan, index) => {
+					return <div key={index}>
 						<div
 							className={clsxm(
 								'h-[48px] flex justify-between items-center w-full',
 								'bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1',
 								'border-gray-400 px-5 text-[#71717A] font-medium'
 							)}>
-							<span>{formatDate(plan.date)}</span>
+							<div className='flex gap-x-3'>
+								{timesheetGroupByDays === 'Weekly' && (
+									<span>Week {index + 1}</span>
+								)}
+								<span>{formatDate(plan.date)}</span>
+							</div>
 							<TotalDurationByDate
 								timesheetLog={plan.tasks}
-								createdAt={formatDate(plan.date)} />
+								createdAt={formatDate(plan.date)}
+							/>
 						</div>
-
 						<Accordion type="single" collapsible>
 							{Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => (
 								<AccordionItem
@@ -343,7 +349,9 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 							))}
 						</Accordion>
 					</div>
-				))}
+				}
+
+				)}
 			</div>
 			<div className="flex items-center justify-end p-4 space-x-2">
 				<div className="flex-1 text-sm text-muted-foreground">
@@ -388,6 +396,7 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
 	const { isOpen, closeModal, openModal } = useModal();
 	const [selected] = React.useState(selectedStatus);
 	const [newStatus, setNewStatus] = React.useState('');
+	const t = useTranslations();
 
 	const getColorClass = () => {
 		switch (selected) {
@@ -419,7 +428,7 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
 				</SelectTrigger>
 				<SelectContent>
 					<SelectGroup className="rounded">
-						<SelectLabel>Status</SelectLabel>
+						<SelectLabel>{t('common.STATUS')}</SelectLabel>
 						{statusOptions.map((option, index) => (
 							<div key={option.value}>
 								<SelectItem value={option.value}>{option.label}</SelectItem>
@@ -437,6 +446,8 @@ export function SelectFilter({ selectedStatus }: { selectedStatus?: string }) {
 
 const TaskActionMenu = ({ dataTimesheet }: { dataTimesheet: TimesheetLog }) => {
 	const { isOpen: isEditTask, openModal: isOpenModalEditTask, closeModal: isCloseModalEditTask } = useModal();
+	const t = useTranslations();
+
 	return (
 		<>
 			{<EditTaskModal
@@ -453,12 +464,12 @@ const TaskActionMenu = ({ dataTimesheet }: { dataTimesheet: TimesheetLog }) => {
 				</DropdownMenuTrigger>
 				<DropdownMenuContent align="end">
 					<DropdownMenuItem className="cursor-pointer" onClick={isOpenModalEditTask}>
-						Edit
+						{t('common.EDIT')}
 					</DropdownMenuItem>
 					<DropdownMenuSeparator />
 					<StatusTask />
 					<DropdownMenuItem className="text-red-600 hover:!text-red-600 cursor-pointer">
-						Delete
+						{t('common.DELETE')}
 					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
@@ -490,10 +501,10 @@ export const StatusTask = () => {
 				</DropdownMenuSubTrigger>
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>
-						{statusOptions?.map((status, index) => (
-							<DropdownMenuItem key={index} textValue={status.value} className="cursor-pointer">
+						{statusTable?.map((status, index) => (
+							<DropdownMenuItem key={index} textValue={status.label} className="cursor-pointer">
 								<div className="flex items-center gap-3">
-									<div className={clsxm('h-2 w-2 rounded-full', statusColor(status.value).bg)}></div>
+									<div className={clsxm('h-2 w-2 rounded-full', statusColor(status.label).bg)}></div>
 									<span>{status.label}</span>
 								</div>
 							</DropdownMenuItem>
@@ -503,7 +514,7 @@ export const StatusTask = () => {
 			</DropdownMenuSub>
 			<DropdownMenuSub>
 				<DropdownMenuSubTrigger>
-					<span>Billable</span>
+					<span>{t('pages.timesheet.BILLABLE.BILLABLE')}</span>
 				</DropdownMenuSubTrigger>
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>

From 528362cec61b5d366397968fb57b913f40bf05b5 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Sun, 24 Nov 2024 18:32:36 +0200
Subject: [PATCH 31/41] [Feat]: Add time Entry Modal and  Update Timesheet
 Status based on API response (#3365)

* feat: feat: add AddTimeEntyModal component for managing task entries with time and project association

* feat: update timesheet status based on API response

* feat: display total for pending tasks

* fix:coderabbitai

* fix:coderabbitai

* fix:coderabbitai

* fix:coderabbitai
---
 .../[memberId]/components/AddTaskModal.tsx    | 281 ++++++++++++++++--
 .../[memberId]/components/EditTaskModal.tsx   |  12 +-
 .../components/TimesheetFilterDate.tsx        |   2 +-
 .../[locale]/timesheet/[memberId]/page.tsx    |   6 +-
 .../app/api/timer/timesheet/status/route.ts   |  69 +++++
 .../hooks/features/useTimelogFilterOptions.ts |  18 +-
 apps/web/app/hooks/features/useTimesheet.ts   |  41 ++-
 apps/web/app/hooks/useScrollListener.ts       |  26 ++
 apps/web/app/interfaces/IDailyPlan.ts         |   7 +
 apps/web/app/interfaces/timer/ITimerLog.ts    |  29 ++
 .../services/client/api/timer/timer-log.ts    |  11 +-
 .../app/services/server/requests/timesheet.ts |  14 +-
 apps/web/app/stores/time-logs.ts              |   3 +-
 apps/web/components/ui/accordion.tsx          |   2 +-
 .../calendar/table-time-sheet.tsx             |  10 +-
 .../manual-time/manage-member-component.tsx   |   4 +-
 16 files changed, 476 insertions(+), 59 deletions(-)
 create mode 100644 apps/web/app/api/timer/timesheet/status/route.ts

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
index 86a6812f0..2df35bfe9 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
@@ -1,23 +1,34 @@
-import { useTeamTasks } from '@/app/hooks';
+import React from 'react'
+import { useTeamTasks, useTimelogFilterOptions } from '@/app/hooks';
 import { ITaskIssue } from '@/app/interfaces';
 import { clsxm } from '@/app/utils';
 import { Modal } from '@/lib/components'
 import { CustomSelect, TaskStatus, taskIssues } from '@/lib/features';
 import { Item, ManageOrMemberComponent, getNestedValue } from '@/lib/features/manual-time/manage-member-component';
 import { useTranslations } from 'next-intl';
-import React from 'react'
 import { ToggleButton } from './EditTaskModal';
+import { PlusIcon } from '@radix-ui/react-icons';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
+import { DatePickerFilter } from './TimesheetFilterDate';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select';
 export interface IAddTaskModalProps {
     isOpen: boolean;
     closeModal: () => void;
 }
 export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
+    const { generateTimeOptions } = useTimelogFilterOptions();
+    const timeOptions = generateTimeOptions(15);
     const t = useTranslations();
     const { activeTeam } = useTeamTasks();
     const [notes, setNotes] = React.useState('');
     const [task, setTasks] = React.useState('')
     const [isBillable, setIsBillable] = React.useState<boolean>(true);
-
+    const [dateRange, setDateRange] = React.useState<{ from: Date | null }>({
+        from: new Date(),
+    });
+    const handleFromChange = (fromDate: Date | null) => {
+        setDateRange((prev) => ({ ...prev, from: fromDate }));
+    };
     const projectItemsLists = {
         Project: activeTeam?.projects ?? [],
     };
@@ -34,7 +45,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
 
     const fields = [
         {
-            label: t('sidebar.PROJECTS'),
+            label: 'Link to Project',
             placeholder: 'Select a project',
             isRequired: true,
             valueKey: 'id',
@@ -47,13 +58,13 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
         <Modal
             isOpen={isOpen}
             closeModal={closeModal}
-            title={'ADD TASK'}
+            title={'+ Add Time Entry'}
             showCloseIcon
-            className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[30rem] justify-start h-[auto]"
+            className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-40 md:min-w-[30rem] justify-start h-[auto] overflow-y-auto"
             titleClass="font-bold flex justify-start w-full">
-            <div className="flex flex-col w-full gap-4 justify-start">
+            <div className="flex flex-col w-full gap-4 justify-start overflow-y-auto">
                 <div className=" w-full mr-[4%]">
-                    <label className="block text-[#282048] font-medium mb-1">
+                    <label className="block text-[#282048] dark:text-gray-400 font-medium mb-1">
                         Task
                         <span className="text-[#de5505e1] ml-1">*</span>
                     </label>
@@ -63,17 +74,19 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         type="Task"
                         value={task}
                         onChange={(e) => setTasks(e.target?.value)}
-                        className="w-full p-1 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md"
+                        className="w-full p-2 border font-normal border-slate-300 dark:border-slate-600 dark:bg-dark--theme-light rounded-md"
+                        placeholder='Bug for creating calendar view'
                         required
                     />
                 </div>
                 <div className=" w-full mr-[4%] flex items-center">
-                    <label className="block text-[#282048]  mb-1 px-2">
-                        {t('common.ISSUE_TYPE')}
+                    <label className="block text-[#282048] dark:text-gray-400  mb-1 px-2">
+                        Types
                         <span className="text-[#de5505e1] ml-1">*</span>:
                     </label>
                     <CustomSelect
-                        className='w-auto'
+                        ariaLabel='Task issues'
+                        className='w-32 bg-[#3826A633] text-primary font-medium'
                         options={Object.keys(taskIssues).flatMap((items) => items)}
                         renderOption={(option) => (
                             <div className="flex items-center gap-x-2">
@@ -88,11 +101,30 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         )}
                     />
                 </div>
-                <div className=" flex flex-col items-center w-full">
-                    <label className="text-[#282048] font-medium mr-12 capitalize">
+                <div>
+                    <OptimizedAccordion
+                        dateRange={dateRange}
+                        timeOptions={timeOptions}
+                        handleFromChange={handleFromChange} />
+                </div>
+
+                <div className="w-full flex flex-col">
+                    <ManageOrMemberComponent
+                        classNameTitle='text-[#282048] dark:text-gray-400 font-medium mr-12 capitalize'
+                        fields={fields}
+                        itemsLists={projectItemsLists}
+                        selectedValues={selectedValues}
+                        onSelectedValuesChange={handleSelectedValuesChange}
+                        handleChange={handleChange}
+                        itemToString={(item, displayKey) => getNestedValue(item, displayKey) || ''}
+                        itemToValue={(item, valueKey) => getNestedValue(item, valueKey) || ''}
+                    />
+                </div>
+                <div className=" flex flex-col items-start w-full">
+                    <label className="text-[#282048] dark:text-gray-400 font-medium mr-12 capitalize">
                         {t('pages.timesheet.BILLABLE.BILLABLE').toLowerCase()
                         }</label>
-                    <div className="flex items-center gap-3">
+                    <div className="flex items-start gap-3">
                         <ToggleButton
                             isActive={isBillable}
                             onClick={() => setIsBillable(true)}
@@ -105,19 +137,9 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         />
                     </div>
                 </div>
+
                 <div className="w-full flex flex-col">
-                    <ManageOrMemberComponent
-                        fields={fields}
-                        itemsLists={projectItemsLists}
-                        selectedValues={selectedValues}
-                        onSelectedValuesChange={handleSelectedValuesChange}
-                        handleChange={handleChange}
-                        itemToString={(item, displayKey) => getNestedValue(item, displayKey) || ''}
-                        itemToValue={(item, valueKey) => getNestedValue(item, valueKey) || ''}
-                    />
-                </div>
-                <div className="w-full flex flex-col">
-                    <span className="text-[#282048] font-medium">Notes</span>
+                    <span className="text-[#282048] dark:text-gray-400 font-medium">Notes</span>
                     <textarea
                         value={notes}
                         onChange={(e) => setNotes(e.target.value)}
@@ -125,7 +147,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         className={clsxm(
                             "bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent",
                             "placeholder-gray-300 placeholder:font-normal resize-none p-2 grow w-full",
-                            "border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-40 bg-[#FBB6500D]",
+                            "border border-gray-200 dark:border-slate-600 dark:bg-dark--theme-light rounded-md h-36 bg-[#FBB6500D]",
                             notes.trim().length === 0 && "border-red-500"
                         )}
                         maxLength={120}
@@ -133,20 +155,23 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                         aria-label="Insert notes here"
                         required
                     />
-                    <div className="text-sm text-[#282048] font-medium text-right">
+                    <div className="text-sm text-[#282048] dark:text-gray-400 font-medium text-right">
                         {notes.length}/{120}
                     </div>
                 </div>
                 <div className="flex items-center gap-x-2 justify-end w-full">
                     <button
                         type="button"
-                        className={clsxm("dark:text-primary h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
+                        onClick={closeModal}
+                        className={clsxm(
+                            "text-primary dark:text-primary-light h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light"
+                        )}>
                         {t('common.CANCEL')}
                     </button>
                     <button
                         type="submit"
                         className={clsxm(
-                            'bg-[#3826A6] h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
+                            'bg-primary dark:bg-primary-light h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
                         )}>
                         {t('common.SAVE')}
                     </button>
@@ -155,3 +180,197 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
         </Modal>
     )
 }
+interface ShiftTimingSelectProps {
+    label: string;
+    timeOptions: string[];
+    placeholder: string;
+    className?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+
+const ShiftTimingSelect = ({ label, timeOptions, placeholder, className, onChange, value }: ShiftTimingSelectProps) => (
+    <div className="flex items-center border border-gray-200 dark:border-gray-700 gap-2 rounded w-full">
+        <button className={clsxm("  border-r px-2 py-2 text-center flex items-center font-medium hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none", className)}>
+            {label}
+        </button>
+        <Select
+            onValueChange={onChange}
+            value={value}>
+            <SelectTrigger className="w-full text-ellipsis border-transparent rounded-none bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
+                <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+            <SelectContent className="z-[10000] max-h-60 overflow-y-auto">
+                <SelectGroup>
+                    {timeOptions.map((time) => (
+                        <SelectItem
+                            key={time}
+                            value={time}
+                            className="hover:bg-primary focus:bg-primary hover:text-white px-2 py-1 cursor-pointer"
+                        >
+                            {time}
+                        </SelectItem>
+                    ))}
+                </SelectGroup>
+            </SelectContent>
+        </Select>
+    </div>
+);
+interface Shift {
+    startTime: string;
+    endTime: string;
+    totalHours: string;
+    dateFrom: Date | string
+}
+const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
+    dateRange: { from: Date | null };
+    handleFromChange: (date: Date | null) => void;
+    timeOptions: string[];
+}) => {
+    const [shifts, setShifts] = React.useState<Shift[]>([
+        { startTime: '', endTime: '', totalHours: '00:00h', dateFrom: new Date() },
+    ])
+    const convertToMinutes = (time: string): number => {
+        const [hours, minutes] = time.split(':').map(Number);
+        return hours * 60 + minutes;
+    };
+
+    const calculateTotalHours = React.useCallback((start: string, end: string): string => {
+        if (!start || !end) return '00:00h';
+
+        const startMinutes = convertToMinutes(start);
+        const endMinutes = convertToMinutes(end);
+
+        const totalMinutes = endMinutes >= startMinutes
+            ? endMinutes - startMinutes
+            : 1440 - startMinutes + endMinutes;
+
+        const hours = Math.floor(totalMinutes / 60);
+        const minutes = totalMinutes % 60;
+        return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}h`;
+    }, []);
+
+
+
+    const handleAddShift = () => {
+        setShifts([...shifts,
+        { startTime: '', endTime: '', totalHours: '00:00h', dateFrom: new Date() },]);
+    };
+
+    const handleRemoveShift = (index: number) => {
+        const updatedShifts = shifts.filter((_, i) => i !== index);
+        setShifts(updatedShifts);
+    };
+
+    const handleShiftChange = (index: number, field: keyof Shift, value: string) => {
+        const updatedShifts = [...shifts];
+        updatedShifts[index][field] = value;
+
+        if (field === 'startTime' || field === 'endTime') {
+            const { startTime, endTime } = updatedShifts[index];
+            updatedShifts[index].totalHours = calculateTotalHours(startTime, endTime);
+            const isOverlapping = shifts.some((shift, i) => {
+                if (i === index || !shift.startTime || !shift.endTime) return false;
+                const currentStart = convertToMinutes(startTime);
+                const currentEnd = convertToMinutes(endTime);
+                const shiftStart = convertToMinutes(shift.startTime);
+                const shiftEnd = convertToMinutes(shift.endTime);
+                return (currentStart >= shiftStart && currentStart < shiftEnd) ||
+                    (currentEnd > shiftStart && currentEnd <= shiftEnd);
+            });
+            if (isOverlapping) {
+                return;
+            }
+        }
+        setShifts(updatedShifts);
+    };
+
+    return (
+        <>
+            {shifts.map((element, index) => {
+                return <Accordion key={index} type="single" collapsible className="w-full p-1">
+                    <AccordionItem value={`item-${index}`}
+                        className="border rounded">
+                        <AccordionTrigger className="flex flex-row-reverse justify-end h-10 p-1 items-center hover:no-underline">
+                            <div className="flex items-center justify-between w-full">
+                                <label className="block text-[#282048] dark:text-gray-400 mb-1 px-2">
+                                    Date and Time
+                                    <span className="text-[#de5505e1] ml-1">*</span>:
+                                </label>
+                                <span
+                                    onClick={() => handleRemoveShift(index)}
+                                    className="hover:underline font-normal text-primary dark:text-primary-light cursor-pointer">
+                                    Remove Period
+                                </span>
+                            </div>
+                        </AccordionTrigger>
+                        <AccordionContent className="p-2">
+                            <div className="flex flex-col gap-2">
+
+                                <ShiftManagement
+                                    value={element}
+                                    index={index}
+                                    onChange={handleShiftChange}
+                                    timeOptions={timeOptions}
+                                />
+
+                            </div>
+                        </AccordionContent>
+                    </AccordionItem>
+                </Accordion>
+            })}
+            <button onClick={handleAddShift} className='flex items-center justify-start gap-2 cursor-pointer'>
+                <div className='bg-[#3826A6] dark:bg-primary-light p-[0.5] rounded text-white'>
+                    <PlusIcon />
+                </div>
+                <span className='text-[#3826A6] dark:text-primary-light hover:underline'>Add Another Period</span>
+            </button>
+        </>
+
+    )
+};
+
+const ShiftManagement = (
+    { onChange, value, index, timeOptions }: {
+        onChange: (index: number, field: keyof Shift, value: string) => void,
+        value: Shift, index: number, timeOptions: string[]
+    }) => {
+    return (
+
+        <>
+            <div className="w-[212px]">
+                <span>Date</span>
+                <DatePickerFilter
+                    label={value.dateFrom ? value.dateFrom.toLocaleString() : 'Select Date'}
+                    date={value.dateFrom as Date}
+                    setDate={(value) => onChange(index, 'dateFrom', value as any)}
+                />
+            </div>
+            <div className="flex flex-col w-full items-start gap-2">
+                <span className="font-medium">Shift Timing</span>
+                <div className="flex items-center w-full justify-between gap-4 mb-4">
+                    <ShiftTimingSelect
+                        label="Start"
+                        timeOptions={timeOptions}
+                        placeholder="00:00"
+                        className="bg-[#30B3661A]"
+                        value={value.startTime}
+                        onChange={(value) => onChange(index, 'startTime', value)}
+                    />
+                    <ShiftTimingSelect
+                        label="End"
+                        timeOptions={timeOptions}
+                        placeholder="00:00"
+                        className="bg-[#DA27271A]"
+                        value={value.endTime}
+                        onChange={(value) => onChange(index, 'endTime', value)}
+                    />
+                    <button className="bg-gray-100 dark:bg-gray-800 border-r px-2 py-2 text-center flex items-center font-medium hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
+                        {value.totalHours}
+                    </button>
+                </div>
+            </div>
+        </>
+
+    );
+};
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
index ae018d1b1..7e5274976 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
@@ -172,7 +172,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 						</div>
 					</div>
 					<div className="w-full flex flex-col">
-						<span className="text-[#282048] dark:text-gray-500  ">Notes</span>
+						<span className="text-[#282048] dark:text-gray-400  ">Notes</span>
 						<textarea
 							value={notes}
 							onChange={(e) => setNotes(e.target.value)}
@@ -211,13 +211,13 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 						<div className="flex items-center gap-x-2 justify-end w-full">
 							<button
 								type="button"
-								className={clsxm("dark:text-primary h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
+								className={clsxm("dark:text-primary-light h-[2.3rem] w-[5.5rem] border px-2 rounded-lg border-gray-300 dark:border-slate-600 font-normal dark:bg-dark--theme-light")}>
 								{t('common.CANCEL')}
 							</button>
 							<button
 								type="submit"
 								className={clsxm(
-									'bg-[#4435a1] h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
+									'bg-primary dark:bg-primary-light h-[2.3rem] w-[5.5rem] justify-center font-normal flex items-center text-white px-2 rounded-lg',
 								)}>
 								{t('common.SAVE')}
 							</button>
@@ -242,17 +242,17 @@ export const ToggleButton = ({ isActive, onClick, label }: ToggleButtonProps) =>
 		onClick={onClick}
 		aria-pressed={isActive}
 		className={clsxm(
-			'flex items-center gap-x-2 p-2 rounded focus:outline-none focus:ring-2 focus:ring-primary/50',
+			'flex items-center gap-x-2 p-2 rounded focus:outline-none focus:ring-2 focus:ring-primary/50 dark:focus:ring-primary-light/50',
 			'transition-colors duration-200 ease-in-out'
 		)}
 	>
 		<div
 			className={clsxm(
 				'w-4 h-4 rounded-full transition-colors duration-200 ease-in-out',
-				isActive ? 'bg-primary' : 'bg-gray-200'
+				isActive ? 'bg-primary dark:bg-primary-light' : 'bg-gray-200'
 			)}
 		/>
-		<span className={clsxm('', isActive && 'text-primary')}>
+		<span className={clsxm('', isActive && 'text-primary dark:text-primary-light')}>
 			{label}
 		</span>
 	</button>
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
index 89726ea65..5c50e0631 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
@@ -336,7 +336,7 @@ export const FilterCalendar = memo(function FuturePlansCalendar<T extends { date
 			toYear={
 				endYear ||
 				new Date(sortedPlansByDateDesc?.[sortedPlansByDateDesc?.length - 1]?.date ?? Date.now()).getFullYear() +
-					10
+				10
 			}
 		/>
 	);
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index d8efb8505..14218b4de 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -48,6 +48,8 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 		endDate: dateRange.to ?? ''
 	});
 
+
+
 	const lowerCaseSearch = useMemo(() => search?.toLowerCase() ?? '', [search]);
 	const filterDataTimesheet = useMemo(() => {
 		const filteredTimesheet =
@@ -66,8 +68,6 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 		timesheet,
 		lowerCaseSearch,
 	]);
-
-
 	const {
 		isOpen: isManualTimeModalOpen,
 		openModal: openManualTimeModal,
@@ -119,7 +119,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 							</div>
 							<div className="flex items-center justify-between w-full gap-6 pt-4">
 								<TimesheetCard
-									count={72}
+									count={statusTimesheet.PENDING.length}
 									title="Pending Tasks"
 									description="Tasks waiting for your approval"
 									icon={<GrTask className="font-bold" />}
diff --git a/apps/web/app/api/timer/timesheet/status/route.ts b/apps/web/app/api/timer/timesheet/status/route.ts
new file mode 100644
index 000000000..cda2aeb28
--- /dev/null
+++ b/apps/web/app/api/timer/timesheet/status/route.ts
@@ -0,0 +1,69 @@
+import { ID } from "@/app/interfaces";
+import { authenticatedGuard } from "@/app/services/server/guards/authenticated-guard-app";
+import { updateStatusTimesheetRequest } from "@/app/services/server/requests";
+import { NextResponse } from "next/server";
+
+export async function PUT(req: Request) {
+    const res = new NextResponse();
+    const {
+        $res,
+        user,
+        tenantId,
+        organizationId,
+        access_token
+    } = await authenticatedGuard(req, res);
+    if (!user) return $res('Unauthorized');
+
+    try {
+        const { searchParams } = new URL(req.url);
+
+        const rawIds = searchParams.get('ids');
+        const status = searchParams.get('status');
+
+        if (!rawIds || !status) {
+            return $res({
+                success: false,
+                message: 'Missing required parameters'
+            });
+        }
+        let ids: ID[];
+        try {
+            ids = JSON.parse(rawIds);
+            if (!Array.isArray(ids) || !ids.length) {
+                throw new Error('Invalid ids format');
+            }
+        } catch (error) {
+            return $res({
+                success: false,
+                message: 'Invalid ids format'
+            });
+        }
+        const validStatuses = ['pending', 'approved', 'rejected'];
+        if (!validStatuses.includes(status)) {
+            return $res({
+                success: false,
+                message: 'Invalid status value'
+            });
+        }
+        const { data } = await updateStatusTimesheetRequest(
+            {
+                ids,
+                organizationId,
+                status,
+                tenantId
+            },
+            access_token
+        );
+
+        return $res({
+            success: true,
+            data
+        });
+    } catch (error) {
+        console.error('Error updating timesheet status:', error);
+        return $res({
+            success: false,
+            message: 'Failed to update timesheet status'
+        });
+    }
+}
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
index 98d431873..b37953048 100644
--- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -1,4 +1,4 @@
-import { timesheetDeleteState, timesheetGroupByDayState, timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState } from '@/app/stores';
+import { timesheetDeleteState, timesheetGroupByDayState, timesheetFilterEmployeeState, timesheetFilterProjectState, timesheetFilterStatusState, timesheetFilterTaskState, timesheetUpdateStatus } from '@/app/stores';
 import { useAtom } from 'jotai';
 import React from 'react';
 
@@ -8,12 +8,21 @@ export function useTimelogFilterOptions() {
     const [statusState, setStatusState] = useAtom(timesheetFilterStatusState);
     const [taskState, setTaskState] = useAtom(timesheetFilterTaskState);
     const [selectTimesheet, setSelectTimesheet] = useAtom(timesheetDeleteState);
-    const [timesheetGroupByDays, setTimesheetGroupByDays] = useAtom(timesheetGroupByDayState)
+    const [timesheetGroupByDays, setTimesheetGroupByDays] = useAtom(timesheetGroupByDayState);
+    const [puTimesheetStatus, setPuTimesheetStatus] = useAtom(timesheetUpdateStatus)
 
     const employee = employeeState;
     const project = projectState;
     const task = taskState
 
+    const generateTimeOptions = (interval = 15) => {
+        const totalSlots = (24 * 60) / interval; // Total intervals in a day
+        return Array.from({ length: totalSlots }, (_, i) => {
+            const hour = Math.floor((i * interval) / 60).toString().padStart(2, '0');
+            const minutes = ((i * interval) % 60).toString().padStart(2, '0');
+            return `${hour}:${minutes}`;
+        });
+    };
     const handleSelectRowTimesheet = (items: string) => {
         setSelectTimesheet((prev) => prev.includes(items) ? prev.filter((filter) => filter !== items) : [...prev, items])
     }
@@ -34,6 +43,9 @@ export function useTimelogFilterOptions() {
         selectTimesheet,
         setSelectTimesheet,
         timesheetGroupByDays,
-        setTimesheetGroupByDays
+        setTimesheetGroupByDays,
+        generateTimeOptions,
+        setPuTimesheetStatus,
+        puTimesheetStatus
     };
 }
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index ecd130a95..75be26e60 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -3,9 +3,9 @@ import { useAtom } from 'jotai';
 import { timesheetRapportState } from '@/app/stores/time-logs';
 import { useQuery } from '../useQuery';
 import { useCallback, useEffect, useMemo } from 'react';
-import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi } from '@/app/services/client/api/timer/timer-log';
+import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi, updateStatusTimesheetFromApi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
-import { TimesheetLog, TimesheetStatus } from '@/app/interfaces';
+import { ID, TimesheetLog, TimesheetStatus } from '@/app/interfaces';
 import { useTimelogFilterOptions } from './useTimelogFilterOptions';
 
 interface TimesheetParams {
@@ -100,9 +100,10 @@ export function useTimesheet({
 }: TimesheetParams) {
     const { user } = useAuthenticateUser();
     const [timesheet, setTimesheet] = useAtom(timesheetRapportState);
-    const { employee, project, task, statusState, selectTimesheet: logIds, timesheetGroupByDays } = useTimelogFilterOptions();
+    const { employee, project, task, statusState, selectTimesheet: logIds, timesheetGroupByDays, puTimesheetStatus } = useTimelogFilterOptions();
     const { loading: loadingTimesheet, queryCall: queryTimesheet } = useQuery(getTaskTimesheetLogsApi);
-    const { loading: loadingDeleteTimesheet, queryCall: queryDeleteTimesheet } = useQuery(deleteTaskTimesheetLogsApi)
+    const { loading: loadingDeleteTimesheet, queryCall: queryDeleteTimesheet } = useQuery(deleteTaskTimesheetLogsApi);
+    const { loading: loadingUpdateTimesheetStatus, queryCall: queryUpdateTimesheetStatus } = useQuery(updateStatusTimesheetFromApi)
 
 
     const getTaskTimesheet = useCallback(
@@ -137,6 +138,31 @@ export function useTimesheet({
         ]
     );
 
+    const updateTimesheetStatus = useCallback(
+        ({ status, ids }: { status: TimesheetStatus, ids: ID[] | ID }) => {
+            if (!user) return;
+            queryUpdateTimesheetStatus({ ids, status })
+                .then((response) => {
+                    const updatedData = timesheet.map(item => {
+                        const newItem = response.data.find(newItem => newItem.id === item.timesheet.id);
+                        if (newItem) {
+                            return {
+                                ...item,
+                                timesheet: {
+                                    ...item.timesheet,
+                                    status: newItem.status
+                                }
+                            };
+                        }
+                        return item;
+                    });
+                    setTimesheet(updatedData);
+                })
+                .catch((error) => {
+                    console.error('Error fetching timesheet:', error);
+                });
+        }, [queryUpdateTimesheetStatus])
+
     const getStatusTimesheet = (items: TimesheetLog[] = []) => {
         const STATUS_MAP: Record<TimesheetStatus, TimesheetLog[]> = {
             PENDING: [],
@@ -212,7 +238,7 @@ export function useTimesheet({
 
     useEffect(() => {
         getTaskTimesheet({ startDate, endDate });
-    }, [getTaskTimesheet, startDate, endDate, timesheetGroupByDays]);
+    }, [getTaskTimesheet, startDate, endDate, timesheetGroupByDays, timesheet]);
 
     return {
         loadingTimesheet,
@@ -222,6 +248,9 @@ export function useTimesheet({
         deleteTaskTimesheet,
         getStatusTimesheet,
         timesheetGroupByDays,
-        statusTimesheet: getStatusTimesheet(timesheet.flat())
+        statusTimesheet: getStatusTimesheet(timesheet.flat()),
+        updateTimesheetStatus,
+        loadingUpdateTimesheetStatus,
+        puTimesheetStatus
     };
 }
diff --git a/apps/web/app/hooks/useScrollListener.ts b/apps/web/app/hooks/useScrollListener.ts
index eb0ef9c4b..8b5343169 100644
--- a/apps/web/app/hooks/useScrollListener.ts
+++ b/apps/web/app/hooks/useScrollListener.ts
@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import { TimesheetLog } from '../interfaces';
 
 export function useScrollListener() {
 	const [scrolling, setScrolling] = React.useState(false);
@@ -20,3 +21,28 @@ export function useScrollListener() {
 
 	return { scrolling };
 }
+
+
+
+export const useInfinityScroll = (timesheet: TimesheetLog[]) => {
+
+	const [items, setItems] = React.useState<TimesheetLog[]>(timesheet);
+	const [page, setPage] = React.useState(1);
+	const [isLoading, setIsLoading] = React.useState(false);
+
+
+	React.useEffect(() => {
+		const handleScroll = () => {
+			if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500 && !isLoading) {
+				setPage((prevPage) => prevPage + 1);
+			}
+		};
+		window.addEventListener("scroll", handleScroll);
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+		};
+	}, [isLoading]);
+
+
+	return { items, page, setIsLoading, setItems }
+}
diff --git a/apps/web/app/interfaces/IDailyPlan.ts b/apps/web/app/interfaces/IDailyPlan.ts
index e296af463..c7aa0324e 100644
--- a/apps/web/app/interfaces/IDailyPlan.ts
+++ b/apps/web/app/interfaces/IDailyPlan.ts
@@ -38,4 +38,11 @@ export enum DailyPlanStatusEnum {
 	COMPLETED = 'completed'
 }
 
+export interface IUpdateTimesheetStatus {
+	ids: ID[] | ID,
+	organizationId?: ID,
+	status: ID,
+	tenantId?: ID
+}
+
 export type IDailyPlanMode = 'today' | 'tomorrow' | 'custom';
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
index d6e469d25..13952ec97 100644
--- a/apps/web/app/interfaces/timer/ITimerLog.ts
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -108,3 +108,32 @@ export interface TimesheetLog extends BaseEntity {
     duration: number;
     isEdited: boolean;
 }
+
+
+
+export interface UpdateTimesheetStatus extends BaseEntity {
+    isActive: boolean;
+    isArchived: boolean;
+    archivedAt: string | null;
+    duration: number;
+    keyboard: number;
+    mouse: number;
+    overall: number;
+    startedAt: string;
+    stoppedAt: string;
+    approvedAt: string | null;
+    submittedAt: string | null;
+    lockedAt: string | null;
+    editedAt: string | null;
+    isBilled: boolean;
+    status:
+    | "DRAFT"
+    | "PENDING"
+    | "IN REVIEW"
+    | "DENIED"
+    | "APPROVED";
+    employeeId: string;
+    approvedById: string | null;
+    employee: Employee;
+    isEdited: boolean;
+}
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 7ba7347c5..8e4682ef5 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -1,5 +1,6 @@
-import { TimesheetLog, ITimerStatus } from '@app/interfaces';
-import { get, deleteApi } from '../../axios';
+import { TimesheetLog, ITimerStatus, IUpdateTimesheetStatus, UpdateTimesheetStatus } from '@app/interfaces';
+import { get, deleteApi, put } from '../../axios';
+import { getOrganizationIdCookie, getTenantIdCookie } from '@/app/helpers';
 
 export async function getTimerLogs(
 	tenantId: string,
@@ -120,3 +121,9 @@ export async function deleteTaskTimesheetLogsApi({
 		throw new Error(`Failed to delete timesheet logs`);
 	}
 }
+
+export function updateStatusTimesheetFromApi(data: IUpdateTimesheetStatus) {
+	const organizationId = getOrganizationIdCookie();
+	const tenantId = getTenantIdCookie();
+	return put<UpdateTimesheetStatus[]>(`/timesheet/status`, { ...data, organizationId }, { tenantId });
+}
diff --git a/apps/web/app/services/server/requests/timesheet.ts b/apps/web/app/services/server/requests/timesheet.ts
index 4040697dd..cc0f06a78 100644
--- a/apps/web/app/services/server/requests/timesheet.ts
+++ b/apps/web/app/services/server/requests/timesheet.ts
@@ -1,7 +1,8 @@
 import { ITasksTimesheet } from '@app/interfaces/ITimer';
 import { serverFetch } from '../fetch';
 import qs from 'qs';
-import { TimesheetLog } from '@/app/interfaces/timer/ITimerLog';
+import { TimesheetLog, UpdateTimesheetStatus } from '@/app/interfaces/timer/ITimerLog';
+import { IUpdateTimesheetStatus } from '@/app/interfaces';
 
 export type TTasksTimesheetStatisticsParams = {
 	tenantId: string;
@@ -95,3 +96,14 @@ export function deleteTaskTimesheetRequest(params: IDeleteTimesheetProps, bearer
 		tenantId: params.tenantId
 	});
 }
+
+
+export function updateStatusTimesheetRequest(params: IUpdateTimesheetStatus, bearer_token: string) {
+	return serverFetch<UpdateTimesheetStatus[]>({
+		path: '/timesheet/status',
+		method: 'PUT',
+		body: { ...params },
+		bearer_token,
+		tenantId: params.tenantId,
+	})
+}
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index 3292d8690..31270c973 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -1,6 +1,6 @@
 import { ITimerLogsDailyReport } from '@app/interfaces/timer/ITimerLogs';
 import { atom } from 'jotai';
-import { IProject, ITeamTask, OT_Member, TimesheetFilterByDays, TimesheetLog } from '../interfaces';
+import { IProject, ITeamTask, OT_Member, TimesheetFilterByDays, TimesheetLog, UpdateTimesheetStatus } from '../interfaces';
 
 interface IFilterOption {
     value: string;
@@ -18,3 +18,4 @@ export const timesheetFilterTaskState = atom<ITeamTask[]>([]);
 export const timesheetFilterStatusState = atom<IFilterOption[]>([]);
 export const timesheetDeleteState = atom<string[]>([]);
 export const timesheetGroupByDayState = atom<TimesheetFilterByDays>('Daily')
+export const timesheetUpdateStatus = atom<UpdateTimesheetStatus[]>([])
diff --git a/apps/web/components/ui/accordion.tsx b/apps/web/components/ui/accordion.tsx
index c60b2759b..4465d5c73 100644
--- a/apps/web/components/ui/accordion.tsx
+++ b/apps/web/components/ui/accordion.tsx
@@ -29,7 +29,7 @@ const AccordionTrigger = React.forwardRef<
 		>
 			<>
 				{children}
-				<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+				<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 -rotate-90" />
 			</>
 		</AccordionPrimitive.Trigger>
 	</AccordionPrimitive.Header>
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 60f1dfb29..6b9112294 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -467,7 +467,7 @@ const TaskActionMenu = ({ dataTimesheet }: { dataTimesheet: TimesheetLog }) => {
 						{t('common.EDIT')}
 					</DropdownMenuItem>
 					<DropdownMenuSeparator />
-					<StatusTask />
+					<StatusTask ids={dataTimesheet.timesheet.id} />
 					<DropdownMenuItem className="text-red-600 hover:!text-red-600 cursor-pointer">
 						{t('common.DELETE')}
 					</DropdownMenuItem>
@@ -491,8 +491,9 @@ const TaskDetails = ({ description, name }: { description: string; name: string
 	);
 };
 
-export const StatusTask = () => {
+export const StatusTask = ({ ids }: { ids: string }) => {
 	const t = useTranslations();
+	const { updateTimesheetStatus } = useTimesheet({});
 	return (
 		<>
 			<DropdownMenuSub>
@@ -502,7 +503,10 @@ export const StatusTask = () => {
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>
 						{statusTable?.map((status, index) => (
-							<DropdownMenuItem key={index} textValue={status.label} className="cursor-pointer">
+							<DropdownMenuItem onClick={() => updateTimesheetStatus({
+								status: status.label as TimesheetStatus,
+								ids: [ids]
+							})} key={index} textValue={status.label} className="cursor-pointer">
 								<div className="flex items-center gap-3">
 									<div className={clsxm('h-2 w-2 rounded-full', statusColor(status.label).bg)}></div>
 									<span>{status.label}</span>
diff --git a/apps/web/lib/features/manual-time/manage-member-component.tsx b/apps/web/lib/features/manual-time/manage-member-component.tsx
index 056a04db0..b9e5a8fc6 100644
--- a/apps/web/lib/features/manual-time/manage-member-component.tsx
+++ b/apps/web/lib/features/manual-time/manage-member-component.tsx
@@ -1,3 +1,4 @@
+import { clsxm } from "@/app/utils";
 import { CustomCombobox } from "lib/components/combobox";
 
 
@@ -93,6 +94,7 @@ export const ManageOrMemberComponent = <T extends Item>({
     handleChange,
     itemToString,
     itemToValue,
+    classNameTitle
 }: ManageOrMemberComponentProps<T>): JSX.Element => {
 
     /**
@@ -116,7 +118,7 @@ export const ManageOrMemberComponent = <T extends Item>({
             {fields.map((field, index) => (
                 <div key={index} className="mb-4">
                     <label className="block text-gray-600 mb-1 text-sm">
-                        <span className="text-[14px]">{field.label}</span>
+                        <span className={clsxm("text-[14px]", classNameTitle)}>{field.label}</span>
                         {field.isRequired && <span className="text-[#de5505e1] ml-1 text-sm">*</span>}
                     </label>
                     <CustomCombobox

From 897ad0440d995ed6e0fad12aafea7a3e3e571311 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:23:11 +0200
Subject: [PATCH 32/41] [Feat]: Add sortable headers to Timesheet component
 with dynamic sorting (#3367)

* Add sortable headers to Timesheet component with dynamic sorting logic for columns

* fix:deepscan

* fix: coderabbitai

* fix: coderabbitai
---
 .../[memberId]/components/TimesheetLoader.tsx |  23 +++
 .../[memberId]/components/TimesheetView.tsx   |  33 ++--
 .../timesheet/[memberId]/components/index.tsx |   1 +
 .../[locale]/timesheet/[memberId]/page.tsx    |   5 +-
 .../hooks/features/useTimelogFilterOptions.ts |  14 ++
 .../calendar/table-time-sheet.tsx             | 144 ++++++++++++++++--
 6 files changed, 191 insertions(+), 29 deletions(-)
 create mode 100644 apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetLoader.tsx

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetLoader.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetLoader.tsx
new file mode 100644
index 000000000..326e9bdfb
--- /dev/null
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetLoader.tsx
@@ -0,0 +1,23 @@
+import { BackdropLoader } from "@/lib/components";
+import { useEffect, useState } from "react";
+
+export function TimesheetLoader({ show = false }: { show?: boolean }) {
+    const [dots, setDots] = useState("");
+
+    useEffect(() => {
+        if (!show) {
+            setDots(""); // Reset the dots when loader is hidden
+            return;
+        }
+
+        const interval = setInterval(() => {
+            setDots((prev) => (prev.length < 3 ? prev + "." : ""));
+        }, 1000); // Update dots every second
+
+        return () => clearInterval(interval); // Cleanup interval on unmount or when `show` changes
+    }, [show]);
+
+    return (
+        <BackdropLoader show={show} title={`Loading${dots}`} />
+    );
+}
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
index aed47e2c3..4fd852b36 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
@@ -2,23 +2,28 @@ import { GroupedTimesheet } from '@/app/hooks/features/useTimesheet';
 import { DataTableTimeSheet } from 'lib/features/integrations/calendar';
 import { useTranslations } from 'next-intl';
 
-export function TimesheetView({ data }: { data?: GroupedTimesheet[] }) {
+export function TimesheetView({ data, loading }: { data?: GroupedTimesheet[]; loading?: boolean }) {
 	const t = useTranslations();
+
+	if (loading || !data) {
+		return (
+			<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme flex items-center justify-center">
+				<p>{t('pages.timesheet.LOADING')}</p>
+			</div>
+		);
+	}
+
+	if (data.length === 0) {
+		return (
+			<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme flex flex-col items-center justify-center h-full min-h-[280px]">
+				<p>{t('pages.timesheet.NO_ENTRIES_FOUND')}</p>
+			</div>
+		);
+	}
+
 	return (
 		<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme">
-			{data ? (
-				data.length > 0 ? (
-					<DataTableTimeSheet data={data} />
-				) : (
-					<div className="flex items-center justify-center h-full min-h-[280px]">
-						<p>{t('pages.timesheet.NO_ENTRIES_FOUND')}</p>
-					</div>
-				)
-			) : (
-				<div className="flex items-center justify-center h-full">
-					<p>{t('pages.timesheet.LOADING')}</p>
-				</div>
-			)}
+			<DataTableTimeSheet data={data} />
 		</div>
 	);
 }
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
index 5c0dea0a2..06948073c 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
@@ -9,3 +9,4 @@ export * from './TimeSheetFilterPopover'
 export * from './TimesheetAction';
 export * from './RejectSelectedModal';
 export * from './EditTaskModal';
+export * from './TimesheetLoader'
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index 14218b4de..863759acc 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -43,7 +43,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 		from: startOfDay(new Date()),
 		to: endOfDay(new Date())
 	});
-	const { timesheet, statusTimesheet } = useTimesheet({
+	const { timesheet, statusTimesheet, loadingTimesheet } = useTimesheet({
 		startDate: dateRange.from ?? '',
 		endDate: dateRange.to ?? ''
 	});
@@ -195,7 +195,8 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 						{/* <DropdownMenuDemo /> */}
 						<div className="border border-gray-200 rounded-lg dark:border-gray-800">
 							{timesheetNavigator === 'ListView' ? (
-								<TimesheetView data={filterDataTimesheet} />
+								<TimesheetView data={filterDataTimesheet}
+									loading={loadingTimesheet} />
 							) : (
 								<CalendarView />
 							)}
diff --git a/apps/web/app/hooks/features/useTimelogFilterOptions.ts b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
index b37953048..a8fdc2fd8 100644
--- a/apps/web/app/hooks/features/useTimelogFilterOptions.ts
+++ b/apps/web/app/hooks/features/useTimelogFilterOptions.ts
@@ -10,6 +10,7 @@ export function useTimelogFilterOptions() {
     const [selectTimesheet, setSelectTimesheet] = useAtom(timesheetDeleteState);
     const [timesheetGroupByDays, setTimesheetGroupByDays] = useAtom(timesheetGroupByDayState);
     const [puTimesheetStatus, setPuTimesheetStatus] = useAtom(timesheetUpdateStatus)
+    const [selectedItems, setSelectedItems] = React.useState<{ status: string; date: string }[]>([]);
 
     const employee = employeeState;
     const project = projectState;
@@ -26,6 +27,17 @@ export function useTimelogFilterOptions() {
     const handleSelectRowTimesheet = (items: string) => {
         setSelectTimesheet((prev) => prev.includes(items) ? prev.filter((filter) => filter !== items) : [...prev, items])
     }
+
+    const handleSelectRowByStatusAndDate = (status: string, date: string) => {
+        setSelectedItems((prev) =>
+            prev.some((item) => item.status === status && item.date === date)
+                ? prev.filter((item) => !(item.status === status && item.date === date))
+                : [...prev, { status, date }]
+        );
+    }
+
+
+
     React.useEffect(() => {
         return () => setSelectTimesheet([]);
     }, []);
@@ -40,6 +52,8 @@ export function useTimelogFilterOptions() {
         setTaskState,
         setStatusState,
         handleSelectRowTimesheet,
+        handleSelectRowByStatusAndDate,
+        selectedItems,
         selectTimesheet,
         setSelectTimesheet,
         timesheetGroupByDays,
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 6b9112294..5326b964c 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -38,7 +38,9 @@ import {
 	MdKeyboardDoubleArrowLeft,
 	MdKeyboardDoubleArrowRight,
 	MdKeyboardArrowLeft,
-	MdKeyboardArrowRight
+	MdKeyboardArrowRight,
+	MdKeyboardArrowUp,
+	MdKeyboardArrowDown
 } from 'react-icons/md';
 import { ConfirmStatusChange, StatusBadge, statusOptions, dataSourceTimeSheet, TimeSheet } from '.';
 import { useModal, useTimelogFilterOptions } from '@app/hooks';
@@ -153,7 +155,7 @@ export const columns: ColumnDef<TimeSheet>[] = [
 export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 	const { isOpen, openModal, closeModal } = useModal();
 	const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet } = useTimesheet({});
-	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet, timesheetGroupByDays } = useTimelogFilterOptions();
+	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet, timesheetGroupByDays, handleSelectRowByStatusAndDate } = useTimelogFilterOptions();
 	const [isDialogOpen, setIsDialogOpen] = React.useState(false);
 	const handleConfirm = () => {
 		try {
@@ -195,7 +197,9 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 			rowSelection
 		}
 	});
-
+	const handleSort = (key: string, order: SortOrder) => {
+		console.log(`Sorting ${key} in ${order} order`);
+	};
 	const handleButtonClick = (action: StatusAction) => {
 		switch (action) {
 			case 'Approved':
@@ -211,7 +215,6 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 				console.error(`Unsupported action: ${action}`);
 		}
 	};
-
 	return (
 		<div className="w-full dark:bg-dark--theme">
 			<AlertDialogConfirmation
@@ -255,11 +258,11 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 							/>
 						</div>
 						<Accordion type="single" collapsible>
-							{Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => (
-								<AccordionItem
+							{Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => {
+								return rows.length > 0 && status && <AccordionItem
 									key={status}
 									value={status === 'DENIED' ? 'REJECTED' : status}
-									className="p-1 rounded"
+									className={clsxm("p-1 rounded")}
 								>
 									<AccordionTrigger
 										style={{ backgroundColor: statusColor(status).bgOpacity }}
@@ -276,7 +279,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 													<span className="text-base font-normal text-gray-400 uppercase">
 														{status === 'DENIED' ? 'REJECTED' : status}
 													</span>
-													<span className="text-gray-400 text-[14px]">({rows?.length})</span>
+													<span className="text-gray-400 text-[14px]">({rows.length})</span>
 												</div>
 												<Badge
 													variant={'outline'}
@@ -292,7 +295,15 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 										</div>
 									</AccordionTrigger>
 									<AccordionContent className="flex flex-col w-full">
-										{rows?.map((task) => (
+										<HeaderRow
+											handleSelectRowByStatusAndDate={
+												() => handleSelectRowByStatusAndDate(status, plan.date)}
+											data={rows}
+											status={status}
+											onSort={handleSort}
+											date={plan.date}
+										/>
+										{rows.map((task) => (
 											<div
 												key={task.id}
 												style={{
@@ -335,7 +346,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 													<Badge
 														className={`${getBadgeColor(task.timesheet.status as TimesheetStatus)}  rounded-md py-1 px-2 text-center font-medium text-black`}
 													>
-														{task.timesheet.status}
+														{task.timesheet.status === 'DENIED' ? 'REJECTED' : task.timesheet.status}
 													</Badge>
 												</div>
 												<DisplayTimeForTimesheet
@@ -346,11 +357,11 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 										))}
 									</AccordionContent>
 								</AccordionItem>
-							))}
+							}
+							)}
 						</Accordion>
 					</div>
 				}
-
 				)}
 			</div>
 			<div className="flex items-center justify-end p-4 space-x-2">
@@ -388,7 +399,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 					</Button>
 				</div>
 			</div>
-		</div>
+		</div >
 	);
 }
 
@@ -555,3 +566,110 @@ const getBadgeColor = (timesheetStatus: TimesheetStatus | null) => {
 			return 'bg-gray-100';
 	}
 };
+
+
+type SortOrder = "ASC" | "DESC";
+
+const HeaderColumn = ({
+	label,
+	onSort,
+	currentSort,
+}: {
+	label: string;
+	onSort: () => void;
+	currentSort: SortOrder | null;
+}) => (
+	<div className="flex gap-x-2" role="columnheader">
+		<span>{label}</span>
+		<button
+			onClick={onSort}
+			aria-label={`Sort ${label} column ${currentSort ? `currently ${currentSort.toLowerCase()}` : ''}`}
+			className="flex flex-col items-start leading-none gap-0"
+		>
+			<MdKeyboardArrowUp
+				style={{
+					height: 10,
+					color: "#71717A",
+				}}
+			/>
+			<MdKeyboardArrowDown
+				style={{
+					height: 10,
+					color: "#71717A",
+				}}
+			/>
+		</button>
+	</div>
+);
+
+const HeaderRow = ({
+	status,
+	onSort,
+	data,
+	handleSelectRowByStatusAndDate, date
+}: {
+	status: string;
+	onSort: (key: string, order: SortOrder) => void,
+	data: TimesheetLog[],
+	handleSelectRowByStatusAndDate: (status: string, date: string) => void,
+	date?: string
+}) => {
+
+	const { bg, bgOpacity } = statusColor(status);
+	const [sortState, setSortState] = React.useState<{ [key: string]: SortOrder | null }>({
+		Task: null,
+		Project: null,
+		Employee: null,
+		Status: null,
+	});
+
+	const handleSort = (key: string) => {
+		const newOrder = sortState[key] === "ASC" ? "DESC" : "ASC";
+		setSortState({ ...sortState, [key]: newOrder });
+		onSort(key, newOrder);
+	};
+
+	return (
+		<div
+			style={{ backgroundColor: bgOpacity, borderBottomColor: bg }}
+			className="flex items-center text-[#71717A] font-medium border-b border-t dark:border-gray-600 space-x-4 p-1 h-[60px] w-full"
+		>
+			<Checkbox
+				onCheckedChange={() => date && handleSelectRowByStatusAndDate(status, date)}
+				className="w-5 h-5"
+				disabled={!date}
+			/>
+			<div className="flex-[2]">
+				<HeaderColumn
+					label="Task"
+					onSort={() => handleSort("Task")}
+					currentSort={sortState["Task"]}
+				/>
+			</div>
+			<div className="flex-1">
+				<HeaderColumn
+					label="Project"
+					onSort={() => handleSort("Project")}
+					currentSort={sortState["Project"]}
+				/>
+			</div>
+			<div className="flex-1">
+				<HeaderColumn
+					label="Employee"
+					onSort={() => handleSort("Employee")}
+					currentSort={sortState["Employee"]}
+				/>
+			</div>
+			<div className="flex-auto">
+				<HeaderColumn
+					label="Status"
+					onSort={() => handleSort("Status")}
+					currentSort={sortState["Status"]}
+				/>
+			</div>
+			<div className="space-x-2">
+				<span>Time</span>
+			</div>
+		</div>
+	);
+};

From aab335d4e33b0aaf2a3e1e3a95c5e7b375da6908 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:24:17 +0200
Subject: [PATCH 33/41] [Feat]: Timesheet Calendar View UI (#3369)

* feat:timesheet calendar view ui init

* feat:timesheet calendar view ui daily

* fix:cspell

* fix:cspell

* fix:coderabbitai

---------

Co-authored-by: Ruslan Konviser <evereq@gmail.com>
---
 .../[memberId]/components/CalendarView.tsx    | 140 +++++++++++++++++-
 .../components/CompactTimesheetComponent.tsx  |  46 ++++++
 .../timesheet/[memberId]/components/index.tsx |   6 +-
 .../[locale]/timesheet/[memberId]/page.tsx    |   2 +-
 apps/web/lib/components/types.ts              |   7 +
 .../calendar/table-time-sheet.tsx             |   7 +-
 apps/web/lib/features/task/task-displays.tsx  |   6 +-
 7 files changed, 202 insertions(+), 12 deletions(-)
 create mode 100644 apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
index 724bb0e9c..ca6cd2900 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx
@@ -1,7 +1,143 @@
+import { GroupedTimesheet, useTimesheet } from "@/app/hooks/features/useTimesheet";
+import { clsxm } from "@/app/utils";
+import { statusColor } from "@/lib/components";
+import { DisplayTimeForTimesheet, TaskNameInfoDisplay, TotalDurationByDate, TotalTimeDisplay } from "@/lib/features";
+import { AccordionContent, AccordionItem, AccordionTrigger } from "@components/ui/accordion";
+import { Accordion } from "@radix-ui/react-accordion";
+import { TranslationHooks, useTranslations } from "next-intl";
+import React from "react";
+import { EmployeeAvatar } from "./CompactTimesheetComponent";
+import { formatDate } from "@/app/helpers";
+import { ClockIcon } from "lucide-react";
 
-export function CalendarView() {
+export function CalendarView({ data }: { data?: GroupedTimesheet[] }) {
+    const t = useTranslations();
     return (
-        <div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>
+        <div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme">
+            {data ? (
+                data.length > 0 ? (
+                    <CalendarDataView data={data} t={t} />
+                ) : (
+                    <div className="flex items-center justify-center h-full min-h-[280px]">
+                        <p>{t('pages.timesheet.NO_ENTRIES_FOUND')}</p>
+                    </div>
+                )
+            ) : (
+                <div className="flex items-center justify-center h-full">
+                    <p>{t('pages.timesheet.LOADING')}</p>
+                </div>
+            )}
+        </div>
+    );
+}
+
+const CalendarDataView = ({ data, t }: { data?: GroupedTimesheet[], t: TranslationHooks }) => {
+    const { getStatusTimesheet } = useTimesheet({});
+
+    return (
+        <div className="w-full dark:bg-dark--theme">
+            <div className="rounded-md">
+                {data?.map((plan, index) => {
+                    return <div key={index}>
+                        <div
+                            className={clsxm(
+                                'h-[40px] flex justify-between items-center w-full',
+                                'bg-[#ffffffcc] dark:bg-dark--theme rounded-md border-1',
+                                'border-gray-400 px-5 text-[#71717A] font-medium'
+                            )}>
+                            <div className='flex gap-x-3'>
+                                <span>{formatDate(plan.date)}</span>
+                            </div>
+                            <div className="flex items-center gap-x-1">
+                                <span className="text-[#868687]">Total{" : "}</span>
+
+                                <TotalDurationByDate
+                                    timesheetLog={plan.tasks}
+                                    createdAt={formatDate(plan.date)}
+                                    className="text-black dark:text-gray-500 text-sm"
+                                />
+                            </div>
+                        </div>
+                        <Accordion type="single" collapsible>
+                            {Object.entries(getStatusTimesheet(plan.tasks)).map(([status, rows]) => (
+                                rows.length > 0 && status && <AccordionItem
+                                    key={status}
+                                    value={status === 'DENIED' ? 'REJECTED' : status}
+                                    className="p-1 rounded"
+                                >
+                                    <AccordionTrigger
+                                        type="button"
+                                        className={clsxm(
+                                            'flex flex-row-reverse justify-end items-center w-full h-[30px] rounded-sm gap-x-2 hover:no-underline px-2',
+                                            statusColor(status).text
+                                        )}
+                                    >
+                                        <div className="flex items-center justify-between space-x-1 w-full">
+                                            <div className="flex items-center  w-full gap-2">
+                                                <div className={clsxm('p-2 rounded', statusColor(status).bg)}></div>
+                                                <div className="flex items-center gap-x-1">
+                                                    <span className="text-base font-normal text-gray-400 uppercase text-[12px]">
+                                                        {status === 'DENIED' ? 'REJECTED' : status}
+                                                    </span>
+                                                    <span className="text-gray-400 text-[14px]">({rows.length})</span>
+                                                </div>
+                                            </div>
+                                            <div className="flex items-center space-x-2">
+                                                <ClockIcon className=' text-[12px] h-3 w-3' />
+                                                <TotalTimeDisplay timesheetLog={rows} />
+                                            </div>
+                                        </div>
+                                    </AccordionTrigger>
+                                    <AccordionContent className="flex flex-col w-full gap-y-2">
+                                        {rows.map((task) => (
+                                            <div
+                                                key={task.id}
+                                                style={{
+                                                    backgroundColor: statusColor(status).bgOpacity,
+                                                    borderLeftColor: statusColor(status).border
+
+                                                }}
+                                                className={clsxm(
+                                                    'border-l-4 rounded-l flex flex-col p-2 gap-2 items-start  space-x-4  h-[100px]',
+                                                )}
+                                            >
+                                                <div className="flex  px-3 justify-between items-center w-full">
+                                                    <div className="flex items-center gap-x-1">
+                                                        <EmployeeAvatar
+                                                            imageUrl={task.employee.user.imageUrl ?? ''}
+                                                        />
+                                                        <span className=" font-normal text-[#3D5A80] dark:text-[#7aa2d8]">{task.employee.fullName}</span>
+                                                    </div>
+                                                    <DisplayTimeForTimesheet
+                                                        duration={task.timesheet.duration}
+
+                                                    />
+                                                </div>
+                                                <TaskNameInfoDisplay
+                                                    task={task.task}
+                                                    className={clsxm(
+                                                        'shadow-[0px_0px_15px_0px_#e2e8f0] dark:shadow-transparent'
+                                                    )}
+                                                    taskTitleClassName={clsxm(
+                                                        'text-sm text-ellipsis overflow-hidden !text-[#293241] dark:!text-white '
+                                                    )}
+                                                    showSize={true}
+                                                    dash
+                                                    taskNumberClassName="text-sm"
+                                                />
+                                                <div>
+                                                    <span className="flex-1">{task.project && task.project.name}</span>
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </AccordionContent>
+                                </AccordionItem>
+                            ))}
+                        </Accordion>
+                    </div>
+                }
+                )}
+            </div>
 
         </div>
     )
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx
new file mode 100644
index 000000000..03f80d818
--- /dev/null
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+export const EmployeeAvatar = ({ imageUrl }: { imageUrl: string }) => {
+    const [isLoading, setIsLoading] = React.useState(true);
+
+    return (
+        <div className="relative w-6 h-6">
+            {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-200 rounded-full">
+                    <LoadingSpinner className="w-4 h-4" />
+                </div>
+            )}
+            <img
+                className="w-6 h-6 rounded-full"
+                src={imageUrl}
+                alt="Employee"
+                onLoad={() => setIsLoading(false)}
+                onError={() => setIsLoading(false)}
+            />
+        </div>
+    );
+};
+
+
+const LoadingSpinner = ({ className }: { className?: string }) => (
+    <svg
+        className={`animate-spin text-gray-500 ${className}`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+        ></circle>
+        <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+        ></path>
+    </svg>
+);
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
index 06948073c..35543a172 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/index.tsx
@@ -5,8 +5,10 @@ export * from './TimesheetFilter';
 export * from './FrequencySelect';
 export * from './FilterWithStatus';
 export * from './TimesheetFilterDate';
-export * from './TimeSheetFilterPopover'
+export * from './TimeSheetFilterPopover';
 export * from './TimesheetAction';
 export * from './RejectSelectedModal';
 export * from './EditTaskModal';
-export * from './TimesheetLoader'
+export * from './CompactTimesheetComponent';
+export * from './TimesheetLoader';
+
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
index 863759acc..a90e0378a 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/page.tsx
@@ -198,7 +198,7 @@ const TimeSheet = React.memo(function TimeSheetPage({ params }: { params: { memb
 								<TimesheetView data={filterDataTimesheet}
 									loading={loadingTimesheet} />
 							) : (
-								<CalendarView />
+								<CalendarView data={filterDataTimesheet} />
 							)}
 						</div>
 					</Container>
diff --git a/apps/web/lib/components/types.ts b/apps/web/lib/components/types.ts
index 30c0412ef..a5a822801 100644
--- a/apps/web/lib/components/types.ts
+++ b/apps/web/lib/components/types.ts
@@ -1,6 +1,7 @@
 export type IVariant = 'primary' | 'outline' | 'ghost' | 'light' | 'dark';
 type StatusColorScheme = {
     bg: string;
+    border: string,
     text: string;
     bgOpacity: string;
 };
@@ -8,31 +9,37 @@ type StatusColorScheme = {
 const STATUS_COLORS: Record<string, StatusColorScheme> = {
     PENDING: {
         bg: 'bg-[#FBB650]',
+        border: 'rgb(251, 182, 80)',
         text: 'text-[#FBB650]',
         bgOpacity: 'rgba(251, 182, 80, 0.1)',
     },
     APPROVED: {
         bg: 'bg-[#30B366]',
+        border: 'rgba(48, 179, 102)',
         text: 'text-[#30B366]',
         bgOpacity: 'rgba(48, 179, 102, 0.1)',
     },
     DENIED: {
         bg: 'bg-[#dc2626]',
+        border: 'rgba(220, 38, 38)',
         text: 'text-[#dc2626]',
         bgOpacity: 'rgba(220, 38, 38, 0.1)',
     },
     DRAFT: {
         bg: 'bg-gray-300',
+        border: 'rgba(220, 220, 220)',
         text: 'text-gray-500',
         bgOpacity: 'rgba(220, 220, 220, 0.1)',
     },
     'IN REVIEW': {
         bg: 'bg-blue-500',
+        border: 'rgba(59, 130, 246)',
         text: 'text-blue-500',
         bgOpacity: 'rgba(59, 130, 246, 0.1)',
     },
     DEFAULT: {
         bg: 'bg-gray-100',
+        border: 'rgba(243, 244, 246)',
         text: 'text-gray-400',
         bgOpacity: 'rgba(243, 244, 246, 0.1)',
     },
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 5326b964c..3860a9d19 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -54,6 +54,7 @@ import {
 	RejectSelectedModal,
 	StatusAction,
 	StatusType,
+	EmployeeAvatar,
 	getTimesheetButtons,
 	statusTable
 } from '@/app/[locale]/timesheet/[memberId]/components';
@@ -335,10 +336,8 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 												</div>
 												<span className="flex-1">{task.project && task.project.name}</span>
 												<div className="flex items-center flex-1 gap-x-2">
-													<img
-														className="w-8 h-8 rounded-full"
-														src={task.employee.user.imageUrl!}
-														alt=""
+													<EmployeeAvatar
+														imageUrl={task.employee.user.imageUrl!}
 													/>
 													<span className="flex-1 font-medium">{task.employee.fullName}</span>
 												</div>
diff --git a/apps/web/lib/features/task/task-displays.tsx b/apps/web/lib/features/task/task-displays.tsx
index 0bca22f27..c87453592 100644
--- a/apps/web/lib/features/task/task-displays.tsx
+++ b/apps/web/lib/features/task/task-displays.tsx
@@ -82,7 +82,7 @@ export const DisplayTimeForTimesheet = ({ duration }: { duration: number }) => {
 	return (
 		<div className='flex items-center font-medium gap-x-1'>
 			<ClockIcon className='text-green-400 text-[14px] h-4 w-4' />
-			<div className='flex items-center'>
+			<div className='flex items-center text-[#282048] dark:text-[#9b8ae1]'>
 				{formatTime(hours, minute)}
 			</div>
 		</div>
@@ -104,7 +104,7 @@ TotalTimeDisplay.displayName = 'TotalTimeDisplay';
 
 
 export const TotalDurationByDate = React.memo(
-	({ timesheetLog, createdAt }: { timesheetLog: TimesheetLog[]; createdAt: Date | string }) => {
+	({ timesheetLog, createdAt, className }: { timesheetLog: TimesheetLog[]; createdAt: Date | string, className?: string }) => {
 		const targetDateISO = new Date(createdAt).toISOString();
 		const filteredLogs = timesheetLog.filter(
 			(item) => formatDate(item.timesheet.createdAt) === formatDate(targetDateISO));
@@ -112,7 +112,7 @@ export const TotalDurationByDate = React.memo(
 			(total, log) => total + (log.timesheet?.duration || 0), 0);
 		const { h: hours, m: minutes } = secondsToTime(totalDurationInSeconds);
 		return (
-			<div className="flex items-center text-[#868688]">
+			<div className={clsxm("flex items-center text-[#868688]", className)}>
 				{formatTime(hours, minutes)}
 			</div>
 		);

From e9de21046c24dfb85d838ba440a462384710e74a Mon Sep 17 00:00:00 2001
From: Cedric Karungu | Lord VB <83704005+Cedric921@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:25:06 +0200
Subject: [PATCH 34/41] (apps-web)[fix]: Center Dashboard Data on Toggle
 FullWidth Mode (#3371)

---
 apps/web/app/[locale]/page-component.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx
index ddb2d6b58..89a043e2e 100644
--- a/apps/web/app/[locale]/page-component.tsx
+++ b/apps/web/app/[locale]/page-component.tsx
@@ -6,7 +6,7 @@ import { useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import NoTeam from '@components/pages/main/no-team';
 import { withAuthentication } from 'lib/app/authenticator';
-import { Breadcrumb, Card } from 'lib/components';
+import { Breadcrumb, Card, Container } from 'lib/components';
 import { AuthUserTaskInput, TeamInvitations, TeamMembers, Timer, UnverifiedEmail } from 'lib/features';
 import { MainLayout } from 'lib/layout';
 import { IssuesView } from '@app/constants';
@@ -98,7 +98,11 @@ function MainPage() {
 					footerClassName={clsxm('')}
 				>
 					<ChatwootWidget />
-					<div className="h-full ">{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}</div>
+					<div className="h-full ">{isTeamMember ?
+						<Container fullWidth={fullWidth} className='mx-auto' >
+							<TeamMembers kanbanView={view} />
+						</Container>
+						: <NoTeam />}</div>
 				</MainLayout>
 			</div>
 			<Analytics />

From 8a4784376b970ddc1f16952da6e68cf8cba40c79 Mon Sep 17 00:00:00 2001
From: Cedric Karungu | Lord VB <83704005+Cedric921@users.noreply.github.com>
Date: Wed, 27 Nov 2024 19:29:52 +0200
Subject: [PATCH 35/41] fix: Assignees and Project Dropdown (#3374)

---
 .../details-section/blocks/task-secondary-info.tsx     |  7 +++++--
 apps/web/lib/features/task/task-input.tsx              | 10 +++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
index 959b2c4da..ecf7bc426 100644
--- a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
+++ b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
@@ -418,7 +418,10 @@ export function ProjectDropDown(props: ITaskProjectDropdownProps) {
 						<>
 							<Listbox.Button
 								className={clsxm(
-									'cursor-pointer outline-none w-full flex items-center justify-between px-4 h-full ',
+									`cursor-pointer outline-none w-full flex
+									items-center justify-between px-4 h-full
+									border-solid border-color-[#F2F2F2]
+									dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] rounded-lg`,
 									styles?.value
 								)}
 							>
@@ -436,7 +439,7 @@ export function ProjectDropDown(props: ITaskProjectDropdownProps) {
 								)}
 								<ChevronDownIcon
 									className={clsxm(
-										'h-4 w-4 text-default transition duration-150 ease-in-out group-hover:text-opacity-80'
+										'h-4 w-4 text-slate-400 transition duration-150 ease-in-out group-hover:text-opacity-80'
 									)}
 									aria-hidden="true"
 								/>
diff --git a/apps/web/lib/features/task/task-input.tsx b/apps/web/lib/features/task/task-input.tsx
index a05abd268..f4bbc0e58 100644
--- a/apps/web/lib/features/task/task-input.tsx
+++ b/apps/web/lib/features/task/task-input.tsx
@@ -751,12 +751,12 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
 	);
 
 	return (
-		<div className=" w-40 rounded-xl bg-[#F2F2F2] py-2 px-3">
+		<div className="w-52 rounded-xl bg-[#F2F2F2] dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] py-2 px-3">
 			<Combobox multiple={true}>
 				<div className="relative my-auto">
 					<div className="relative w-full cursor-default overflow-hidden rounded-lg text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm">
 						<Combobox.Input readOnly className="w-0 h-0" />
-						<Combobox.Button className="absolute hover:transition-all inset-y-0 right-0 flex justify-between w-full items-center">
+						<Combobox.Button className="absolute hover:transition-all inset-y-0 right-0 flex justify-between w-40 items-center">
 							<span>{t('common.ASSIGNEE')}</span>
 							<ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
 						</Combobox.Button>
@@ -767,12 +767,12 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
 						leaveFrom="opacity-100"
 						leaveTo="opacity-0"
 					>
-						<Combobox.Options className="absolute mt-1 max-h-60 h-auto w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+						<Combobox.Options className="absolute mt-1 max-h-40 h-auto w-44 overflow-auto rounded-md dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
 							{authMember && (
 								<Combobox.Option
 									className={({ active }) =>
 										`relative cursor-default select-none py-2 pl-10 pr-4 ${
-											active ? 'bg-primary/5' : 'text-gray-900'
+											active ? 'bg-primary/5 dark:bg-dark--theme-light dark:text-white' : 'text-gray-100'
 										}`
 									}
 									value={authMember}
@@ -791,7 +791,7 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
 										key={member.id}
 										className={({ active }) =>
 											`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
-												active ? 'bg-primary/5' : 'text-gray-900'
+												active ? 'bg-primary/5 dark:text-gray-100 dark:bg-dark--theme-lights' : 'text-gray-900 dark:text-gray-200'
 											}`
 										}
 										onClick={() => {

From 4eccf2302c5fd364f981e7813c8ead23302cd975 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Wed, 27 Nov 2024 20:03:51 +0200
Subject: [PATCH 36/41] [Refactor]: Optimize DeleteTimesheet and
 UpdateTimesheetStatus (#3375)

* Add createTimesheetFromApi function to create a timesheet entry from API

* fix:update url

* refactor: optimize deleteTimesheet and updateTimesheetStatus function for better readability

* fix: deep scan

* fix

* fix: refactor some code

* fix: deep scan

* fix: Codacy Static Code Analysis

* fix: build

* feat: update billable from api

* fix: conflits

* fix: coderabbitai
---
 .../timer/timesheet/time-log/[id]/route.ts    |  33 +++++
 .../app/api/timer/timesheet/time-log/route.ts |  31 +++++
 apps/web/app/hooks/features/useTimesheet.ts   | 116 ++++++++++++------
 apps/web/app/interfaces/timer/ITimerLog.ts    |  34 +++--
 .../services/client/api/timer/timer-log.ts    |  32 ++++-
 .../app/services/server/requests/timesheet.ts |  23 +++-
 apps/web/app/stores/time-logs.ts              |   2 +
 .../calendar/table-time-sheet.tsx             |  61 +++++++--
 8 files changed, 271 insertions(+), 61 deletions(-)
 create mode 100644 apps/web/app/api/timer/timesheet/time-log/[id]/route.ts
 create mode 100644 apps/web/app/api/timer/timesheet/time-log/route.ts

diff --git a/apps/web/app/api/timer/timesheet/time-log/[id]/route.ts b/apps/web/app/api/timer/timesheet/time-log/[id]/route.ts
new file mode 100644
index 000000000..ed3c2f18c
--- /dev/null
+++ b/apps/web/app/api/timer/timesheet/time-log/[id]/route.ts
@@ -0,0 +1,33 @@
+import { UpdateTimesheet } from "@/app/interfaces";
+import { authenticatedGuard } from "@/app/services/server/guards/authenticated-guard-app";
+import { updateTimesheetRequest } from "@/app/services/server/requests";
+import { NextResponse } from "next/server";
+
+export async function PUT(req: Request) {
+    const res = new NextResponse();
+    const {
+        $res,
+        user,
+        tenantId,
+        organizationId,
+        access_token
+    } = await authenticatedGuard(req, res);
+    if (!user) return $res('Unauthorized');
+
+    try {
+        const { searchParams } = new URL(req.url);
+        const id = searchParams.get('id') as string;
+        const body = (await req.json()) as UpdateTimesheet;
+        const { data } = await updateTimesheetRequest(
+            { ...body, tenantId, organizationId, id },
+            access_token
+        );
+        return $res(data);
+    } catch (error) {
+        console.error('Error updating timesheet status:', error);
+        return $res({
+            success: false,
+            message: 'Failed to update timesheet status'
+        });
+    }
+}
diff --git a/apps/web/app/api/timer/timesheet/time-log/route.ts b/apps/web/app/api/timer/timesheet/time-log/route.ts
new file mode 100644
index 000000000..38919df8e
--- /dev/null
+++ b/apps/web/app/api/timer/timesheet/time-log/route.ts
@@ -0,0 +1,31 @@
+import { UpdateTimesheet } from "@/app/interfaces";
+import { authenticatedGuard } from "@/app/services/server/guards/authenticated-guard-app";
+import { createTimesheetRequest } from "@/app/services/server/requests";
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+    const res = new NextResponse();
+    const {
+        $res,
+        user,
+        tenantId,
+        organizationId,
+        access_token
+    } = await authenticatedGuard(req, res);
+    if (!user) return $res('Unauthorized');
+
+    try {
+        const body = (await req.json()) as UpdateTimesheet;
+        const { data } = await createTimesheetRequest(
+            { ...body, tenantId, organizationId },
+            access_token
+        );
+        return $res(data);
+    } catch (error) {
+        console.error('Error updating timesheet status:', error);
+        return $res({
+            success: false,
+            message: 'Failed to update timesheet status'
+        });
+    }
+}
diff --git a/apps/web/app/hooks/features/useTimesheet.ts b/apps/web/app/hooks/features/useTimesheet.ts
index 75be26e60..4afc705b2 100644
--- a/apps/web/app/hooks/features/useTimesheet.ts
+++ b/apps/web/app/hooks/features/useTimesheet.ts
@@ -3,9 +3,9 @@ import { useAtom } from 'jotai';
 import { timesheetRapportState } from '@/app/stores/time-logs';
 import { useQuery } from '../useQuery';
 import { useCallback, useEffect, useMemo } from 'react';
-import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi, updateStatusTimesheetFromApi } from '@/app/services/client/api/timer/timer-log';
+import { deleteTaskTimesheetLogsApi, getTaskTimesheetLogsApi, updateStatusTimesheetFromApi, createTimesheetFromApi, updateTimesheetFromAPi } from '@/app/services/client/api/timer/timer-log';
 import moment from 'moment';
-import { ID, TimesheetLog, TimesheetStatus } from '@/app/interfaces';
+import { ID, TimesheetLog, TimesheetStatus, UpdateTimesheet } from '@/app/interfaces';
 import { useTimelogFilterOptions } from './useTimelogFilterOptions';
 
 interface TimesheetParams {
@@ -19,13 +19,6 @@ export interface GroupedTimesheet {
 }
 
 
-interface DeleteTimesheetParams {
-    organizationId: string;
-    tenantId: string;
-    logIds: string[];
-}
-
-
 const groupByDate = (items: TimesheetLog[]): GroupedTimesheet[] => {
     if (!items?.length) return [];
     type GroupedMap = Record<string, TimesheetLog[]>;
@@ -104,6 +97,8 @@ export function useTimesheet({
     const { loading: loadingTimesheet, queryCall: queryTimesheet } = useQuery(getTaskTimesheetLogsApi);
     const { loading: loadingDeleteTimesheet, queryCall: queryDeleteTimesheet } = useQuery(deleteTaskTimesheetLogsApi);
     const { loading: loadingUpdateTimesheetStatus, queryCall: queryUpdateTimesheetStatus } = useQuery(updateStatusTimesheetFromApi)
+    const { loading: loadingCreateTimesheet, queryCall: queryCreateTimesheet } = useQuery(createTimesheetFromApi);
+    const { loading: loadingUpdateTimesheet, queryCall: queryUpdateTimesheet } = useQuery(updateTimesheetFromAPi);
 
 
     const getTaskTimesheet = useCallback(
@@ -138,30 +133,76 @@ export function useTimesheet({
         ]
     );
 
+    const createTimesheet = useCallback(
+        async ({ ...timesheetParams }: UpdateTimesheet) => {
+            if (!user) {
+                throw new Error("User not authenticated");
+            }
+            try {
+                const response = await queryCreateTimesheet(timesheetParams);
+                setTimesheet((prevTimesheet) => [
+                    response.data,
+                    ...(prevTimesheet || [])
+                ]);
+            } catch (error) {
+                console.error('Error:', error);
+            }
+        },
+        [queryCreateTimesheet, setTimesheet, user]
+    );
+
+
+
+    const updateTimesheet = useCallback<(params: UpdateTimesheet) => Promise<void>>(
+        async ({ ...timesheet }: UpdateTimesheet) => {
+            if (!user) {
+                throw new Error("User not authenticated");
+            }
+            try {
+                const response = await queryUpdateTimesheet(timesheet);
+                setTimesheet(prevTimesheet =>
+                    prevTimesheet.map(item =>
+                        item.timesheet.id === response.data.timesheet.id
+                            ? response.data
+                            : item
+                    )
+                );
+            } catch (error) {
+                console.error('Error updating timesheet:', error);
+                throw error;
+            }
+        }, [queryUpdateTimesheet, setTimesheet, user])
+
+
     const updateTimesheetStatus = useCallback(
-        ({ status, ids }: { status: TimesheetStatus, ids: ID[] | ID }) => {
+        async ({ status, ids }: { status: TimesheetStatus; ids: ID[] | ID }) => {
             if (!user) return;
-            queryUpdateTimesheetStatus({ ids, status })
-                .then((response) => {
-                    const updatedData = timesheet.map(item => {
-                        const newItem = response.data.find(newItem => newItem.id === item.timesheet.id);
-                        if (newItem) {
+            const idsArray = Array.isArray(ids) ? ids : [ids];
+            try {
+                const response = await queryUpdateTimesheetStatus({ ids: idsArray, status });
+                const responseMap = new Map(response.data.map(item => [item.id, item]));
+                setTimesheet(prevTimesheet =>
+                    prevTimesheet.map(item => {
+                        const updatedItem = responseMap.get(item.timesheet.id);
+                        if (updatedItem) {
                             return {
                                 ...item,
                                 timesheet: {
                                     ...item.timesheet,
-                                    status: newItem.status
+                                    status: updatedItem.status
                                 }
                             };
                         }
                         return item;
-                    });
-                    setTimesheet(updatedData);
-                })
-                .catch((error) => {
-                    console.error('Error fetching timesheet:', error);
-                });
-        }, [queryUpdateTimesheetStatus])
+                    })
+                );
+                console.log('Timesheet status updated successfully!');
+            } catch (error) {
+                console.error('Error updating timesheet status:', error);
+            }
+        },
+        [queryUpdateTimesheetStatus, setTimesheet, user]
+    );
 
     const getStatusTimesheet = (items: TimesheetLog[] = []) => {
         const STATUS_MAP: Record<TimesheetStatus, TimesheetLog[]> = {
@@ -196,15 +237,6 @@ export function useTimesheet({
     }
 
 
-    const handleDeleteTimesheet = async (params: DeleteTimesheetParams) => {
-        try {
-            return await queryDeleteTimesheet(params);
-        } catch (error) {
-            console.error('Error deleting timesheet:', error);
-            throw error;
-        }
-    };
-
     const deleteTaskTimesheet = useCallback(async () => {
         if (!user) {
             throw new Error('User not authenticated');
@@ -213,18 +245,22 @@ export function useTimesheet({
             throw new Error('No timesheet IDs provided for deletion');
         }
         try {
-            await handleDeleteTimesheet({
+            await queryDeleteTimesheet({
                 organizationId: user.employee.organizationId,
                 tenantId: user.tenantId ?? "",
                 logIds
             });
+            setTimesheet(prevTimesheet =>
+                prevTimesheet.filter(item => !logIds.includes(item.timesheet.id))
+            );
+
         } catch (error) {
             console.error('Failed to delete timesheets:', error);
             throw error;
         }
-    },
-        [user, queryDeleteTimesheet, logIds, handleDeleteTimesheet] // deepscan-disable-line
-    );
+    }, [user, logIds, queryDeleteTimesheet, setTimesheet]);
+
+
     const timesheetElementGroup = useMemo(() => {
         if (timesheetGroupByDays === 'Daily') {
             return groupByDate(timesheet);
@@ -238,7 +274,7 @@ export function useTimesheet({
 
     useEffect(() => {
         getTaskTimesheet({ startDate, endDate });
-    }, [getTaskTimesheet, startDate, endDate, timesheetGroupByDays, timesheet]);
+    }, [getTaskTimesheet, startDate, endDate, timesheetGroupByDays]);
 
     return {
         loadingTimesheet,
@@ -251,6 +287,10 @@ export function useTimesheet({
         statusTimesheet: getStatusTimesheet(timesheet.flat()),
         updateTimesheetStatus,
         loadingUpdateTimesheetStatus,
-        puTimesheetStatus
+        puTimesheetStatus,
+        createTimesheet,
+        loadingCreateTimesheet,
+        updateTimesheet,
+        loadingUpdateTimesheet
     };
 }
diff --git a/apps/web/app/interfaces/timer/ITimerLog.ts b/apps/web/app/interfaces/timer/ITimerLog.ts
index 13952ec97..09368bbad 100644
--- a/apps/web/app/interfaces/timer/ITimerLog.ts
+++ b/apps/web/app/interfaces/timer/ITimerLog.ts
@@ -1,4 +1,5 @@
-import { ITeamTask } from "../ITask";
+import { ITeamTask, TimesheetStatus } from "../ITask";
+import { TimeLogType, TimerSource } from "../ITimer";
 
 interface BaseEntity {
     id: string;
@@ -69,7 +70,7 @@ interface Timesheet extends BaseEntity {
     lockedAt: string | null;
     editedAt: string | null;
     isBilled: boolean;
-    status: string;
+    status: TimesheetStatus;
     employeeId: string;
     approvedById: string | null;
     isEdited: boolean;
@@ -87,8 +88,8 @@ export interface TimesheetLog extends BaseEntity {
     startedAt: string;
     stoppedAt: string;
     editedAt: string | null;
-    logType: "TRACKED" | "MANUAL";
-    source: "WEB_TIMER" | "MOBILE_APP" | "DESKTOP_APP";
+    logType: TimeLogType;
+    source: TimerSource;
     description: string;
     reason: string | null;
     isBillable: boolean;
@@ -112,9 +113,6 @@ export interface TimesheetLog extends BaseEntity {
 
 
 export interface UpdateTimesheetStatus extends BaseEntity {
-    isActive: boolean;
-    isArchived: boolean;
-    archivedAt: string | null;
     duration: number;
     keyboard: number;
     mouse: number;
@@ -137,3 +135,25 @@ export interface UpdateTimesheetStatus extends BaseEntity {
     employee: Employee;
     isEdited: boolean;
 }
+export interface UpdateTimesheet extends Pick<
+    Partial<TimesheetLog>,
+    | 'reason'
+    | 'organizationContactId'
+    | 'description'
+    | 'organizationTeamId'
+    | 'projectId'
+    | 'taskId'
+>,
+    Pick<
+        TimesheetLog,
+        | 'id'
+        | 'startedAt'
+        | 'stoppedAt'
+        | 'tenantId'
+        | 'logType'
+        | 'source'
+        | 'employeeId'
+        | 'organizationId'
+    > {
+    isBillable: boolean;
+}
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 8e4682ef5..4e658918a 100644
--- a/apps/web/app/services/client/api/timer/timer-log.ts
+++ b/apps/web/app/services/client/api/timer/timer-log.ts
@@ -1,5 +1,5 @@
-import { TimesheetLog, ITimerStatus, IUpdateTimesheetStatus, UpdateTimesheetStatus } from '@app/interfaces';
-import { get, deleteApi, put } from '../../axios';
+import { TimesheetLog, ITimerStatus, IUpdateTimesheetStatus, UpdateTimesheetStatus, UpdateTimesheet } from '@app/interfaces';
+import { get, deleteApi, put, post } from '../../axios';
 import { getOrganizationIdCookie, getTenantIdCookie } from '@/app/helpers';
 
 export async function getTimerLogs(
@@ -127,3 +127,31 @@ export function updateStatusTimesheetFromApi(data: IUpdateTimesheetStatus) {
 	const tenantId = getTenantIdCookie();
 	return put<UpdateTimesheetStatus[]>(`/timesheet/status`, { ...data, organizationId }, { tenantId });
 }
+
+
+export function createTimesheetFromApi(data: UpdateTimesheet) {
+	const organizationId = getOrganizationIdCookie();
+	const tenantId = getTenantIdCookie();
+	if (!organizationId || !tenantId) {
+		throw new Error('Required parameters missing: organizationId and tenantId are required');
+	}
+	try {
+		return post<TimesheetLog>('/timesheet/time-log', { ...data, organizationId }, { tenantId })
+	} catch (error) {
+		throw new Error('Failed to create timesheet log');
+	}
+}
+
+export function updateTimesheetFromAPi(params: UpdateTimesheet) {
+	const { id, ...data } = params
+	const organizationId = getOrganizationIdCookie();
+	const tenantId = getTenantIdCookie();
+	if (!organizationId || !tenantId) {
+		throw new Error('Required parameters missing: organizationId and tenantId are required');
+	}
+	try {
+		return put<TimesheetLog>(`/timesheet/time-log/${params.id}`, { ...data, organizationId }, { tenantId })
+	} catch (error) {
+		throw new Error('Failed to create timesheet log');
+	}
+}
diff --git a/apps/web/app/services/server/requests/timesheet.ts b/apps/web/app/services/server/requests/timesheet.ts
index cc0f06a78..ef39e6abc 100644
--- a/apps/web/app/services/server/requests/timesheet.ts
+++ b/apps/web/app/services/server/requests/timesheet.ts
@@ -1,7 +1,7 @@
 import { ITasksTimesheet } from '@app/interfaces/ITimer';
 import { serverFetch } from '../fetch';
 import qs from 'qs';
-import { TimesheetLog, UpdateTimesheetStatus } from '@/app/interfaces/timer/ITimerLog';
+import { TimesheetLog, UpdateTimesheet, UpdateTimesheetStatus } from '@/app/interfaces/timer/ITimerLog';
 import { IUpdateTimesheetStatus } from '@/app/interfaces';
 
 export type TTasksTimesheetStatisticsParams = {
@@ -107,3 +107,24 @@ export function updateStatusTimesheetRequest(params: IUpdateTimesheetStatus, bea
 		tenantId: params.tenantId,
 	})
 }
+
+
+export function createTimesheetRequest(params: UpdateTimesheet, bearer_token: string) {
+	return serverFetch<TimesheetLog>({
+		path: '/timesheet/time-log',
+		method: 'POST',
+		body: { ...params },
+		bearer_token,
+		tenantId: params.tenantId
+	})
+}
+
+export function updateTimesheetRequest(params: UpdateTimesheet, bearer_token: string) {
+	return serverFetch<TimesheetLog>({
+		path: `/timesheet/time-log/${params.id}`,
+		method: 'PUT',
+		body: { ...params },
+		bearer_token,
+		tenantId: params.tenantId
+	});
+}
diff --git a/apps/web/app/stores/time-logs.ts b/apps/web/app/stores/time-logs.ts
index 31270c973..19ad5da66 100644
--- a/apps/web/app/stores/time-logs.ts
+++ b/apps/web/app/stores/time-logs.ts
@@ -7,6 +7,7 @@ interface IFilterOption {
     label: string;
 }
 
+
 export const timerLogsDailyReportState = atom<ITimerLogsDailyReport[]>([]);
 
 export const timesheetRapportState = atom<TimesheetLog[]>([])
@@ -19,3 +20,4 @@ export const timesheetFilterStatusState = atom<IFilterOption[]>([]);
 export const timesheetDeleteState = atom<string[]>([]);
 export const timesheetGroupByDayState = atom<TimesheetFilterByDays>('Daily')
 export const timesheetUpdateStatus = atom<UpdateTimesheetStatus[]>([])
+export const timesheetUpdateState = atom<TimesheetLog | null>(null)
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 3860a9d19..fb844453c 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -155,8 +155,11 @@ export const columns: ColumnDef<TimeSheet>[] = [
 
 export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 	const { isOpen, openModal, closeModal } = useModal();
-	const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet } = useTimesheet({});
+
+
+	const { deleteTaskTimesheet, loadingDeleteTimesheet, getStatusTimesheet, updateTimesheetStatus } = useTimesheet({});
 	const { handleSelectRowTimesheet, selectTimesheet, setSelectTimesheet, timesheetGroupByDays, handleSelectRowByStatusAndDate } = useTimelogFilterOptions();
+
 	const [isDialogOpen, setIsDialogOpen] = React.useState(false);
 	const handleConfirm = () => {
 		try {
@@ -201,10 +204,15 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 	const handleSort = (key: string, order: SortOrder) => {
 		console.log(`Sorting ${key} in ${order} order`);
 	};
-	const handleButtonClick = (action: StatusAction) => {
+	const handleButtonClick = async (action: StatusAction) => {
 		switch (action) {
 			case 'Approved':
-				// TODO: Implement approval logic
+				if (selectTimesheet.length > 0) {
+					await updateTimesheetStatus({
+						status: 'APPROVED',
+						ids: selectTimesheet
+					})
+				}
 				break;
 			case 'Denied':
 				openModal();
@@ -220,7 +228,7 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 		<div className="w-full dark:bg-dark--theme">
 			<AlertDialogConfirmation
 				title="Are you sure you want to delete this?"
-				description={`This action is irreversible. All related data will be lost. (${selectTimesheet.length})`}
+				description={`This action is irreversible. All related data will be lost.`}
 				confirmText={t('common.DELETE')}
 				cancelText={t('common.CANCEL')}
 				isOpen={isDialogOpen}
@@ -477,7 +485,7 @@ const TaskActionMenu = ({ dataTimesheet }: { dataTimesheet: TimesheetLog }) => {
 						{t('common.EDIT')}
 					</DropdownMenuItem>
 					<DropdownMenuSeparator />
-					<StatusTask ids={dataTimesheet.timesheet.id} />
+					<StatusTask timesheet={dataTimesheet} />
 					<DropdownMenuItem className="text-red-600 hover:!text-red-600 cursor-pointer">
 						{t('common.DELETE')}
 					</DropdownMenuItem>
@@ -501,9 +509,26 @@ const TaskDetails = ({ description, name }: { description: string; name: string
 	);
 };
 
-export const StatusTask = ({ ids }: { ids: string }) => {
+export const StatusTask = ({ timesheet }: { timesheet: TimesheetLog }) => {
 	const t = useTranslations();
-	const { updateTimesheetStatus } = useTimesheet({});
+	const { updateTimesheetStatus, updateTimesheet } = useTimesheet({});
+	const handleUpdateTimesheet = async (isBillable: boolean) => {
+		await updateTimesheet({
+			id: timesheet.timesheetId,
+			isBillable: isBillable,
+			employeeId: timesheet.employeeId,
+			logType: timesheet.logType,
+			source: timesheet.source,
+			stoppedAt: timesheet.stoppedAt,
+			startedAt: timesheet.startedAt,
+			tenantId: timesheet.tenantId,
+			organizationId: timesheet.organizationId,
+			description: timesheet.description,
+			projectId: timesheet.projectId,
+			reason: timesheet.reason,
+		});
+	};
+
 	return (
 		<>
 			<DropdownMenuSub>
@@ -513,10 +538,16 @@ export const StatusTask = ({ ids }: { ids: string }) => {
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>
 						{statusTable?.map((status, index) => (
-							<DropdownMenuItem onClick={() => updateTimesheetStatus({
-								status: status.label as TimesheetStatus,
-								ids: [ids]
-							})} key={index} textValue={status.label} className="cursor-pointer">
+							<DropdownMenuItem onClick={async () => {
+								try {
+									await updateTimesheetStatus({
+										status: status.label as TimesheetStatus,
+										ids: [timesheet.timesheet.id]
+									});
+								} catch (error) {
+									console.error('Failed to update timesheet status:');
+								}
+							}} key={index} textValue={status.label} className="cursor-pointer">
 								<div className="flex items-center gap-3">
 									<div className={clsxm('h-2 w-2 rounded-full', statusColor(status.label).bg)}></div>
 									<span>{status.label}</span>
@@ -532,12 +563,16 @@ export const StatusTask = ({ ids }: { ids: string }) => {
 				</DropdownMenuSubTrigger>
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>
-						<DropdownMenuItem textValue={'Yes'} className="cursor-pointer">
+						<DropdownMenuItem onClick={async () => {
+							await handleUpdateTimesheet(true)
+						}} textValue={'Yes'} className="cursor-pointer">
 							<div className="flex items-center gap-3">
 								<span>{t('pages.timesheet.BILLABLE.YES')}</span>
 							</div>
 						</DropdownMenuItem>
-						<DropdownMenuItem textValue={'No'} className="cursor-pointer">
+						<DropdownMenuItem onClick={async () => {
+							await handleUpdateTimesheet(false)
+						}} textValue={'No'} className="cursor-pointer">
 							<div className="flex items-center gap-3">
 								<span>{t('pages.timesheet.BILLABLE.NO')}</span>
 							</div>

From e5617bc5af08adc0bee4e6a8998de2a7b73a74cc Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Wed, 27 Nov 2024 20:35:15 +0200
Subject: [PATCH 37/41] [Feature] Create new project from the project dropdown
 (#3360)

* createw new project in add task or task detail page

* add project dropdown in task creation process

* add coderabit suggetions
---
 .../hooks/features/useOrganizationProjects.ts |  27 +-
 apps/web/app/services/client/api/projects.ts  |  11 +-
 .../blocks/task-secondary-info.tsx            | 278 ++++++++----------
 apps/web/components/ui/svgs/project-icon.tsx  |  12 +-
 .../features/project/create-project-modal.tsx |  96 ++++++
 apps/web/lib/features/task/task-status.tsx    |   2 +-
 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 +-
 19 files changed, 285 insertions(+), 180 deletions(-)
 create mode 100644 apps/web/lib/features/project/create-project-modal.tsx

diff --git a/apps/web/app/hooks/features/useOrganizationProjects.ts b/apps/web/app/hooks/features/useOrganizationProjects.ts
index 121c4dc8e..fdf19e3b5 100644
--- a/apps/web/app/hooks/features/useOrganizationProjects.ts
+++ b/apps/web/app/hooks/features/useOrganizationProjects.ts
@@ -2,13 +2,15 @@ import {
 	editOrganizationProjectSettingAPI,
 	editOrganizationProjectAPI,
 	getOrganizationProjectAPI,
-	getOrganizationProjectsAPI
+	getOrganizationProjectsAPI,
+	createOrganizationProjectAPI
 } from '@app/services/client/api';
 import { userState } from '@app/stores';
 import { useCallback } from 'react';
 import { useAtom } from 'jotai';
 import { useQuery } from '../useQuery';
 import { organizationProjectsState } from '@/app/stores/organization-projects';
+import { getOrganizationIdCookie, getTenantIdCookie } from '@/app/helpers';
 
 export function useOrganizationProjects() {
 	const [user] = useAtom(userState);
@@ -26,6 +28,9 @@ export function useOrganizationProjects() {
 	const { loading: getOrganizationProjectsLoading, queryCall: getOrganizationProjectsQueryCall } =
 		useQuery(getOrganizationProjectsAPI);
 
+	const { loading: createOrganizationProjectLoading, queryCall: createOrganizationProjectQueryCall } =
+		useQuery(createOrganizationProjectAPI);
+
 	const editOrganizationProjectSetting = useCallback(
 		(id: string, data: any) => {
 			if (user?.tenantId) {
@@ -69,6 +74,24 @@ export function useOrganizationProjects() {
 		}
 	}, [getOrganizationProjectsQueryCall, setOrganizationProjects]);
 
+	const createOrganizationProject = useCallback(
+		async (data: { name: string }) => {
+			try {
+				const organizationId = getOrganizationIdCookie();
+				const tenantId = getTenantIdCookie();
+
+				const res = await createOrganizationProjectQueryCall({ ...data, organizationId, tenantId });
+
+				setOrganizationProjects([...organizationProjects, res.data]);
+
+				return res.data;
+			} catch (error) {
+				console.error(error);
+			}
+		},
+		[createOrganizationProjectQueryCall, organizationProjects, setOrganizationProjects]
+	);
+
 	return {
 		editOrganizationProjectSetting,
 		editOrganizationProjectSettingLoading,
@@ -79,5 +102,7 @@ export function useOrganizationProjects() {
 		getOrganizationProjects,
 		getOrganizationProjectsLoading,
 		organizationProjects,
+		createOrganizationProject,
+		createOrganizationProjectLoading
 	};
 }
diff --git a/apps/web/app/services/client/api/projects.ts b/apps/web/app/services/client/api/projects.ts
index a4f08467f..a69d540cf 100644
--- a/apps/web/app/services/client/api/projects.ts
+++ b/apps/web/app/services/client/api/projects.ts
@@ -1,12 +1,7 @@
-import { IProject } from '@app/interfaces';
+import { IProject, IProjectCreate } from '@app/interfaces';
 import { post } from '../axios';
 
-type Params = {
-	name: string;
-	tenantId: string;
-	organizationId: string;
-};
+export function createOrganizationProjectAPI(data: IProjectCreate) {
 
-export function createOrganizationProjectAPI(params: Params) {
-	return post<IProject>(`/organization-projects`, params);
+	return post<IProject>(`/organization-projects`, data);
 }
diff --git a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
index ecf7bc426..37707b6ce 100644
--- a/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
+++ b/apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
@@ -1,4 +1,4 @@
-import { useModal, useOrganizationProjects, useTeamTasks } from '@app/hooks';
+import { useModal, useOrganizationProjects, useOrganizationTeams, useTeamTasks } from '@app/hooks';
 import { IProject, ITaskVersionCreate, ITeamTask } from '@app/interfaces';
 import { detailedTaskState } from '@app/stores';
 import { PlusIcon } from '@heroicons/react/20/solid';
@@ -21,11 +21,13 @@ import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import TaskRow from '../components/task-row';
 import { useTranslations } from 'next-intl';
-import { ChevronDownIcon, Square4OutlineIcon } from 'assets/svg';
+import { AddIcon, ChevronDownIcon, Square4OutlineIcon, TrashIcon } from 'assets/svg';
 import { Listbox, Transition } from '@headlessui/react';
 import { clsxm } from '@/app/utils';
 import { organizationProjectsState } from '@/app/stores/organization-projects';
 import ProjectIcon from '@components/ui/svgs/project-icon';
+import { ScrollArea, ScrollBar } from '@components/ui/scroll-bar';
+import { CreateProjectModal } from '@/lib/features/project/create-project-modal';
 
 type StatusType = 'version' | 'epic' | 'status' | 'label' | 'size' | 'priority';
 
@@ -104,23 +106,6 @@ const TaskSecondaryInfo = () => {
 				</ActiveTaskVersionDropdown>
 			</TaskRow>
 
-			{/* Epic */}
-			{task && task.issueType === 'Story' && (
-				<TaskRow labelTitle={t('pages.taskDetails.EPIC')}>
-					<TaskEpicDropdown
-						onValueChange={(d) => {
-							onTaskSelect({
-								id: d
-							} as ITeamTask);
-						}}
-						className="lg:min-w-[170px] text-black"
-						forDetails={true}
-						sidebarUI={true}
-						taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-						defaultValue={task.parentId || ''}
-					/>
-				</TaskRow>
-			)}
 			{/* Epic */}
 			{task && task.issueType === 'Story' && (
 				<TaskRow labelTitle={t('pages.taskDetails.EPIC')}>
@@ -139,27 +124,8 @@ const TaskSecondaryInfo = () => {
 				</TaskRow>
 			)}
 
-			{task && <EpicParent task={task} />}
 			{task && <EpicParent task={task} />}
 
-			{/* Task Status */}
-			<TaskRow labelTitle={t('pages.taskDetails.STATUS')}>
-				<ActiveTaskStatusDropdown
-					task={task}
-					className="lg:min-w-[170px] text-black"
-					forDetails={true}
-					sidebarUI={true}
-					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-				>
-					<Button
-						className="w-full px-2 py-1 text-xs dark:text-white dark:border-white"
-						variant="outline"
-						onClick={openModalEditionHandle('status')}
-					>
-						<PlusIcon className="w-4 h-4" />
-					</Button>
-				</ActiveTaskStatusDropdown>
-			</TaskRow>
 			{/* Task Status */}
 			<TaskRow labelTitle={t('pages.taskDetails.STATUS')}>
 				<ActiveTaskStatusDropdown
@@ -179,34 +145,6 @@ const TaskSecondaryInfo = () => {
 				</ActiveTaskStatusDropdown>
 			</TaskRow>
 
-			{/* Task Labels */}
-			<TaskRow labelTitle={t('pages.taskDetails.LABELS')}>
-				<TaskLabels
-					task={task}
-					className="lg:min-w-[170px] text-black lg:mt-0"
-					forDetails={true}
-					taskStatusClassName="text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs"
-				/>
-			</TaskRow>
-			{tags.length > 0 && (
-				<TaskRow>
-					<div className="flex flex-row flex-wrap gap-1 max-w-[10rem]">
-						{tags.map((tag, i) => {
-							return (
-								<Tooltip key={i} label={tag.name?.split('-').join(' ') || ''} placement="auto">
-									<TaskStatus
-										{...tag}
-										className="rounded-[0.625rem] h-6 max-w-[8rem]"
-										active={true}
-										name={tag.name?.split('-').join(' ')}
-										titleClassName={'text-[0.625rem] font-[500]'}
-									/>
-								</Tooltip>
-							);
-						})}
-					</div>
-				</TaskRow>
-			)}
 			{/* Task Labels */}
 			<TaskRow labelTitle={t('pages.taskDetails.LABELS')}>
 				<TaskLabels
@@ -277,7 +215,7 @@ const TaskSecondaryInfo = () => {
 			{/* Task project */}
 			{task && (
 				<TaskRow labelTitle={t('pages.taskDetails.PROJECT')} wrapperClassName="text-black">
-					<ProjectDropDown task={task} />
+					<ProjectDropDown styles={{ listCard: 'rounded-xl' }} task={task} />
 				</TaskRow>
 			)}
 			<Modal isOpen={modal.isOpen} closeModal={modal.closeModal}>
@@ -344,15 +282,16 @@ export default TaskSecondaryInfo;
  */
 export function ProjectDropDown(props: ITaskProjectDropdownProps) {
 	const { task, controlled = false, onChange, styles } = props;
-
+	const { openModal, isOpen, closeModal } = useModal();
 	const organizationProjects = useAtomValue(organizationProjectsState);
 	const { getOrganizationProjects } = useOrganizationProjects();
 	const { updateTask, updateLoading } = useTeamTasks();
+	const { teams } = useOrganizationTeams();
 	const t = useTranslations();
 
 	useEffect(() => {
 		getOrganizationProjects();
-	}, [getOrganizationProjects]);
+	}, [getOrganizationProjects, teams]);
 
 	const [selected, setSelected] = useState<IProject>();
 
@@ -395,99 +334,128 @@ export function ProjectDropDown(props: ITaskProjectDropdownProps) {
 	}, [task, updateTask]);
 
 	return (
-		<div
-			className={clsxm(
-				'relative  text-sm font-medium border text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs',
-				styles?.container
-			)}
-		>
-			<Listbox
-				value={selected}
-				onChange={(project) => {
-					if (controlled && onChange) {
-						onChange(project);
-					} else {
-						handleUpdateProject(project);
-					}
-
-					setSelected(project);
-				}}
+		<>
+			<div
+				className={clsxm(
+					'relative  text-sm font-medium border text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs',
+					styles?.container
+				)}
 			>
-				{({ open }) => {
-					return (
-						<>
-							<Listbox.Button
-								className={clsxm(
-									`cursor-pointer outline-none w-full flex
+				<Listbox
+					value={selected}
+					onChange={(project) => {
+						if (controlled && onChange) {
+							onChange(project);
+						} else {
+							handleUpdateProject(project);
+						}
+
+						setSelected(project);
+					}}
+				>
+					{({ open }) => {
+						return (
+							<>
+								<Listbox.Button
+									className={clsxm(
+										`cursor-pointer outline-none w-full flex
 									items-center justify-between px-4 h-full
 									border-solid border-color-[#F2F2F2]
 									dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] rounded-lg`,
-									styles?.value
-								)}
-							>
-								{selected && (
-									<div className="">
-										<ProjectIcon />
-									</div>
-								)}
-								{updateLoading ? (
-									<SpinnerLoader size={10} />
-								) : (
-									<p className={clsxm('truncate', !selected && ' text-slate-400 font-light')}>
-										{selected?.name ?? 'Project'}
-									</p>
-								)}
-								<ChevronDownIcon
-									className={clsxm(
-										'h-4 w-4 text-slate-400 transition duration-150 ease-in-out group-hover:text-opacity-80'
+										styles?.value
+									)}
+								>
+									{selected && (
+										<div className="">
+											<ProjectIcon />
+										</div>
+									)}
+									{updateLoading ? (
+										<SpinnerLoader size={10} />
+									) : (
+										<p className={clsxm('truncate', !selected && ' text-slate-400 font-light')}>
+											{selected?.name ?? 'Project'}
+										</p>
 									)}
-									aria-hidden="true"
-								/>
-							</Listbox.Button>
-
-							<Transition
-								show={open}
-								enter="transition duration-100 ease-out"
-								enterFrom="transform scale-95 opacity-0"
-								enterTo="transform scale-100 opacity-100"
-								leave="transition duration-75 ease-out"
-								leaveFrom="transform scale-100 opacity-100"
-								leaveTo="transform scale-95 opacity-0"
-								className={clsxm('absolute right-0 left-0 top-10 z-40 min-w-min outline-none')}
-							>
-								<Listbox.Options className="outline-none">
-									<Card
-										shadow="bigger"
+									<ChevronDownIcon
 										className={clsxm(
-											'p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 max-h-[206px] overflow-x-auto rounded-none',
-											styles?.listCard
+											'h-4 w-4 text-slate-400 transition duration-150 ease-in-out group-hover:text-opacity-80'
 										)}
-									>
-										{organizationProjects.map((item, i) => {
-											return (
-												<Listbox.Option key={item.id} value={item} as={Fragment}>
-													<li className="relative outline-none cursor-pointer">
-														{item.name}
-													</li>
-												</Listbox.Option>
-											);
-										})}
-										{!controlled && (
-											<Button
-												className=" px-2 py-1 mt-2 !min-w-min rounded-none text-xs dark:text-white dark:border-white"
-												variant="outline"
-												onClick={handleRemoveProject}
-											>
-												{t('common.REMOVE')}
-											</Button>
-										)}
-									</Card>
-								</Listbox.Options>
-							</Transition>
-						</>
-					);
+										aria-hidden="true"
+									/>
+								</Listbox.Button>
+
+								<Transition
+									show={open}
+									enter="transition duration-100 ease-out"
+									enterFrom="transform scale-95 opacity-0"
+									enterTo="transform scale-100 opacity-100"
+									leave="transition duration-75 ease-out"
+									leaveFrom="transform scale-100 opacity-100"
+									leaveTo="transform scale-95 opacity-0"
+									className={clsxm('absolute  right-0 left-0 top-10  z-40 min-w-min outline-none')}
+								>
+									<Listbox.Options className="outline-none">
+										<Card
+											shadow="bigger"
+											className={clsxm(
+												'p-0 md:p-0 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 h-[13rem] max-h-[13rem] overflow-x-auto rounded-none overflow-hidden',
+												styles?.listCard
+											)}
+										>
+											<ScrollArea className="w-full h-full">
+												<div className="flex flex-col gap-2.5 w-full p-4">
+													{organizationProjects.map((item, i) => {
+														return (
+															<Listbox.Option key={item.id} value={item} as={Fragment}>
+																<li className="relative border h-[2rem] flex items-center gap-1 px-2 rounded-lg outline-none cursor-pointer">
+																	<ProjectIcon width={14} height={14} />{' '}
+																	<span className=" truncate">{item.name}</span>
+																</li>
+															</Listbox.Option>
+														);
+													})}
+													<div className="mt-2">
+														{!controlled && (
+															<Button
+																className=" px-2 py-1 w-full !justify-start !gap-2  !min-w-min h-[2rem] rounded-lg text-xs dark:text-white dark:border-white"
+																variant="outline"
+																onClick={handleRemoveProject}
+															>
+																<TrashIcon className="w-5 " /> {t('common.REMOVE')}
+															</Button>
+														)}
+														<Button
+															className=" px-2 py-1 mt-2 w-full !justify-start !min-w-min h-[2rem] rounded-lg text-xs dark:text-white dark:border-white"
+															variant="outline"
+															onClick={openModal}
+														>
+															<AddIcon className="w-3 h-3 text-dark dark:text-white" />{' '}
+															<span className=" truncate">{t('common.CREATE_NEW')}</span>
+														</Button>
+													</div>
+												</div>
+												<ScrollBar className="-pr-60" />
+											</ScrollArea>
+										</Card>
+									</Listbox.Options>
+								</Transition>
+							</>
+						);
+					}}
+				</Listbox>
+			</div>
+			<CreateProjectModal
+				onSuccess={(project) => {
+					setSelected(project);
+					onChange?.(project);
+					if (!controlled) {
+						handleUpdateProject(project);
+					}
 				}}
-			</Listbox>
-		</div>
+				open={isOpen}
+				closeModal={closeModal}
+			/>
+		</>
 	);
 }
diff --git a/apps/web/components/ui/svgs/project-icon.tsx b/apps/web/components/ui/svgs/project-icon.tsx
index e15ec9d40..1512e0648 100644
--- a/apps/web/components/ui/svgs/project-icon.tsx
+++ b/apps/web/components/ui/svgs/project-icon.tsx
@@ -1,6 +1,14 @@
-export default function ProjectIcon() {
+import { IIconProps } from '@/app/interfaces';
+
+export default function ProjectIcon(props: Partial<IIconProps>) {
 	return (
-		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<svg
+			width={props.width ?? 18}
+			height={props.height ?? 18}
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
 			<path
 				d="M12 12.2501C11.56 12.2501 11.12 12.1401 10.72 11.9301L4.21 8.4201C3.62 8.1001 3.25 7.4701 3.25 6.7701C3.25 6.0701 3.62 5.4401 4.21 5.1201L10.72 1.6101C11.52 1.1801 12.48 1.1801 13.27 1.6101L19.78 5.1201C20.37 5.4401 20.74 6.0701 20.74 6.7701C20.74 7.4701 20.37 8.1001 19.78 8.4201L13.27 11.9301C12.88 12.1501 12.44 12.2501 12 12.2501ZM12 2.7801C11.81 2.7801 11.61 2.8301 11.43 2.9301L4.93 6.4301C4.76 6.5201 4.75 6.7101 4.75 6.7701C4.75 6.8301 4.76 7.0201 4.93 7.1001L11.44 10.6101C11.8 10.8001 12.21 10.8001 12.57 10.6101L19.08 7.1001C19.24 7.0101 19.26 6.8201 19.26 6.7701C19.26 6.7101 19.25 6.5201 19.08 6.4401L12.57 2.9301C12.39 2.8301 12.19 2.7801 12 2.7801Z"
 				fill="#292D32"
diff --git a/apps/web/lib/features/project/create-project-modal.tsx b/apps/web/lib/features/project/create-project-modal.tsx
new file mode 100644
index 000000000..fd32a2c65
--- /dev/null
+++ b/apps/web/lib/features/project/create-project-modal.tsx
@@ -0,0 +1,96 @@
+import { useOrganizationProjects } from '@/app/hooks';
+import { IProject } from '@/app/interfaces';
+import { Button, Card, InputField, Modal, Text } from 'lib/components';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useState } from 'react';
+
+interface ICreateProjectModalProps {
+	open: boolean;
+	closeModal: () => void;
+	onSuccess?: (project: IProject) => void;
+}
+/**
+ * A modal that allow to create a new project
+ *
+ * @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
+ *
+ * @returns {JSX.Element} The modal element
+ */
+export function CreateProjectModal(props: ICreateProjectModalProps) {
+	const t = useTranslations();
+	const { open, closeModal, onSuccess } = props;
+	const { createOrganizationProject, createOrganizationProjectLoading } = useOrganizationProjects();
+	const [name, setName] = useState('');
+
+	// Cleanup
+	useEffect(() => {
+		return () => {
+			setName('');
+		};
+	}, []);
+
+	const handleCreateProject = useCallback(async () => {
+		try {
+			if (name.trim() === '') {
+				return;
+			}
+			const data = await createOrganizationProject({ name });
+
+			if (data) {
+				onSuccess?.(data);
+			}
+
+			closeModal();
+		} catch (error) {
+			console.error(error);
+		}
+	}, [closeModal, createOrganizationProject, name, onSuccess]);
+
+	return (
+		<Modal isOpen={open} closeModal={closeModal} alignCloseIcon>
+			<Card className=" sm:w-[33rem] w-[20rem]" shadow="custom">
+				<div className="flex flex-col items-center justify-between gap-8">
+					<Text.Heading as="h3" className="text-center">
+						{t('common.CREATE_PROJECT')}
+					</Text.Heading>
+
+					<div className="w-full">
+						<InputField
+							name="name"
+							autoCustomFocus
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							placeholder={'Please enter the project name'}
+							required
+							className="w-full"
+							wrapperClassName=" h-full border border-blue-500"
+							noWrapper
+						/>
+					</div>
+
+					<div className="flex items-center justify-between w-full">
+						<Button
+							disabled={createOrganizationProjectLoading}
+							onClick={closeModal}
+							className="h-[2.75rem]"
+							variant="outline"
+						>
+							{t('common.CANCEL')}
+						</Button>
+						<Button
+							disabled={createOrganizationProjectLoading}
+							loading={createOrganizationProjectLoading}
+							className="h-[2.75rem]"
+							type="submit"
+							onClick={handleCreateProject}
+						>
+							{t('common.CREATE')}
+						</Button>
+					</div>
+				</div>
+			</Card>
+		</Modal>
+	);
+}
diff --git a/apps/web/lib/features/task/task-status.tsx b/apps/web/lib/features/task/task-status.tsx
index f8598bf3d..6bd82e0a3 100644
--- a/apps/web/lib/features/task/task-status.tsx
+++ b/apps/web/lib/features/task/task-status.tsx
@@ -1079,7 +1079,7 @@ export function StatusDropdown<T extends TStatusItem>({
 									<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 gap-2.5 max-h-[206px] overflow-x-auto"
+											className="p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 overflow-x-auto"
 										>
 											{items.map((item, i) => {
 												const item_value = item?.value || item?.name;
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index c64c8e161..b46388feb 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -249,7 +249,8 @@
 		"FILTER_CUSTOM_RANGE": "نطاق مخصص",
 		"CLEAR_FILTER": "مسح الفلتر",
 		"CLEAR": "مسح",
-		"APPLY_FILTER": "تطبيق الفلتر"
+		"APPLY_FILTER": "تطبيق الفلتر",
+		"CREATE_NEW": "إنشاء جديد"
 	},
 	"sidebar": {
 		"DASHBOARD": "لوحة التحكم",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index a504c9f88..f67870cdc 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Потребителски диапазон",
 		"CLEAR_FILTER": "Изчисти филтъра",
 		"CLEAR": "Изчисти",
-		"APPLY_FILTER": "Приложи филтър"
+		"APPLY_FILTER": "Приложи филтър",
+		"CREATE_NEW": "Създай нов"
 	},
 	"hotkeys": {
 		"HELP": "Помощ",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index a29130ced..4eb10c048 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Benutzerdefinierter Bereich",
 		"CLEAR_FILTER": "Filter löschen",
 		"CLEAR": "Löschen",
-		"APPLY_FILTER": "Filter anwenden"
+		"APPLY_FILTER": "Filter anwenden",
+		"CREATE_NEW": "Neu erstellen"
 	},
 	"hotkeys": {
 		"HELP": "Hilfe",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index 7ad4c6701..f9b336cb5 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Custom Range",
 		"CLEAR_FILTER": "Clear Filter",
 		"CLEAR": "Clear",
-		"APPLY_FILTER": "Apply Filter"
+		"APPLY_FILTER": "Apply Filter",
+		"CREATE_NEW": "Create New"
 	},
 	"hotkeys": {
 		"HELP": "Help",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 072a30752..48a1fb500 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Rango personalizado",
 		"CLEAR_FILTER": "Borrar filtro",
 		"CLEAR": "Borrar",
-		"APPLY_FILTER": "Aplicar filtro"
+		"APPLY_FILTER": "Aplicar filtro",
+		"CREATE_NEW": "Crear nuevo"
 	},
 	"hotkeys": {
 		"HELP": "Ayuda",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index 03e6d72ae..df60e6395 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Plage personnalisée",
 		"CLEAR_FILTER": "Effacer le filtre",
 		"CLEAR": "Effacer",
-		"APPLY_FILTER": "Appliquer le filtre"
+		"APPLY_FILTER": "Appliquer le filtre",
+		"CREATE_NEW": "Créer nouveau"
 	},
 	"hotkeys": {
 		"HELP": "Aide",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 009eaf700..4eb9b0848 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "טווח מותאם אישית",
 		"CLEAR_FILTER": "נקה סינון",
 		"CLEAR": "נקה",
-		"APPLY_FILTER": "החל סינון"
+		"APPLY_FILTER": "החל סינון",
+		"CREATE_NEW": "צור חדש"
 	},
 	"hotkeys": {
 		"HELP": "עזרה",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index c9810b03a..5413c4aa9 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Intervallo personalizzato",
 		"CLEAR_FILTER": "Cancella filtro",
 		"CLEAR": "Cancella",
-		"APPLY_FILTER": "Applica filtro"
+		"APPLY_FILTER": "Applica filtro",
+		"CREATE_NEW": "Crea nuovo"
 	},
 	"hotkeys": {
 		"HELP": "Aiuto",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 15022dd3d..566273f74 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Aangepast bereik",
 		"CLEAR_FILTER": "Filter wissen",
 		"CLEAR": "Wissen",
-		"APPLY_FILTER": "Filter toepassen"
+		"APPLY_FILTER": "Filter toepassen",
+		"CREATE_NEW": "Nieuwe maken"
 	},
 	"hotkeys": {
 		"HELP": "Help",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index 3ff42ee43..d694fcdc5 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Zakres niestandardowy",
 		"CLEAR_FILTER": "Wyczyść filtr",
 		"CLEAR": "Wyczyść",
-		"APPLY_FILTER": "Zastosuj filtr"
+		"APPLY_FILTER": "Zastosuj filtr",
+		"CREATE_NEW": "Utwórz nowy"
 	},
 	"hotkeys": {
 		"HELP": "Pomoc",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index 4ae42a04d..a34170a2d 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Faixa personalizada",
 		"CLEAR_FILTER": "Limpar filtro",
 		"CLEAR": "Limpar",
-		"APPLY_FILTER": "Aplicar filtro"
+		"APPLY_FILTER": "Aplicar filtro",
+		"CREATE_NEW": "Criar novo"
 	},
 	"hotkeys": {
 		"HELP": "Ajuda",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index a64a38134..fbb5d83c4 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "Пользовательский диапазон",
 		"CLEAR_FILTER": "Очистить фильтр",
 		"CLEAR": "Очистить",
-		"APPLY_FILTER": "Применить фильтр"
+		"APPLY_FILTER": "Применить фильтр",
+		"CREATE_NEW": "Создать новый"
 	},
 	"hotkeys": {
 		"HELP": "Помощь",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 311077623..4445a5557 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -267,7 +267,8 @@
 		"FILTER_CUSTOM_RANGE": "自定义范围",
 		"CLEAR_FILTER": "清除筛选",
 		"CLEAR": "清除",
-		"APPLY_FILTER": "应用筛选"
+		"APPLY_FILTER": "应用筛选",
+		"CREATE_NEW": "创建新的"
 	},
 	"hotkeys": {
 		"HELP": "帮助",

From 74b7fb3b5001818e5e8892340dce5d4fe2673f81 Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Thu, 28 Nov 2024 21:44:49 +0200
Subject: [PATCH 38/41] feat(timesheet): add skeleton loader for improved UI
 feedback

---
 .../[memberId]/components/TimesheetView.tsx   |  7 ++--
 .../shared/skeleton/TimesheetSkeleton.tsx     | 32 +++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/shared/skeleton/TimesheetSkeleton.tsx

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
index 4fd852b36..ee72a1f79 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
@@ -1,4 +1,5 @@
 import { GroupedTimesheet } from '@/app/hooks/features/useTimesheet';
+import TimesheetSkeleton from '@components/shared/skeleton/TimesheetSkeleton';
 import { DataTableTimeSheet } from 'lib/features/integrations/calendar';
 import { useTranslations } from 'next-intl';
 
@@ -7,8 +8,10 @@ export function TimesheetView({ data, loading }: { data?: GroupedTimesheet[]; lo
 
 	if (loading || !data) {
 		return (
-			<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme flex items-center justify-center">
-				<p>{t('pages.timesheet.LOADING')}</p>
+			<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme">
+				{Array.from({ length: 10 }).map((_, index) => (
+					<TimesheetSkeleton key={index} />
+				))}
 			</div>
 		);
 	}
diff --git a/apps/web/components/shared/skeleton/TimesheetSkeleton.tsx b/apps/web/components/shared/skeleton/TimesheetSkeleton.tsx
new file mode 100644
index 000000000..e0462c314
--- /dev/null
+++ b/apps/web/components/shared/skeleton/TimesheetSkeleton.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import Skeleton from './Skeleton'
+import { clsxm } from '@/app/utils'
+
+function TimesheetSkeleton() {
+    return (
+        <div className={clsxm(
+            'flex justify-between items-center w-full',
+            'bg-[#ffffffcc] dark:bg-dark--theme rounded-md border',
+            'border-gray-100 dark:border-gray-700 text-[#71717A] font-medium my-2 p-2 h-[50px] rounded-sm gap-x-2  px-2 py-2'
+        )}>
+            <div className='flex flex-col w-full gap-4'>
+                <div className='flex items-center justify-between  gap-4'>
+                    <Skeleton width={80} borderRadius={4} height={10} className="dark:bg-[#272930]" />
+                    <Skeleton width={80} borderRadius={4} height={10} className="dark:bg-[#272930]" />
+                </div>
+                <div className='flex items-center justify-between gap-4 w-full'>
+                    <div className='flex items-center gap-2'>
+                        <Skeleton width={20} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                        <Skeleton width={200} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                        <Skeleton width={40} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                    </div>
+                    <div className='flex items-center gap-2'>
+                        <Skeleton width={200} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                        <Skeleton width={200} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default TimesheetSkeleton

From 936b83564bc91a6ee849f013e2b0615fe63c684e Mon Sep 17 00:00:00 2001
From: syns <sutralian@gmail.com>
Date: Fri, 29 Nov 2024 03:16:20 +0700
Subject: [PATCH 39/41] Fix/server web implement config (#3368)

* fix: server web default setting

* fix: handle dynamic gauzy api host from desktop config

* fix: setup server web

* fix: remove unecessary code

* fix: miss spell word

* fix: clean code

* fix: handle error on create tray menu

* fix: build standalone for desktop
---
 .scripts/configure.electron.ts                |  77 ++++++++
 .scripts/copy-web-build.ts                    |  34 ++++
 .../src/locales/i18n/bg/translation.json      |  24 +--
 .../src/locales/i18n/en/translation.json      |  24 +--
 apps/server-web/src/main/helpers/constant.ts  |   4 +-
 .../src/main/helpers/interfaces/i-constant.ts |   2 +-
 .../src/main/helpers/interfaces/i-menu.ts     |  15 ++
 .../src/main/helpers/interfaces/i-server.ts   |   6 +-
 .../src/main/helpers/interfaces/index.ts      |   1 +
 .../src/main/helpers/replace-config.ts        |  24 +++
 .../services/desktop-server-factory.ts        |   1 +
 .../helpers/services/libs/desktop-store.ts    |  50 ++++--
 .../src/main/helpers/services/web-service.ts  |  16 +-
 apps/server-web/src/main/main.ts              | 168 +++++++++++-------
 apps/server-web/src/main/menu.ts              |  26 +--
 .../renderer/components/LanguageSelector.tsx  |  54 ++++++
 .../src/renderer/components/SideBar.tsx       |  22 +--
 .../src/renderer/components/Updater.tsx       |  12 +-
 .../renderer/libs/interfaces/i-components.ts  |   4 +-
 .../src/renderer/libs/interfaces/i-setting.ts |   4 +-
 .../server-web/src/renderer/pages/Setting.tsx |  36 +---
 .../src/renderer/pages/setup/Landing.tsx      |  22 ++-
 apps/web/app/api/desktop-server/route.ts      |   6 +
 apps/web/app/constants.ts                     |  13 +-
 apps/web/app/env.ts                           |  12 ++
 .../app/interfaces/IRuntimeServerConfig.ts    |   5 +
 apps/web/app/services/client/axios.ts         |  42 +++--
 .../server/requests/desktop-source.ts         |  16 ++
 package.json                                  |   5 +-
 29 files changed, 510 insertions(+), 215 deletions(-)
 create mode 100644 .scripts/configure.electron.ts
 create mode 100644 .scripts/copy-web-build.ts
 create mode 100644 apps/server-web/src/main/helpers/interfaces/i-menu.ts
 create mode 100644 apps/server-web/src/renderer/components/LanguageSelector.tsx
 create mode 100644 apps/web/app/api/desktop-server/route.ts
 create mode 100644 apps/web/app/interfaces/IRuntimeServerConfig.ts
 create mode 100644 apps/web/app/services/server/requests/desktop-source.ts

diff --git a/.scripts/configure.electron.ts b/.scripts/configure.electron.ts
new file mode 100644
index 000000000..fb2f5256b
--- /dev/null
+++ b/.scripts/configure.electron.ts
@@ -0,0 +1,77 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { hideBin } from 'yargs/helpers';
+import yargs from 'yargs';
+
+interface Arguments {
+    type: 'server' | 'constant'
+}
+const argv = yargs(hideBin(process.argv))
+  .options({
+    type: {
+      type: 'string',
+      choices: ['server', 'constant'],
+      demandOption: true,
+      description: 'Type of configuration to modify'
+    }
+  })
+  .parseSync() as Arguments;
+
+function modifiedNextServer() {
+    const filePath = path.resolve(__dirname, '../apps/server-web/release/app/dist/standalone/apps/web/server.js');
+    try {
+        let fileContent = fs.readFileSync(filePath, 'utf8');
+        const searchString = 'process.env.__NEXT_PRIVATE_STANDALONE_CONFIG';
+        const codeToInsert = `
+        nextConfig.serverRuntimeConfig = {
+            "GAUZY_API_SERVER_URL": process.env.GAUZY_API_SERVER_URL,
+            "NEXT_PUBLIC_GAUZY_API_SERVER_URL": process.env.NEXT_PUBLIC_GAUZY_API_SERVER_URL
+        }
+        `;
+
+        let lines = fileContent.split('\n');
+        const index = lines.findIndex((line) => line.includes(searchString));
+
+        if (index !== -1) {
+            lines.splice(index - 1, 0, codeToInsert);
+
+            fileContent = lines.join('\n');
+            fs.writeFileSync(filePath, fileContent, 'utf8');
+            console.log('Line of code successfully inserted.');
+        } else {
+            console.log(`The string "${searchString}" was not found in the file.`);
+        }
+    } catch (error) {
+        console.error('Failed to change static server configuration');
+    }
+}
+
+function updateWebConstant(setDesktopApp) {
+    const filePath = path.resolve(__dirname, '../apps/web/app/constants.ts');
+    try {
+       let fileContent = fs.readFileSync(filePath, 'utf8');
+       const envCheck = `export const IS_DESKTOP_APP = process.env.IS_DESKTOP_APP === 'true';`;
+       const hardcoded = `export const IS_DESKTOP_APP = true;`;
+
+       const [from, to] = setDesktopApp ? [envCheck, hardcoded] : [hardcoded, envCheck];
+
+       if (!fileContent.includes(from)) {
+           throw new Error(`Expected content not found in ${filePath}`);
+       }
+
+       fileContent = fileContent.replace(from, to);
+       fs.writeFileSync(filePath, fileContent, 'utf8');
+       console.log(`Successfully ${setDesktopApp ? 'set' : 'reverted'} IS_DESKTOP_APP`);
+   } catch (error) {
+       console.error('Failed to update constants:', error);
+       process.exit(1);
+   }
+}
+
+
+if (argv.type === 'server') {
+    modifiedNextServer();
+    updateWebConstant(false);
+} else if (argv.type === 'constant') {
+    updateWebConstant(true);
+}
diff --git a/.scripts/copy-web-build.ts b/.scripts/copy-web-build.ts
new file mode 100644
index 000000000..d9291be66
--- /dev/null
+++ b/.scripts/copy-web-build.ts
@@ -0,0 +1,34 @@
+import { copy } from 'fs-extra';
+import { join } from 'path';
+
+async function copyWebBuild() {
+  const webDir = join(process.cwd(), 'apps/web');
+  const distDir = join(process.cwd(), 'apps/server-web/release/app/dist');
+
+  try {
+    // Copy standalone build
+    await copy(
+      join(webDir, '.next/standalone'),
+      join(distDir, 'standalone')
+    );
+
+    // Copy static files
+    await copy(
+      join(webDir, '.next/static'),
+      join(distDir, 'standalone/apps/web/.next/static')
+    );
+
+    // Copy public files
+    await copy(
+      join(webDir, 'public'),
+      join(distDir, 'standalone/apps/web/public')
+    );
+
+    console.log('Build files copied successfully');
+  } catch (error) {
+    console.error('Failed to copy build files:', error);
+    process.exit(1);
+  }
+}
+
+copyWebBuild();
diff --git a/apps/server-web/src/locales/i18n/bg/translation.json b/apps/server-web/src/locales/i18n/bg/translation.json
index bcec1eff5..28ca92eeb 100644
--- a/apps/server-web/src/locales/i18n/bg/translation.json
+++ b/apps/server-web/src/locales/i18n/bg/translation.json
@@ -15,19 +15,19 @@
     "SERVER_WINDOW": "Прозорец на сървъра"
   },
   "MENU_APP": {
-    "ABOUT": "Относно",
-    "QUIT": "Изход",
-    "WINDOW": "Прозорец",
-    "SUBMENU": {
-      "SETTING": "Настройки",
-      "SERVER_WINDOW": "Сървърен прозорец",
-      "LEARN_MORE": "Научете повече",
-      "DOC": "Документация",
-      "SETTING_DEV": "Настройки за разработчици",
-      "SERVER_DEV": "Сървър за разработчици"
+    "APP_ABOUT": "Относно",
+    "APP_QUIT": "Изход",
+    "APP_WINDOW": "Прозорец",
+    "APP_SUBMENU": {
+      "APP_SETTING": "Настройки",
+      "APP_SERVER_WINDOW": "Сървърен прозорец",
+      "APP_LEARN_MORE": "Научете повече",
+      "APP_DOC": "Документация",
+      "APP_SETTING_DEV": "Настройки за разработчици",
+      "APP_SERVER_DEV": "Сървър за разработчици"
     },
-    "DEV": "Разработчик",
-    "HELP": "Помощ"
+    "APP_DEV": "Разработчик",
+    "APP_HELP": "Помощ"
   },
   "FORM": {
     "FIELDS": {
diff --git a/apps/server-web/src/locales/i18n/en/translation.json b/apps/server-web/src/locales/i18n/en/translation.json
index c18265dde..440e56bec 100644
--- a/apps/server-web/src/locales/i18n/en/translation.json
+++ b/apps/server-web/src/locales/i18n/en/translation.json
@@ -15,19 +15,19 @@
     "SERVER_WINDOW": "Server Window"
   },
   "MENU_APP": {
-    "ABOUT": "About",
-    "QUIT": "Quit",
-    "WINDOW": "Window",
-    "SUBMENU": {
-      "SETTING": "Setting",
-      "SERVER_WINDOW": "Server Window",
-      "LEARN_MORE": "Learn More",
-      "DOC": "Documentation",
-      "SETTING_DEV": "Setting Dev.",
-      "SERVER_DEV": "Server Dev."
+    "APP_ABOUT": "About",
+    "APP_QUIT": "Quit",
+    "APP_WINDOW": "Window",
+    "APP_SUBMENU": {
+      "APP_SETTING": "Setting",
+      "APP_SERVER_WINDOW": "Server Window",
+      "APP_LEARN_MORE": "Learn More",
+      "APP_DOC": "Documentation",
+      "APP_SETTING_DEV": "Setting Dev.",
+      "APP_SERVER_DEV": "Server Dev."
     },
-    "DEV": "Developer",
-    "HELP": "Help"
+    "APP_DEV": "Developer",
+    "APP_HELP": "Help"
   },
   "FORM": {
     "FIELDS": {
diff --git a/apps/server-web/src/main/helpers/constant.ts b/apps/server-web/src/main/helpers/constant.ts
index b2ebfcb96..bcd77553f 100644
--- a/apps/server-web/src/main/helpers/constant.ts
+++ b/apps/server-web/src/main/helpers/constant.ts
@@ -17,7 +17,9 @@ export const EventLists = {
   SERVER_WINDOW: 'SERVER_WINDOW',
   RESTART_SERVER: 'RESTART_SERVER',
   CHANGE_THEME: 'CHANGE_THEME',
-  SETUP_WINDOW: 'SETUP_WINDOW'
+  SETUP_WINDOW: 'SETUP_WINDOW',
+  SETTING_WINDOW_DEV: 'SETTING_WINDOW_DEV',
+  SERVER_WINDOW_DEV: 'SERVER_WINDOW_DEV'
 }
 
 export const SettingPageTypeMessage = {
diff --git a/apps/server-web/src/main/helpers/interfaces/i-constant.ts b/apps/server-web/src/main/helpers/interfaces/i-constant.ts
index 421769ce3..e8e439af1 100644
--- a/apps/server-web/src/main/helpers/interfaces/i-constant.ts
+++ b/apps/server-web/src/main/helpers/interfaces/i-constant.ts
@@ -1 +1 @@
-export type Channels = 'setting-page' | 'ipc-renderer' | 'language-set' | 'updater-page' | 'server-page' | 'theme-change' | 'current-theme';
+export type Channels = 'setting-page' | 'ipc-renderer' | 'language-set' | 'updater-page' | 'server-page' | 'theme-change' | 'current-theme' | 'current-language';
diff --git a/apps/server-web/src/main/helpers/interfaces/i-menu.ts b/apps/server-web/src/main/helpers/interfaces/i-menu.ts
new file mode 100644
index 000000000..158bc6011
--- /dev/null
+++ b/apps/server-web/src/main/helpers/interfaces/i-menu.ts
@@ -0,0 +1,15 @@
+import { MenuItemConstructorOptions } from 'electron';
+export interface AppMenu {
+    id?: string;
+    label: string; // Menu label
+    submenu?: (AppMenu | ElectronMenuItem)[]; // Nested menus or Electron menu items
+    role?: 'appMenu' | 'fileMenu' | 'editMenu' | 'viewMenu' | 'windowMenu' | 'help'; // Predefined menu roles
+    type?: 'normal' | 'separator' | 'submenu' | 'checkbox' | 'radio'; // Menu item type
+    click?: () => void; // Click handler for the menu item
+    accelerator?: string; // Keyboard shortcut
+    enabled?: boolean; // Whether the item is enabled
+    visible?: boolean; // Whether the item is visible
+    checked?: boolean; // For 'checkbox' or 'radio' type
+  }
+
+  export type ElectronMenuItem = MenuItemConstructorOptions;
diff --git a/apps/server-web/src/main/helpers/interfaces/i-server.ts b/apps/server-web/src/main/helpers/interfaces/i-server.ts
index 43f188166..146e8ea31 100644
--- a/apps/server-web/src/main/helpers/interfaces/i-server.ts
+++ b/apps/server-web/src/main/helpers/interfaces/i-server.ts
@@ -1,13 +1,13 @@
-interface GeneralConfig {
+export interface GeneralConfig {
     lang?: string
     autoUpdate?: boolean
-    updateCheckPeriode?: string
+    updateCheckPeriod?: string
     theme?: string
     setup?: boolean
     [key: string]: any
 }
 
-interface ServerConfig {
+export interface ServerConfig {
     PORT: number;
     NEXT_PUBLIC_GAUZY_API_SERVER_URL: string;
     GAUZY_API_SERVER_URL: string;
diff --git a/apps/server-web/src/main/helpers/interfaces/index.ts b/apps/server-web/src/main/helpers/interfaces/index.ts
index 8f45b8de0..de47665c2 100644
--- a/apps/server-web/src/main/helpers/interfaces/index.ts
+++ b/apps/server-web/src/main/helpers/interfaces/index.ts
@@ -1,3 +1,4 @@
 export * from './i-server';
 export * from './i-desktop-dialog';
 export * from './i-constant';
+export * from './i-menu';
diff --git a/apps/server-web/src/main/helpers/replace-config.ts b/apps/server-web/src/main/helpers/replace-config.ts
index 98e12f9af..5e80d8730 100644
--- a/apps/server-web/src/main/helpers/replace-config.ts
+++ b/apps/server-web/src/main/helpers/replace-config.ts
@@ -42,3 +42,27 @@ export const replaceConfig = async (folderPath: string, envOptions: EnvOptions)
     console.log('error on replacing file', error);
   }
 }
+
+export const clearDesktopConfig = async (folderPath: string): Promise<Boolean> => {
+  if (!folderPath || typeof folderPath !== 'string') {
+     throw new Error('Invalid folder path provided');
+  }
+  const DESKTOP_CONFIG_FILES = ['desktop-server.body', 'desktop-server.meta'] as const;
+  try {
+    // remove cached desktop server config
+    await Promise.all(
+      DESKTOP_CONFIG_FILES.map(async (file) => {
+        const filePath = path.join(folderPath, file);
+        try {
+          await fs.promises.unlink(filePath)
+        } catch (error: any) {
+          console.log('error unlink static web file', error.message)
+        }
+      })
+    )
+    return true;
+  } catch (error) {
+    console.log('Failed to clear static config');
+    return false;
+  }
+}
diff --git a/apps/server-web/src/main/helpers/services/desktop-server-factory.ts b/apps/server-web/src/main/helpers/services/desktop-server-factory.ts
index 1a9502238..8206cc2a9 100644
--- a/apps/server-web/src/main/helpers/services/desktop-server-factory.ts
+++ b/apps/server-web/src/main/helpers/services/desktop-server-factory.ts
@@ -8,6 +8,7 @@ export class DesktopServerFactory {
 		if (!this.apiInstance && !!env) {
 			this.apiInstance = new WebService(path, env, win, signal, eventEmitter);
 		}
+		this.apiInstance.updateEnv(env)
 		return this.apiInstance;
 	}
 }
diff --git a/apps/server-web/src/main/helpers/services/libs/desktop-store.ts b/apps/server-web/src/main/helpers/services/libs/desktop-store.ts
index 01c708563..1875ee9c2 100644
--- a/apps/server-web/src/main/helpers/services/libs/desktop-store.ts
+++ b/apps/server-web/src/main/helpers/services/libs/desktop-store.ts
@@ -1,7 +1,7 @@
 import Store from 'electron-store';
-import { WebServer } from '../../interfaces';
+import { WebServer, ServerConfig } from '../../interfaces';
 const store = new Store();
-const DEFAULT_CONFIG:any = {
+const DEFAULT_CONFIG:WebServer = {
 	server: {
 		PORT: 3002,
 		GAUZY_API_SERVER_URL: 'http://localhost:3000',
@@ -11,7 +11,7 @@ const DEFAULT_CONFIG:any = {
 	general: {
 		lang: 'en',
 		autoUpdate: true,
-		updateCheckPeriode: '1140'
+		updateCheckPeriod: '1140' // Time in minutes
 	}
 }
 export const LocalStore = {
@@ -35,17 +35,41 @@ export const LocalStore = {
 		});
 	},
 
+	deepMerge<T>(target: T, source: Partial<T>): T {
+		const result: T = { ...target };
+		Object.keys(source).forEach(key => {
+			const value = source[key as keyof T];
+			if (value && typeof value === 'object') {
+				result[key as keyof T] = this.deepMerge(
+					target[key as keyof T],
+					value as any
+				);
+			} else if (value !== undefined) {
+				result[key as keyof T] = value as any;
+			}
+		});
+		return result;
+	},
 
-	setDefaultServerConfig: () => {
-		const defaultConfig: WebServer | any = store.get('config') || {};
-		Object.keys(DEFAULT_CONFIG).forEach((key) => {
-			Object.keys(DEFAULT_CONFIG[key]).forEach((keySub) => {
-				defaultConfig[key] = defaultConfig[key] || {};
-				defaultConfig[key][keySub] = defaultConfig[key][keySub] || DEFAULT_CONFIG[key][keySub];
-			})
-		})
-		store.set({
-			config: defaultConfig
+	validateConfig(config: WebServer): void {
+		const required = ['PORT', 'GAUZY_API_SERVER_URL'];
+		required.forEach(field => {
+			if (!config || !config.server || !config?.server[field as keyof ServerConfig]) {
+				throw new Error(`Missing required field: ${field}`);
+			}
 		});
+	},
+
+	setDefaultServerConfig() {
+	    try {
+	        const storedConfig = store.get('config') as Partial<WebServer> || {};
+	        const mergedConfig = this.deepMerge<WebServer>(DEFAULT_CONFIG, storedConfig)
+	        this.validateConfig(mergedConfig || {});
+
+	        store.set({ config: mergedConfig });
+	    } catch (error) {
+	        console.error('Failed to set default configuration:', error);
+	        store.set({ config: DEFAULT_CONFIG });
+	    }
 	}
 };
diff --git a/apps/server-web/src/main/helpers/services/web-service.ts b/apps/server-web/src/main/helpers/services/web-service.ts
index 80d02a4ff..ffb0b59b7 100644
--- a/apps/server-web/src/main/helpers/services/web-service.ts
+++ b/apps/server-web/src/main/helpers/services/web-service.ts
@@ -5,7 +5,7 @@ import { EventEmitter } from 'stream';
 export class WebService extends ServerTask {
 	constructor(
 		readonly path: string,
-		readonly env: any,
+		private env: any,
 		readonly window: BrowserWindow,
 		readonly signal: AbortSignal,
 		readonly eventEmitter: EventEmitter
@@ -38,11 +38,11 @@ export class WebService extends ServerTask {
 		}
 	}
 
-	private setApiConfig(): void {
-		// Object.assign(this.args, {
-		// 	API_HOST: '0.0.0.0',
-		// 	API_PORT: this.config.setting.PORT,
-		// 	API_BASE_URL: this.config.apiUrl
-		// });
+	public setApiConfig(): void {
+		Object.assign(this.args, {...this.env});
 	}
-}
+
+	public updateEnv(env: any): void {
+		this.env = {...env};
+	}
+ }
diff --git a/apps/server-web/src/main/main.ts b/apps/server-web/src/main/main.ts
index cba85f718..09db991a2 100644
--- a/apps/server-web/src/main/main.ts
+++ b/apps/server-web/src/main/main.ts
@@ -10,11 +10,12 @@ import Updater from './updater';
 import { mainBindings } from 'i18next-electron-fs-backend';
 import i18nextMainBackend from '../configs/i18n.mainconfig';
 import fs from 'fs';
-import { WebServer } from './helpers/interfaces';
-import { replaceConfig } from './helpers';
+import { WebServer, AppMenu, ServerConfig } from './helpers/interfaces';
+import { clearDesktopConfig } from './helpers';
 import Log from 'electron-log';
 import MenuBuilder from './menu';
 import { config } from '../configs/config';
+import { debounce } from 'lodash';
 
 
 console.log = Log.log;
@@ -39,8 +40,6 @@ let tray: Tray;
 let settingWindow: BrowserWindow | null = null;
 let logWindow: BrowserWindow | null = null;
 let setupWindow: BrowserWindow | any = null;
-let SettingMenu: any = null;
-let ServerWindowMenu: any = null;
 const appMenu = new MenuBuilder(eventEmitter)
 
 Log.hooks.push((message: any, transport) => {
@@ -92,7 +91,7 @@ i18nextMainBackend.on('initialized', () => {
 });
 
 let trayMenuItems: any = [];
-let appMenuItems: any = [];
+let appMenuItems: AppMenu[] = [];
 
 const RESOURCES_PATH = app.isPackaged
   ? path.join(process.resourcesPath, 'assets')
@@ -180,7 +179,6 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
       mainBindings(ipcMain, settingWindow, fs);
       settingWindow.on('closed', () => {
         settingWindow = null;
-        SettingMenu = null
       });
       Menu.setApplicationMenu(appMenu.buildDefaultTemplate(appMenuItems, i18nextMainBackend))
       break;
@@ -191,7 +189,6 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
       mainBindings(ipcMain, logWindow, fs);
       logWindow.on('closed', () => {
         logWindow = null;
-        ServerWindowMenu = null
       })
       Menu.setApplicationMenu(appMenu.buildDefaultTemplate(appMenuItems, i18nextMainBackend))
       break;
@@ -200,6 +197,11 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
       url = resolveHtmlPath('index.html', 'setup');
       setupWindow?.loadURL(url);
       mainBindings(ipcMain, setupWindow, fs);
+      if (process.platform === 'darwin') {
+        Menu.setApplicationMenu(Menu.buildFromTemplate([]));
+      } else {
+        setupWindow.removeMenu();
+      }
       setupWindow.on('closed', () => {
         setupWindow = null;
       })
@@ -212,12 +214,17 @@ const createWindow = async (type: 'SETTING_WINDOW' | 'LOG_WINDOW' | 'SETUP_WINDO
 const runServer = async () => {
   console.log('Run the Server...');
   try {
-    const envVal: any = getEnvApi();
+    const envVal: ServerConfig | undefined = getEnvApi();
+    const folderPath = getWebDirPath();
+    await clearDesktopConfig(folderPath);
 
     // Instantiate API and UI servers
     await desktopServer.start(
       { api: serverPath },
-      envVal,
+      {
+        ...(envVal || {}),
+        IS_DESKTOP_APP: true
+      },
       undefined,
       signal
     );
@@ -243,7 +250,7 @@ const restartServer = async () => {
   }, 1000)
 }
 
-const getEnvApi = () => {
+const getEnvApi = (): ServerConfig | undefined => {
   const setting: WebServer = LocalStore.getStore('config')
   return setting?.server;
 };
@@ -257,24 +264,14 @@ const SendMessageToSettingWindow = (type: string, data: any) => {
 
 const onInitApplication = () => {
  // check and set default config
-  LocalStore.setDefaultServerConfig();
-  createIntervalAutoUpdate()
-  trayMenuItems = trayMenuItems.length ? trayMenuItems : defaultTrayMenuItem(eventEmitter);
-  appMenuItems = appMenuItems.length ? appMenuItems : appMenu.defaultMenu();
-  tray = _initTray(trayMenuItems, getAssetPath('icons/icon.png'));
-  i18nextMainBackend.on('languageChanged', (lng) => {
-    if (i18nextMainBackend.isInitialized) {
-
+  const storeConfig:WebServer = LocalStore.getStore('config');
+  i18nextMainBackend.on('languageChanged', debounce((lng) => {
+    if (i18nextMainBackend.isInitialized && storeConfig.general?.setup) {
       trayMenuItems = trayMenuItems.length ? trayMenuItems : defaultTrayMenuItem(eventEmitter);
       updateTrayMenu('none', {}, eventEmitter, tray, trayMenuItems, i18nextMainBackend);
       Menu.setApplicationMenu(appMenu.buildDefaultTemplate(appMenuItems, i18nextMainBackend))
     }
-  });
-  eventEmitter.on(EventLists.webServerStart, async () => {
-    updateTrayMenu('SERVER_START', { enabled: false }, eventEmitter, tray, trayMenuItems, i18nextMainBackend);
-    isServerRun = true;
-    await runServer();
-  })
+  }, 250));
 
   eventEmitter.on(EventLists.webServerStop, async () => {
     await stopServer();
@@ -400,6 +397,7 @@ const onInitApplication = () => {
 
   eventEmitter.on(EventLists.SERVER_WINDOW, async () => {
     if (!logWindow) {
+      initTrayMenu()
       await createWindow('LOG_WINDOW');
     }
     const serverSetting = LocalStore.getStore('config');
@@ -419,7 +417,7 @@ const onInitApplication = () => {
   })
 
   eventEmitter.on(EventLists.OPEN_WEB, () => {
-    const envConfig = getEnvApi();
+    const envConfig: ServerConfig | undefined = getEnvApi();
     const url = `http://127.0.0.1:${envConfig?.PORT}`
     shell.openExternal(url)
   })
@@ -431,21 +429,57 @@ const onInitApplication = () => {
   eventEmitter.on(EventLists.SERVER_WINDOW_DEV, () => {
     logWindow?.webContents.toggleDevTools();
   })
+}
 
-  eventEmitter.emit(EventLists.SERVER_WINDOW);
+const initTrayMenu = () => {
+  const MAX_RETRIES = 2;
+  const retryInit = async (attempts: number = 0) => {
+    try {
+      LocalStore.setDefaultServerConfig();
+      createIntervalAutoUpdate()
+      trayMenuItems = trayMenuItems.length ? trayMenuItems : defaultTrayMenuItem(eventEmitter);
+      appMenuItems = appMenuItems.length ? appMenuItems : appMenu.defaultMenu();
+      tray = _initTray(trayMenuItems, getAssetPath('icons/icon.png'));
+
+      eventEmitter.on(EventLists.webServerStart, async () => {
+        updateTrayMenu('SERVER_START', { enabled: false }, eventEmitter, tray, trayMenuItems, i18nextMainBackend);
+        isServerRun = true;
+        await runServer();
+      })
+
+      trayMenuItems = trayMenuItems.length ? trayMenuItems : defaultTrayMenuItem(eventEmitter);
+      updateTrayMenu('none', {}, eventEmitter, tray, trayMenuItems, i18nextMainBackend);
+    } catch (error) {
+      if (attempts < MAX_RETRIES) {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        retryInit(attempts + 1)
+      }
+      console.error('Failed to initialize application:', error);
+      dialog.showErrorBox('Initialization Error', 'Failed to initialize application');
+    }
+  }
+  if (!tray) {
+    return retryInit(0)
+  }
 }
 
 (async () => {
   await app.whenReady()
   const storeConfig:WebServer = LocalStore.getStore('config');
+  onInitApplication();
   if (storeConfig?.general?.setup) {
-    onInitApplication();
+    eventEmitter.emit(EventLists.SERVER_WINDOW);
   } else {
     if (!setupWindow) {
       await createWindow('SETUP_WINDOW');
     }
     if (setupWindow) {
-      setupWindow?.show()
+      setupWindow?.show();
+      setupWindow?.webContents.once('did-finish-load', () => {
+        setTimeout(() => {
+          setupWindow?.webContents.send('languageSignal', storeConfig.general?.lang);
+        }, 50)
+      })
     }
   }
 })()
@@ -459,47 +493,44 @@ ipcMain.on('message', async (event, arg) => {
   event.reply('message', `${arg} World!`)
 })
 
+const getWebDirPath = () => {
+  const dirFiles = 'standalone/apps/web/.next/server/app/api';
+  const devDirFilesPath = path.join(__dirname, resourceDir.webServer, dirFiles);
+  const packDirFilesPath = path.join(process.resourcesPath, 'release', 'app', 'dist', dirFiles)
+  const diFilesPath = isPack ? packDirFilesPath : devDirFilesPath;
+  return diFilesPath;
+}
+
 ipcMain.on(IPC_TYPES.SETTING_PAGE, async (event, arg) => {
   switch (arg.type) {
     case SettingPageTypeMessage.saveSetting:
-      const existingConfig = getEnvApi();
-      LocalStore.updateConfigSetting({
-        server: arg.data
-      });
-      const dirFiles = 'standalone/apps/web/.next';
-      const devDirFilesPath = path.join(__dirname, resourceDir.webServer, dirFiles);
-      const packDirFilesPath = path.join(process.resourcesPath, 'release', 'app', 'dist', dirFiles)
-      const diFilesPath = isPack ? packDirFilesPath : devDirFilesPath;
-      await replaceConfig(
-        diFilesPath,
-        {
-          before: {
-            NEXT_PUBLIC_GAUZY_API_SERVER_URL: existingConfig?.NEXT_PUBLIC_GAUZY_API_SERVER_URL || config.NEXT_PUBLIC_GAUZY_API_SERVER_URL
-          },
-          after: {
-            NEXT_PUBLIC_GAUZY_API_SERVER_URL: arg.data.NEXT_PUBLIC_GAUZY_API_SERVER_URL || config.NEXT_PUBLIC_GAUZY_API_SERVER_URL
-          }
-        }
-      )
-      if (arg.isSetup) {
+      {
         LocalStore.updateConfigSetting({
-          general: {
-            setup: true
-          }
-        });
-        setupWindow?.close();
-        onInitApplication();
-        eventEmitter.emit(EventLists.SERVER_WINDOW);
-      } else {
-        event.sender.send(IPC_TYPES.SETTING_PAGE, {
-          type: SettingPageTypeMessage.mainResponse, data: {
-            status: true,
-            isServerRun: isServerRun
-          }
+          server: arg.data
         });
+        const diFilesPath = getWebDirPath();
+        await clearDesktopConfig(
+          diFilesPath
+        )
+        if (arg.isSetup) {
+          LocalStore.updateConfigSetting({
+            general: {
+              setup: true
+            }
+          });
+          setupWindow?.close();
+          eventEmitter.emit(EventLists.SERVER_WINDOW);
+        } else {
+          event.sender.send(IPC_TYPES.SETTING_PAGE, {
+            type: SettingPageTypeMessage.mainResponse, data: {
+              status: true,
+              isServerRun: isServerRun
+            }
+          });
+        }
+        break;
       }
-      break;
-    case SettingPageTypeMessage.checkUpdate:
+      case SettingPageTypeMessage.checkUpdate:
       updater.checkUpdate();
       break;
     case SettingPageTypeMessage.installUpdate:
@@ -523,7 +554,7 @@ ipcMain.on(IPC_TYPES.SETTING_PAGE, async (event, arg) => {
       LocalStore.updateConfigSetting({
         general: {
           autoUpdate: arg.data.autoUpdate,
-          updateCheckPeriode: arg.data.updateCheckPeriode
+          updateCheckPeriod: arg.data.updateCheckPeriod
         }
       })
       createIntervalAutoUpdate()
@@ -554,13 +585,18 @@ ipcMain.handle('current-theme', async () => {
   return setting?.general?.theme;;
 })
 
+ipcMain.handle('current-language', async (): Promise<string> => {
+  const setting: WebServer = LocalStore.getStore('config');
+  return setting?.general?.lang || 'en';
+})
+
 const createIntervalAutoUpdate = () => {
   if (intervalUpdate) {
     clearInterval(intervalUpdate)
   }
   const setting: WebServer = LocalStore.getStore('config');
-  if (setting.general?.autoUpdate && setting.general.updateCheckPeriode) {
-    const checkIntervalSecond = parseInt(setting.general.updateCheckPeriode);
+  if (setting.general?.autoUpdate && setting.general.updateCheckPeriod) {
+    const checkIntervalSecond = parseInt(setting.general.updateCheckPeriod);
     if (!Number.isNaN(checkIntervalSecond)) {
       const intervalMS = checkIntervalSecond * 60 * 1000;
       intervalUpdate = setInterval(() => {
diff --git a/apps/server-web/src/main/menu.ts b/apps/server-web/src/main/menu.ts
index cec72f148..e95f8f8ba 100644
--- a/apps/server-web/src/main/menu.ts
+++ b/apps/server-web/src/main/menu.ts
@@ -7,6 +7,7 @@ import { config } from '../configs/config';
 import { EventEmitter } from 'events';
 import { EventLists } from './helpers/constant';
 import i18n from 'i18next';
+import { AppMenu } from './helpers/interfaces';
 
 export default class MenuBuilder {
   eventEmitter: EventEmitter
@@ -15,7 +16,7 @@ export default class MenuBuilder {
     this.eventEmitter = eventEmitter
   }
 
-  defaultMenu() {
+  defaultMenu(): AppMenu[] {
     const isDarwin = process.platform === 'darwin';
     return [
       {
@@ -24,8 +25,7 @@ export default class MenuBuilder {
         submenu: [
           {
             id: 'MENU_APP_ABOUT',
-            label: `MENU_APP.ABOUT`,
-            selector: 'orderFrontStandardAboutPanel:',
+            label: `MENU_APP.APP_ABOUT`,
             click: () => {
               this.eventEmitter.emit(EventLists.gotoAbout)
             }
@@ -33,7 +33,7 @@ export default class MenuBuilder {
           { type: 'separator' },
           {
             id: 'MENU_APP_QUIT',
-            label: 'MENU_APP.QUIT',
+            label: 'MENU_APP.APP_QUIT',
             accelerator: isDarwin ? 'Command+Q' : 'Alt+F4',
             click: () => {
               app.quit();
@@ -43,18 +43,18 @@ export default class MenuBuilder {
       },
       {
         id: 'MENU_APP_WINDOW',
-        label: 'MENU_APP.WINDOW',
+        label: 'MENU_APP.APP_WINDOW',
         submenu: [
           {
             id: 'SUBMENU_SETTING',
-            label: 'MENU_APP.SUBMENU.SETTING',
+            label: 'MENU_APP.APP_SUBMENU.APP_SETTING',
             click: () => {
               this.eventEmitter.emit(EventLists.gotoSetting);
             }
           },
           {
             id: 'SUBMENU_SERVER',
-            label: 'MENU_APP.SUBMENU.SERVER_WINDOW',
+            label: 'MENU_APP.APP_SUBMENU.APP_SERVER_WINDOW',
             click: () => {
               this.eventEmitter.emit(EventLists.SERVER_WINDOW);
             }
@@ -63,18 +63,18 @@ export default class MenuBuilder {
       },
       {
         id: 'MENU_APP_HELP',
-        label: 'MENU_APP.HELP',
+        label: 'MENU_APP.APP_HELP',
         submenu: [
           {
             id: 'SUBMENU_LEARN_MORE',
-            label: 'MENU_APP.SUBMENU.LEARN_MORE',
+            label: 'MENU_APP.APP_SUBMENU.APP_LEARN_MORE',
             click() {
               shell.openExternal(config.COMPANY_SITE_LINK);
             },
           },
           {
             id: 'SUBMENU_DOC',
-            label: 'MENU_APP.SUBMENU.DOC',
+            label: 'MENU_APP.APP_SUBMENU.APP_DOC',
             click() {
               shell.openExternal(
                 config.COMPANY_GITHUB_LINK
@@ -85,18 +85,18 @@ export default class MenuBuilder {
       },
       {
         id: 'MENU_APP_DEV',
-        label: 'MENU_APP.DEV',
+        label: 'MENU_APP.APP_DEV',
         submenu: [
           {
             id: 'SUBMENU_SETTING_DEV',
-            label: 'MENU_APP.SUBMENU.SETTING_DEV',
+            label: 'MENU_APP.APP_SUBMENU.APP_SETTING_DEV',
             click: () => {
               this.eventEmitter.emit(EventLists.SETTING_WINDOW_DEV);
             },
           },
           {
             id: 'SUBMENU_SERVER_DEV',
-            label: 'MENU_APP.SUBMENU.SERVER_DEV',
+            label: 'MENU_APP.APP_SUBMENU.APP_SERVER_DEV',
             click: () => {
               this.eventEmitter.emit(EventLists.SERVER_WINDOW_DEV);
             },
diff --git a/apps/server-web/src/renderer/components/LanguageSelector.tsx b/apps/server-web/src/renderer/components/LanguageSelector.tsx
new file mode 100644
index 000000000..0cebc1a71
--- /dev/null
+++ b/apps/server-web/src/renderer/components/LanguageSelector.tsx
@@ -0,0 +1,54 @@
+import { useTranslation } from 'react-i18next';
+import { SelectComponent } from './Select';
+import { useState } from 'react';
+import { ILanguages } from '../libs/interfaces';
+import { SettingPageTypeMessage } from '../../main/helpers/constant';
+
+export const SUPPORTED_LANGUAGES: ILanguages[] = [
+  { code: 'en', label: 'English' },
+  { code: 'bg', label: 'Bulgarian' },
+];
+
+type LanguageSelector = {
+  lang: string;
+};
+const LanguageSelector = ({ lang }: LanguageSelector) => {
+  const [langs] = useState<ILanguages[]>(SUPPORTED_LANGUAGES);
+  const { t } = useTranslation();
+
+  const changeLanguage = (data: ILanguages) => {
+    try {
+      window.electron.ipcRenderer.sendMessage('setting-page', {
+        type: SettingPageTypeMessage.langChange,
+        data: data.code,
+      });
+      setLng(data.code);
+    } catch (error) {
+      console.error('Failed to change language:', error);
+    }
+  };
+
+  const [lng, setLng] = useState<string>(lang);
+
+  const language = langs.find((lg) => lg.code === lng) || {
+    code: 'en',
+    label: 'English',
+  };
+  return (
+    <SelectComponent
+      items={langs.map((i) => ({
+        value: i.code,
+        label: `LANGUAGES.${i.code}`,
+      }))}
+      title={t('FORM.LABELS.LANGUAGES')}
+      defaultValue={language.code}
+      onValueChange={(val) => {
+        changeLanguage({ code: val });
+      }}
+      disabled={false}
+      value={language.code}
+    />
+  );
+};
+
+export default LanguageSelector;
diff --git a/apps/server-web/src/renderer/components/SideBar.tsx b/apps/server-web/src/renderer/components/SideBar.tsx
index fd4c80ebe..f0b94c3d7 100644
--- a/apps/server-web/src/renderer/components/SideBar.tsx
+++ b/apps/server-web/src/renderer/components/SideBar.tsx
@@ -1,22 +1,16 @@
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { ISidebarComponent } from '../libs/interfaces';
-import { SelectComponent } from './Select';
 import { ThemeToggler } from './Toggler';
+import LanguageSelector from './LanguageSelector';
 
 export function SideBar({
   children,
   menus,
   menuChange,
-  langs,
   lang,
-  onLangChange,
 }: ISidebarComponent) {
   const { t } = useTranslation();
-  const language = langs.find((lg) => lg.code === lang) || {
-    code: 'en',
-    label: 'English',
-  };
   return (
     <div className="min-h-screen flex flex-col flex-auto flex-shrink-0 antialiased text-gray-800">
       <div className="fixed flex flex-col top-0 left-0 w-1/4 h-full dark:bg-[#1c1e23] bg-gray-200">
@@ -43,19 +37,7 @@ export function SideBar({
         </div>
         <div className="flex items-center justify-center py-6 px-2">
           <div className="flex flex-col w-6/8 mr-5">
-            <SelectComponent
-              items={langs.map((i) => ({
-                value: i.code,
-                label: `LANGUAGES.${i.code}`,
-              }))}
-              title={t('FORM.LABELS.LANGUAGES')}
-              defaultValue={language.code}
-              onValueChange={(lang) => {
-                onLangChange({ code: lang });
-              }}
-              disabled={false}
-              value={language.code}
-            />
+            <LanguageSelector lang={lang} />
           </div>
 
           <div className="flex flex-col w-2/8">
diff --git a/apps/server-web/src/renderer/components/Updater.tsx b/apps/server-web/src/renderer/components/Updater.tsx
index eb70dd816..5e5d110b4 100644
--- a/apps/server-web/src/renderer/components/Updater.tsx
+++ b/apps/server-web/src/renderer/components/Updater.tsx
@@ -70,11 +70,11 @@ export const UpdaterComponent = (props: IUpdaterComponent) => {
   const onSelectPeriode = (value: string) => {
     props.changeAutoUpdate({
       autoUpdate: props.data.autoUpdate,
-      updateCheckPeriode: value,
+      updateCheckPeriod: value,
     });
     props.saveSettingUpdate({
       autoUpdate: props.data.autoUpdate,
-      updateCheckPeriode: value,
+      updateCheckPeriod: value,
     });
   };
 
@@ -123,11 +123,11 @@ export const UpdaterComponent = (props: IUpdaterComponent) => {
                     setOpen();
                     props.changeAutoUpdate({
                       autoUpdate: value,
-                      updateCheckPeriode: props.data.updateCheckPeriode,
+                      updateCheckPeriod: props.data.updateCheckPeriod,
                     });
                     props.saveSettingUpdate({
                       autoUpdate: value,
-                      updateCheckPeriode: props.data.updateCheckPeriode,
+                      updateCheckPeriod: props.data.updateCheckPeriod,
                     });
                   }}
                   checked={props.data.autoUpdate}
@@ -149,8 +149,8 @@ export const UpdaterComponent = (props: IUpdaterComponent) => {
                     ...i,
                     label: `FORM.LABELS.UPDATE_OPTIONS.${i.label}`,
                   }))}
-                  value={props.data.updateCheckPeriode}
-                  defaultValue={props.data.updateCheckPeriode}
+                  value={props.data.updateCheckPeriod}
+                  defaultValue={props.data.updateCheckPeriod}
                   disabled={!props.data.autoUpdate}
                   onValueChange={onSelectPeriode}
                 />
diff --git a/apps/server-web/src/renderer/libs/interfaces/i-components.ts b/apps/server-web/src/renderer/libs/interfaces/i-components.ts
index 607e7a8dd..fba435bbe 100644
--- a/apps/server-web/src/renderer/libs/interfaces/i-components.ts
+++ b/apps/server-web/src/renderer/libs/interfaces/i-components.ts
@@ -1,4 +1,4 @@
-import { IUpdaterStates, IUpdateSetting, ISideMenu, ISelectItems, IServerSetting, ILanguages } from './i-setting';
+import { IUpdaterStates, IUpdateSetting, ISideMenu, ISelectItems, IServerSetting } from './i-setting';
 
 type IToastComponent = {
   title: string;
@@ -51,8 +51,6 @@ type ISidebarComponent = {
   children: string | JSX.Element | JSX.Element[];
   menus: ISideMenu[];
   menuChange: (key: string) => void;
-  langs: ILanguages[];
-  onLangChange: (lang: any) => void;
   lang: string;
 };
 
diff --git a/apps/server-web/src/renderer/libs/interfaces/i-setting.ts b/apps/server-web/src/renderer/libs/interfaces/i-setting.ts
index f09118e9e..d061ed869 100644
--- a/apps/server-web/src/renderer/libs/interfaces/i-setting.ts
+++ b/apps/server-web/src/renderer/libs/interfaces/i-setting.ts
@@ -40,12 +40,12 @@ interface IPopup {
 
 interface ILanguages {
   code: string;
-  label: string;
+  label?: string;
 }
 
 type IUpdateSetting = {
   autoUpdate: boolean;
-  updateCheckPeriode: string;
+  updateCheckPeriod: string;
 };
 
 type IAbout = {
diff --git a/apps/server-web/src/renderer/pages/Setting.tsx b/apps/server-web/src/renderer/pages/Setting.tsx
index 90b699ac7..c938f2e6d 100644
--- a/apps/server-web/src/renderer/pages/Setting.tsx
+++ b/apps/server-web/src/renderer/pages/Setting.tsx
@@ -6,14 +6,12 @@ import {
   ServerComponent,
   UpdaterComponent,
   AboutComponent,
-  GeneralComponent,
 } from '../components';
 import {
   IUpdaterStates,
   IUpdateSetting,
   IServerSetting,
   IPopup,
-  ILanguages,
   ISideMenu,
 } from '../libs/interfaces';
 import { useTranslation } from 'react-i18next';
@@ -40,20 +38,9 @@ export function Setting() {
 
   const [updateSetting, setUpdateSetting] = useState<IUpdateSetting>({
     autoUpdate: false,
-    updateCheckPeriode: '180',
+    updateCheckPeriod: '180',
   });
 
-  const [langs, setLangs] = useState<ILanguages[]>([
-    {
-      code: 'en',
-      label: 'English',
-    },
-    {
-      code: 'bg',
-      label: 'Bulgarian',
-    },
-  ]);
-
   const [lng, setLng] = useState<string>('en');
 
   const [updateStates, setUpdateState] = useState<IUpdaterStates>({
@@ -91,11 +78,6 @@ export function Setting() {
     setMenu(newMenu);
   };
 
-  const changeLanguage = (lang: ILanguages) => {
-    sendingMessageToMain(lang.code, SettingPageTypeMessage.langChange);
-    setLng(lang.code);
-  };
-
   const saveSettingUpdate = (data: IUpdateSetting) => {
     sendingMessageToMain(data, SettingPageTypeMessage.updateSetting);
   };
@@ -202,12 +184,6 @@ export function Setting() {
       sendingMessageToMain({}, SettingPageTypeMessage.showVersion);
       return <AboutComponent version={version} />;
     }
-
-    if (activeMenu() === 'general') {
-      return (
-        <GeneralComponent langs={langs} onChange={changeLanguage} lang={lng} />
-      );
-    }
     return <AboutComponent version={version} />;
   };
 
@@ -268,7 +244,7 @@ export function Setting() {
           setLng(arg.data.general.lang);
           setUpdateSetting({
             autoUpdate: arg.data.general.autoUpdate,
-            updateCheckPeriode: arg.data.general.updateCheckPeriode,
+            updateCheckPeriod: arg.data.general.updateCheckPeriod,
           });
           break;
         case SettingPageTypeMessage.mainResponse:
@@ -305,13 +281,7 @@ export function Setting() {
   }, []);
 
   return (
-    <SideBar
-      menus={menus}
-      menuChange={menuChange}
-      langs={langs}
-      lang={lng}
-      onLangChange={changeLanguage}
-    >
+    <SideBar menus={menus} menuChange={menuChange} lang={lng}>
       <MenuComponent />
     </SideBar>
   );
diff --git a/apps/server-web/src/renderer/pages/setup/Landing.tsx b/apps/server-web/src/renderer/pages/setup/Landing.tsx
index e683418ae..072b6ee06 100644
--- a/apps/server-web/src/renderer/pages/setup/Landing.tsx
+++ b/apps/server-web/src/renderer/pages/setup/Landing.tsx
@@ -1,18 +1,32 @@
 import { EverTeamsLogo } from '../../components/svgs/index';
 import { config } from '../../../configs/config';
 import { useTranslation } from 'react-i18next';
+import LanguageSelector from '../../components/LanguageSelector';
+import { useEffect, useState } from 'react';
 type props = {
   nextAction: () => void;
 };
 const Landing = (props: props) => {
   const { t } = useTranslation();
+  const [defaultLang, setDefaultLang] = useState<string>('en');
+
+  const getCurrentLanguage = async () => {
+    try {
+      const lang = await window.electron.ipcRenderer.invoke('current-language');
+      setDefaultLang(lang);
+    } catch (error) {
+      console.error('Failed to get current language:', error);
+      setDefaultLang('en'); // Fallback to English
+    }
+  };
+
+  useEffect(() => {
+    getCurrentLanguage();
+  }, []);
   return (
     <div className="w-full">
       <div className="mb-6 ml-10">
-        <select className="dark:bg-gray-800 text-gray-700 dark:text-white py-2 px-4 rounded-lg border-2 dark:border-none">
-          <option>English</option>
-          {/* Add other language options here */}
-        </select>
+        <LanguageSelector lang={defaultLang} />
       </div>
 
       <div className="mb-8 w-full text-center">
diff --git a/apps/web/app/api/desktop-server/route.ts b/apps/web/app/api/desktop-server/route.ts
new file mode 100644
index 000000000..c9405224c
--- /dev/null
+++ b/apps/web/app/api/desktop-server/route.ts
@@ -0,0 +1,6 @@
+import { getDesktopConfig } from '@app/services/server/requests/desktop-source';
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+	return NextResponse.json(await getDesktopConfig());
+}
diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
index b7d0ad636..016df0a8b 100644
--- a/apps/web/app/constants.ts
+++ b/apps/web/app/constants.ts
@@ -1,6 +1,6 @@
 import { JitsuOptions } from '@jitsu/jitsu-react/dist/useJitsu';
 import { I_SMTPRequest } from './interfaces/ISmtp';
-import { getNextPublicEnv } from './env';
+import { getNextPublicEnv, getServerRuntimeConfig } from './env';
 import enLanguage from '../locales/en.json';
 import { BG, CN, DE, ES, FR, IS, IT, NL, PL, PT, RU, SA, US } from 'country-flag-icons/react/1x1';
 import { ManualTimeReasons } from './interfaces/timer/IManualTimeReasons';
@@ -30,13 +30,20 @@ export const ACTIVE_TIMEZONE_COOKIE_NAME = 'auth-timezone';
 export const NO_TEAM_POPUP_SHOW_COOKIE_NAME = 'no-team-popup-show';
 export const ACTIVE_PROJECT_COOKIE_NAME = 'auth-active-project';
 
+export const IS_DESKTOP_APP = process.env.IS_DESKTOP_APP === 'true';
+
 // Recaptcha
 export const RECAPTCHA_SITE_KEY = getNextPublicEnv(
 	'NEXT_PUBLIC_CAPTCHA_SITE_KEY',
 	process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY
 );
 export const RECAPTCHA_SECRET_KEY = process.env.CAPTCHA_SECRET_KEY;
-const basePath = process.env.GAUZY_API_SERVER_URL ? process.env.GAUZY_API_SERVER_URL : 'https://api.ever.team';
+let basePath = process.env.GAUZY_API_SERVER_URL ? process.env.GAUZY_API_SERVER_URL : 'https://api.ever.team';
+if (IS_DESKTOP_APP) {
+	const serverRuntimeConfig = getServerRuntimeConfig()
+	basePath = serverRuntimeConfig?.GAUZY_API_SERVER_URL || basePath;
+}
+
 export const GAUZY_API_SERVER_URL = basePath + '/api';
 
 export const GAUZY_API_BASE_SERVER_URL = getNextPublicEnv(
@@ -319,8 +326,6 @@ export const SLACK_CLIENT_SECRET = process.env.SLACK_CLIENT_SECRET;
 export const TWITTER_CLIENT_ID = process.env.TWITTER_CLIENT_ID;
 export const TWITTER_CLIENT_SECRET = process.env.TWITTER_CLIENT_SECRET;
 
-export const IS_DESKTOP_APP = process.env.IS_DESKTOP_APP === 'true';
-
 // Add manual timer reason
 
 export const manualTimeReasons: ManualTimeReasons[] = [
diff --git a/apps/web/app/env.ts b/apps/web/app/env.ts
index 2de6fd64b..983803f66 100644
--- a/apps/web/app/env.ts
+++ b/apps/web/app/env.ts
@@ -1,3 +1,4 @@
+import getConfig from 'next/config';
 const NEXT_PUBLIC_ENVS: { value: Env } = { value: {} };
 
 type Env = Record<string, string | undefined>;
@@ -38,6 +39,17 @@ export function getNextPublicEnv<O extends Options<unknown>>(name: string, optio
 	};
 }
 
+export function getServerRuntimeConfig() {
+  try {
+    const { serverRuntimeConfig } = getConfig();
+    return {
+		GAUZY_API_SERVER_URL: serverRuntimeConfig.GAUZY_API_SERVER_URL,
+    };
+  } catch(e) {
+    console.log('skip get config on call from client');
+  }
+}
+
 export function setNextPublicEnv(envs: Env) {
 	if (envs) {
 		NEXT_PUBLIC_ENVS.value = {
diff --git a/apps/web/app/interfaces/IRuntimeServerConfig.ts b/apps/web/app/interfaces/IRuntimeServerConfig.ts
new file mode 100644
index 000000000..cff07e845
--- /dev/null
+++ b/apps/web/app/interfaces/IRuntimeServerConfig.ts
@@ -0,0 +1,5 @@
+export interface ServerRuntimeConfig {
+    GAUZY_API_SERVER_URL?: string;
+    NEXT_PUBLIC_GAUZY_API_SERVER_URL?: string;
+    [key: string]: any;
+}
diff --git a/apps/web/app/services/client/axios.ts b/apps/web/app/services/client/axios.ts
index eff23ac40..b1d4f20f2 100644
--- a/apps/web/app/services/client/axios.ts
+++ b/apps/web/app/services/client/axios.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
-import { API_BASE_URL, APPLICATION_LANGUAGES_CODE, DEFAULT_APP_PATH, GAUZY_API_BASE_SERVER_URL } from '@app/constants';
+import { API_BASE_URL, APPLICATION_LANGUAGES_CODE, DEFAULT_APP_PATH, GAUZY_API_BASE_SERVER_URL, IS_DESKTOP_APP } from '@app/constants';
 import {
 	getAccessTokenCookie,
 	getActiveTeamIdCookie,
@@ -87,11 +87,29 @@ apiDirect.interceptors.response.use(
 
 type APIConfig = AxiosRequestConfig<any> & { tenantId?: string; directAPI?: boolean };
 
-function apiConfig(config?: APIConfig) {
+async function desktopServerOverride() {
+	if (typeof window !== 'undefined') {
+	  try {
+			const serverConfig = await api.get('/desktop-server');
+      return serverConfig?.data?.NEXT_PUBLIC_GAUZY_API_SERVER_URL;
+		} catch (error) {
+			return GAUZY_API_BASE_SERVER_URL
+		}
+  }
+  return GAUZY_API_BASE_SERVER_URL;
+}
+
+async function apiConfig(config?: APIConfig) {
 	const tenantId = getTenantIdCookie();
 	const organizationId = getOrganizationIdCookie();
 
 	let baseURL: string | undefined = GAUZY_API_BASE_SERVER_URL.value;
+
+  if (IS_DESKTOP_APP) { // dynamic api host while on desktop mode
+    const runtimeConfig =  await desktopServerOverride();
+    baseURL = runtimeConfig || GAUZY_API_BASE_SERVER_URL.value;
+  }
+
 	baseURL = baseURL ? `${baseURL}/api` : undefined;
 
 	apiDirect.defaults.baseURL = baseURL;
@@ -109,22 +127,22 @@ function apiConfig(config?: APIConfig) {
 	};
 }
 
-function get<T>(endpoint: string, config?: APIConfig) {
-	const { baseURL, headers } = apiConfig(config);
+async function get<T>(endpoint: string, config?: APIConfig) {
+	const { baseURL, headers } = await apiConfig(config);
 	const { directAPI = true } = config || {};
 
 	return baseURL && directAPI ? apiDirect.get<T>(endpoint, { ...config, headers }) : api.get<T>(endpoint);
 }
 
-function deleteApi<T>(endpoint: string, config?: APIConfig) {
-	const { baseURL, headers } = apiConfig(config);
+async function deleteApi<T>(endpoint: string, config?: APIConfig) {
+	const { baseURL, headers } = await apiConfig(config);
 	const { directAPI = true } = config || {};
 
 	return baseURL && directAPI ? apiDirect.delete<T>(endpoint, { ...config, headers }) : api.delete<T>(endpoint);
 }
 
-function post<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
-	const { baseURL, headers, tenantId, organizationId } = apiConfig(config);
+async function post<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
+	const { baseURL, headers, tenantId, organizationId } = await apiConfig(config);
 	const { directAPI = true } = config || {};
 
 	if (baseURL && directAPI && data && !(data instanceof FormData)) {
@@ -139,8 +157,8 @@ function post<T>(url: string, data?: Record<string, any> | FormData, config?: AP
 
 	return baseURL && directAPI ? apiDirect.post<T>(url, data, { ...config, headers }) : api.post<T>(url, data);
 }
-function put<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
-	const { baseURL, headers, tenantId, organizationId } = apiConfig(config);
+async function put<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
+	const { baseURL, headers, tenantId, organizationId } = await apiConfig(config);
 	const { directAPI = true } = config || {};
 
 	if (baseURL && directAPI && data && !(data instanceof FormData)) {
@@ -155,8 +173,8 @@ function put<T>(url: string, data?: Record<string, any> | FormData, config?: API
 
 	return baseURL && directAPI ? apiDirect.put<T>(url, data, { ...config, headers }) : api.put<T>(url, data);
 }
-function patch<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
-	const { baseURL, headers, tenantId, organizationId } = apiConfig(config);
+async function patch<T>(url: string, data?: Record<string, any> | FormData, config?: APIConfig) {
+	const { baseURL, headers, tenantId, organizationId } = await apiConfig(config);
 	const { directAPI = true } = config || {};
 
 	if (baseURL && directAPI && data && !(data instanceof FormData)) {
diff --git a/apps/web/app/services/server/requests/desktop-source.ts b/apps/web/app/services/server/requests/desktop-source.ts
new file mode 100644
index 000000000..92d5f2c09
--- /dev/null
+++ b/apps/web/app/services/server/requests/desktop-source.ts
@@ -0,0 +1,16 @@
+import getConfig from 'next/config';
+import { ServerRuntimeConfig } from '@app/interfaces/IRuntimeServerConfig';
+import { GAUZY_API_SERVER_URL, GAUZY_API_BASE_SERVER_URL } from '@app/constants';
+
+export function getDesktopConfig():  Partial<ServerRuntimeConfig> {
+    try {
+        const { serverRuntimeConfig } = getConfig();
+        return serverRuntimeConfig;
+    } catch (error) {
+        console.log('skip get server runtime config');
+        return {
+            GAUZY_API_SERVER_URL,
+            NEXT_PUBLIC_GAUZY_API_SERVER_URL: GAUZY_API_BASE_SERVER_URL.value
+        };
+    }
+}
diff --git a/package.json b/package.json
index 4948aeb7a..3048c8ad2 100644
--- a/package.json
+++ b/package.json
@@ -81,12 +81,13 @@
 		"spell": "cspell . --config .cspell.json",
 		"spellcheck": "cspell .",
 		"config:electron": "yarn ts-node ./.scripts/electron.env.ts",
+		"config:electron:web:build": "yarn ts-node ./.scripts/configure.electron.ts",
 		"pack": "yarn ts-node .scripts/electron-package-utils/package-util.ts",
 		"pack:server-web": "yarn run pack --desktop=server-web",
 		"config:server-web": "yarn run config:electron -- --environment=prod --desktop=server-web",
 		"dev:server-web": "cross-env NODE_ENV=production yarn prepare:config:server-web && yarn build:web:desktop && yarn run prepare:server-web && yarn copy:build:web && yarn run start:server-web",
-		"build:web:desktop": "cross-env NEXT_BUILD_OUTPUT_TYPE=standalone NEXT_SHARP_PATH=/temp/node_modules/sharp yarn build:web",
-		"copy:build:web": "pwd && cp -r  apps/web/.next/standalone apps/server-web/release/app/dist && cp -r apps/web/.next/static apps/server-web/release/app/dist/standalone/apps/web/.next && cp -r apps/web/public apps/server-web/release/app/dist/standalone/apps/web/",
+		"build:web:desktop": "yarn config:electron:web:build -- --type=constant && cross-env NEXT_BUILD_OUTPUT_TYPE=standalone NEXT_SHARP_PATH=/tmp/node_modules/sharp yarn build:web",
+		"copy:build:web": "yarn ts-node .scripts/copy-web-build.ts && yarn config:electron:web:build -- --type=server",
 		"start:server-web": "cd apps/server-web && yarn run start",
 		"prepare:server-web": "cd apps/server-web && yarn run prepare:electron && yarn run build",
 		"pack:server-web:mac": "cd apps/server-web && yarn run pack:mac",

From 02df050cf3b177a6117aef7d3fc7ae95c3a04281 Mon Sep 17 00:00:00 2001
From: AKILIMAILI CIZUNGU Innocent
 <51681130+Innocent-Akim@users.noreply.github.com>
Date: Thu, 28 Nov 2024 22:16:58 +0200
Subject: [PATCH 40/41] [Feat]: Add Multi-Language Translations For Tasks,
 Shift Timing, and Confirmation Messages   (#3377)

* feat: Add multi-language translations for tasks and confirmation messages

* fix:coderabbitai
---
 .../[memberId]/components/AddTaskModal.tsx    | 36 ++++++++++---------
 .../[memberId]/components/EditTaskModal.tsx   |  4 +--
 .../calendar/table-time-sheet.tsx             |  6 ++--
 apps/web/locales/ar.json                      | 11 ++++++
 apps/web/locales/bg.json                      | 11 ++++++
 apps/web/locales/de.json                      | 11 ++++++
 apps/web/locales/en.json                      | 11 ++++++
 apps/web/locales/es.json                      | 11 ++++++
 apps/web/locales/fr.json                      | 11 ++++++
 apps/web/locales/he.json                      | 11 ++++++
 apps/web/locales/it.json                      | 11 ++++++
 apps/web/locales/nl.json                      | 11 ++++++
 apps/web/locales/pl.json                      | 11 ++++++
 apps/web/locales/pt.json                      | 12 +++++++
 apps/web/locales/ru.json                      | 11 ++++++
 apps/web/locales/zh.json                      | 11 ++++++
 16 files changed, 169 insertions(+), 21 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
index 2df35bfe9..3a13f5688 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/AddTaskModal.tsx
@@ -5,7 +5,7 @@ import { clsxm } from '@/app/utils';
 import { Modal } from '@/lib/components'
 import { CustomSelect, TaskStatus, taskIssues } from '@/lib/features';
 import { Item, ManageOrMemberComponent, getNestedValue } from '@/lib/features/manual-time/manage-member-component';
-import { useTranslations } from 'next-intl';
+import { TranslationHooks, useTranslations } from 'next-intl';
 import { ToggleButton } from './EditTaskModal';
 import { PlusIcon } from '@radix-ui/react-icons';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@components/ui/accordion';
@@ -45,8 +45,8 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
 
     const fields = [
         {
-            label: 'Link to Project',
-            placeholder: 'Select a project',
+            label: t('common.LINK_TO_PROJECT'),
+            placeholder: t('common.SELECT_A_PROJECT'),
             isRequired: true,
             valueKey: 'id',
             displayKey: 'name',
@@ -65,7 +65,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
             <div className="flex flex-col w-full gap-4 justify-start overflow-y-auto">
                 <div className=" w-full mr-[4%]">
                     <label className="block text-[#282048] dark:text-gray-400 font-medium mb-1">
-                        Task
+                        {t('sidebar.TASKS')}
                         <span className="text-[#de5505e1] ml-1">*</span>
                     </label>
                     <input
@@ -81,7 +81,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                 </div>
                 <div className=" w-full mr-[4%] flex items-center">
                     <label className="block text-[#282048] dark:text-gray-400  mb-1 px-2">
-                        Types
+                        {t('common.TYPES')}
                         <span className="text-[#de5505e1] ml-1">*</span>:
                     </label>
                     <CustomSelect
@@ -103,6 +103,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                 </div>
                 <div>
                     <OptimizedAccordion
+                        t={t}
                         dateRange={dateRange}
                         timeOptions={timeOptions}
                         handleFromChange={handleFromChange} />
@@ -139,7 +140,7 @@ export function AddTaskModal({ closeModal, isOpen }: IAddTaskModalProps) {
                 </div>
 
                 <div className="w-full flex flex-col">
-                    <span className="text-[#282048] dark:text-gray-400 font-medium">Notes</span>
+                    <span className="text-[#282048] dark:text-gray-400 font-medium">{t('common.NOTES')}</span>
                     <textarea
                         value={notes}
                         onChange={(e) => setNotes(e.target.value)}
@@ -220,12 +221,13 @@ interface Shift {
     startTime: string;
     endTime: string;
     totalHours: string;
-    dateFrom: Date | string
+    dateFrom: Date | string,
 }
-const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
+const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions, t }: {
     dateRange: { from: Date | null };
     handleFromChange: (date: Date | null) => void;
     timeOptions: string[];
+    t: TranslationHooks
 }) => {
     const [shifts, setShifts] = React.useState<Shift[]>([
         { startTime: '', endTime: '', totalHours: '00:00h', dateFrom: new Date() },
@@ -294,13 +296,13 @@ const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
                         <AccordionTrigger className="flex flex-row-reverse justify-end h-10 p-1 items-center hover:no-underline">
                             <div className="flex items-center justify-between w-full">
                                 <label className="block text-[#282048] dark:text-gray-400 mb-1 px-2">
-                                    Date and Time
+                                    {t('common.DATE_AND_TIME')}
                                     <span className="text-[#de5505e1] ml-1">*</span>:
                                 </label>
                                 <span
                                     onClick={() => handleRemoveShift(index)}
                                     className="hover:underline font-normal text-primary dark:text-primary-light cursor-pointer">
-                                    Remove Period
+                                    {t('common.REMOVE_PERIOD')}
                                 </span>
                             </div>
                         </AccordionTrigger>
@@ -308,6 +310,7 @@ const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
                             <div className="flex flex-col gap-2">
 
                                 <ShiftManagement
+                                    t={t}
                                     value={element}
                                     index={index}
                                     onChange={handleShiftChange}
@@ -323,7 +326,7 @@ const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
                 <div className='bg-[#3826A6] dark:bg-primary-light p-[0.5] rounded text-white'>
                     <PlusIcon />
                 </div>
-                <span className='text-[#3826A6] dark:text-primary-light hover:underline'>Add Another Period</span>
+                <span className='text-[#3826A6] dark:text-primary-light hover:underline'>{t('common.ADD_ANOTHER_PERIOD')}</span>
             </button>
         </>
 
@@ -331,23 +334,24 @@ const OptimizedAccordion = ({ dateRange, handleFromChange, timeOptions }: {
 };
 
 const ShiftManagement = (
-    { onChange, value, index, timeOptions }: {
+    { onChange, value, index, timeOptions, t }: {
         onChange: (index: number, field: keyof Shift, value: string) => void,
-        value: Shift, index: number, timeOptions: string[]
+        value: Shift, index: number, timeOptions: string[],
+        t: TranslationHooks
     }) => {
     return (
 
         <>
             <div className="w-[212px]">
-                <span>Date</span>
+                <span>{t('manualTime.DATE')}</span>
                 <DatePickerFilter
-                    label={value.dateFrom ? value.dateFrom.toLocaleString() : 'Select Date'}
+                    label={value.dateFrom ? value.dateFrom.toLocaleString() : t('common.SELECT_DATE')}
                     date={value.dateFrom as Date}
                     setDate={(value) => onChange(index, 'dateFrom', value as any)}
                 />
             </div>
             <div className="flex flex-col w-full items-start gap-2">
-                <span className="font-medium">Shift Timing</span>
+                <span className="font-medium">{t('common.SHIFT_TIMING')}</span>
                 <div className="flex items-center w-full justify-between gap-4 mb-4">
                     <ShiftTimingSelect
                         label="Start"
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
index 7e5274976..3c19327df 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/EditTaskModal.tsx
@@ -95,7 +95,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 				</div>
 				<div className="flex items-start flex-col justify-center gap-4">
 					<div>
-						<span className="text-[#282048] dark:text-gray-500 ">Task Time</span>
+						<span className="text-[#282048] dark:text-gray-500 ">{t('dailyPlan.TASK_TIME')}</span>
 						<div className="flex items-center gap-x-2 ">
 							<FaRegClock className="text-[#30B366]" />
 							<span>08:10h</span>
@@ -172,7 +172,7 @@ export function EditTaskModal({ isOpen, closeModal, dataTimesheet }: IEditTaskMo
 						</div>
 					</div>
 					<div className="w-full flex flex-col">
-						<span className="text-[#282048] dark:text-gray-400  ">Notes</span>
+						<span className="text-[#282048] dark:text-gray-400">{t('common.NOTES')}</span>
 						<textarea
 							value={notes}
 							onChange={(e) => setNotes(e.target.value)}
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 fb844453c..746940e0f 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -227,8 +227,8 @@ export function DataTableTimeSheet({ data }: { data?: GroupedTimesheet[] }) {
 	return (
 		<div className="w-full dark:bg-dark--theme">
 			<AlertDialogConfirmation
-				title="Are you sure you want to delete this?"
-				description={`This action is irreversible. All related data will be lost.`}
+				title={t('common.DELETE_CONFIRMATION')}
+				description={t('common.IRREVERSIBLE_ACTION_WARNING')}
 				confirmText={t('common.DELETE')}
 				cancelText={t('common.CANCEL')}
 				isOpen={isDialogOpen}
@@ -533,7 +533,7 @@ export const StatusTask = ({ timesheet }: { timesheet: TimesheetLog }) => {
 		<>
 			<DropdownMenuSub>
 				<DropdownMenuSubTrigger>
-					<span>Change status</span>
+					<span>{t('common.CHANGE_STATUS')}</span>
 				</DropdownMenuSubTrigger>
 				<DropdownMenuPortal>
 					<DropdownMenuSubContent>
diff --git a/apps/web/locales/ar.json b/apps/web/locales/ar.json
index b46388feb..166dfd0c0 100644
--- a/apps/web/locales/ar.json
+++ b/apps/web/locales/ar.json
@@ -1,6 +1,17 @@
 {
 	"TITLE": "إيفر تيمز",
 	"common": {
+		"DELETE_CONFIRMATION": "هل أنت متأكد أنك تريد الحذف؟",
+		"IRREVERSIBLE_ACTION_WARNING": "هذا الإجراء لا رجعة فيه. ستفقد جميع البيانات ذات الصلة.",
+		"SHIFT_TIMING": "توقيت العمل",
+		"ADD_ANOTHER_PERIOD": "إضافة فترة أخرى",
+		"REMOVE_PERIOD": "إزالة الفترة",
+		"DATE_AND_TIME": "التاريخ والوقت",
+		"NOTES": "ملاحظات",
+		"CHANGE_STATUS": "تغيير الحالة",
+		"TYPES": "أنواع",
+		"LINK_TO_PROJECT": "رابط إلى المشروع",
+		"SELECT_A_PROJECT": "اختر مشروعًا",
 		"ACCEPT": "قبول",
 		"ACCEPTED": "مقبول",
 		"REJECT": "رفض",
diff --git a/apps/web/locales/bg.json b/apps/web/locales/bg.json
index f67870cdc..8ed9cd5d7 100644
--- a/apps/web/locales/bg.json
+++ b/apps/web/locales/bg.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Бюджет на проекта"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Сигурни ли сте, че искате да изтриете това?",
+		"IRREVERSIBLE_ACTION_WARNING": "Това действие е необратимо. Всички свързани данни ще бъдат изгубени.",
+		"SHIFT_TIMING": "Смяна на времето",
+		"ADD_ANOTHER_PERIOD": "Добави друг период",
+		"REMOVE_PERIOD": "Премахване на периода",
+		"DATE_AND_TIME": "Дата и час",
+		"NOTES": "Бележки",
+		"CHANGE_STATUS": "Промяна на състоянието",
+		"TYPES": "Типове",
+		"LINK_TO_PROJECT": "Връзка към проект",
+		"SELECT_A_PROJECT": "Изберете проект",
 		"ACCEPT": "Приемам",
 		"ACCEPTED": "Приет",
 		"REJECT": "Отхвърлям",
diff --git a/apps/web/locales/de.json b/apps/web/locales/de.json
index 4eb10c048..1fb17dfb1 100644
--- a/apps/web/locales/de.json
+++ b/apps/web/locales/de.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Projektbudget"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Sind Sie sicher, dass Sie dies löschen möchten?",
+		"IRREVERSIBLE_ACTION_WARNING": "Diese Aktion ist irreversibel. Alle zugehörigen Daten gehen verloren.",
+		"SHIFT_TIMING": "Schichtzeiten",
+		"ADD_ANOTHER_PERIOD": "Weitere Periode hinzufügen",
+		"REMOVE_PERIOD": "Periode entfernen",
+		"DATE_AND_TIME": "Datum und Uhrzeit",
+		"NOTES": "Notizen",
+		"CHANGE_STATUS": "Status ändern",
+		"TYPES": "Typen",
+		"LINK_TO_PROJECT": "Projekt verlinken",
+		"SELECT_A_PROJECT": "Projekt auswählen",
 		"ACCEPT": "Akzeptieren",
 		"ACCEPTED": "Akzeptiert",
 		"REJECT": "Ablehnen",
diff --git a/apps/web/locales/en.json b/apps/web/locales/en.json
index f9b336cb5..a8b7419c8 100644
--- a/apps/web/locales/en.json
+++ b/apps/web/locales/en.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Project Budget"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Are you sure you want to delete this?",
+		"IRREVERSIBLE_ACTION_WARNING": "This action is irreversible. All related data will be lost.",
+		"SHIFT_TIMING": "Shift Timing",
+		"ADD_ANOTHER_PERIOD": "Add Another Period",
+		"REMOVE_PERIOD": "Remove Period",
+		"DATE_AND_TIME": "Date and Time",
+		"NOTES": "Notes",
+		"CHANGE_STATUS": "Change Status",
+		"TYPES": "Types",
+		"LINK_TO_PROJECT": "Link to Project",
+		"SELECT_A_PROJECT": "Select a Project",
 		"ACCEPT": "Accept",
 		"ACCEPTED": "Accepted",
 		"REJECT": "Reject",
diff --git a/apps/web/locales/es.json b/apps/web/locales/es.json
index 48a1fb500..c5908f186 100644
--- a/apps/web/locales/es.json
+++ b/apps/web/locales/es.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Presupuesto del Proyecto"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "¿Estás seguro de que deseas eliminar esto?",
+		"IRREVERSIBLE_ACTION_WARNING": "Esta acción es irreversible. Todos los datos relacionados se perderán.",
+		"SHIFT_TIMING": "Horario de turno",
+		"ADD_ANOTHER_PERIOD": "Agregar otro período",
+		"REMOVE_PERIOD": "Eliminar período",
+		"DATE_AND_TIME": "Fecha y hora",
+		"NOTES": "Notas",
+		"CHANGE_STATUS": "Cambiar estado",
+		"TYPES": "Tipos",
+		"LINK_TO_PROJECT": "Vincular al proyecto",
+		"SELECT_A_PROJECT": "Seleccionar un proyecto",
 		"ACCEPT": "Aceptar",
 		"ACCEPTED": "Aceptado",
 		"REJECT": "Rechazar",
diff --git a/apps/web/locales/fr.json b/apps/web/locales/fr.json
index df60e6395..47c2ca5b8 100644
--- a/apps/web/locales/fr.json
+++ b/apps/web/locales/fr.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Budget du projet"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Êtes-vous sûr de vouloir supprimer cela ?",
+		"IRREVERSIBLE_ACTION_WARNING": "Cette action est irréversible. Toutes les données associées seront perdues.",
+		"SHIFT_TIMING": "Temps de poste",
+		"ADD_ANOTHER_PERIOD": "Ajouter une autre période",
+		"REMOVE_PERIOD": "Supprimer la période",
+		"DATE_AND_TIME": "Date et heure",
+		"NOTES": "Notes",
+		"CHANGE_STATUS": "Changer le statut",
+		"TYPES": "Types",
+		"LINK_TO_PROJECT": "Lien vers le projet",
+		"SELECT_A_PROJECT": "Sélectionner un projet",
 		"ACCEPT": "Accepter",
 		"ACCEPTED": "Accepté",
 		"REJECT": "Rejeter",
diff --git a/apps/web/locales/he.json b/apps/web/locales/he.json
index 4eb9b0848..55664ac50 100644
--- a/apps/web/locales/he.json
+++ b/apps/web/locales/he.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "תקציב פרויקט"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "האם אתה בטוח שברצונך למחוק?",
+		"IRREVERSIBLE_ACTION_WARNING": "פעולה זו בלתי הפיכה. כל הנתונים הקשורים יימחקו.",
+		"SHIFT_TIMING": "זמן משמרת",
+		"ADD_ANOTHER_PERIOD": "הוסף תקופה נוספת",
+		"REMOVE_PERIOD": "הסר תקופה",
+		"DATE_AND_TIME": "תאריך ושעה",
+		"NOTES": "הערות",
+		"CHANGE_STATUS": "שנה מצב",
+		"TYPES": "סוגים",
+		"LINK_TO_PROJECT": "קישור לפרויקט",
+		"SELECT_A_PROJECT": "בחר פרויקט",
 		"ACCEPT": "קבל",
 		"ACCEPTED": "התקבל",
 		"REJECT": "דחה",
diff --git a/apps/web/locales/it.json b/apps/web/locales/it.json
index 5413c4aa9..ac7482ff5 100644
--- a/apps/web/locales/it.json
+++ b/apps/web/locales/it.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Budget di progetto"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Sei sicuro di voler eliminare questo elemento?",
+		"IRREVERSIBLE_ACTION_WARNING": "Questa azione è irreversibile. Tutti i dati correlati andranno persi.",
+		"SHIFT_TIMING": "Orario di turno",
+		"ADD_ANOTHER_PERIOD": "Aggiungi un altro periodo",
+		"REMOVE_PERIOD": "Rimuovi periodo",
+		"DATE_AND_TIME": "Data e ora",
+		"NOTES": "Note",
+		"CHANGE_STATUS": "Cambia stato",
+		"TYPES": "Tipi",
+		"LINK_TO_PROJECT": "Collega al progetto",
+		"SELECT_A_PROJECT": "Seleziona un progetto",
 		"ACCEPT": "Accept",
 		"ACCEPTED": "Accepted",
 		"REJECT": "Reject",
diff --git a/apps/web/locales/nl.json b/apps/web/locales/nl.json
index 566273f74..72f376d36 100644
--- a/apps/web/locales/nl.json
+++ b/apps/web/locales/nl.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Projectbudget"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Weet u zeker dat u dit wilt verwijderen?",
+		"IRREVERSIBLE_ACTION_WARNING": "Deze actie is onomkeerbaar. Alle gerelateerde gegevens gaan verloren.",
+		"SHIFT_TIMING": "Werkrooster",
+		"ADD_ANOTHER_PERIOD": "Voeg een andere periode toe",
+		"REMOVE_PERIOD": "Verwijder periode",
+		"DATE_AND_TIME": "Datum en tijd",
+		"NOTES": "Notities",
+		"CHANGE_STATUS": "Wijzig status",
+		"TYPES": "Typen",
+		"LINK_TO_PROJECT": "Koppelen aan project",
+		"SELECT_A_PROJECT": "Selecteer een project",
 		"ACCEPT": "Accepteren",
 		"ACCEPTED": "Geaccepteerd",
 		"REJECT": "Afwijzen",
diff --git a/apps/web/locales/pl.json b/apps/web/locales/pl.json
index d694fcdc5..709a8ab61 100644
--- a/apps/web/locales/pl.json
+++ b/apps/web/locales/pl.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Budżet projektu"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Czy na pewno chcesz to usunąć?",
+		"IRREVERSIBLE_ACTION_WARNING": "Ta akcja jest nieodwracalna. Wszystkie powiązane dane zostaną utracone.",
+		"SHIFT_TIMING": "Czas zmiany",
+		"ADD_ANOTHER_PERIOD": "Dodaj kolejny okres",
+		"REMOVE_PERIOD": "Usuń okres",
+		"DATE_AND_TIME": "Data i godzina",
+		"NOTES": "Notatki",
+		"CHANGE_STATUS": "Zmień status",
+		"TYPES": "Typy",
+		"LINK_TO_PROJECT": "Połącz z projektem",
+		"SELECT_A_PROJECT": "Wybierz projekt",
 		"ACCEPT": "Akceptuj",
 		"ACCEPTED": "Zaakceptowane",
 		"REJECT": "Odrzuć",
diff --git a/apps/web/locales/pt.json b/apps/web/locales/pt.json
index a34170a2d..702a1254d 100644
--- a/apps/web/locales/pt.json
+++ b/apps/web/locales/pt.json
@@ -19,6 +19,18 @@
 		"PROJECT_BUDGET": "Orçamento do Projeto"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Tem certeza de que deseja excluir isso?",
+		"IRREVERSIBLE_ACTION_WARNING": "Esta ação é irreversível. Todos os dados relacionados serão perdidos.",
+		"SHIFT_TIMING": "Horário de turno",
+		"ADD_ANOTHER_PERIOD": "Adicionar outro período",
+		"REMOVE_PERIOD": "Remover período",
+		"DATE_AND_TIME": "Data e hora",
+		"NOTES": "Notas",
+		"CHANGE_STATUS": "Alterar status",
+		"TYPES": "Tipos",
+		"LINK_TO_PROJECT": "Vincular ao projeto",
+		"SELECT_A_PROJECT": "Selecione um projeto",
+		"TASK_TIME": "Tempo da tarefa",
 		"ACCEPT": "Aceitar",
 		"ACCEPTED": "Aceito",
 		"REJECT": "Rejeitar",
diff --git a/apps/web/locales/ru.json b/apps/web/locales/ru.json
index fbb5d83c4..92dae73ff 100644
--- a/apps/web/locales/ru.json
+++ b/apps/web/locales/ru.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "Бюджет проекта"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "Вы уверены, что хотите удалить это?",
+		"IRREVERSIBLE_ACTION_WARNING": "Это действие необратимо. Все связанные данные будут потеряны.",
+		"SHIFT_TIMING": "График смен",
+		"ADD_ANOTHER_PERIOD": "Добавить еще один период",
+		"REMOVE_PERIOD": "Удалить период",
+		"DATE_AND_TIME": "Дата и время",
+		"NOTES": "Заметки",
+		"CHANGE_STATUS": "Изменить статус",
+		"TYPES": "Типы",
+		"LINK_TO_PROJECT": "Ссылка на проект",
+		"SELECT_A_PROJECT": "Выберите проект",
 		"ACCEPT": "Принять",
 		"ACCEPTED": "Принято",
 		"REJECT": "Отклонить",
diff --git a/apps/web/locales/zh.json b/apps/web/locales/zh.json
index 4445a5557..67a2e23c2 100644
--- a/apps/web/locales/zh.json
+++ b/apps/web/locales/zh.json
@@ -19,6 +19,17 @@
 		"PROJECT_BUDGET": "项目预算"
 	},
 	"common": {
+		"DELETE_CONFIRMATION": "您确定要删除此项吗？",
+		"IRREVERSIBLE_ACTION_WARNING": "此操作不可逆。所有相关数据将丢失。",
+		"SHIFT_TIMING": "班次时间",
+		"ADD_ANOTHER_PERIOD": "添加另一段时间",
+		"REMOVE_PERIOD": "移除时间段",
+		"DATE_AND_TIME": "日期和时间",
+		"NOTES": "备注",
+		"CHANGE_STATUS": "更改状态",
+		"TYPES": "类型",
+		"LINK_TO_PROJECT": "链接到项目",
+		"SELECT_A_PROJECT": "选择一个项目",
 		"ACCEPT": "接受",
 		"ACCEPTED": "已接受",
 		"REJECT": "拒绝",

From 0ae8dcb6d8379b47df252b8bae382895e6e7b8c9 Mon Sep 17 00:00:00 2001
From: "Thierry CH." <thierrybakera12@gmail.com>
Date: Thu, 28 Nov 2024 22:17:19 +0200
Subject: [PATCH 41/41] remove the dailyPlanHour popup from the soft flow
 (#3197)

---
 .../features/useStartStopTimerHandler.ts      | 41 +------------------
 .../components/shared/timer/timer-card.tsx    | 15 +------
 apps/web/lib/features/task/task-card.tsx      | 15 +------
 apps/web/lib/features/timer/timer.tsx         | 23 +----------
 4 files changed, 4 insertions(+), 90 deletions(-)

diff --git a/apps/web/app/hooks/features/useStartStopTimerHandler.ts b/apps/web/app/hooks/features/useStartStopTimerHandler.ts
index 0968ea4b6..585ee4462 100644
--- a/apps/web/app/hooks/features/useStartStopTimerHandler.ts
+++ b/apps/web/app/hooks/features/useStartStopTimerHandler.ts
@@ -22,12 +22,6 @@ export function useStartStopTimerHandler() {
 		openModal: openEnforcePlannedTaskSoftModal
 	} = useModal();
 
-	const {
-		isOpen: isDailyPlanWorkHoursModalOpen,
-		closeModal: dailyPlanWorkHoursCloseModal,
-		openModal: openAddDailyPlanWorkHoursModal
-	} = useModal();
-
 	const {
 		isOpen: isTasksEstimationHoursModalOpen,
 		closeModal: tasksEstimationHoursCloseModal,
@@ -98,21 +92,6 @@ export function useStartStopTimerHandler() {
 			}
 		};
 
-		/**
-		 * Handle missing working hour for a daily plan
-		 */
-		const handleMissingDailyPlanWorkHour = () => {
-			if (hasPlan) {
-				if (!hasWorkedHours) {
-					openAddDailyPlanWorkHoursModal();
-				} else {
-					startTimerOrAskEstimate();
-				}
-			} else {
-				startTimerOrAskEstimate();
-			}
-		};
-
 		/**
 		 * Handle missing estimation hours for tasks
 		 */
@@ -121,11 +100,7 @@ export function useStartStopTimerHandler() {
 				if (tasksEstimateHoursModalDate != currentDate) {
 					handleCheckSelectedTaskOnTodayPlan();
 				} else if (areAllTasksEstimated) {
-					if (dailyPlanEstimateHoursModalDate != currentDate) {
-						handleMissingDailyPlanWorkHour();
-					} else {
-						startTimerOrAskEstimate();
-					}
+					startTimerOrAskEstimate();
 				} else {
 					if (tasksEstimateHoursModalDate != currentDate) {
 						openAddTasksEstimationHoursModal();
@@ -180,16 +155,6 @@ export function useStartStopTimerHandler() {
 					}
 				} else if (tasksEstimateHoursModalDate != currentDate) {
 					handleMissingTasksEstimationHours();
-				} else if (dailyPlanEstimateHoursModalDate != currentDate) {
-					if (hasPlan) {
-						if (areAllTasksEstimated) {
-							handleMissingDailyPlanWorkHour();
-						} else {
-							startTimerOrAskEstimate();
-						}
-					} else {
-						startTimerOrAskEstimate();
-					}
 				} else {
 					startTimerOrAskEstimate();
 				}
@@ -201,7 +166,6 @@ export function useStartStopTimerHandler() {
 		hasPlan,
 		hasWorkedHours,
 		isActiveTaskPlaned,
-		openAddDailyPlanWorkHoursModal,
 		openAddTasksEstimationHoursModal,
 		openEnforcePlannedTaskModal,
 		openEnforcePlannedTaskSoftModal,
@@ -219,9 +183,6 @@ export function useStartStopTimerHandler() {
 			isEnforceTaskModalOpen,
 			enforceTaskCloseModal,
 			openEnforcePlannedTaskModal,
-			isDailyPlanWorkHoursModalOpen,
-			dailyPlanWorkHoursCloseModal,
-			openAddDailyPlanWorkHoursModal,
 			isTasksEstimationHoursModalOpen,
 			tasksEstimationHoursCloseModal,
 			openAddTasksEstimationHoursModal,
diff --git a/apps/web/components/shared/timer/timer-card.tsx b/apps/web/components/shared/timer/timer-card.tsx
index b2c3a840a..a2e77d2fd 100644
--- a/apps/web/components/shared/timer/timer-card.tsx
+++ b/apps/web/components/shared/timer/timer-card.tsx
@@ -6,12 +6,7 @@ import { useTimer } from '@app/hooks/features/useTimer';
 import { ProgressBar } from '@components/ui/progress-bar';
 import { PauseIcon } from '@components/ui/svgs/pause-icon';
 import { PlayIcon } from '@components/ui/svgs/play-icon';
-import {
-	AddTasksEstimationHoursModal,
-	AddDailyPlanWorkHourModal,
-	EnforcePlanedTaskModal,
-	SuggestDailyPlanModal
-} from 'lib/features/daily-plan';
+import { AddTasksEstimationHoursModal, EnforcePlanedTaskModal, SuggestDailyPlanModal } from 'lib/features/daily-plan';
 import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
 
@@ -79,14 +74,6 @@ const Timer = () => {
 				/>
 			)}
 
-			{hasPlan && (
-				<AddDailyPlanWorkHourModal
-					isOpen={modals.isDailyPlanWorkHoursModalOpen}
-					closeModal={modals.dailyPlanWorkHoursCloseModal}
-					plan={hasPlan}
-				/>
-			)}
-
 			{/**
 			 * Track time on planned task (REQUIRE PLAN)
 			 */}
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 35cf918e2..f23ee5a95 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -58,12 +58,7 @@ import { AddTaskToPlan } from '../daily-plan/add-task-to-plan';
 import { ReloadIcon } from '@radix-ui/react-icons';
 import moment from 'moment';
 import { useStartStopTimerHandler } from '@app/hooks/features/useStartStopTimerHandler';
-import {
-	AddDailyPlanWorkHourModal,
-	AddTasksEstimationHoursModal,
-	EnforcePlanedTaskModal,
-	SuggestDailyPlanModal
-} from '../daily-plan';
+import { AddTasksEstimationHoursModal, EnforcePlanedTaskModal, SuggestDailyPlanModal } from '../daily-plan';
 import { SetAtom } from 'types';
 import { useFavoritesTask } from '@/app/hooks/features/useFavoritesTask';
 
@@ -451,14 +446,6 @@ function TimerButtonCall({
 				/>
 			)}
 
-			{hasPlan && (
-				<AddDailyPlanWorkHourModal
-					isOpen={modals.isDailyPlanWorkHoursModalOpen}
-					closeModal={modals.dailyPlanWorkHoursCloseModal}
-					plan={hasPlan}
-				/>
-			)}
-
 			{/**
 			 * Track time on planned task (REQUIRE PLAN)
 			 */}
diff --git a/apps/web/lib/features/timer/timer.tsx b/apps/web/lib/features/timer/timer.tsx
index e4aced347..3ce63957c 100644
--- a/apps/web/lib/features/timer/timer.tsx
+++ b/apps/web/lib/features/timer/timer.tsx
@@ -15,12 +15,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { HotkeysEvent } from 'hotkeys-js';
 import { useCallback, useMemo } from 'react';
-import {
-	AddDailyPlanWorkHourModal,
-	AddTasksEstimationHoursModal,
-	EnforcePlanedTaskModal,
-	SuggestDailyPlanModal
-} from '../daily-plan';
+import { AddTasksEstimationHoursModal, EnforcePlanedTaskModal, SuggestDailyPlanModal } from '../daily-plan';
 import { useStartStopTimerHandler } from '@app/hooks/features/useStartStopTimerHandler';
 
 export function Timer({ className }: IClassName) {
@@ -168,14 +163,6 @@ export function Timer({ className }: IClassName) {
 					/>
 				)}
 
-				{hasPlan && (
-					<AddDailyPlanWorkHourModal
-						isOpen={modals.isDailyPlanWorkHoursModalOpen}
-						closeModal={modals.dailyPlanWorkHoursCloseModal}
-						plan={hasPlan}
-					/>
-				)}
-
 				{/**
 				 * Track time on planned task (REQUIRE PLAN)
 				 */}
@@ -268,14 +255,6 @@ export function MinTimerFrame({ className }: IClassName) {
 				/>
 			)}
 
-			{hasPlan && (
-				<AddDailyPlanWorkHourModal
-					isOpen={modals.isDailyPlanWorkHoursModalOpen}
-					closeModal={modals.dailyPlanWorkHoursCloseModal}
-					plan={hasPlan}
-				/>
-			)}
-
 			{/**
 			 * Track time on planned task (REQUIRE PLAN)
 			 */}