Merge pull request #3214 from ever-co/develop

Release

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";

apps/web/app/[locale]/timesheet/components/FilterWithStatus.tsx

@@ -20,11 +20,15 @@ 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-[520px]', 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 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>

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,17 @@ 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";
+
+interface DatePickerInputProps {
+    date: Date | null;
+    label: string;
+}
 
 export function FrequencySelect() {
     const [selectedValue, setSelectedValue] = React.useState<string | undefined>(undefined);
@@ -30,7 +39,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>
@@ -44,56 +53,128 @@ 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>
     );
 };
 
 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 cancelChanges = () => {
+        setDropdownOpen(false);
+    };
+    const applyChanges = () => {
+        setDropdownOpen(false);
+    };
+    const handleFromChange = (fromDate: Date | null) => {
+        setDateRange((prev) => ({ ...prev, from: fromDate }));
+    };
+
+    const handleToChange = (toDate: Date | null) => {
+        if (dateRange.from && toDate && toDate < dateRange.from) {
+            return;
+        }
+        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={cancelChanges}>Cancel</button>
+                                <button className="text-primary" onClick={applyChanges}>Apply</button>
+                            </div>
                         </div>
                     </DropdownMenuItem>
                 </DropdownMenuSubContent>
             </DropdownMenuPortal>
         </DropdownMenuSub>
     )
 }
+
+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,
+    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={<DatePickerInput date={date} label={label} />}
+                mode="single"
+                numberOfMonths={1}
+                initialFocus
+                defaultMonth={date ?? new Date()}
+                selected={date ?? new Date()}
+                onSelect={(selectedDate) => selectedDate && setDate(selectedDate)}
+            />
+        </div>
+    );
+}

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,18 +48,17 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
                     )} />
                 </Button>
             </div>
-            <Card
-                shadow='custom'
+            <div
                 className={clsxm(
-                    'h-7 w-7',
+                    'h-16 w-16 rounded-lg p-5',
                     'flex items-center justify-center',
                     'text-white font-bold text-sm',
                     'shadow-lg',
                     classNameIcon
                 )}
                 aria-hidden="true">
                 {icon}
-            </Card>
+            </div>
         </Card>
     )
 }

apps/web/app/[locale]/timesheet/components/TimesheetFilter.tsx

@@ -1,39 +1,47 @@
-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() {
     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="flex flex-col md:flex-row w-full gap-4">
+                <div className="flex-1">
+                    <FilterWithStatus
+                        activeStatus="All Tasks"
+                        onToggle={(label) => {
+                            // TODO: Implement filter toggle handler
+                        }}
+                    />
+                </div>
+                <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 '>
+                            <FilterTaskActionMenu />
+                            <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>
+                        <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>
+        </>
 
     )
 }

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 (