debugged sync errors with habit and calendar page (finally)

src/components/Calendar.tsx

@@ -145,7 +145,9 @@ export const Calendar: React.FC<CalendarProps> = ({
     e.stopPropagation();
     await onToggleHabit(habitId, date);
 
-    // Update the selected date data immediately after toggling
+    // Ensure we're using the correct date for the selected date display
+    const selectedUTCDate = new Date(date + 'T00:00:00.000Z');
+
     setSelectedDate({
       date,
       completedHabits: getCompletedHabitsForDate(date),
@@ -157,6 +159,16 @@ export const Calendar: React.FC<CalendarProps> = ({
     });
   };
 
+  // Update where dates are displayed
+  const formatDisplayDate = (dateStr: string) => {
+    const date = new Date(dateStr + 'T00:00:00.000Z');
+    return date.toLocaleDateString('default', {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  };
+
   return (
     <>
       <div className={`
@@ -342,11 +354,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         `}>
           <div className="mb-4">
             <h3 className={`text-lg font-medium ${theme.text}`}>
-              {new Date(selectedDate.date).toLocaleDateString('default', {
+              {formatDisplayDate(selectedDate.date)}
-                month: 'long',
-                day: 'numeric',
-                year: 'numeric'
-              })}
             </h3>
           </div>
 

src/components/HabitList.tsx

@@ -32,7 +32,7 @@ export function HabitList({
   }, [habits, habitSort]);
 
   const getDayName = (dateStr: string) => {
-    const date = new Date(dateStr);
+    const date = new Date(dateStr + 'T00:00:00.000Z');
     return daysOfWeek[getDayIndex(date)];
   };
 
@@ -47,7 +47,7 @@ export function HabitList({
                 <div className="hidden md:block">{getDayName(dateStr)}</div>
                 <div className="md:hidden">{getDayName(dateStr).slice(0, 1)}</div>
                 <div className="text-xs text-gray-500 dark:text-gray-400">
-                  {new Date(dateStr).getDate()}
+                  {new Date(dateStr + 'T00:00:00.000Z').getUTCDate()}
                 </div>
               </th>
             ))}

src/hooks/useHabits.ts

@@ -139,7 +139,6 @@ export const useHabits = () => {
       const isCompleted = habit.completedDates.includes(date);
 
       if (isCompleted) {
-        // Remove completion
         const { error } = await supabase
           .from('habit_completions')
           .delete()
@@ -149,7 +148,6 @@ export const useHabits = () => {
 
         if (error) throw error;
       } else {
-        // Add completion
         const { error } = await supabase
           .from('habit_completions')
           .insert({
@@ -177,7 +175,6 @@ export const useHabits = () => {
     } catch (err) {
       console.error('Error toggling habit:', err);
       setError(err instanceof Error ? err.message : 'Failed to toggle habit');
-      // Refresh habits to ensure consistency
       await fetchHabits();
     }
   };

src/utils/dateUtils.ts

@@ -1,10 +1,13 @@
 // Simple date formatting without timezone complications
 export const formatDate = (date: Date): string => {
-    const year = date.getFullYear();
+  // Create a new date object at midnight UTC
-    const month = String(date.getMonth() + 1).padStart(2, '0');
+  const d = new Date(Date.UTC(
-    const day = String(date.getDate()).padStart(2, '0');
+    date.getFullYear(),
-    return `${year}-${month}-${day}`;
+    date.getMonth(),
-  };
+    date.getDate()
+  ));
+  return d.toISOString().split('T')[0];
+};
 
   // Get day index (0-6) where Monday is 0 and Sunday is 6
   export const getDayIndex = (date: Date): number => {
@@ -14,17 +17,22 @@ export const formatDate = (date: Date): string => {
 
   // Get dates for current week starting from Monday
   export const getWeekDates = (baseDate: Date = new Date()): string[] => {
-    const current = new Date(baseDate);
+    // Create date at midnight UTC
+    const current = new Date(Date.UTC(
+      baseDate.getFullYear(),
+      baseDate.getMonth(),
+      baseDate.getDate()
+    ));
     const dayIndex = getDayIndex(current);
 
     // Adjust to Monday
-    current.setDate(current.getDate() - dayIndex);
+    current.setUTCDate(current.getUTCDate() - dayIndex);
 
     // Generate dates starting from Monday
     const dates = [];
     for (let i = 0; i < 7; i++) {
       const date = new Date(current);
-      date.setDate(current.getDate() + i);
+      date.setUTCDate(current.getUTCDate() + i);
       dates.push(formatDate(date));
     }
 
@@ -45,3 +53,12 @@ export const formatDate = (date: Date): string => {
       date1.getFullYear() === date2.getFullYear()
     );
   };
+
+  // Add helper function to convert local date to UTC midnight
+  export const getUTCMidnight = (date: Date): Date => {
+    return new Date(Date.UTC(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate()
+    ));
+  };