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)}
+		/>
+	);
+}