Merge pull request #98 from cortex-reply/fix-timezone-holiday-issue

Fix timezone holiday issue

Author: mped-rep

src/components/Holidays/CalendarView.stories.tsx

@@ -88,16 +88,19 @@ const mockHolidays: Holiday[] = [
   },
 ]
 
+
 export const Default: Story = {
   render: () => {
     const [currentDate, setCurrentDate] = useState(new Date(2025, 0, 1)) // January 2025
+    const today = TimeUtil.toUtcMidnight(new Date(2025, 0, 1)) // Server's "today"
 
     const correctedCurrentDate = TimeUtil.toUtcMidnight(currentDate)
     return (
       <CalendarView
         currentDate={correctedCurrentDate}
         setCurrentDate={setCurrentDate}
         holidays={mockHolidays}
+        today={today}
       />
     )
   },

src/components/Holidays/CalendarView.tsx

@@ -11,6 +11,7 @@ interface CalendarViewProps {
   currentDate: Date
   setCurrentDate: (date: Date) => void
   holidays: Holiday[]
+  today: Date // Server-determined "today" to avoid hydration mismatch
 }
 
 interface Holiday {
@@ -24,18 +25,25 @@ interface Holiday {
   leaveType: 'Full Day' | 'Morning' | 'Afternoon'
 }
 
-export function CalendarView({ currentDate, setCurrentDate, holidays }: CalendarViewProps) {
+export function CalendarView({ currentDate, setCurrentDate, holidays, today }: CalendarViewProps) {
   const [selectedDay, setSelectedDay] = useState<Date | null>(null)
 
+  // Helper to compare dates by their UTC year/month/day values
+  const isSameUtcDay = (a: Date, b: Date) =>
+    a.getUTCFullYear() === b.getUTCFullYear() &&
+    a.getUTCMonth() === b.getUTCMonth() &&
+    a.getUTCDate() === b.getUTCDate()
+
   const firstDayOfMonth =
-    (new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay() + 6) % 7
+    (new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), 1)).getUTCDay() + 6) % 7
 
   const days = Array.from({ length: 42 }, (_, i) => {
     const day = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth(),
-      i - firstDayOfMonth + 1,
-      currentDate.getHours(),
+      Date.UTC(
+        currentDate.getUTCFullYear(),
+        currentDate.getUTCMonth(),
+        i - firstDayOfMonth + 1,
+      ),
     )
     const filteredHolidays = holidays.filter(
       (h) =>
@@ -44,28 +52,32 @@ export function CalendarView({ currentDate, setCurrentDate, holidays }: Calendar
     )
     return {
       date: day,
-      isCurrentMonth: day.getMonth() === currentDate.getMonth(),
-      isToday: day.toDateString() === new Date().toDateString(),
+      isCurrentMonth: day.getUTCMonth() === currentDate.getUTCMonth(),
+      isToday: isSameUtcDay(day, today),
       holidays: filteredHolidays,
     }
   })
 
   const prevMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))
+    setCurrentDate(new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth() - 1, 1)))
   }
   const nextMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))
+    setCurrentDate(new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth() + 1, 1)))
   }
   const setToday = () => {
-    setCurrentDate(new Date())
+    setCurrentDate(TimeUtil.toUtcMidnight(new Date()))
   }
 
+  // Format month/year using UTC values to avoid hydration mismatch
+  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+  const monthYearDisplay = `${months[currentDate.getUTCMonth()]} ${currentDate.getUTCFullYear()}`
+
   return (
     <div className="lg:flex lg:h-full lg:flex-col">
       <header className="flex items-center justify-between border-b border-gray-200 px-6 py-4 lg:flex-none">
         <h1 className="text-base font-semibold text-foreground">
           <time dateTime={currentDate.toISOString()}>
-            {currentDate.toLocaleString('default', { month: 'long', year: 'numeric' })}
+            {monthYearDisplay}
           </time>
         </h1>
         <div className="flex items-center">
@@ -139,7 +151,7 @@ export function CalendarView({ currentDate, setCurrentDate, holidays }: Calendar
                     day.isToday && 'bg-indigo-600 font-semibold text-white',
                   )}
                 >
-                  {day.date.getDate()}
+                  {day.date.getUTCDate()}
                 </time>
                 {day.holidays.length > 0 && (
                   <ol className="mt-2 space-y-1 overflow-visible">
@@ -189,7 +201,7 @@ export function CalendarView({ currentDate, setCurrentDate, holidays }: Calendar
                       'flex h-6 w-6 items-center justify-center rounded-full bg-gray-900',
                   )}
                 >
-                  {day.date.getDate()}
+                  {day.date.getUTCDate()}
                 </time>
                 <span className="sr-only">{day.holidays.length} holidays</span>
                 {day.holidays.length > 0 && (

src/components/Holidays/HolidayTracker.stories.tsx

@@ -29,6 +29,7 @@ export const Default: Story = {
   args: {
     // Mock holidays data
     currentDate: format(new Date(2025, 0, 2), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx"), // January 2025
+    today: format(new Date(2025, 0, 2), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx"), // Today's date for highlighting
     holidays: [
       {
         id: '1',

src/components/Holidays/HolidayTracker.tsx

@@ -19,7 +19,8 @@ interface HolidayTrackerProps {
   holidays: Holiday[]
   leaveApprovals: LeaveRequest[]
   employees: Employee[]
-  currentDate: string // ISO 8601 string
+  currentDate: string // ISO 8601 string - the date being viewed
+  today: string // ISO 8601 string - server's current date for "today" highlighting
   currentUser: { grade: string; remainingLeaveDays: number }
   submitLeaveRequest?: (formData: FormData) => Promise<{ success: boolean; message: string }>
   approveLeave: (ids: string[]) => Promise<{ success: boolean; message: string }>
@@ -34,6 +35,7 @@ export function HolidayTracker({
   holidays,
   currentUser,
   currentDate,
+  today,
   leaveApprovals,
   employees,
   submitLeaveRequest,
@@ -46,6 +48,7 @@ export function HolidayTracker({
   const isLoading = false
 
   const parsedCurrentDate = TimeUtil.toUtcMidnight(parseISO(currentDate))
+  const parsedToday = TimeUtil.toUtcMidnight(parseISO(today))
 
   const setCurrentDate = async (date: Date) => {
     const formattedDate = format(date, 'dd-MM-yyyy')
@@ -147,6 +150,7 @@ export function HolidayTracker({
           currentDate={parsedCurrentDate}
           setCurrentDate={setCurrentDate}
           holidays={holidays}
+          today={parsedToday}
         />
       )}
       {currentTab === 'Request Leave' && (

src/components/Holidays/RequestLeave.tsx

@@ -71,7 +71,7 @@ export function RequestLeave({ remainingDays, submitLeaveRequest }: RequestLeave
   }, [])
   const [leaveType, setLeaveType] = useState('Full Day')
   const [isMultipleDays, setIsMultipleDays] = useState(false)
-  const [totalDays, setTotalDays] = useState(1)
+  const [totalDays, setTotalDays] = useState(0)
   const router = useRouter()
 
   useEffect(() => {