Initial project setup for PhaseFlow

Set up Next.js 16 project with TypeScript for a training decision app
that integrates menstrual cycle phases with Garmin biometrics for
Hashimoto's thyroiditis management.

Stack: Next.js 16, React 19, Tailwind/shadcn, PocketBase, Drizzle,
Zod, Resend, Vitest, Biome, Lefthook, Nix dev environment.

Includes:
- 7 page routes (dashboard, login, settings, calendar, history, plan)
- 12 API endpoints (garmin, user, cycle, calendar, overrides, cron)
- Core lib utilities (decision engine, cycle phases, nutrition, ICS)
- Type definitions and component scaffolding
- Python script for Garmin token bootstrapping
- Initial unit tests for cycle utilities

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/calendar/day-cell.tsx

@@ -0,0 +1,38 @@
+// ABOUTME: Individual day cell for calendar views.
+// ABOUTME: Shows day number with phase-appropriate background color.
+import type { CyclePhase } from "@/types";
+
+interface DayCellProps {
+  date: Date;
+  cycleDay: number;
+  phase: CyclePhase;
+  isToday: boolean;
+  onClick?: () => void;
+}
+
+const PHASE_COLORS: Record<CyclePhase, string> = {
+  MENSTRUAL: "bg-blue-100",
+  FOLLICULAR: "bg-green-100",
+  OVULATION: "bg-purple-100",
+  EARLY_LUTEAL: "bg-yellow-100",
+  LATE_LUTEAL: "bg-red-100",
+};
+
+export function DayCell({
+  date,
+  cycleDay,
+  phase,
+  isToday,
+  onClick,
+}: DayCellProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`p-2 rounded ${PHASE_COLORS[phase]} ${isToday ? "ring-2 ring-black" : ""}`}
+    >
+      <span className="text-sm font-medium">{date.getDate()}</span>
+      <span className="text-xs text-gray-500 block">Day {cycleDay}</span>
+    </button>
+  );
+}

src/components/calendar/month-view.tsx

@@ -0,0 +1,32 @@
+// ABOUTME: Full month calendar view component.
+// ABOUTME: Displays calendar grid with phase colors and day details.
+interface MonthViewProps {
+  year: number;
+  month: number;
+  lastPeriodDate: Date;
+  cycleLength: number;
+}
+
+export function MonthView({
+  year,
+  month,
+  lastPeriodDate,
+  cycleLength,
+}: MonthViewProps) {
+  return (
+    <div className="rounded-lg border p-4">
+      <h2 className="text-xl font-bold mb-4">
+        {new Date(year, month).toLocaleDateString("en-US", {
+          month: "long",
+          year: "numeric",
+        })}
+      </h2>
+      {/* Calendar grid will be implemented here */}
+      <p className="text-gray-500">Month view placeholder</p>
+      <p className="text-xs text-gray-400">
+        Cycle length: {cycleLength} days, Last period:{" "}
+        {lastPeriodDate.toLocaleDateString()}
+      </p>
+    </div>
+  );
+}