fix completed habits map

components/DailyOverview.tsx

@@ -9,7 +9,7 @@ import { cn, isHabitDueToday, getHabitFreq } from '@/lib/utils'
 import Link from 'next/link'
 import { useState, useEffect } from 'react'
 import { useAtom } from 'jotai'
-import { pomodoroAtom, settingsAtom, completedHabitsMapAtom } from '@/lib/atoms'
+import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, transientSettingsAtom } 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'
@@ -74,11 +74,11 @@ export default function DailyOverview({
               <div className="flex items-center justify-between mb-2">
                 <h3 className="font-semibold">Daily Habits</h3>
                 <Badge variant="secondary">
-                  {dailyHabits.filter(habit => {
+                  {`${dailyHabits.filter(habit => {
                     const completions = (completedHabitsMap.get(today) || [])
                       .filter(h => h.id === habit.id).length;
                     return completions >= (habit.targetCompletions || 1);
-                  }).length}/{dailyHabits.length} Completed
+                  }).length}/${dailyHabits.length} Completed`}
                 </Badge>
               </div>
               <ul className={`grid gap-2 transition-all duration-300 ease-in-out ${expandedHabits ? 'max-h-none' : 'max-h-[200px]'} overflow-hidden`}>

components/Dashboard.tsx

@@ -6,6 +6,7 @@ import DailyOverview from './DailyOverview'
 import HabitStreak from './HabitStreak'
 import CoinBalance from './CoinBalance'
 import { useHabits } from '@/hooks/useHabits'
+import { ViewToggle } from './ViewToggle'
 
 export default function Dashboard() {
   const [habitsData] = useAtom(habitsAtom)
@@ -18,7 +19,10 @@ export default function Dashboard() {
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold">Dashboard</h1>
+        {/* <ViewToggle /> */}
+      </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         <CoinBalance coinBalance={coinBalance} />
         <HabitStreak habits={habits} />

components/HabitCalendar.tsx

@@ -6,7 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Check, Circle, CircleCheck } from 'lucide-react'
-import { d2s, getNow, t2d, getCompletedHabitsForDate, isHabitDue, getISODate } from '@/lib/utils'
+import { d2s, getNow, t2d, getCompletedHabitsForDate, isHabitDue, getISODate, getCompletionsForToday, getCompletionsForDate } from '@/lib/utils'
 import { useAtom } from 'jotai'
 import { useHabits } from '@/hooks/useHabits'
 import { habitsAtom, settingsAtom, completedHabitsMapAtom } from '@/lib/atoms'
@@ -87,9 +87,8 @@ export default function HabitCalendar() {
                     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)
+                    const completions = getCompletionsForDate({ habit, date: selectedDate, timezone: settings.system.timezone })
+                    const isCompleted = completions >= (habit.targetCompletions || 1)
                     return (
                       <li key={habit.id} className="flex items-center justify-between gap-2">
                         <span>
@@ -99,7 +98,7 @@ export default function HabitCalendar() {
                           <div className="flex items-center gap-2">
                             {habit.targetCompletions && (
                               <span className="text-sm text-muted-foreground">
-                                {completionsToday}/{habit.targetCompletions}
+                                {completions}/{habit.targetCompletions}
                               </span>
                             )}
                             <button
@@ -116,8 +115,8 @@ export default function HabitCalendar() {
                                     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
+                                        currentColor ${(completions / (habit.targetCompletions ?? 1)) * 360}deg,
+                                        transparent ${(completions / (habit.targetCompletions ?? 1)) * 360}deg 360deg
                                       )`,
                                       mask: 'radial-gradient(transparent 50%, black 51%)',
                                       WebkitMask: 'radial-gradient(transparent 50%, black 51%)'

components/ViewToggle.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { useAtom } from 'jotai'
+import { CheckSquare, ListChecks } from 'lucide-react'
+import { transientSettingsAtom } from '@/lib/atoms'
+import type { ViewType } from '@/lib/types'
+
+interface ViewToggleProps {
+  defaultView?: ViewType
+  className?: string
+}
+
+export function ViewToggle({
+  defaultView = 'habits',
+  className
+}: ViewToggleProps) {
+  const [transientSettings, setTransientSettings] = useAtom(transientSettingsAtom)
+
+  const handleViewChange = (checked: boolean) => {
+    const newView = checked ? 'tasks' : 'habits'
+    setTransientSettings({
+      ...transientSettings,
+      viewType: newView,
+    })
+  }
+
+  return (
+    <div className={cn('inline-flex rounded-full bg-muted/50', className)}>
+      <div className="relative flex gap-0.5 rounded-full bg-background p-0.5">
+        <button
+          onClick={() => handleViewChange(false)}
+          className={cn(
+            'relative z-10 rounded-full px-3 py-1 text-xs font-medium transition-colors flex items-center gap-1',
+            transientSettings.viewType === 'habits' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          <ListChecks className="h-3 w-3" />
+          <span className="hidden sm:inline">Habits</span>
+        </button>
+        <button
+          onClick={() => handleViewChange(true)}
+          className={cn(
+            'relative z-10 rounded-full px-3 py-1 text-xs font-medium transition-colors flex items-center gap-1',
+            transientSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          <CheckSquare className="h-3 w-3" />
+          <span className="hidden sm:inline">Tasks</span>
+        </button>
+        <div
+          className={cn(
+            'absolute left-0.5 top-0.5 h-[calc(100%-0.25rem)] rounded-full bg-primary transition-transform',
+            transientSettings.viewType === 'habits' ? 'w-[calc(50%-0.125rem)]' : 'w-[calc(50%-0.125rem)] translate-x-[calc(100%+0.125rem)]'
+          )}
+        />
+      </div>
+    </div>
+  )
+}