From a1c0aeb8e7762893a2d421c0d8f83432df52386a Mon Sep 17 00:00:00 2001
From: rathi <rathiharivansh@gmail.com>
Date: Sun, 17 Nov 2024 20:51:10 -0500
Subject: [PATCH] fixed calendar

---
 .gitignore                  |   7 ++++
 habits.db                   | Bin 20480 -> 20480 bytes
 src/components/Calendar.tsx |  66 ++++++++++++++++++++++++++++--------
 3 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/.gitignore b/.gitignore
index a547bf3..a13576f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,10 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Database files
+*.db
+*.db-journal
+*.sqlite
+*.sqlite3
+*.sqlite-journal
diff --git a/habits.db b/habits.db
index 8c6f5f84bba8b24efe052c3c25c84057304f9fad..0e4c2f4bcffee12b0e1ad84452f8f6d6ec3fbe2f 100644
GIT binary patch
delta 258
zcmZozz}T>Wae_3X)kGO*Myrhp3;FpO7#NuN-!kxj=YPw8hyTuIL4`B?lkdn23UjbC
zGl-X@7MB>ZvoSM>f>@gr{_}IN^YUM2kl{0#%x+-Bp28Qx=fY>QSy12$uLGYfGovEA
zk%5tkuA!l>p)sEf3g3iJnwe3N4M|=Kg>SUE#BKs3vkafaWOfH5c5gl_J_$a}&4L0q
gc%21U7!?_jjFv?cFp&WZAQ>)=CSbHV+HWZ%0KU&OG5`Po

delta 221
zcmZozz}T>Wae_3X@kAMCM&peM3;Fr^pE5A=-(ldt1A&_b70&Qaz9TOvoW{VwAS9ZY
zQVe2niY6APq-|38&(Fci%YT_cg0EyUyMYm_3!e+0%Vt3VHa-JB8D>UBRwDx=6J0|?
zT|;C3%M1!gd?WtL3<5}e!_6gj6BwB#_+lorI~cKQ@@evEZWa`H&1)pU!l=lIWRML1
YMFu4#0V8StiwuHD0*0HT{gyHU0LaTS1ONa4

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index 60487b8..85e9b48 100644
--- a/src/components/Calendar.tsx
+++ b/src/components/Calendar.tsx
@@ -20,30 +20,32 @@ export function Calendar({
   const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
   return (
-    <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
-      <div className="flex items-center justify-between mb-6">
+    <div className="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6">
+      <div className="flex items-center justify-between mb-8">
         <h2 className="text-2xl font-bold dark:text-white">
           {currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' })}
         </h2>
         <div className="flex space-x-2">
           <button
             onClick={() => onChangeMonth('prev')}
-            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full"
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors duration-200"
           >
             <ChevronLeft className="h-5 w-5 dark:text-white" />
           </button>
           <button
             onClick={() => onChangeMonth('next')}
-            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full"
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors duration-200"
           >
             <ChevronRight className="h-5 w-5 dark:text-white" />
           </button>
         </div>
       </div>
 
-      <div className="grid grid-cols-7 gap-2">
+      <div className="grid grid-cols-7 gap-4">
         {daysOfWeek.map(day => (
-          <div key={day} className="text-center font-bold dark:text-white">{day}</div>
+          <div key={day} className="text-center font-semibold text-gray-600 dark:text-gray-300 mb-2">
+            {day}
+          </div>
         ))}
         {Array.from({ length: getDaysInMonth(currentMonth.getFullYear(), currentMonth.getMonth()) }).map((_, index) => {
           const date = new Date(
@@ -52,19 +54,55 @@ export function Calendar({
             index + 1
           ).toISOString().split('T')[0];
           const completedHabits = getCompletedHabitsForDate(date);
+          const incompleteHabits = habits.filter(habit => !habit.completedDates.includes(date));
           
           return (
             <div
               key={date}
-              className="border dark:border-gray-700 p-2 min-h-[60px] relative"
+              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 dark:text-white">{index + 1}</span>
-              {completedHabits.length > 0 && (
-                <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2">
-                  <div className="group relative">
-                    <div className="h-2 w-2 bg-green-500 rounded-full"></div>
-                    <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-black text-white text-xs rounded p-2 whitespace-nowrap">
-                      {completedHabits.map(habit => habit.name).join(', ')}
+              <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>
+                        )}
+                      </div>
                     </div>
                   </div>
                 </div>