feat: image with Loader

ever-co · Dec 21, 2024 · 98dba6e · 98dba6e
1 parent ea20a20
commit 98dba6e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/CompactTimesheetComponent.tsx
@@ -27,7 +27,7 @@ const ImageWithLoader = ({ imageUrl, alt, className = "w-6 h-6 rounded-full" }:
     { imageUrl: string; alt: string; className?: string }) => {
     const [isLoading, setIsLoading] = React.useState(true);
     return (
-        <div className="relative w-6 h-6">
+        <div className="relative">
             {isLoading && (
                 <div className="absolute inset-0 flex items-center justify-center bg-gray-200 rounded-full">
                     <LoadingSpinner className="w-5 h-5" />
@@ -44,8 +44,8 @@ const ImageWithLoader = ({ imageUrl, alt, className = "w-6 h-6 rounded-full" }:
     );
 };
 
-export const EmployeeAvatar = ({ imageUrl }: { imageUrl: string }) => (
-    <ImageWithLoader imageUrl={imageUrl} alt="Employee" />
+export const EmployeeAvatar = ({ imageUrl, className }: { imageUrl: string, className?: string }) => (
+    <ImageWithLoader className={className} imageUrl={imageUrl} alt="Employee" />
 );
 
 

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetDetailModal.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetDetailModal.tsx
@@ -9,7 +9,7 @@ import { cn } from '@/lib/utils';
 import { useTimesheet } from '@/app/hooks/features/useTimesheet';
 import { Badge } from '@components/ui/badge';
 import { TaskNameInfoDisplay, TotalTimeDisplay } from '@/lib/features';
-import { ProjectLogo } from './CompactTimesheetComponent';
+import { EmployeeAvatar, ProjectLogo } from './CompactTimesheetComponent';
 
 export interface IAddTaskModalProps {
     isOpen: boolean;
@@ -115,7 +115,7 @@ const MembersWorkedCard = ({ element, t }: { element: TimesheetLog[], t: Transla
                             >
                                 <div className='flex justify-between items-center w-full'>
                                     <div className='flex items-center gap-2'>
-                                        <img className='w-10 h-10 rounded-full shadow-md border' src={timesheet.element[0].employee.user?.imageUrl!} alt='' />
+                                        <EmployeeAvatar className='w-10 h-10 rounded-full shadow-md border' imageUrl={timesheet.element[0].employee.user?.imageUrl!} />
                                         <span className='font-bold'>{timesheet.element[0].employee.fullName}</span>
                                     </div>
                                     <Badge

diff --git a/apps/web/app/hooks/features/useTimer.ts b/apps/web/app/hooks/features/useTimer.ts
@@ -104,7 +104,7 @@ function useLocalTimeCounter(
 
       const timerStatusDate = timerStatus?.lastLog?.createdAt
         ? moment(timerStatus?.lastLog?.createdAt).unix() * 1000 -
-          timerStatus?.lastLog?.duration
+        timerStatus?.lastLog?.duration
         : 0;
 
       timerStatus &&
@@ -257,8 +257,8 @@ export function useTimer() {
   // check if the today plan has working time planned and all the tasks into the plan are estimated
   const isPlanVerified = requirePlan
     ? hasPlan &&
-      hasPlan?.workTimePlanned > 0 &&
-      !!hasPlan?.tasks?.every((task) => task.estimate && task.estimate > 0)
+    hasPlan?.workTimePlanned > 0 &&
+    !!hasPlan?.tasks?.every((task) => task.estimate && task.estimate > 0)
     : true;
 
   const canRunTimer =

diff --git a/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx b/apps/web/lib/features/integrations/calendar/table-time-sheet.tsx
@@ -295,7 +295,7 @@ export function DataTableTimeSheet({ data, user }: { data?: GroupedTimesheet[],
 												</div>
 												<Badge
 													variant={'outline'}
-													className="flex items-center  gap-x-2 w-[108px] h-[30px] rounded-[8px] bg-[#E4E4E7] dark:bg-gray-800  py-[6px] px-[8px] border-[1px] border-[#E4E4E7] dark:border-gray-700"
+													className="flex items-center  gap-x-2 w-[108px] h-[30px] rounded-[8px] bg-[#E4E4E7] dark:bg-gray-800 shadow-md py-[6px] px-[8px] border-[1px] border-[#E4E4E7] dark:border-gray-700"
 												>
 													<span className="text-[#5f5f61] text-[14px] font-[700px]">{t('timer.TOTAL_HOURS').split(' ')[0]}:</span>
 													<TotalTimeDisplay timesheetLog={rows} className='text-[#293241] text-[14px]' />