From 5ca33a19eee18eff97d04d4978f75232780594a1 Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Wed, 30 Oct 2024 14:48:10 +0200
Subject: [PATCH 1/4] feat: implement timesheet filter component with status,
 date filters ...

---
 apps/web/app/[locale]/calendar/component.tsx  |   2 +-
 .../timesheet/components/FilterWithStatus.tsx |   4 +-
 .../timesheet/components/FrequencySelect.tsx  | 122 ++++++++++++++----
 .../timesheet/components/TimesheetCard.tsx    |  10 +-
 .../timesheet/components/TimesheetFilter.tsx  |  66 +++++-----
 .../timesheet/components/TimesheetView.tsx    |   1 -
 .../components/time-sheet-filter-popover.tsx  | 103 +++++++++++++++
 apps/web/app/[locale]/timesheet/page.tsx      |  20 ++-
 .../calendar/setup-full-calendar.tsx          |   2 +-
 .../calendar/table-time-sheet.tsx             |   8 +-
 10 files changed, 264 insertions(+), 74 deletions(-)
 create mode 100644 apps/web/app/[locale]/timesheet/components/time-sheet-filter-popover.tsx

diff --git a/apps/web/app/[locale]/calendar/component.tsx b/apps/web/app/[locale]/calendar/component.tsx
index f000fa1d8..f85f5fef1 100644
--- a/apps/web/app/[locale]/calendar/component.tsx
+++ b/apps/web/app/[locale]/calendar/component.tsx
@@ -11,7 +11,7 @@ import {
     SelectItem,
     SelectTrigger,
     SelectValue,
-} from "@components/ui/select"
+} from "@components/ui/select";
 import { cn } from "lib/utils";
 import { CalendarDays } from "lucide-react";
 import React from "react";
diff --git a/apps/web/app/[locale]/timesheet/components/FilterWithStatus.tsx b/apps/web/app/[locale]/timesheet/components/FilterWithStatus.tsx
index ed38c2d23..cafb4a84a 100644
--- a/apps/web/app/[locale]/timesheet/components/FilterWithStatus.tsx
+++ b/apps/web/app/[locale]/timesheet/components/FilterWithStatus.tsx
@@ -20,11 +20,11 @@ export function FilterWithStatus({
     ];
 
     return (
-        <div className={clsxm('grid grid-cols-4 h-[2.4rem] items-center justify-start bg-[#e2e8f0aa] rounded-xl w-full', className)}>
+        <div className={clsxm('flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] rounded-xl w-full', className)}>
             {buttonData.map(({ label, count, icon }, index) => (
                 <Button
                     key={index}
-                    className={clsxm('group flex items-center justify-start h-[2.4rem] rounded-xl border dark:bg-dark--theme-light dark:border-gray-700 bg-[#e2e8f0aa] text[#71717A]', `${activeStatus === label ? "text-primary bg-white shadow-lg font-bold" : ""}`)}
+                    className={clsxm('group flex items-center justify-start h-[2.2rem] rounded-xl border dark:bg-dark--theme-light dark:border-gray-700 bg-[#e2e8f0aa] text[#71717A] w-full', `${activeStatus === label ? "text-primary bg-white shadow-lg font-bold" : ""}`)}
                     onClick={() => onToggle(label)}>
                     <span className={clsxm('font-medium ml-1 text-[#71717A]', `${activeStatus === label ? "text-primary" : ""}`)}>{label}</span>
                     <span className='font-medium ml-1 text-[#71717A]'>{count}</span>
diff --git a/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx b/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx
index 656e63aa0..3f4c5bf1b 100644
--- a/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx
+++ b/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx
@@ -6,7 +6,7 @@ import {
     SelectItem,
     SelectTrigger,
     SelectValue,
-} from "@components/ui/select"
+} from "@components/ui/select";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -16,8 +16,13 @@ import {
     DropdownMenuSubContent,
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
-} from "@components/ui/dropdown-menu"
+} from "@components/ui/dropdown-menu";
 import { Button } from "lib/components/button";
+import { DatePicker } from "@components/ui/DatePicker";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { PiCalendarDotsThin } from "react-icons/pi";
+
 
 export function FrequencySelect() {
     const [selectedValue, setSelectedValue] = React.useState<string | undefined>(undefined);
@@ -30,7 +35,7 @@ export function FrequencySelect() {
         <Select
             value={selectedValue}
             onValueChange={handleSelectChange}>
-            <SelectTrigger className="w-[180px] border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
+            <SelectTrigger className="w-[170px] 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>
@@ -48,30 +53,29 @@ export function FrequencySelect() {
 
 
 export const FilterTaskActionMenu = () => {
-    // const handleCopyPaymentId = () => navigator.clipboard.writeText(idTasks);
     return (
-        <DropdownMenu open={true} >
+        <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> */}
-                    <span>Today</span>
-                </Button>
+                <div className="w-[120px]">
+                    <Button variant="ghost" className="text-sm font-normal">
+                        <span className="sr-only">Open menu</span>
+                        <span className="">20-10-20</span>
+                    </Button>
+                </div>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="z-50">
-                <DropdownMenuItem className="cursor-pointer" >
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={(e) => e.preventDefault()} className="cursor-pointer hover:bg-primary" >
                     Today
                 </DropdownMenuItem>
-                <DropdownMenuItem className="cursor-pointer" >
+                <DropdownMenuItem onClick={(e) => e.preventDefault()} className="cursor-pointer hover:bg-primary" >
                     Last 7 days
                 </DropdownMenuItem>
-                <DropdownMenuItem className="cursor-pointer" >
+                <DropdownMenuItem onClick={(e) => e.preventDefault()} className="cursor-pointer hover:bg-primary" >
                     Last 30 days
                 </DropdownMenuItem>
-                <DropdownMenuItem className="cursor-pointer" >
-                    This year (2024)
-                    {/* ({new Date().getFullYear()}) */}
+                <DropdownMenuItem onClick={(e) => e.preventDefault()} className="cursor-pointer hover:bg-primary" >
+                    This year ({new Date().getFullYear()})
                 </DropdownMenuItem>
-                {/* <DropdownMenuSeparator /> */}
                 <CustomDateRange />
             </DropdownMenuContent>
         </DropdownMenu>
@@ -79,17 +83,45 @@ export const FilterTaskActionMenu = () => {
 };
 
 export const CustomDateRange = () => {
+    const [dateRange, setDateRange] = React.useState<{ from: Date | null; to: Date | null }>({
+        from: new Date(),
+        to: new Date(),
+    });
+    const [isDropdownOpen, setDropdownOpen] = React.useState(true);
+
+    const applyChanges = () => {
+        setDropdownOpen(false);
+    };
+    const handleFromChange = (fromDate: Date | null) => {
+        setDateRange((prev) => ({ ...prev, from: fromDate }));
+    };
+
+    const handleToChange = (toDate: Date | null) => {
+        setDateRange((prev) => ({ ...prev, to: toDate }));
+    };
     return (
-        <DropdownMenuSub>
+        <DropdownMenuSub open={isDropdownOpen} onOpenChange={setDropdownOpen}>
             <DropdownMenuSubTrigger>
                 <span>Custom Date Range</span>
             </DropdownMenuSubTrigger>
             <DropdownMenuPortal>
-                <DropdownMenuSubContent>
-                    <DropdownMenuItem className="cursor-pointer">
-                        <div className="flex items-center gap-3">
-                            <div className="h-1 w-1 rounded-full bg-black dark:bg-white"></div>
-                            <span>Calendar</span>
+                <DropdownMenuSubContent className="bg-white hover:bg-white">
+                    <DropdownMenuItem className="cursor-pointer bg-white hover:bg-white">
+                        <div className="flex flex-col gap-3">
+                            <DynamicDatePicker
+                                label="From"
+                                date={dateRange.from}
+                                setDate={handleFromChange}
+                            />
+                            <DynamicDatePicker
+                                label="To"
+                                date={dateRange.to}
+                                setDate={handleToChange}
+                            />
+                            <div className="flex w-full justify-end gap-4">
+                                <button className="text-primary" onClick={applyChanges}>Cancel</button>
+                                <button className="text-primary" onClick={applyChanges}>Apply</button>
+                            </div>
                         </div>
                     </DropdownMenuItem>
                 </DropdownMenuSubContent>
@@ -97,3 +129,47 @@ export const CustomDateRange = () => {
         </DropdownMenuSub>
     )
 }
+
+
+export function DynamicDatePicker({
+    label,
+    date,
+    setDate,
+}: {
+    label: string;
+    date: Date | null;
+    setDate: (date: Date | null) => void;
+}) {
+    return (
+        <div>
+            <DatePicker
+                buttonVariant={'link'}
+                className="dark:bg-dark--theme-light rounded-lg bg-white"
+                buttonClassName={'decoration-transparent flex items-center w-full bg-white dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black  h-10 border  dark:border-slate-600 rounded-md"'}
+                customInput={
+                    <>
+                        <Button
+                            variant={"outline"}
+                            className={cn(
+                                "w-[150px] justify-start text-left font-normal text-black  h-10 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" />
+                    </>
+                }
+                mode="single"
+                numberOfMonths={1}
+                initialFocus
+                defaultMonth={date || new Date()}
+                selected={date!}
+                onSelect={(selectedDate) => selectedDate && setDate(selectedDate)}
+            />
+        </div>
+    );
+}
diff --git a/apps/web/app/[locale]/timesheet/components/TimesheetCard.tsx b/apps/web/app/[locale]/timesheet/components/TimesheetCard.tsx
index 687473020..355884dda 100644
--- a/apps/web/app/[locale]/timesheet/components/TimesheetCard.tsx
+++ b/apps/web/app/[locale]/timesheet/components/TimesheetCard.tsx
@@ -2,7 +2,7 @@
 import { clsxm } from '@app/utils';
 import { ArrowRightIcon } from 'assets/svg';
 import { Button, Card } from 'lib/components';
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react';
 
 interface ITimesheetCard {
     title?: string;
@@ -48,10 +48,10 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
                     )} />
                 </Button>
             </div>
-            <Card
-                shadow='custom'
+            <div
                 className={clsxm(
-                    'h-7 w-7',
+                    'rounded-[16px] p-5 ',
+                    'h-16 w-16 rounded-lg',
                     'flex items-center justify-center',
                     'text-white font-bold text-sm',
                     'shadow-lg',
@@ -59,7 +59,7 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
                 )}
                 aria-hidden="true">
                 {icon}
-            </Card>
+            </div>
         </Card>
     )
 }
diff --git a/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx b/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
index 179d5ccc8..3bfabb281 100644
--- a/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
+++ b/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
@@ -1,39 +1,43 @@
-import React from 'react'
-import { FilterWithStatus } from './FilterWithStatus'
-import { FrequencySelect } from '.';
+import { FilterWithStatus } from './FilterWithStatus';
+import { FilterTaskActionMenu, FrequencySelect } from '.';
 import { Button } from 'lib/components';
-import { SettingFilterIcon } from 'assets/svg';
+import { TimeSheetFilterPopover } from './time-sheet-filter-popover';
+import { Cross2Icon } from '@radix-ui/react-icons';
 
-export function TimesheetFilter() {
+export function TimesheetFilter({ isOpen, openModal, closeModal }: { isOpen?: boolean, openModal?: () => void, closeModal?: () => void }) {
     return (
-        <div className="grid grid-cols-3 w-full">
-            <div className="col-span-1">
-                <FilterWithStatus
-                    activeStatus="Rejected"
-                    onToggle={(label) => {
-                        console.log(label)
-                    }}
-                />
-            </div>
-            <div className="col-span-1"></div>
-            <div className="col-span-1">
-                <div className='flex gap-2'>
-                    <FrequencySelect />
-                    <button
-                        onClick={() => null}
-                        className='flex items-center justify-center h-10 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">Filter</span>
-                    </button>
-                    <Button
-                        onClick={() => null}
-                        variant='outline'
-                        className='bg-primary/5 dark:bg-primary-light h-10 w-[2.5rem] font-medium'>
-                        Add Time
-                    </Button>
+        <>
+
+            <div className="grid grid-cols-3 w-full">
+                <div className="col-span-1">
+                    <FilterWithStatus
+                        activeStatus="All Tasks"
+                        onToggle={(label) => {
+                            console.log(label)
+                        }}
+                    />
+                </div>
+                <div className="col-span-1"></div>
+                <div className="col-span-1">
+                    <div className='flex gap-2'>
+                        <FrequencySelect />
+                        <div className='flex items-center border border-gray-100 rounded-md h-10 '>
+                            <FilterTaskActionMenu />
+                            <button className='border-l h-10 w-10 font-normal flex items-center justify-center text-gray-400'>
+                                <Cross2Icon />
+                            </button>
+                        </div>
+                        <TimeSheetFilterPopover />
+                        <Button
+                            onClick={() => null}
+                            variant='outline'
+                            className='bg-primary/5 dark:bg-primary-light h-10 w-[2.5rem] font-medium'>
+                            Add Time
+                        </Button>
+                    </div>
                 </div>
             </div>
-        </div>
+        </>
 
     )
 }
diff --git a/apps/web/app/[locale]/timesheet/components/TimesheetView.tsx b/apps/web/app/[locale]/timesheet/components/TimesheetView.tsx
index 91b1d73d5..3d29bb856 100644
--- a/apps/web/app/[locale]/timesheet/components/TimesheetView.tsx
+++ b/apps/web/app/[locale]/timesheet/components/TimesheetView.tsx
@@ -1,5 +1,4 @@
 import { DataTableTimeSheet } from 'lib/features/integrations/calendar'
-import React from 'react'
 
 export function TimesheetView() {
     return (
diff --git a/apps/web/app/[locale]/timesheet/components/time-sheet-filter-popover.tsx b/apps/web/app/[locale]/timesheet/components/time-sheet-filter-popover.tsx
new file mode 100644
index 000000000..ab3807927
--- /dev/null
+++ b/apps/web/app/[locale]/timesheet/components/time-sheet-filter-popover.tsx
@@ -0,0 +1,103 @@
+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 {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@components/ui/popover";
+import { SettingFilterIcon } from "@/assets/svg";
+
+
+
+export function TimeSheetFilterPopover() {
+    const { activeTeam } = useOrganizationTeams();
+    const { tasks } = useTeamTasks();
+    return (
+        <>
+            <Popover>
+                <PopoverTrigger asChild>
+                    <Button variant="outline"
+                        className='flex items-center justify-center h-10 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">Filter</span>
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-96">
+                    <div className="w-full flex flex-col">
+                        <div className="grid gap-5">
+                            <div className="">
+                                <label className="flex justify-between text-gray-600 mb-1 text-sm">
+                                    <span className="text-[12px]">Employee</span>
+                                    <span className="text-primary/10">Clear</span>
+                                </label>
+                                <MultiSelect
+                                    items={activeTeam?.members ?? []}
+                                    itemToString={(members) => (members ? members.employee.fullName : '')}
+                                    itemId={(item) => item.id}
+                                    onValueChange={(selectedItems) => console.log(selectedItems)}
+                                    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]">Project</span>
+                                    <span className="text-primary/10">Clear</span>
+                                </label>
+                                <MultiSelect
+                                    items={activeTeam?.members ?? []}
+                                    itemToString={(members) => (members ? members.employee.fullName : '')}
+                                    itemId={(item) => item.id}
+                                    onValueChange={(selectedItems) => console.log(selectedItems)}
+                                    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]">Task</span>
+                                    <span className="text-primary/10">Clear</span>
+                                </label>
+                                <MultiSelect
+                                    items={tasks}
+                                    onValueChange={(task) => task}
+                                    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]">Status</span>
+                                    <span className="text-primary/10">Clear</span>
+                                </label>
+                                <MultiSelect
+                                    items={statusOptions}
+                                    itemToString={(status) => (status ? status.value : '')}
+                                    itemId={(item) => item.value}
+                                    onValueChange={(selectedItems) => console.log(selectedItems)}
+                                    multiSelect={true}
+                                    triggerClassName="dark:border-gray-700"
+                                />
+                            </div>
+                            <div className="flex items-center justify-between gap-x-4 w-full">
+                                <Button
+                                    variant={'outline'}
+                                    className='flex items-center text-sm justify-center h-10 w-full rounded-lg  dark:text-gray-300' >
+                                    <span className="text-sm">Clear Filter</span>
+                                </Button>
+                                <Button
+                                    className='flex items-center text-sm justify-center h-10 w-full rounded-lg bg-primary dark:bg-primary-light dark:text-gray-300' >
+                                    <span className="text-sm">Apply Filter</span>
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </PopoverContent>
+            </Popover>
+        </>
+    )
+}
diff --git a/apps/web/app/[locale]/timesheet/page.tsx b/apps/web/app/[locale]/timesheet/page.tsx
index c278f7fa5..f44f2b66b 100644
--- a/apps/web/app/[locale]/timesheet/page.tsx
+++ b/apps/web/app/[locale]/timesheet/page.tsx
@@ -7,7 +7,7 @@ import { withAuthentication } from 'lib/app/authenticator';
 import { Breadcrumb, Container, Divider } from 'lib/components';
 import { Footer, MainLayout } from 'lib/layout';
 
-import { useLocalStorageState, useOrganizationTeams } from '@app/hooks';
+import { useLocalStorageState, useModal, useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { useAtomValue } from 'jotai';
@@ -27,6 +27,11 @@ type ViewToggleButtonProps = {
 
 function TimeSheetPage() {
     const t = useTranslations();
+    const {
+        isOpen: isManualTimeModalOpen,
+        openModal: openManualTimeModal,
+        closeModal: closeManualTimeModal
+    } = useModal()
     const [timesheetNavigator, setTimesheetNavigator] = useLocalStorageState<TimesheetViewMode>('timesheet-viewMode', 'ListView');
 
     const fullWidth = useAtomValue(fullWidthState);
@@ -70,21 +75,21 @@ function TimeSheetPage() {
                                     count={72}
                                     title='Pending Tasks'
                                     description='Tasks waiting for your approval'
-                                    icon={<GrTask className='text-[12px] font-bold' />}
+                                    icon={<GrTask className='font-bold' />}
                                     classNameIcon='bg-[#FBB650] shadow-[#fbb75095]'
                                 />
                                 <TimesheetCard
                                     hours='63:00h'
                                     title='Men Hours'
                                     date='10.04.2024 - 11.04.2024'
-                                    icon={<Clock className='text-[14px] text-white font-bold' />}
+                                    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='text-[16px] font-bold' />}
+                                    icon={<User2 className='font-bold' />}
                                     classNameIcon='bg-[#30B366] shadow-[#30b3678f]'
                                 />
                             </div>
@@ -107,13 +112,16 @@ function TimeSheetPage() {
                             <div className='flex items-center h-9 w-[700px] bg-white gap-x-2 px-2 border border-gray-200 rounded-sm mb-2'>
                                 <GoSearch className='text-[#7E7991]' />
                                 <input
-                                    className="h-10 w-full bg-transparent focus:border-transparent focus:ring-2 focus:ring-transparent placeholder-gray-500 outline-none"
+                                    className="h-10 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.." />
                             </div>
                         </div>
                         {/* <DropdownMenuDemo /> */}
                         <div className='flex flex-col min-h-screen w-full border-1 rounded-lg bg-[#FFFFFF]  p-4 mt-4'>
-                            <TimesheetFilter />
+                            <TimesheetFilter
+                                closeModal={closeManualTimeModal}
+                                openModal={openManualTimeModal}
+                                isOpen={isManualTimeModalOpen} />
                             <div className='pt-4'>
                                 {timesheetNavigator === 'ListView' ?
                                     <TimesheetView />
diff --git a/apps/web/lib/features/integrations/calendar/setup-full-calendar.tsx b/apps/web/lib/features/integrations/calendar/setup-full-calendar.tsx
index e6c9789a3..9169b391f 100644
--- a/apps/web/lib/features/integrations/calendar/setup-full-calendar.tsx
+++ b/apps/web/lib/features/integrations/calendar/setup-full-calendar.tsx
@@ -1,5 +1,5 @@
 "use client"
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import { LuCalendarPlus } from "react-icons/lu";
 import { IoIosArrowDown, IoIosArrowForward } from "react-icons/io";
 import { IoTimeSharp } from "react-icons/io5";
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 7f479781d..15b17e743 100644
--- a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
+++ b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -48,10 +48,10 @@ import {
     MdKeyboardDoubleArrowRight,
     MdKeyboardArrowLeft,
     MdKeyboardArrowRight
-} from "react-icons/md";
+} from "react-icons/md"
 import { ConfirmStatusChange, StatusBadge, TimeSheet, dataSourceTimeSheet, statusOptions } from "."
 import { useModal } from "@app/hooks"
-import { Checkbox } from "@components/ui/checkbox";
+import { Checkbox } from "@components/ui/checkbox"
 
 
 
@@ -214,8 +214,8 @@ export function DataTableTimeSheet() {
 
             <div className="w-full">
                 <div className="rounded-md">
-                    <Table className=" border dark:border-gray-700">
-                        <TableHeader className="w-full border dark:border-gray-700">
+                    <Table className=" border dark:border-gray-700 rounded-md">
+                        <TableHeader className="w-full border dark:border-gray-700 rounded-md">
                             {table.getHeaderGroups().map((headerGroup) => (
                                 <TableRow key={headerGroup.id}>
                                     {headerGroup.headers.map((header) => {

From ab254cc077d4b6151e7007011a415052903a1ff8 Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Wed, 30 Oct 2024 15:07:46 +0200
Subject: [PATCH 2/4] fix: error

---
 .../timesheet/components/TimesheetFilter.tsx        |  2 +-
 apps/web/app/[locale]/timesheet/page.tsx            | 13 +++----------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx b/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
index 3bfabb281..7e41777e1 100644
--- a/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
+++ b/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
@@ -4,7 +4,7 @@ import { Button } from 'lib/components';
 import { TimeSheetFilterPopover } from './time-sheet-filter-popover';
 import { Cross2Icon } from '@radix-ui/react-icons';
 
-export function TimesheetFilter({ isOpen, openModal, closeModal }: { isOpen?: boolean, openModal?: () => void, closeModal?: () => void }) {
+export function TimesheetFilter() {
     return (
         <>
 
diff --git a/apps/web/app/[locale]/timesheet/page.tsx b/apps/web/app/[locale]/timesheet/page.tsx
index f44f2b66b..70ac4267f 100644
--- a/apps/web/app/[locale]/timesheet/page.tsx
+++ b/apps/web/app/[locale]/timesheet/page.tsx
@@ -7,7 +7,7 @@ import { withAuthentication } from 'lib/app/authenticator';
 import { Breadcrumb, Container, Divider } from 'lib/components';
 import { Footer, MainLayout } from 'lib/layout';
 
-import { useLocalStorageState, useModal, useOrganizationTeams } from '@app/hooks';
+import { useLocalStorageState, useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { useAtomValue } from 'jotai';
@@ -27,11 +27,7 @@ type ViewToggleButtonProps = {
 
 function TimeSheetPage() {
     const t = useTranslations();
-    const {
-        isOpen: isManualTimeModalOpen,
-        openModal: openManualTimeModal,
-        closeModal: closeManualTimeModal
-    } = useModal()
+
     const [timesheetNavigator, setTimesheetNavigator] = useLocalStorageState<TimesheetViewMode>('timesheet-viewMode', 'ListView');
 
     const fullWidth = useAtomValue(fullWidthState);
@@ -118,10 +114,7 @@ function TimeSheetPage() {
                         </div>
                         {/* <DropdownMenuDemo /> */}
                         <div className='flex flex-col min-h-screen w-full border-1 rounded-lg bg-[#FFFFFF]  p-4 mt-4'>
-                            <TimesheetFilter
-                                closeModal={closeManualTimeModal}
-                                openModal={openManualTimeModal}
-                                isOpen={isManualTimeModalOpen} />
+                            <TimesheetFilter />
                             <div className='pt-4'>
                                 {timesheetNavigator === 'ListView' ?
                                     <TimesheetView />

From 78560c389291c7cd4af2c6a39d5448cc2ef85054 Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Wed, 30 Oct 2024 16:29:41 +0200
Subject: [PATCH 3/4] fix: resolve

---
 .../[locale]/timesheet/components/FilterWithStatus.tsx   | 8 ++++++--
 .../[locale]/timesheet/components/FrequencySelect.tsx    | 8 +++++---
 .../app/[locale]/timesheet/components/TimesheetCard.tsx  | 3 +--
 .../[locale]/timesheet/components/TimesheetFilter.tsx    | 9 ++++-----
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/components/FilterWithStatus.tsx b/apps/web/app/[locale]/timesheet/components/FilterWithStatus.tsx
index cafb4a84a..f03c3f2e4 100644
--- a/apps/web/app/[locale]/timesheet/components/FilterWithStatus.tsx
+++ b/apps/web/app/[locale]/timesheet/components/FilterWithStatus.tsx
@@ -20,11 +20,15 @@ export function FilterWithStatus({
     ];
 
     return (
-        <div className={clsxm('flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] rounded-xl w-full', className)}>
+        <div className={clsxm('flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] rounded-xl w-[520px]', className)}>
             {buttonData.map(({ label, count, icon }, index) => (
                 <Button
                     key={index}
-                    className={clsxm('group flex items-center justify-start h-[2.2rem] rounded-xl border dark:bg-dark--theme-light dark:border-gray-700 bg-[#e2e8f0aa] text[#71717A] w-full', `${activeStatus === label ? "text-primary bg-white shadow-lg font-bold" : ""}`)}
+                    className={clsxm(
+                        'group flex items-center justify-start h-[2.2rem] rounded-xl border w-full',
+                        'dark:bg-dark--theme-light dark:border-gray-700 bg-[#e2e8f0aa] text[#71717A] w-[80px]',
+                        activeStatus === label && 'text-primary bg-white shadow-lg font-bold'
+                    )}
                     onClick={() => onToggle(label)}>
                     <span className={clsxm('font-medium ml-1 text-[#71717A]', `${activeStatus === label ? "text-primary" : ""}`)}>{label}</span>
                     <span className='font-medium ml-1 text-[#71717A]'>{count}</span>
diff --git a/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx b/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx
index 3f4c5bf1b..9e6a9eb4e 100644
--- a/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx
+++ b/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx
@@ -89,6 +89,9 @@ export const CustomDateRange = () => {
     });
     const [isDropdownOpen, setDropdownOpen] = React.useState(true);
 
+    const cancelChanges = () => {
+        setDropdownOpen(false);
+    };
     const applyChanges = () => {
         setDropdownOpen(false);
     };
@@ -119,7 +122,7 @@ export const CustomDateRange = () => {
                                 setDate={handleToChange}
                             />
                             <div className="flex w-full justify-end gap-4">
-                                <button className="text-primary" onClick={applyChanges}>Cancel</button>
+                                <button className="text-primary" onClick={cancelChanges}>Cancel</button>
                                 <button className="text-primary" onClick={applyChanges}>Apply</button>
                             </div>
                         </div>
@@ -145,8 +148,7 @@ export function DynamicDatePicker({
             <DatePicker
                 buttonVariant={'link'}
                 className="dark:bg-dark--theme-light rounded-lg bg-white"
-                buttonClassName={'decoration-transparent flex items-center w-full bg-white dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black  h-10 border  dark:border-slate-600 rounded-md"'}
-                customInput={
+                buttonClassName={'decoration-transparent flex items-center w-full bg-white dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black h-10 border dark:border-slate-600 rounded-md'} customInput={
                     <>
                         <Button
                             variant={"outline"}
diff --git a/apps/web/app/[locale]/timesheet/components/TimesheetCard.tsx b/apps/web/app/[locale]/timesheet/components/TimesheetCard.tsx
index 355884dda..94953c8d1 100644
--- a/apps/web/app/[locale]/timesheet/components/TimesheetCard.tsx
+++ b/apps/web/app/[locale]/timesheet/components/TimesheetCard.tsx
@@ -50,8 +50,7 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
             </div>
             <div
                 className={clsxm(
-                    'rounded-[16px] p-5 ',
-                    'h-16 w-16 rounded-lg',
+                    'h-16 w-16 rounded-lg p-5',
                     'flex items-center justify-center',
                     'text-white font-bold text-sm',
                     'shadow-lg',
diff --git a/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx b/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
index 7e41777e1..21edc8dc8 100644
--- a/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
+++ b/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
@@ -8,17 +8,16 @@ export function TimesheetFilter() {
     return (
         <>
 
-            <div className="grid grid-cols-3 w-full">
-                <div className="col-span-1">
+            <div className="flex flex-col md:flex-row w-full gap-4">
+                <div className="flex-1">
                     <FilterWithStatus
                         activeStatus="All Tasks"
                         onToggle={(label) => {
-                            console.log(label)
+                            // TODO: Implement filter toggle handler
                         }}
                     />
                 </div>
-                <div className="col-span-1"></div>
-                <div className="col-span-1">
+                <div className="flex-1 flex justify-end">
                     <div className='flex gap-2'>
                         <FrequencySelect />
                         <div className='flex items-center border border-gray-100 rounded-md h-10 '>

From aaa1fa22c4f6a4bf81a7f42c7635adea5c3615a6 Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Wed, 30 Oct 2024 18:30:52 +0200
Subject: [PATCH 4/4] fix: resolve

---
 .../timesheet/components/FrequencySelect.tsx  | 44 +++++++++++--------
 .../timesheet/components/TimesheetFilter.tsx  |  7 ++-
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx b/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx
index 9e6a9eb4e..657faab5e 100644
--- a/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx
+++ b/apps/web/app/[locale]/timesheet/components/FrequencySelect.tsx
@@ -23,6 +23,10 @@ import { cn } from "@/lib/utils";
 import { format } from "date-fns";
 import { PiCalendarDotsThin } from "react-icons/pi";
 
+interface DatePickerInputProps {
+    date: Date | null;
+    label: string;
+}
 
 export function FrequencySelect() {
     const [selectedValue, setSelectedValue] = React.useState<string | undefined>(undefined);
@@ -100,6 +104,9 @@ export const CustomDateRange = () => {
     };
 
     const handleToChange = (toDate: Date | null) => {
+        if (dateRange.from && toDate && toDate < dateRange.from) {
+            return;
+        }
         setDateRange((prev) => ({ ...prev, to: toDate }));
     };
     return (
@@ -133,6 +140,20 @@ export const CustomDateRange = () => {
     )
 }
 
+const DatePickerInput: React.FC<DatePickerInputProps> = ({ date, label }) => (
+    <>
+        <Button
+            variant="outline"
+            className={cn(
+                "w-[150px] justify-start text-left font-normal text-black h-10 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" />
+    </>
+);
 
 export function DynamicDatePicker({
     label,
@@ -148,28 +169,13 @@ export function DynamicDatePicker({
             <DatePicker
                 buttonVariant={'link'}
                 className="dark:bg-dark--theme-light rounded-lg bg-white"
-                buttonClassName={'decoration-transparent flex items-center w-full bg-white dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black h-10 border dark:border-slate-600 rounded-md'} customInput={
-                    <>
-                        <Button
-                            variant={"outline"}
-                            className={cn(
-                                "w-[150px] justify-start text-left font-normal text-black  h-10 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" />
-                    </>
-                }
+                buttonClassName={'decoration-transparent flex items-center w-full bg-white dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black h-10 border dark:border-slate-600 rounded-md'}
+                customInput={<DatePickerInput date={date} label={label} />}
                 mode="single"
                 numberOfMonths={1}
                 initialFocus
-                defaultMonth={date || new Date()}
-                selected={date!}
+                defaultMonth={date ?? new Date()}
+                selected={date ?? new Date()}
                 onSelect={(selectedDate) => selectedDate && setDate(selectedDate)}
             />
         </div>
diff --git a/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx b/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
index 21edc8dc8..9249a9036 100644
--- a/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
+++ b/apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx
@@ -22,7 +22,12 @@ export function TimesheetFilter() {
                         <FrequencySelect />
                         <div className='flex items-center border border-gray-100 rounded-md h-10 '>
                             <FilterTaskActionMenu />
-                            <button className='border-l h-10 w-10 font-normal flex items-center justify-center text-gray-400'>
+                            <button
+                                aria-label="Clear filters"
+                                onClick={() => {
+                                    // TODO: Implement clear filters logic
+                                }}
+                                className='border-l h-10 w-10 font-normal flex items-center justify-center text-gray-400 hover:bg-gray-50'>
                                 <Cross2Icon />
                             </button>
                         </div>