Merge pull request #1330 from FloMaetschke/feature/injection-site-in-intake-history

src/__tests__/baselines/source-function-lines.json

@@ -1,7 +1,7 @@
 {
   "$comment": "Production functions over 200 lines, keyed \"file :: name\", and their length. Maintained by src/__tests__/source-size-ratchet.test.ts.",
   "count": 345,
-  "total": 111918,
+  "total": 111894,
   "entries": {
     "app/achievements/page.tsx :: AchievementsPage": 206,
     "app/api/admin/backups/upload/route.ts :: apiHandler(arg)": 275,
@@ -156,7 +156,7 @@
     "components/medications/glp1-medication-card.tsx :: Glp1MedicationCard": 405,
     "components/medications/injection-site-picker.tsx :: InjectionSitePicker": 287,
     "components/medications/intake-history-editable.tsx :: IntakeHistoryEditable": 224,
-    "components/medications/intake-history-list-v2.tsx :: IntakeHistoryListV2": 427,
+    "components/medications/intake-history-list-v2.tsx :: IntakeHistoryListV2": 403,
     "components/medications/intake-import-dialog.tsx :: IntakeImportDialog": 208,
     "components/medications/log-intake-dialog.tsx :: LogIntakeDialog": 267,
     "components/medications/medication-card.tsx :: MedicationCard": 413,

src/components/medications/__tests__/intake-history-list-v2.test.tsx

@@ -46,6 +46,7 @@ type IntakeRow = {
   takenAt: string | null;
   skipped: boolean;
   source: "WEB" | "API" | "REMINDER" | "IMPORT";
+  injectionSite?: string | null;
   createdAt: string;
 };
 
@@ -347,3 +348,50 @@ describe("<IntakeHistoryListV2> — sort indicators", () => {
     expect(html).not.toContain(">Next<");
   });
 });
+
+describe("<IntakeHistoryListV2> — injection site", () => {
+  const rows: IntakeRow[] = [
+    {
+      id: "evt-site",
+      medicationId: "med-1",
+      scheduledFor: "2026-05-15T08:00:00.000Z",
+      takenAt: "2026-05-15T08:02:00.000Z",
+      skipped: false,
+      source: "WEB",
+      injectionSite: "THIGH_LEFT",
+      createdAt: "2026-05-15T08:02:00.000Z",
+    },
+    {
+      id: "evt-nosite",
+      medicationId: "med-1",
+      scheduledFor: "2026-05-14T08:00:00.000Z",
+      takenAt: "2026-05-14T08:02:00.000Z",
+      skipped: false,
+      source: "WEB",
+      injectionSite: null,
+      createdAt: "2026-05-14T08:02:00.000Z",
+    },
+  ];
+
+  it("renders the localised site next to the status of an injected dose", () => {
+    const client = makeClient();
+    seedIntake(client, "med-1", rows);
+    const html = render(<IntakeHistoryListV2 medicationId="med-1" />, client);
+    expect(html).toContain("Left thigh");
+    expect(html).toContain('aria-label="Injection site: Left thigh"');
+    // One chip for the injected dose, none for the dose without a site.
+    expect(html.match(/data-slot="intake-injection-site"/g)).toHaveLength(1);
+  });
+
+  it("speaks German when the locale is de", () => {
+    const client = makeClient();
+    seedIntake(client, "med-1", rows);
+    const html = render(
+      <IntakeHistoryListV2 medicationId="med-1" />,
+      client,
+      "de",
+    );
+    expect(html).toContain("Linker Oberschenkel");
+    expect(html).toContain("Injektionsstelle: Linker Oberschenkel");
+  });
+});

src/components/medications/intake-history-list-v2.tsx

@@ -14,7 +14,12 @@ import {
   Check,
   SkipForward,
   MoreHorizontal,
+  MapPin,
 } from "lucide-react";
+import {
+  describeInjectionSite,
+  type InjectionSiteKey,
+} from "@/lib/medications/injection-sites";
 
 import { useAuth } from "@/hooks/use-auth";
 import { useIsMobile } from "@/hooks/use-is-mobile";
@@ -94,6 +99,12 @@ export interface IntakeEvent {
   source: IntakeSourceValue;
   /** v1.42.2 — recorded by the server (`autoMarkTaken`), not the person. */
   autoRecorded?: boolean;
+  /**
+   * Where an injected dose went. Set only for medications with
+   * `trackInjectionSites` on and only when the person picked a site; the
+   * list renders it as a badge so the rotation is visible in the history.
+   */
+  injectionSite?: InjectionSiteKey | null;
   createdAt: string;
 }
 
@@ -400,25 +411,15 @@ export function IntakeHistoryListV2({
                           {formatters.dateTime(event.scheduledFor)}
                         </TableCell>
                         <TableCell>
-                          {isTaken ? (
-                            <Badge
-                              variant="secondary"
-                              className="bg-success/15 text-success gap-1 text-xs"
-                            >
-                              <Check aria-hidden="true" className="h-3 w-3" />
-                              {t("medications.intakeHistoryStatusTaken")}
-                            </Badge>
-                          ) : isSkipped ? (
-                            <Badge
-                              variant="outline"
-                              className="text-muted-foreground gap-1 text-xs"
-                            >
-                              <SkipForward
-                                aria-hidden="true"
-                                className="h-3 w-3"
-                              />
-                              {t("medications.intakeHistoryStatusSkipped")}
-                            </Badge>
+                          <IntakeStatusBadge
+                            taken={isTaken}
+                            skipped={isSkipped}
+                          />
+                          {event.injectionSite ? (
+                            <InjectionSiteBadge
+                              site={event.injectionSite}
+                              className="ml-1.5"
+                            />
                           ) : null}
                         </TableCell>
                         <TableCell>
@@ -506,28 +507,14 @@ export function IntakeHistoryListV2({
                               {formatters.dateTime(event.scheduledFor)}
                             </p>
                             <div className="flex flex-wrap items-center gap-1.5 pt-0.5">
-                              {isTaken ? (
-                                <Badge
-                                  variant="secondary"
-                                  className="bg-success/15 text-success gap-1 text-xs"
-                                >
-                                  <Check
-                                    aria-hidden="true"
-                                    className="h-3 w-3"
-                                  />
-                                  {t("medications.intakeHistoryStatusTaken")}
-                                </Badge>
-                              ) : isSkipped ? (
-                                <Badge
-                                  variant="outline"
-                                  className="text-muted-foreground gap-1 text-xs"
-                                >
-                                  <SkipForward
-                                    aria-hidden="true"
-                                    className="h-3 w-3"
-                                  />
-                                  {t("medications.intakeHistoryStatusSkipped")}
-                                </Badge>
+                              <IntakeStatusBadge
+                                taken={isTaken}
+                                skipped={isSkipped}
+                              />
+                              {event.injectionSite ? (
+                                <InjectionSiteBadge
+                                  site={event.injectionSite}
+                                />
                               ) : null}
                               <Badge
                                 variant="outline"
@@ -686,3 +673,68 @@ function SortHeaderButton({
     </button>
   );
 }
+
+/**
+ * Injection-site chip for one history row. The visible text is the
+ * localised site name (same vocabulary as the body-map picker); the
+ * accessible name prefixes it with "Injection site" so a screen reader
+ * does not announce a bare "Left thigh" next to the status.
+ */
+function InjectionSiteBadge({
+  site,
+  className,
+}: {
+  site: InjectionSiteKey;
+  className?: string;
+}) {
+  const { t } = useTranslations();
+  const siteName = t(describeInjectionSite(site));
+  return (
+    <Badge
+      variant="outline"
+      className={`text-muted-foreground gap-1 text-xs font-normal ${className ?? ""}`.trim()}
+      aria-label={t("medications.intakeHistoryInjectionSite", {
+        site: siteName,
+      })}
+      data-slot="intake-injection-site"
+    >
+      <MapPin aria-hidden="true" className="h-3 w-3" />
+      {siteName}
+    </Badge>
+  );
+}
+
+/**
+ * Taken / skipped chip shared by the desktop table and the mobile cards.
+ * Renders nothing for a row that is neither (the `status:"completed"`
+ * query keeps those out, but the shape stays defensive).
+ */
+function IntakeStatusBadge({
+  taken,
+  skipped,
+}: {
+  taken: boolean;
+  skipped: boolean;
+}) {
+  const { t } = useTranslations();
+  if (taken) {
+    return (
+      <Badge
+        variant="secondary"
+        className="bg-success/15 text-success gap-1 text-xs"
+      >
+        <Check aria-hidden="true" className="h-3 w-3" />
+        {t("medications.intakeHistoryStatusTaken")}
+      </Badge>
+    );
+  }
+  if (skipped) {
+    return (
+      <Badge variant="outline" className="text-muted-foreground gap-1 text-xs">
+        <SkipForward aria-hidden="true" className="h-3 w-3" />
+        {t("medications.intakeHistoryStatusSkipped")}
+      </Badge>
+    );
+  }
+  return null;
+}