Release

apps/web/app/[locale]/timesheet/[memberId]/components/CalendarView.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
 
 export function CalendarView() {
     return (
-        <div className='grow h-full w-full bg-[#FFFFFF]'>
+        <div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>
 
         </div>
     )

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

@@ -20,18 +20,21 @@ export function FilterWithStatus({
     ];
 
     return (
-        <div className={clsxm('flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] rounded-xl w-[520px]', className)}>
+        <div className={clsxm('flex flex-nowrap h-[2.2rem] items-center bg-[#e2e8f0aa] dark:bg-gray-800 rounded-xl ', className)}>
             {buttonData.map(({ label, count, icon }, index) => (
                 <Button
                     key={index}
                     className={clsxm(
                         'group flex items-center justify-start h-[2.2rem] rounded-xl w-full',
-                        'dark:bg-dark--theme-light dark:border-gray-700 bg-transparent text-[#71717A] w-[80px]',
-                        activeStatus === label && 'text-primary bg-white shadow-lg font-bold border'
+                        'dark:bg-gray-800 dark:border-primary-light bg-transparent text-[#71717A] w-[80px]',
+                        activeStatus === label && 'text-primary bg-white shadow-2xl dark:text-primary-light font-bold  border'
                     )}
                     onClick={() => onToggle(label)}>
-                    <span className={clsxm('font-medium ml-1 text-[#7E7991]', `${activeStatus === label ? "text-primary" : ""}`)}>{label}</span>
-                    <span className='font-medium ml-1 text-[#71717A]'>{count}</span>
+                    <span className={clsxm(
+                        'font-medium ml-1 text-gray-500 dark:text-gray-200',
+                        activeStatus === label && 'text-primary font-bold dark:text-primary-light'
+                    )}>{label}</span>
+                    <span className='font-medium ml-1 text-gray-500 dark:text-gray-400'>{count}</span>
                 </Button>
             ))}
         </div>

apps/web/app/[locale]/timesheet/[memberId]/components/FrequencySelect.tsx

@@ -39,7 +39,7 @@ export function FrequencySelect() {
         <Select
             value={selectedValue}
             onValueChange={handleSelectChange}>
-            <SelectTrigger className="w-auto overflow-hidden text-clip border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
+            <SelectTrigger className="w-36 overflow-hidden  h-[2.2rem]  text-clip border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark--theme-light focus:ring-2 focus:ring-transparent">
                 <SelectValue placeholder="Select a daily" />
             </SelectTrigger>
             <SelectContent>

apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx

@@ -19,7 +19,7 @@ export function TimeSheetFilterPopover() {
             <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'>
+                        className='flex items-center justify-center  h-[2.2rem] rounded-lg bg-white dark:bg-dark--theme-light border dark:border-gray-700 hover:bg-white p-3 gap-2'>
                         <SettingFilterIcon className="text-gray-700 dark:text-white w-3.5" strokeWidth="1.8" />
                         <span className="text-gray-700 dark:text-white">Filter</span>
                     </Button>

apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetAction.tsx

@@ -30,17 +30,17 @@ export const getTimesheetButtons = (status: StatusType, t: TranslationHooks) =>
 
     const buttonsConfig: Record<StatusType, { icon: JSX.Element; title: string }[]> = {
         Pending: [
-            { icon: <FaClipboardCheck className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
-            { icon: <IoClose className="!bg-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
-            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
+            { icon: <FaClipboardCheck className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
+            { icon: <IoClose className="!bg-[#2932417c] dark:!bg-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
+            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] dark:!text-gray-400 rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
         ],
         Approved: [
-            { icon: <IoClose className="!bg-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
-            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
+            { icon: <IoClose className="!bg-[#2932417c] rounded dark:!bg-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_REJECT_SELECTED') },
+            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded dark:!text-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
         ],
         Rejected: [
-            { icon: <FaClipboardCheck className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
-            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
+            { icon: <FaClipboardCheck className="!text-[#2932417c] rounded dark:!text-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_APPROVE_SELECTED') },
+            { icon: <RiDeleteBin6Fill className="!text-[#2932417c] rounded dark:!text-gray-400" />, title: t('pages.timesheet.TIMESHEET_ACTION_DELETE_SELECTED') }
         ]
     };
 

apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx

@@ -25,21 +25,21 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
         <Card
             aria-label={`Timesheet card for ${title}`}
             shadow='custom'
-            className='w-full h-[175px] rounded-md border border-gray-200 flex  gap-8 shadow shadow-gray-100 p-3'>
+            className='w-full h-[175px] rounded-md border border-gray-200 dark:border-gray-600 flex  gap-8 shadow shadow-gray-100 dark:shadow-transparent p-3'>
             <div className='!gap-8 w-full space-y-4 '>
                 <div className='flex flex-col gap-1 justify-start items-start'>
                     <h1 className='text-2xl md:text-[25px] font-bold truncate w-full'>{hours ?? count}</h1>
-                    <h2 className='text-base md:text-[16px] font-medium text-[#282048] truncate w-full'>{title}</h2>
-                    <span className='text-sm md:text-[14px] text-[#3D5A80] truncate w-full'>{date ?? description}</span>
+                    <h2 className='text-base md:text-[16px] font-medium text-[#282048] dark:text-gray-400 truncate w-full'>{title}</h2>
+                    <span className='text-sm md:text-[14px] text-[#3D5A80] dark:text-gray-400 truncate w-full'>{date ?? description}</span>
                 </div>
                 <Button
                     variant='outline'
                     className={clsxm(
                         'h-9 px-3 py-2',
-                        'border border-gray-200',
+                        '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'
+                        'hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:border-gray-600'
                     )}
                     aria-label="View timesheet details"
                     onClick={onClick}>
@@ -55,7 +55,7 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
                     'h-16 w-16 rounded-lg p-5',
                     'flex items-center justify-center',
                     'text-white font-bold text-sm',
-                    'shadow-lg',
+                    'shadow-lg dark:shadow-gray-800',
                     classNameIcon
                 )}
                 aria-hidden="true">

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

@@ -17,30 +17,29 @@ export function TimesheetFilter({ closeModal, isOpen, openModal }: ITimesheetFil
                     params="AddManuelTime"
                     timeSheetStatus="ManagerTimesheet"
                 />}
-            <div className="grid grid-cols-3 w-full">
-                <div className="col-span-1">
+            <div className="flex w-full justify-between items-center">
+                <div>
                     <FilterWithStatus
                         activeStatus="Rejected"
                         onToggle={(label) => {
-                            console.log(label)
+                            // If logging is needed, use proper logging service
                         }}
                     />
                 </div>
-                <div className="col-span-1"></div>
-                <div className="col-span-1">
-                    <div className='flex gap-2'>
-                        <FrequencySelect />
-                        <TimesheetFilterDate />
-                        <TimeSheetFilterPopover />
-                        <Button
-                            onClick={openModal}
-                            variant='outline'
-                            className='bg-primary/5 dark:bg-primary-light h-10 font-medium'>
-                            Add Time
-                        </Button>
-                    </div>
+
+                <div className="flex gap-2">
+                    <FrequencySelect />
+                    <TimesheetFilterDate />
+                    <TimeSheetFilterPopover />
+                    <Button
+                        onClick={openModal}
+                        variant="outline"
+                        className="bg-primary/5 dark:bg-primary-light dark:border-transparent  !h-[2.2rem] font-medium">
+                        Add Time
+                    </Button>
                 </div>
             </div>
+
         </>
     )
 }

apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx

@@ -82,6 +82,7 @@ export function TimesheetFilterDate({
         }
     };
 
+    const actionButtonClass = "h-4 border-none dark:bg-dark-theme-light text-primary hover:bg-transparent hover:underline"
 
     return (<>
         <Popover>
@@ -92,7 +93,7 @@ export function TimesheetFilterDate({
                     aria-label="Select date range"
                     aria-expanded="false"
                     className={cn(
-                        "w-[240px] justify-start text-left font-normal overflow-hidden text-clip",
+                        "w-44 justify-start dark:bg-dark-theme h-[2.2rem] items-center gap-x-2 text-left font-normal overflow-hidden text-clip dark:bg-dark-theme-light",
                         !dateRange.from && "text-muted-foreground"
                     )}>
                     <CalendarIcon />
@@ -109,7 +110,7 @@ export function TimesheetFilterDate({
                     )}
                 </Button>
             </PopoverTrigger>
-            <PopoverContent className="w-auto p-0 flex">
+            <PopoverContent className="w-auto p-0 flex dark:bg-dark-theme-light">
                 {isVisible && (
                     <div className="flex flex-col p-2 gap-2 translate-x-0 justify-between">
                         <div className="flex flex-col gap-2">
@@ -126,19 +127,19 @@ export function TimesheetFilterDate({
                             />
                         </div>
                         <div className="flex w-full justify-end items-end">
-                            <Button variant={'outline'} className="h-4 border-none text-primary hover:bg-transparent hover:text-primary hover:underline">Cancel</Button>
-                            <Button variant={'outline'} className="h-4 border-none text-primary hover:bg-transparent hover:text-primary hover:underline">Apply</Button>
+                            <Button variant={'outline'} className={`${actionButtonClass} hover:text-gray-500`}>Cancel</Button>
+                            <Button variant={'outline'} className={`${actionButtonClass} hover:text-primary-dark`}>Apply</Button>
                         </div>
                     </div>
                 )
                 }
-                <div className="border border-slate-100 my-1"></div>
+                <div className="border border-slate-100 dark:border-gray-800 my-1"></div>
                 <div className="flex flex-col p-2">
                     {["Today", "Last 7 days", "Last 30 days", `This year (${new Date().getFullYear()})`, "Custom Date Range"].map((label, index) => (
                         <Button
                             key={index}
                             variant="outline"
-                            className="h-7 flex items-center justify-between border-none text-[12px] text-gray-700"
+                            className="h-7 flex items-center justify-between border-none text-[12px] text-gray-700 dark:dark:bg-dark--theme-light"
                             onClick={() => {
                                 label === 'Custom Date Range' && setIsVisible((prev) => !prev)
                                 handlePresetClick(label)
@@ -194,8 +195,8 @@ export function DatePickerFilter({
         <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'}
+                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'}
                 customInput={<DatePickerInput date={date} label={label} />}
                 mode="single"
                 numberOfMonths={1}

apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx

@@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
 export function TimesheetView({ data }: { data?: IDailyPlan[] }) {
     const t = useTranslations();
     return (
-        <div className='grow h-full w-full bg-[#FFFFFF]'>
+        <div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>
             {data ? (
                 data.length > 0 ? (
                     <DataTableTimeSheet data={data} />