21: habit analytics - recharts line/bar chart for 30-day completions and top streaks

apps/web/app/(dashboard)/habits/page.tsx

@@ -7,6 +7,7 @@ import { Badge } from "@/components/ui/badge";
 import { HabitCreateDialog } from "@/components/habits/habit-create-dialog";
 import { HabitCompletionDialog } from "@/components/habits/habit-completion-dialog";
 import { HabitCalendarHeatmap } from "@/components/habits/habit-calendar-heatmap";
+import { HabitAnalytics } from "@/components/habits/habit-analytics";
 import { toast } from "sonner";
 
 interface Habit {
@@ -214,6 +215,11 @@ export default function HabitsPage() {
         </div>
       )}
 
+      {/* Analytics */}
+      <div className="mt-4">
+        <HabitAnalytics domainId={domainId || ""} habits={habits} />
+      </div>
+
       <HabitCreateDialog
         open={createOpen}
         onOpenChange={setCreateOpen}

apps/web/components/habits/habit-analytics.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, LineChart, Line, CartesianGrid } from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { BarChart3, TrendingUp } from 'lucide-react';
+
+interface HabitAnalyticsProps {
+  domainId: string;
+  habits: { id: string; name: string }[];
+}
+
+interface StreakItem {
+  habitId: string;
+  habitName: string;
+  currentStreak: number;
+  bestStreak: number;
+}
+
+interface CompletionDay {
+  date: string;
+  count: number;
+}
+
+export function HabitAnalytics({ domainId, habits }: HabitAnalyticsProps) {
+  const [open, setOpen] = useState(false);
+  const [streaks, setStreaks] = useState<StreakItem[]>([]);
+  const [completions, setCompletions] = useState<CompletionDay[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setLoading(true);
+
+    Promise.all([
+      fetch('/api/habits/streaks').then((r) => r.json()),
+      ...habits.map((h) =>
+        fetch(
+          '/api/domains/' + domainId + '/habits/' + h.id + '/completions?from=' + daysAgo(30) + '&order=asc&limit=365'
+        ).then((r) => r.json())
+      ),
+    ])
+      .then(([streaksData, ...completionsData]) => {
+        setStreaks((streaksData.streaks || []).slice(0, 5));
+
+        const dateMap = new Map<string, number>();
+        for (const data of completionsData) {
+          for (const item of data.items || []) {
+            const d = item.date?.split('T')[0];
+            if (d) dateMap.set(d, (dateMap.get(d) || 0) + 1);
+          }
+        }
+        const sorted = Array.from(dateMap.entries())
+          .sort(([a], [b]) => a.localeCompare(b))
+          .map(([date, count]) => ({ date, count }));
+        setCompletions(sorted);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [open, domainId, habits]);
+
+  if (!open) {
+    return (
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        <BarChart3 className="mr-2 h-4 w-4" />
+        Show analytics
+      </Button>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold">Analytics (30 days)</h3>
+        <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>
+          Hide
+        </Button>
+      </div>
+
+      {loading ? (
+        <p className="text-sm text-muted-foreground">Loading analytics...</p>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2">
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="flex items-center gap-2 text-sm">
+                <TrendingUp className="h-4 w-4 text-primary" />
+                Daily Completions
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {completions.length === 0 ? (
+                <p className="py-4 text-center text-xs text-muted-foreground">No data yet</p>
+              ) : (
+                <ResponsiveContainer width="100%" height={160}>
+                  <LineChart data={completions}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+                    <XAxis dataKey="date" tick={{ fontSize: 10 }} tickFormatter={(v) => v.slice(5)} />
+                    <YAxis allowDecimals={false} tick={{ fontSize: 10 }} />
+                    <Tooltip />
+                    <Line type="monotone" dataKey="count" stroke="hsl(var(--primary))" strokeWidth={2} dot={false} />
+                  </LineChart>
+                </ResponsiveContainer>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="flex items-center gap-2 text-sm">
+                <BarChart3 className="h-4 w-4 text-primary" />
+                Top Streaks
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {streaks.length === 0 ? (
+                <p className="py-4 text-center text-xs text-muted-foreground">No streaks yet</p>
+              ) : (
+                <ResponsiveContainer width="100%" height={160}>
+                  <BarChart data={streaks} layout="vertical">
+                    <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+                    <XAxis type="number" tick={{ fontSize: 10 }} />
+                    <YAxis type="category" dataKey="habitName" width={80} tick={{ fontSize: 10 }} />
+                    <Tooltip />
+                    <Bar dataKey="bestStreak" fill="hsl(var(--primary))" radius={[0, 4, 4, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function daysAgo(n: number): string {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return d.toISOString().split('T')[0];
+}