Implement ST-302 planning form flow

components/planning/activity-form.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { useActionState, useMemo, useState } from "react";
+import { createActivityAction } from "@/app/planning/actions";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import {
+  ACTIVITY_DURATION_SUGGESTIONS,
+  ACTIVITY_IMPACT_OPTIONS,
+  ACTIVITY_PRIORITY_OPTIONS,
+} from "@/lib/planning/form-options";
+import type { ActivityCategory } from "@/lib/planning/types";
+import { cn } from "@/lib/utils";
+
+type ActivityFormProps = {
+  categories: ActivityCategory[];
+};
+
+export function ActivityForm({ categories }: ActivityFormProps) {
+  const [, formAction, isPending] = useActionState(createActivityAction, null);
+  const [name, setName] = useState("");
+  const [categoryId, setCategoryId] = useState<string>(categories[0]?.id ?? "");
+  const [durationMinutes, setDurationMinutes] = useState("30");
+  const [impactLevel, setImpactLevel] = useState<"laag" | "midden" | "hoog">("midden");
+  const [priorityLevel, setPriorityLevel] = useState<"laag" | "normaal" | "hoog">("normaal");
+
+  const selectedCategory = useMemo(
+    () => categories.find((category) => category.id === categoryId) ?? null,
+    [categories, categoryId],
+  );
+
+  return (
+    <form action={formAction} className="space-y-6" aria-busy={isPending}>
+      <input type="hidden" name="categoryId" value={categoryId} />
+      <input type="hidden" name="impactLevel" value={impactLevel} />
+      <input type="hidden" name="priorityLevel" value={priorityLevel} />
+
+      <Card className="rounded-[1.75rem] border border-border/60 bg-card/90 py-0 shadow-[0_18px_60px_rgba(71,85,105,0.1)]">
+        <CardHeader className="pb-0">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
+            Dagplanning
+          </p>
+          <CardTitle className="font-[family-name:var(--font-display)] text-3xl text-slate-900">
+            Plan een activiteit voor vandaag
+          </CardTitle>
+          <CardDescription className="max-w-2xl text-sm leading-7 text-muted-foreground">
+            Houd het klein en concreet. Je legt alleen de basis vast: wat je wilt doen,
+            hoe lang het ongeveer duurt en hoe zwaar het aanvoelt.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6 pb-6">
+          <div className="space-y-2">
+            <Label htmlFor="activity-name" className="text-slate-800">
+              Naam van de activiteit
+            </Label>
+            <Input
+              id="activity-name"
+              name="name"
+              className="h-12 rounded-[1.25rem] bg-background/80 px-4 text-base"
+              disabled={isPending}
+              maxLength={120}
+              placeholder="Bijvoorbeeld: was opvouwen"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+            />
+          </div>
+
+          <div className="grid gap-5 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label className="text-slate-800">Categorie</Label>
+              <Select
+                disabled={isPending}
+                value={categoryId}
+                onValueChange={(value) => setCategoryId(value ?? categories[0]?.id ?? "")}
+              >
+                <SelectTrigger className="h-12 w-full rounded-[1.25rem] bg-background/80 px-4 text-base">
+                  <SelectValue placeholder="Kies een categorie" />
+                </SelectTrigger>
+                <SelectContent>
+                  {categories.map((category) => (
+                    <SelectItem key={category.id} value={category.id}>
+                      {category.labelNl}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {selectedCategory ? (
+                <p className="text-sm leading-7 text-muted-foreground">
+                  Gekozen categorie: <strong>{selectedCategory.labelNl}</strong>.
+                </p>
+              ) : null}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="duration-minutes" className="text-slate-800">
+                Geschatte duur in minuten
+              </Label>
+              <Input
+                id="duration-minutes"
+                name="durationMinutes"
+                className="h-12 rounded-[1.25rem] bg-background/80 px-4 text-base"
+                disabled={isPending}
+                inputMode="numeric"
+                min={1}
+                max={720}
+                step={1}
+                type="number"
+                value={durationMinutes}
+                onChange={(event) => setDurationMinutes(event.target.value)}
+              />
+              <div className="flex flex-wrap gap-2">
+                {ACTIVITY_DURATION_SUGGESTIONS.map((value) => (
+                  <button
+                    key={value}
+                    type="button"
+                    disabled={isPending}
+                    onClick={() => setDurationMinutes(String(value))}
+                    className={cn(
+                      buttonVariants({
+                        variant: durationMinutes === String(value) ? "default" : "outline",
+                        size: "sm",
+                      }),
+                      "rounded-full px-3",
+                    )}
+                  >
+                    {value} min
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="grid gap-5 md:grid-cols-2">
+            <div className="space-y-3">
+              <div className="space-y-1">
+                <Label className="text-sm font-semibold text-slate-900">
+                  Verwachte impact
+                </Label>
+                <p className="text-sm leading-7 text-muted-foreground">
+                  Kies hoe belastend deze activiteit voor jou aanvoelt.
+                </p>
+              </div>
+              <div className="grid gap-3">
+                {ACTIVITY_IMPACT_OPTIONS.map((option) => {
+                  const isSelected = impactLevel === option.value;
+
+                  return (
+                    <button
+                      key={option.value}
+                      type="button"
+                      disabled={isPending}
+                      onClick={() => setImpactLevel(option.value)}
+                      className={cn(
+                        "rounded-[1.25rem] border px-4 py-4 text-left transition",
+                        isSelected
+                          ? "border-primary bg-primary text-primary-foreground shadow-[0_12px_30px_rgba(22,58,43,0.18)]"
+                          : "border-border/60 bg-background/80 text-slate-900 hover:border-primary/35",
+                        isPending && "pointer-events-none opacity-70",
+                      )}
+                    >
+                      <span className="block text-sm font-semibold">{option.label}</span>
+                      <span
+                        className={cn(
+                          "mt-2 block text-sm leading-6",
+                          isSelected
+                            ? "text-primary-foreground/85"
+                            : "text-muted-foreground",
+                        )}
+                      >
+                        {option.description}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <div className="space-y-1">
+                <Label className="text-sm font-semibold text-slate-900">
+                  Prioriteit voor vandaag
+                </Label>
+                <p className="text-sm leading-7 text-muted-foreground">
+                  Dit helpt straks om bewust te herschikken zonder alles te verliezen.
+                </p>
+              </div>
+              <div className="grid gap-3">
+                {ACTIVITY_PRIORITY_OPTIONS.map((option) => {
+                  const isSelected = priorityLevel === option.value;
+
+                  return (
+                    <button
+                      key={option.value}
+                      type="button"
+                      disabled={isPending}
+                      onClick={() => setPriorityLevel(option.value)}
+                      className={cn(
+                        "rounded-[1.25rem] border px-4 py-4 text-left transition",
+                        isSelected
+                          ? "border-primary bg-primary text-primary-foreground shadow-[0_12px_30px_rgba(22,58,43,0.18)]"
+                          : "border-border/60 bg-background/80 text-slate-900 hover:border-primary/35",
+                        isPending && "pointer-events-none opacity-70",
+                      )}
+                    >
+                      <span className="block text-sm font-semibold">{option.label}</span>
+                      <span
+                        className={cn(
+                          "mt-2 block text-sm leading-6",
+                          isSelected
+                            ? "text-primary-foreground/85"
+                            : "text-muted-foreground",
+                        )}
+                      >
+                        {option.description}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <p className="text-sm leading-7 text-muted-foreground">
+          {isPending
+            ? "Je activiteit wordt opgeslagen..."
+            : "Je activiteit wordt vandaag toegevoegd met status `gepland`."}
+        </p>
+
+        <Button
+          type="submit"
+          size="lg"
+          disabled={
+            isPending ||
+            !name.trim() ||
+            !categoryId ||
+            !durationMinutes.trim()
+          }
+          className="h-11 rounded-full px-5"
+        >
+          {isPending ? "Activiteit opslaan..." : "Plan activiteit"}
+        </Button>
+      </div>
+    </form>
+  );
+}

components/planning/today-activities-list.tsx

@@ -0,0 +1,99 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { ActivityCategory, ActivityRecord } from "@/lib/planning/types";
+
+type TodayActivitiesListProps = {
+  activities: ActivityRecord[];
+  categories: ActivityCategory[];
+};
+
+function getCategoryLabel(categories: ActivityCategory[], categoryId: string) {
+  return categories.find((category) => category.id === categoryId)?.labelNl ?? "Onbekende categorie";
+}
+
+function formatImpactLabel(value: ActivityRecord["impactLevel"]) {
+  if (value === "laag") {
+    return "Laag";
+  }
+
+  if (value === "midden") {
+    return "Midden";
+  }
+
+  return "Hoog";
+}
+
+function formatPriorityLabel(value: ActivityRecord["priorityLevel"]) {
+  if (value === "laag") {
+    return "Laag";
+  }
+
+  if (value === "hoog") {
+    return "Hoog";
+  }
+
+  return "Normaal";
+}
+
+export function TodayActivitiesList({
+  activities,
+  categories,
+}: TodayActivitiesListProps) {
+  return (
+    <Card className="rounded-[1.75rem] border border-border/60 bg-card/90 py-0 shadow-[0_12px_40px_rgba(71,85,105,0.08)]">
+      <CardHeader className="pb-0">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
+          Vandaag gepland
+        </p>
+        <CardTitle className="text-lg text-slate-900">
+          {activities.length === 0
+            ? "Nog geen activiteiten gepland"
+            : `${activities.length} ${activities.length === 1 ? "activiteit" : "activiteiten"}`}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4 pb-6">
+        {activities.length === 0 ? (
+          <CardDescription className="text-sm leading-7 text-muted-foreground">
+            Je dag is nog leeg. Plan eerst een kleine concrete activiteit om de flow op gang te brengen.
+          </CardDescription>
+        ) : (
+          activities.map((activity) => (
+            <div
+              key={activity.id}
+              className="rounded-[1.25rem] border border-border/60 bg-background/80 px-4 py-4"
+            >
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div>
+                  <p className="text-sm font-semibold text-slate-900">{activity.name}</p>
+                  <p className="mt-1 text-sm leading-7 text-muted-foreground">
+                    {getCategoryLabel(categories, activity.categoryId)}
+                  </p>
+                </div>
+                <span className="rounded-full bg-secondary px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-secondary-foreground">
+                  Gepland
+                </span>
+              </div>
+
+              <div className="mt-4 grid gap-3 text-sm leading-7 text-slate-700 sm:grid-cols-3">
+                <p>
+                  <strong>Duur:</strong> {activity.durationMinutes} min
+                </p>
+                <p>
+                  <strong>Impact:</strong> {formatImpactLabel(activity.impactLevel)}
+                </p>
+                <p>
+                  <strong>Prioriteit:</strong> {formatPriorityLabel(activity.priorityLevel)}
+                </p>
+              </div>
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  );
+}