init

2026-06-22 11:32:27 +02:00
parent bf8624c954
commit d908965c95
16 changed files with 642 additions and 103 deletions
--- a/components/dashboard-analysis-card.tsx
+++ b/components/dashboard-analysis-card.tsx
@@ -1,57 +1,260 @@
 "use client";

-import { useActionState } from "react";
-import { Sparkles } from "lucide-react";
+import Link from "next/link";
+import { useActionState, useMemo, useState } from "react";
+import {
+  format,
+  startOfMonth,
+  endOfMonth,
+  startOfWeek,
+  endOfWeek,
+  addDays,
+  addMonths,
+  subMonths,
+  isSameMonth,
+  isSameDay,
+  isToday,
+} from "date-fns";
+import { pl } from "date-fns/locale";
+import { Activity, ChevronLeft, ChevronRight, Dumbbell, Sparkles } from "lucide-react";
 import { generateDashboardAnalysisAction } from "@/app/ai/actions";
-import { formatDate } from "@/lib/format";
+import { formatDate, formatDistance, formatDuration, formatPace } from "@/lib/format";
 import type { SerializedAiAnalysis } from "@/lib/models/analysis";

-type Props = {
-  analysis: SerializedAiAnalysis | null;
+export type DayRun = {
+  id: string;
+  name: string;
+  startTime: string;
+  distanceM: number;
+  durationSec: number;
+  avgPaceSecPerKm: number;
 };

-export function DashboardAnalysisCard({ analysis }: Props) {
+export type DayWorkout = {
+  id: string;
+  name: string;
+  date: string;
+  exerciseCount: number;
+};
+
+type Props = {
+  analyses: SerializedAiAnalysis[];
+  runs: DayRun[];
+  workouts: DayWorkout[];
+};
+
+function dayKey(date: Date): string {
+  return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+}
+
+export function DashboardAnalysisCard({ analyses, runs, workouts }: Props) {
  const [state, formAction, pending] = useActionState(generateDashboardAnalysisAction, null);

+  // Map each calendar day to its (latest) analysis. Selecting a day is a pure
+  // local lookup, no server round-trip.
+  const byDay = useMemo(() => {
+    const map = new Map<string, SerializedAiAnalysis>();
+    for (const a of analyses) {
+      const key = dayKey(new Date(a.createdAt));
+      if (!map.has(key)) map.set(key, a); // analyses are newest-first
+    }
+    return map;
+  }, [analyses]);
+
+  const [currentMonth, setCurrentMonth] = useState(() => new Date());
+  const [selectedDate, setSelectedDate] = useState<Date>(() => new Date());
+
+  function hasAnalysis(date: Date) {
+    return byDay.has(dayKey(date));
+  }
+
+  const monthStart = startOfMonth(currentMonth);
+  const monthEnd = endOfMonth(monthStart);
+  const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+  const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
+
+  const days: Date[] = [];
+  let cursor = calendarStart;
+  while (cursor <= calendarEnd) {
+    days.push(cursor);
+    cursor = addDays(cursor, 1);
+  }
+
+  const weekDays = ["Pn", "Wt", "Śr", "Cz", "Pt", "Sb", "Nd"];
+
+  const selectedAnalysis = byDay.get(dayKey(selectedDate)) ?? null;
+  const viewingToday = isToday(selectedDate);
+
+  const dayRuns = runs.filter((r) => isSameDay(new Date(r.startTime), selectedDate));
+  const dayWorkouts = workouts.filter((w) => isSameDay(new Date(w.date), selectedDate));
+
  return (
-    <section className="flex flex-col gap-3 rounded-lg border border-muted/40 bg-surface p-4">
+    <section className="flex flex-col gap-4 rounded-lg border border-muted/40 bg-surface p-4">
      <div className="flex items-center justify-between">
        <h2 className="flex items-center gap-1.5 text-lg font-semibold text-fg">
          <Sparkles size={18} className="text-accent" />
          Kondycja treningowa
        </h2>
-        <form action={formAction}>
-          <button
-            type="submit"
-            disabled={pending}
-            className="rounded-md bg-accent px-3 py-1.5 text-sm font-semibold text-fg transition-opacity hover:opacity-90 disabled:opacity-50"
-          >
-            {pending ? "Analizuję..." : analysis ? "Odśwież analizę" : "Generuj analizę"}
-          </button>
-        </form>
+        {viewingToday && (
+          <form action={formAction}>
+            <button
+              type="submit"
+              disabled={pending}
+              className="rounded-md bg-accent px-3 py-1.5 text-sm font-semibold text-fg transition-opacity hover:opacity-90 disabled:opacity-50"
+            >
+              {pending ? "Analizuję..." : selectedAnalysis ? "Odśwież analizę" : "Generuj analizę"}
+            </button>
+          </form>
+        )}
      </div>

      {state && "error" in state ? <p className="text-sm text-accent">{state.error}</p> : null}

-      {analysis ? (
-        <div className="flex flex-col gap-2">
-          <p className="text-sm text-fg/90">{analysis.summary}</p>
-          {analysis.tips.length > 0 ? (
-            <ul className="list-disc pl-5 text-sm text-fg/80">
-              {analysis.tips.map((tip, index) => (
-                <li key={index}>{tip}</li>
-              ))}
-            </ul>
-          ) : null}
-          <p className="text-xs text-fg/40">
-            {formatDate(analysis.createdAt)} · {analysis.model}
-          </p>
+      <div className="flex flex-col gap-4 sm:flex-row">
+        <div className="min-w-[280px]">
+          <div className="mb-2 flex items-center justify-between">
+            <button
+              type="button"
+              onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
+              className="rounded p-1 text-fg/60 transition-colors hover:text-fg"
+            >
+              <ChevronLeft size={16} />
+            </button>
+            <span className="text-sm font-medium capitalize text-fg">
+              {format(currentMonth, "LLLL yyyy", { locale: pl })}
+            </span>
+            <button
+              type="button"
+              onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
+              className="rounded p-1 text-fg/60 transition-colors hover:text-fg"
+            >
+              <ChevronRight size={16} />
+            </button>
+          </div>
+
+          <div className="grid grid-cols-7 gap-1 text-center text-xs text-fg/50">
+            {weekDays.map((d) => (
+              <div key={d} className="py-1">
+                {d}
+              </div>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-7 gap-1">
+            {days.map((d, i) => {
+              const inMonth = isSameMonth(d, monthStart);
+              const has = hasAnalysis(d);
+              const today = isToday(d);
+              const selectable = has || today;
+              const selected = isSameDay(d, selectedDate);
+
+              return (
+                <button
+                  type="button"
+                  key={i}
+                  onClick={() => selectable && setSelectedDate(d)}
+                  disabled={!selectable}
+                  className={[
+                    "relative flex h-8 w-full items-center justify-center rounded text-xs transition-colors",
+                    !inMonth && "opacity-30",
+                    selectable && !selected && "cursor-pointer text-fg hover:bg-accent/20",
+                    selected && "bg-accent font-semibold text-fg",
+                    !selectable && "cursor-default text-fg/40",
+                    today && !selected && "ring-1 ring-accent/50",
+                  ]
+                    .filter(Boolean)
+                    .join(" ")}
+                >
+                  {d.getDate()}
+                  {has && !selected && (
+                    <span className="absolute bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-accent" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="mt-4 flex flex-col gap-1.5">
+            <p className="text-xs font-medium text-fg/50">
+              Treningi · {format(selectedDate, "d MMM yyyy", { locale: pl })}
+            </p>
+            {dayRuns.length === 0 && dayWorkouts.length === 0 ? (
+              <p className="text-xs text-fg/40">Brak treningów tego dnia.</p>
+            ) : (
+              <ul className="flex flex-col gap-1.5">
+                {dayRuns.map((run) => (
+                  <li key={run.id}>
+                    <Link
+                      href={`/running/${run.id}`}
+                      className="flex items-center gap-2 rounded-md border border-muted/40 bg-bg/40 px-2.5 py-1.5 transition-colors hover:border-accent/60"
+                    >
+                      <Activity size={14} className="shrink-0 text-accent" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-xs font-medium text-fg">
+                          {run.name}
+                        </span>
+                        <span className="block text-[11px] text-fg/55">
+                          {formatDistance(run.distanceM)} · {formatDuration(run.durationSec)} ·{" "}
+                          {formatPace(run.avgPaceSecPerKm)}
+                        </span>
+                      </span>
+                    </Link>
+                  </li>
+                ))}
+                {dayWorkouts.map((workout) => (
+                  <li key={workout.id}>
+                    <Link
+                      href={`/strength/${workout.id}`}
+                      className="flex items-center gap-2 rounded-md border border-muted/40 bg-bg/40 px-2.5 py-1.5 transition-colors hover:border-accent/60"
+                    >
+                      <Dumbbell size={14} className="shrink-0 text-accent" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-xs font-medium text-fg">
+                          {workout.name}
+                        </span>
+                        <span className="block text-[11px] text-fg/55">
+                          {workout.exerciseCount}{" "}
+                          {workout.exerciseCount === 1 ? "ćwiczenie" : "ćwiczeń"}
+                        </span>
+                      </span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
        </div>
-      ) : (
-        <p className="text-sm text-fg/60">
-          Wygeneruj kompleksową analizę kondycji łączącą dane biegowe, siłowe, HRV i sen.
-        </p>
-      )}
+
+        <div className="flex-1">
+          {selectedAnalysis ? (
+            <div className="flex flex-col gap-2">
+              <p className="text-xs font-medium text-fg/50">
+                {format(selectedDate, "d MMMM yyyy", { locale: pl })}
+              </p>
+              <p className="text-sm text-fg/90">{selectedAnalysis.summary}</p>
+              {selectedAnalysis.tips.length > 0 && (
+                <ul className="list-disc pl-5 text-sm text-fg/80">
+                  {selectedAnalysis.tips.map((tip, index) => (
+                    <li key={index}>{tip}</li>
+                  ))}
+                </ul>
+              )}
+              <p className="text-xs text-fg/40">
+                {formatDate(selectedAnalysis.createdAt)} · {selectedAnalysis.model}
+              </p>
+            </div>
+          ) : viewingToday ? (
+            <p className="text-sm text-fg/60">
+              Brak analizy na dziś. Wygeneruj kompleksową analizę kondycji łączącą dane biegowe,
+              siłowe, HRV i sen.
+            </p>
+          ) : (
+            <p className="text-sm text-fg/60">
+              Wybierz dzień oznaczony kropką, aby zobaczyć analizę z tego dnia.
+            </p>
+          )}
+        </div>
+      </div>
    </section>
  );
 }