enable completing past habit

components/DailyOverview.tsx

@@ -9,8 +9,8 @@ import { cn, isHabitDueToday, getHabitFreq } from '@/lib/utils'
 import Link from 'next/link'
 import { useState, useEffect } from 'react'
 import { useAtom } from 'jotai'
-import { pomodoroAtom, settingsAtom } from '@/lib/atoms'
-import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, getCompletedHabitsForDate, getCompletionsForDate } from '@/lib/utils'
+import { pomodoroAtom, settingsAtom, completedHabitsMapAtom } from '@/lib/atoms'
+import { getTodayInTimezone, isSameDate, t2d, d2t, getNow } from '@/lib/utils'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Progress } from '@/components/ui/progress'
@@ -33,16 +33,13 @@ export default function DailyOverview({
   const { completeHabit, undoComplete } = useHabits()
   const [settings] = useAtom(settingsAtom)
   const [dailyHabits, setDailyHabits] = useState<Habit[]>([])
+  const [completedHabitsMap] = useAtom(completedHabitsMapAtom)
   const today = getTodayInTimezone(settings.system.timezone)
-  const todayCompletions = getCompletedHabitsForDate({
-    habits,
-    date: getNow({ timezone: settings.system.timezone }),
-    timezone: settings.system.timezone
-  })
+  const todayCompletions = completedHabitsMap.get(today) || []
 
   useEffect(() => {
     // Filter habits that are due today based on their recurrence rule
-    const filteredHabits = habits.filter(habit => isHabitDueToday(habit, settings.system.timezone))
+    const filteredHabits = habits.filter(habit => isHabitDueToday({ habit, timezone: settings.system.timezone }))
     setDailyHabits(filteredHabits)
   }, [habits])
 
@@ -78,11 +75,8 @@ export default function DailyOverview({
                 <h3 className="font-semibold">Daily Habits</h3>
                 <Badge variant="secondary">
                   {dailyHabits.filter(habit => {
-                    const completions = getCompletionsForDate({
-                      habit,
-                      date: today,
-                      timezone: settings.system.timezone
-                    });
+                    const completions = (completedHabitsMap.get(today) || [])
+                      .filter(h => h.id === habit.id).length;
                     return completions >= (habit.targetCompletions || 1);
                   }).length}/{dailyHabits.length} Completed
                 </Badge>

components/HabitCalendar.tsx

@@ -1,29 +1,42 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useMemo, useCallback } from 'react'
 import { Calendar } from '@/components/ui/calendar'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
-import { d2s, getNow, t2d, getCompletedHabitsForDate } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Check, Circle, CircleCheck } from 'lucide-react'
+import { d2s, getNow, t2d, getCompletedHabitsForDate, isHabitDue, getISODate } from '@/lib/utils'
 import { useAtom } from 'jotai'
-import { habitsAtom, settingsAtom } from '@/lib/atoms'
+import { useHabits } from '@/hooks/useHabits'
+import { habitsAtom, settingsAtom, completedHabitsMapAtom } from '@/lib/atoms'
 import { DateTime } from 'luxon'
 import Linkify from './linkify'
 import { Habit } from '@/lib/types'
 
 export default function HabitCalendar() {
+  const { completePastHabit } = useHabits()
+
+  const handleCompletePastHabit = useCallback(async (habit: Habit, date: DateTime) => {
+    try {
+      await completePastHabit(habit, date)
+    } catch (error) {
+      console.error('Error completing past habit:', error)
+    }
+  }, [completePastHabit])
   const [settings] = useAtom(settingsAtom)
   const [selectedDate, setSelectedDate] = useState<DateTime>(getNow({ timezone: settings.system.timezone }))
   const [habitsData] = useAtom(habitsAtom)
   const habits = habitsData.habits
 
-  const getHabitsForDate = (date: Date) => {
-    return getCompletedHabitsForDate({
-      habits,
-      date: DateTime.fromJSDate(date),
-      timezone: settings.system.timezone
-    })
-  }
+  const [completedHabitsMap] = useAtom(completedHabitsMapAtom)
+
+  // Get completed dates for calendar modifiers
+  const completedDates = useMemo(() => {
+    return new Set(Array.from(completedHabitsMap.keys()).map(date =>
+      getISODate({ dateTime: DateTime.fromISO(date), timezone: settings.system.timezone })
+    ))
+  }, [completedHabitsMap, settings.system.timezone])
 
   return (
     <div className="container mx-auto px-4 py-8">
@@ -40,7 +53,12 @@ export default function HabitCalendar() {
               onSelect={(e) => e && setSelectedDate(DateTime.fromJSDate(e))}
               className="rounded-md border"
               modifiers={{
-                completed: (date) => getHabitsForDate(date).length > 0,
+                completed: (date) => completedDates.has(
+                  getISODate({
+                    dateTime: DateTime.fromJSDate(date),
+                    timezone: settings.system.timezone
+                  })!
+                )
               }}
               modifiersClassNames={{
                 completed: 'bg-green-100 text-green-800 font-bold',
@@ -61,21 +79,57 @@ export default function HabitCalendar() {
           <CardContent>
             {selectedDate && (
               <ul className="space-y-2">
-                {habits.map((habit) => {
-                  const isCompleted = getHabitsForDate(selectedDate.toJSDate()).some((h: Habit) => h.id === habit.id)
-                  return (
-                    <li key={habit.id} className="flex items-center justify-between">
-                      <span>
-                        <Linkify>{habit.name}</Linkify>
-                      </span>
-                      {isCompleted ? (
-                        <Badge variant="default">Completed</Badge>
-                      ) : (
-                        <Badge variant="secondary">Not Completed</Badge>
-                      )}
-                    </li>
-                  )
-                })}
+                {habits
+                  .filter(habit => isHabitDue({
+                    habit,
+                    timezone: settings.system.timezone,
+                    date: selectedDate
+                  }))
+                  .map((habit) => {
+                    const habitsForDate = completedHabitsMap.get(getISODate({ dateTime: selectedDate, timezone: settings.system.timezone })) || []
+                    const completionsToday = habitsForDate.filter((h: Habit) => h.id === habit.id).length
+                    const isCompleted = completionsToday >= (habit.targetCompletions || 1)
+                    return (
+                      <li key={habit.id} className="flex items-center justify-between gap-2">
+                        <span>
+                          <Linkify>{habit.name}</Linkify>
+                        </span>
+                        <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2">
+                            {habit.targetCompletions && (
+                              <span className="text-sm text-muted-foreground">
+                                {completionsToday}/{habit.targetCompletions}
+                              </span>
+                            )}
+                            <button
+                              onClick={() => handleCompletePastHabit(habit, selectedDate)}
+                              disabled={isCompleted}
+                              className="relative h-4 w-4 hover:opacity-70 transition-opacity disabled:opacity-100"
+                            >
+                              {isCompleted ? (
+                                <CircleCheck className="h-4 w-4 text-green-500" />
+                              ) : (
+                                <div className="relative h-4 w-4">
+                                  <Circle className="absolute h-4 w-4 text-muted-foreground" />
+                                  <div
+                                    className="absolute h-4 w-4 rounded-full overflow-hidden"
+                                    style={{
+                                      background: `conic-gradient(
+                                        currentColor ${(completionsToday / (habit.targetCompletions ?? 1)) * 360}deg,
+                                        transparent ${(completionsToday / (habit.targetCompletions ?? 1)) * 360}deg 360deg
+                                      )`,
+                                      mask: 'radial-gradient(transparent 50%, black 51%)',
+                                      WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
+                                    }}
+                                  />
+                                </div>
+                              )}
+                            </button>
+                          </div>
+                        </div>
+                      </li>
+                    )
+                  })}
               </ul>
             )}
           </CardContent>

components/HabitItem.tsx

@@ -1,11 +1,10 @@
 import { Habit } from '@/lib/types'
 import { useAtom } from 'jotai'
-import { settingsAtom } from '@/lib/atoms'
+import { settingsAtom, pomodoroAtom } from '@/lib/atoms'
 import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, parseNaturalLanguageRRule, parseRRule } from '@/lib/utils'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import ReactMarkdown from 'react-markdown'
 import { Button } from '@/components/ui/button'
-import { Coins, Edit, Trash2, Check, Undo2, MoreVertical } from 'lucide-react'
+import { Coins, Edit, Trash2, Check, Undo2, MoreVertical, Timer } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,7 +14,6 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { useEffect, useState } from 'react'
 import { useHabits } from '@/hooks/useHabits'
-import { RRule } from 'rrule'
 import { INITIAL_RECURRENCE_RULE } from '@/lib/constants'
 
 interface HabitItemProps {
@@ -27,7 +25,7 @@ interface HabitItemProps {
 export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
   const { completeHabit, undoComplete } = useHabits()
   const [settings] = useAtom(settingsAtom)
-  const today = getTodayInTimezone(settings.system.timezone)
+  const [_, setPomo] = useAtom(pomodoroAtom)
   const completionsToday = habit.completions?.filter(completion =>
     isSameDate(t2d({ timestamp: completion, timezone: settings.system.timezone }), t2d({ timestamp: d2t({ dateTime: getNow({ timezone: settings.system.timezone }) }), timezone: settings.system.timezone }))
   ).length || 0
@@ -143,6 +141,16 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => {
+                setPomo((prev) => ({
+                  ...prev,
+                  show: true,
+                  selectedHabitId: habit.id
+                }))
+              }}>
+                <Timer className="mr-2 h-4 w-4" />
+                <span>Start Pomodoro</span>
+              </DropdownMenuItem>
               <DropdownMenuItem onClick={onEdit} className="sm:hidden">
                 <Edit className="mr-2 h-4 w-4" />
                 Edit

components/calendar.tsx

@@ -1,65 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { DayPicker } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside: "text-muted-foreground opacity-50",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-      }}
-      {...props}
-    />
-  )
-}
-Calendar.displayName = "Calendar"
-
-export { Calendar }
-