Initial commit

components/HabitOverview.tsx

@@ -0,0 +1,64 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { BarChart } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { loadHabitsData } from '@/app/actions/data'
+import { Habit } from '@/lib/types'
+
+export default function HabitOverview() {
+  const [habits, setHabits] = useState<Habit[]>([])
+
+  useEffect(() => {
+    const fetchHabits = async () => {
+      const data = await loadHabitsData()
+      setHabits(data.habits)
+    }
+    fetchHabits()
+  }, [])
+
+  const today = new Date().toISOString().split('T')[0]
+
+  const completedToday = habits.filter(habit =>
+    habit.completions.includes(today)
+  ).length
+
+  const habitsByFrequency = habits.reduce((acc, habit) => ({
+    ...acc,
+    [habit.frequency]: (acc[habit.frequency] || 0) + 1
+  }), {} as Record<string, number>)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Habit Overview</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {/* Today's Progress */}
+          <div className="bg-secondary/20 p-4 rounded-lg">
+            <h3 className="font-semibold mb-2">Today&apos;s Progress</h3>
+            <div className="flex items-center justify-between">
+              <span>{completedToday}/{habits.length} completed</span>
+              <BarChart className="h-5 w-5" />
+            </div>
+          </div>
+
+          {/* Frequency Breakdown */}
+          <div>
+            <h3 className="font-semibold mb-2">Habit Frequency</h3>
+            <div className="space-y-2">
+              {Object.entries(habitsByFrequency).map(([frequency, count]) => (
+                <div key={frequency} className="flex items-center justify-between text-sm">
+                  <span className="capitalize">{frequency}</span>
+                  <span className="bg-secondary/30 px-2 py-1 rounded">
+                    {count} habits
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+