working version 3

src/components/Calendar.tsx

@@ -19,6 +19,12 @@ export function Calendar({
 }: CalendarProps) {
   const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
+  const getFirstDayOfMonth = (year: number, month: number) => {
+    const date = new Date(year, month, 1);
+    // Convert Sunday (0) to 6 for our Monday-based week
+    return date.getDay() === 0 ? 6 : date.getDay() - 1;
+  };
+
   return (
     <div className="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6">
       <div className="flex items-center justify-between mb-8">
@@ -47,69 +53,116 @@ export function Calendar({
             {day}
           </div>
         ))}
-        {Array.from({ length: getDaysInMonth(currentMonth.getFullYear(), currentMonth.getMonth()) }).map((_, index) => {
-          const date = new Date(
-            currentMonth.getFullYear(),
-            currentMonth.getMonth(),
-            index + 1
-          ).toISOString().split('T')[0];
-          const completedHabits = getCompletedHabitsForDate(date);
-          const incompleteHabits = habits.filter(habit => !habit.completedDates.includes(date));
+        
+        {(() => {
+          const year = currentMonth.getFullYear();
+          const month = currentMonth.getMonth();
+          const firstDayOfMonth = getFirstDayOfMonth(year, month);
+          const daysInMonth = getDaysInMonth(year, month);
+          const daysInPrevMonth = getDaysInMonth(year, month - 1);
           
-          return (
-            <div
-              key={date}
-              className="border dark:border-gray-700 rounded-lg p-3 min-h-[80px] relative group hover:shadow-md transition-shadow duration-200"
-            >
-              <span className="text-sm font-medium dark:text-white">{index + 1}</span>
-              {habits.length > 0 && (
-                <div className="absolute bottom-3 left-1/2 transform -translate-x-1/2">
-                  <div className="relative">
-                    <div 
-                      className={`h-3 w-3 ${
-                        completedHabits.length > 0 
-                          ? 'bg-green-500 shadow-sm shadow-green-200' 
-                          : 'bg-gray-300 dark:bg-gray-600'
-                      } rounded-full transition-colors duration-200`}
-                    />
-                    <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 hidden group-hover:block">
-                      <div className="bg-white dark:bg-gray-800 text-sm rounded-lg shadow-lg p-4 border dark:border-gray-700 min-w-[200px]">
-                        {completedHabits.length > 0 && (
-                          <div className="mb-3">
-                            <span className="text-green-500 font-semibold block mb-1">
-                              ✓ Completed
-                            </span>
-                            <ul className="space-y-1">
-                              {completedHabits.map(habit => (
-                                <li key={habit.id} className="text-gray-600 dark:text-gray-300">
-                                  {habit.name}
-                                </li>
-                              ))}
-                            </ul>
-                          </div>
-                        )}
-                        {incompleteHabits.length > 0 && (
-                          <div>
-                            <span className="text-red-500 font-semibold block mb-1">
-                              ○ Pending
-                            </span>
-                            <ul className="space-y-1">
-                              {incompleteHabits.map(habit => (
-                                <li key={habit.id} className="text-gray-600 dark:text-gray-300">
-                                  {habit.name}
-                                </li>
-                              ))}
-                            </ul>
-                          </div>
-                        )}
+          // Calculate days to show
+          const days = [];
+
+          // Previous month days
+          for (let i = 0; i < firstDayOfMonth; i++) {
+            const day = daysInPrevMonth - firstDayOfMonth + i + 1;
+            const date = new Date(year, month - 1, day).toISOString().split('T')[0];
+            days.push({
+              date,
+              dayNumber: day,
+              isCurrentMonth: false
+            });
+          }
+
+          // Current month days
+          for (let i = 1; i <= daysInMonth; i++) {
+            const date = new Date(year, month, i).toISOString().split('T')[0];
+            days.push({
+              date,
+              dayNumber: i,
+              isCurrentMonth: true
+            });
+          }
+
+          // Next month days to complete the grid
+          const remainingDays = 42 - days.length; // 6 rows * 7 days
+          for (let i = 1; i <= remainingDays; i++) {
+            const date = new Date(year, month + 1, i).toISOString().split('T')[0];
+            days.push({
+              date,
+              dayNumber: i,
+              isCurrentMonth: false
+            });
+          }
+
+          return days.map(({ date, dayNumber, isCurrentMonth }) => {
+            const completedHabits = getCompletedHabitsForDate(date);
+            const incompleteHabits = habits.filter(habit => !habit.completedDates.includes(date));
+            
+            return (
+              <div
+                key={date}
+                className={`border dark:border-gray-700 rounded-lg p-3 min-h-[80px] relative group hover:shadow-md transition-shadow duration-200 ${
+                  !isCurrentMonth ? 'bg-gray-50 dark:bg-gray-800/50' : ''
+                }`}
+              >
+                <span className={`text-sm font-medium ${
+                  isCurrentMonth 
+                    ? 'dark:text-white' 
+                    : 'text-gray-400 dark:text-gray-500'
+                }`}>
+                  {dayNumber}
+                </span>
+                {habits.length > 0 && (
+                  <div className="absolute bottom-3 left-1/2 transform -translate-x-1/2">
+                    <div className="relative">
+                      <div 
+                        className={`h-3 w-3 ${
+                          completedHabits.length > 0 
+                            ? 'bg-green-500 shadow-sm shadow-green-200' 
+                            : 'bg-gray-300 dark:bg-gray-600'
+                        } rounded-full transition-colors duration-200`}
+                      />
+                      <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 hidden group-hover:block">
+                        <div className="bg-white dark:bg-gray-800 text-sm rounded-lg shadow-lg p-4 border dark:border-gray-700 min-w-[200px]">
+                          {completedHabits.length > 0 && (
+                            <div className="mb-3">
+                              <span className="text-green-500 font-semibold block mb-1">
+                                ✓ Completed
+                              </span>
+                              <ul className="space-y-1">
+                                {completedHabits.map(habit => (
+                                  <li key={habit.id} className="text-gray-600 dark:text-gray-300">
+                                    {habit.name}
+                                  </li>
+                                ))}
+                              </ul>
+                            </div>
+                          )}
+                          {incompleteHabits.length > 0 && (
+                            <div>
+                              <span className="text-red-500 font-semibold block mb-1">
+                                ○ Pending
+                              </span>
+                              <ul className="space-y-1">
+                                {incompleteHabits.map(habit => (
+                                  <li key={habit.id} className="text-gray-600 dark:text-gray-300">
+                                    {habit.name}
+                                  </li>
+                                ))}
+                              </ul>
+                            </div>
+                          )}
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              )}
-            </div>
-          );
-        })}
+                )}
+              </div>
+            );
+          });
+        })()}
       </div>
     </div>
   );

src/components/HabitList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Trash2 } from 'lucide-react';
 import { Habit } from '../types';
 
@@ -13,58 +13,111 @@ interface HabitListProps {
 }
 
 const calculateStreak = (completedDates: string[]): { currentStreak: number; bestStreak: number } => {
-  if (completedDates.length === 0) return { currentStreak: 0, bestStreak: 0 };
-
-  const sortedDates = [...completedDates].sort((a, b) => 
-    new Date(a).getTime() - new Date(b).getTime()
-  );
-
-  let currentStreak = 1;
-  let bestStreak = 1;
-  let tempStreak = 1;
-
-  // Check if the last completion was today or yesterday
-  const lastDate = new Date(sortedDates[sortedDates.length - 1]);
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  lastDate.setHours(0, 0, 0, 0);
-  
-  const diffDays = Math.floor((today.getTime() - lastDate.getTime()) / (24 * 60 * 60 * 1000));
-  
-  // If the last completion was more than a day ago, current streak is 0
-  if (diffDays > 1) {
-    currentStreak = 0;
+  if (!completedDates || completedDates.length === 0) {
+    return { currentStreak: 0, bestStreak: 0 };
   }
 
-  // Calculate streaks
-  for (let i = 1; i < sortedDates.length; i++) {
-    const prevDate = new Date(sortedDates[i - 1]);
-    const currDate = new Date(sortedDates[i]);
-    prevDate.setHours(0, 0, 0, 0);
-    currDate.setHours(0, 0, 0, 0);
-    
-    const diffTime = currDate.getTime() - prevDate.getTime();
-    const diffDays = Math.floor(diffTime / (24 * 60 * 60 * 1000));
-    
-    if (diffDays === 1) {
-      tempStreak++;
-      bestStreak = Math.max(bestStreak, tempStreak);
-    } else if (diffDays === 0) {
-      // Same day completions don't affect streak
-      continue;
-    } else {
-      tempStreak = 1;
+  // Get today's date at midnight
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const todayStr = today.toISOString().split('T')[0];
+
+  // Sort dates in descending order (most recent first)
+  const sortedDates = [...completedDates]
+    .filter(date => !isNaN(new Date(date).getTime()))
+    .sort((a, b) => new Date(b).getTime() - new Date(a).getTime());
+
+  let currentStreak = 0;
+  let bestStreak = 0;
+  let tempStreak = 0;
+
+  // First, check if today is completed
+  const hasTodayCompleted = sortedDates.includes(todayStr);
+  
+  if (!hasTodayCompleted) {
+    // If today isn't completed, current streak is 0
+    currentStreak = 0;
+  } else {
+    // Start counting current streak from today
+    let checkDate = new Date(today);
+    currentStreak = 1; // Start with 1 for today
+
+    // Check previous days
+    while (true) {
+      // Move to previous day
+      checkDate.setDate(checkDate.getDate() - 1);
+      const dateStr = checkDate.toISOString().split('T')[0];
+      
+      if (sortedDates.includes(dateStr)) {
+        currentStreak++;
+      } else {
+        break; // Break streak if a day is missed
+      }
     }
   }
 
-  // Current streak should be the same as tempStreak if the last completion was today or yesterday
-  if (diffDays <= 1) {
-    currentStreak = tempStreak;
+  // Calculate best streak
+  for (let i = 0; i < sortedDates.length; i++) {
+    const currentDate = new Date(sortedDates[i]);
+    
+    if (i === 0) {
+      tempStreak = 1;
+    } else {
+      const prevDate = new Date(sortedDates[i - 1]);
+      const diffDays = Math.floor(
+        (prevDate.getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24)
+      );
+      
+      if (diffDays === 1) {
+        tempStreak++;
+      } else if (diffDays === 0) {
+        // Same day, skip
+        continue;
+      } else {
+        // Reset streak on gap
+        bestStreak = Math.max(bestStreak, tempStreak);
+        tempStreak = 1;
+      }
+    }
   }
+  
+  // Final check for best streak
+  bestStreak = Math.max(bestStreak, tempStreak);
+  // Also check if current streak is the best
+  bestStreak = Math.max(bestStreak, currentStreak);
 
   return { currentStreak, bestStreak };
 };
 
+const getCurrentWeekDates = () => {
+  // Start with Sunday (today's week)
+  const now = new Date();
+  const sunday = new Date(now);
+  sunday.setDate(now.getDate() - now.getDay());
+
+  const weekDates = [];
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(sunday);
+    date.setDate(sunday.getDate() + i);
+    // Format as YYYY-MM-DD
+    const formattedDate = date.toISOString().split('T')[0];
+    weekDates.push(formattedDate);
+  }
+
+  return weekDates;
+};
+
+// If you want Monday first, rotate the array
+const currentWeek = (() => {
+  const dates = getCurrentWeekDates();
+  // Move Sunday to the end
+  const sunday = dates.shift()!;
+  dates.push(sunday);
+  return dates;
+})();
+
+const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
 export function HabitList({
   habits,
   currentWeek,
@@ -74,25 +127,35 @@ export function HabitList({
   onDeleteHabit,
   onUpdateStreak,
 }: HabitListProps) {
+  useEffect(() => {
+    console.log('Current week dates:', 
+      currentWeek.map(date => 
+        `${new Date(date).toLocaleDateString()} (${daysOfWeek[new Date(date).getDay() === 0 ? 6 : new Date(date).getDay() - 1]})`
+      )
+    );
+  }, []);
+
   return (
     <table className="w-full">
       <thead>
         <tr>
           <th className="px-4 py-2 text-left dark:text-white">Habit</th>
-          {daysOfWeek.map((day, index) => (
-            <th key={day} className="px-4 py-2 text-center dark:text-white">
-              {day}
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                {new Date(currentWeek[index]).getDate()}
-              </div>
-            </th>
-          ))}
-          <th className="px-4 py-2 text-center dark:text-white">
-            Current Streak
-          </th>
-          <th className="px-4 py-2 text-center dark:text-white">
-            Best Streak
-          </th>
+          {currentWeek.map((dateStr, index) => {
+            const date = new Date(dateStr);
+            // Ensure date is interpreted in local timezone
+            const displayDate = new Date(date.getTime() + date.getTimezoneOffset() * 60000);
+            
+            return (
+              <th key={dateStr} className="px-4 py-2 text-center dark:text-white">
+                <div>{daysOfWeek[index]}</div>
+                <div className="text-xs text-gray-500 dark:text-gray-400">
+                  {displayDate.getDate()}
+                </div>
+              </th>
+            );
+          })}
+          <th className="px-4 py-2 text-center dark:text-white">Current Streak</th>
+          <th className="px-4 py-2 text-center dark:text-white">Best Streak</th>
           <th className="px-4 py-2 text-center dark:text-white">Actions</th>
         </tr>
       </thead>
@@ -130,12 +193,12 @@ export function HabitList({
             ))}
             <td className="px-4 py-2 text-center">
               <span className="dark:text-white font-medium">
-                {calculateStreak(habit.completedDates).currentStreak}
+                {calculateStreak(habit.completedDates || []).currentStreak}
               </span>
             </td>
             <td className="px-4 py-2 text-center">
               <span className="dark:text-white font-medium">
-                {calculateStreak(habit.completedDates).bestStreak}
+                {calculateStreak(habit.completedDates || []).bestStreak}
               </span>
             </td>
             <td className="px-4 py-2 text-center">