From dbac7631e5b51c0ee31019d6f8f34a2231a30a52 Mon Sep 17 00:00:00 2001
From: Marco Gallegos <marco.gallegos@outlook.com>
Date: Sun, 18 Jan 2026 23:14:46 -0600
Subject: [PATCH] fix: Correct calendar day offset in DatePicker component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix critical bug where calendar days were misaligned with weekdays:

PROBLEM:
- January 1, 2026 showed as Monday instead of Thursday
- Calendar grid didn't calculate proper offset for first day of month
- Days were placed in grid without accounting for weekday padding

ROOT CAUSE:
- DatePicker component used eachDayOfInterval() to generate days
- Grid cells were populated directly from day 1 without offset calculation
- getDay() returns 0-6 (Sunday-Saturday) but calendar header uses Monday-Sunday

SOLUTION:
- Calculate offset using getDay() of first day of month
- Adjust for Monday-start week: offset = dayOfWeek === 0 ? 6 : dayOfWeek - 1
- Add padding cells (empty divs) at start of grid for correct alignment
- For January 2026: Thursday (getDay=4) → offset=3 (3 empty cells before day 1)

EXAMPLE:
- January 1, 2026 is Thursday (getDay=4)
- With Monday-start calendar: L M X J V S D
- Correct grid: _ _ _ 1 2 3 4 ... (3 empty cells then day 1)

This ensures all dates align correctly with their weekday headers.
---
 components/booking/date-picker.tsx | 110 ++++++++++++++++++++++++++++-
 1 file changed, 108 insertions(+), 2 deletions(-)

diff --git a/components/booking/date-picker.tsx b/components/booking/date-picker.tsx
index 1b91e4c..ffb03be 100644
--- a/components/booking/date-picker.tsx
+++ b/components/booking/date-picker.tsx
@@ -18,8 +18,8 @@ export default function DatePicker({ selectedDate, onDateSelect, minDate, disabl
     end: endOfMonth(currentMonth)
   })
 
-  const previousMonth = () => setCurrentMonth(subMonths(currentMonth, 1))
-  const nextMonth = () => setCurrentMonth(addMonths(currentMonth, 1))
+  const previousMonth = () => setCurrentMonth(subMonths(currentMonth,1))
+  const nextMonth = () => setCurrentMonth(addMonths(currentMonth,1))
 
   const isDateDisabled = (date: Date) => {
     if (minDate) {
@@ -32,6 +32,112 @@ export default function DatePicker({ selectedDate, onDateSelect, minDate, disabl
     return selectedDate && isSameDay(date, selectedDate)
   }
 
+  // Calcular el offset del primer día del mes
+  // getDay() devuelve: 0=Domingo, 1=Lunes, 2=Martes, ..., 6=Sábado
+  // Para calendario que empieza en Lunes, necesitamos ajustar:
+  // Si getDay() = 0 (Domingo), offset = 6
+  // Si getDay() = 1-6 (Lunes-Sábado), offset = getDay() - 1
+  const firstDayOfMonth = startOfMonth(currentMonth)
+  const dayOfWeek = firstDayOfMonth.getDay()
+  const offset = dayOfWeek === 0 ? 6 : dayOfWeek - 1
+
+  // Crear array con celdas vacías al inicio para el padding
+  const paddingDays = Array.from({ length: offset }, (_, i) => ({ day: null, key: `padding-${i}` }))
+
+  // Crear array de días con key único
+  const calendarDays = days.map((date, i) => ({ day: date, key: `day-${i}` }))
+
+  // Combinar padding + días del mes
+  const allDays = [...paddingDays, ...calendarDays]
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-between mb-4">
+        <button
+          type="button"
+          onClick={previousMonth}
+          disabled={disabled}
+          className="p-2 hover:bg-[var(--mocha-taupe)]/10 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <ChevronLeft className="w-5 h-5" style={{ color: 'var(--charcoal-brown)' }} />
+        </button>
+        <h3 className="text-lg font-medium" style={{ color: 'var(--charcoal-brown)' }}>
+          {format(currentMonth, 'MMMM yyyy', { locale: es })}
+        </h3>
+        <button
+          type="button"
+          onClick={nextMonth}
+          disabled={disabled}
+          className="p-2 hover:bg-[var(--mocha-taupe)]/10 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <ChevronRight className="w-5 h-5" style={{ color: 'var(--charcoal-brown)' }} />
+        </button>
+      </div>
+
+      <div className="grid grid-cols-7 gap-1 mb-2">
+        {['L', 'M', 'X', 'J', 'V', 'S', 'D'].map((day, index) => (
+          <div
+            key={index}
+            className="text-center text-sm font-medium py-2"
+            style={{ color: 'var(--mocha-taupe)' }}
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-7 gap-1">
+        {allDays.map(({ day, key }) => {
+          // Si es celda de padding (day es null)
+          if (!day) {
+            return (
+              <div
+                key={key}
+                className="p-2"
+              />
+            )
+          }
+
+          const disabled = isDateDisabled(day)
+          const selected = isDateSelected(day)
+          const today = isToday(day)
+          const notCurrentMonth = !isSameMonth(day, currentMonth)
+
+          return (
+            <button
+              key={key}
+              type="button"
+              onClick={() => !disabled && !notCurrentMonth && onDateSelect(day)}
+              disabled={disabled || notCurrentMonth}
+              className={`
+                relative p-2 text-sm font-medium rounded-md transition-all
+                ${disabled || notCurrentMonth ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:bg-[var(--mocha-taupe)]/10'}
+                ${selected ? 'text-white' : ''}
+                ${today && !selected ? 'font-bold' : ''}
+              `}
+              style={selected ? { background: 'var(--deep-earth)' } : { color: 'var(--charcoal-brown)' }}
+            >
+              {format(day, 'd')}
+              {today && !selected && (
+                <span
+                  className="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full"
+                  style={{ background: 'var(--deep-earth)' }}
+                />
+              )}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+    return false
+  }
+
+  const isDateSelected = (date: Date) => {
+    return selectedDate && isSameDay(date, selectedDate)
+  }
+
   return (
     <div className="w-full">
       <div className="flex items-center justify-between mb-4">