From 19ae91f80ae6b624a34830b54b1b62b19151185c Mon Sep 17 00:00:00 2001
From: haritowa <6107211+haritowa@users.noreply.github.com>
Date: Wed, 21 Oct 2026 13:11:53 +0000
Subject: [PATCH 1/5] fix(medications): end a course on the person's day, as a
 date

"End medication" sent new Date().toISOString(), a full instant, against
an endsOn that only accepts YYYY-MM-DD, so every press answered 422 and
the toast said the medication could not be ended. The instant's date was
also the UTC one, a day off around midnight for anyone not on UTC.

The button now sends the person's calendar day in their timezone
(userDayKey), the same day key the medication card uses.
---
 .../destructive-zone-section.test.ts          | 40 +++++++++++++++++++
 .../sections/destructive-zone-section.tsx     | 22 ++++++++--
 2 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 src/components/medications/sections/__tests__/destructive-zone-section.test.ts

diff --git a/src/components/medications/sections/__tests__/destructive-zone-section.test.ts b/src/components/medications/sections/__tests__/destructive-zone-section.test.ts
new file mode 100644
index 000000000..b1702880f
--- /dev/null
+++ b/src/components/medications/sections/__tests__/destructive-zone-section.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+
+import { updateMedicationSchema } from "@/lib/validations/medication/create-update";
+
+import { endCourseBody } from "../destructive-zone-section";
+
+/**
+ * "End medication" sent `new Date().toISOString()`, a full instant, against an
+ * `endsOn` that only takes `YYYY-MM-DD`, so every press answered 422 and the
+ * toast said the medication could not be ended. The body now carries the
+ * person's own calendar day.
+ */
+describe("endCourseBody", () => {
+  it("is a date the update schema accepts", () => {
+    const body = endCourseBody(
+      new Date("2026-10-21T09:30:00.000Z"),
+      "Europe/Berlin",
+    );
+    expect(body).toEqual({ endsOn: "2026-10-21" });
+    expect(updateMedicationSchema.safeParse(body).success).toBe(true);
+  });
+
+  it("is the person's day, not the UTC one", () => {
+    // 23:30 UTC is already the next day in Warsaw and still the same day in
+    // New York.
+    const lateUtc = new Date("2026-10-20T23:30:00.000Z");
+    expect(endCourseBody(lateUtc, "Europe/Warsaw").endsOn).toBe("2026-10-21");
+    expect(endCourseBody(lateUtc, "America/New_York").endsOn).toBe(
+      "2026-10-20",
+    );
+  });
+
+  it("is what the update schema refused before: a full instant is not a date", () => {
+    expect(
+      updateMedicationSchema.safeParse({
+        endsOn: new Date("2026-10-21T09:30:00.000Z").toISOString(),
+      }).success,
+    ).toBe(false);
+  });
+});
diff --git a/src/components/medications/sections/destructive-zone-section.tsx b/src/components/medications/sections/destructive-zone-section.tsx
index b8e247d76..ef5853c38 100644
--- a/src/components/medications/sections/destructive-zone-section.tsx
+++ b/src/components/medications/sections/destructive-zone-section.tsx
@@ -13,7 +13,7 @@
  *   - Tier 1 Pausieren: PUT `{ active: false | true }`. Server derives
  *     `pausedAt`. Switch wraps in `<label>` so the entire row is the
  *     AT hit target.
- *   - Tier 2 Beenden: PUT `{ endsOn: <today-iso> }`. AlertDialog
+ *   - Tier 2 Beenden: PUT `{ endsOn: <today YYYY-MM-DD> }`. AlertDialog
  *     confirm; Cancel autofocus stays default.
  *   - Tier 3a Verlauf löschen: DELETE `/intake/purge`. Disabled when
  *     `intakeCount === 0`. AlertDialog confirm.
@@ -46,9 +46,21 @@ import {
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
+import { useAuth } from "@/hooks/use-auth";
 import { useTranslations } from "@/lib/i18n/context";
 import { invalidateMedicationReads, queryKeys } from "@/lib/query-keys";
 import { apiDelete, apiPut } from "@/lib/api/api-fetch";
+import { DEFAULT_TIMEZONE, userDayKey } from "@/lib/tz/format";
+
+/**
+ * The PUT body that ends a course today: the person's own calendar day as
+ * `YYYY-MM-DD`, the only shape `endsOn` accepts. A full ISO instant was
+ * refused with 422 on every press, and its date was the UTC one, a day off
+ * around midnight for anyone not on UTC.
+ */
+export function endCourseBody(now: Date, timeZone: string): { endsOn: string } {
+  return { endsOn: userDayKey(now, timeZone) };
+}
 
 const PAUSE_SWITCH_ID = "medication-detail-pause-switch";
 const PAUSE_TITLE_ID = "medication-detail-pause-title";
@@ -71,6 +83,8 @@ export function LifecycleManageBody({
 }) {
   const { t } = useTranslations();
   const queryClient = useQueryClient();
+  const { user } = useAuth();
+  const userTz = user?.timezone || DEFAULT_TIMEZONE;
 
   const [paused, setPaused] = useState(!active);
   const [tier1Busy, setTier1Busy] = useState(false);
@@ -107,8 +121,10 @@ export function LifecycleManageBody({
     if (tier2Busy) return;
     setTier2Busy(true);
     try {
-      const today = new Date().toISOString();
-      await apiPut(`/api/medications/${medicationId}`, { endsOn: today });
+      await apiPut(
+        `/api/medications/${medicationId}`,
+        endCourseBody(new Date(), userTz),
+      );
       await invalidateMedicationReads(queryClient);
       toast.success(t("medications.detail.zone.end.toast"));
       setEndDialogOpen(false);

From 92911283be71e0a945819e5072dddecb12c81c19 Mon Sep 17 00:00:00 2001
From: haritowa <6107211+haritowa@users.noreply.github.com>
Date: Thu, 22 Oct 2026 16:45:02 +0000
Subject: [PATCH 2/5] fix(medications): offer "End" only for a course that is
 running

Ending sends today as the end of the medication's latest course. While
the PUT was refused this did nothing; now that it succeeds, pressing End
on a course that had already ended reopened it up to today (doses due
again, the days between counted as missed), and on a course that had not
started yet it became a one-day course today.

LifecycleManageBody now takes the server-resolved courseStatus and shows
End only while the course is CURRENT (a medication with no dates is
CURRENT). Pausing stays available whatever the course.
---
 .../detail/medication-detail-tabs.tsx         |   1 +
 .../destructive-zone-section.test.ts          |  40 ------
 .../destructive-zone-section.test.tsx         |  91 ++++++++++++
 .../sections/destructive-zone-section.tsx     | 130 ++++++++++--------
 4 files changed, 167 insertions(+), 95 deletions(-)
 delete mode 100644 src/components/medications/sections/__tests__/destructive-zone-section.test.ts
 create mode 100644 src/components/medications/sections/__tests__/destructive-zone-section.test.tsx

diff --git a/src/components/medications/detail/medication-detail-tabs.tsx b/src/components/medications/detail/medication-detail-tabs.tsx
index 39a7a8b7b..ba0e5da5d 100644
--- a/src/components/medications/detail/medication-detail-tabs.tsx
+++ b/src/components/medications/detail/medication-detail-tabs.tsx
@@ -927,6 +927,7 @@ export function MedicationDetailTabs({
                 medicationId={id}
                 medicationName={medication.name}
                 active={medication.active}
+                courseStatus={served.courseStatus}
               />
             </div>
             {/* v1.40 (#1024) — the courses: when it was taken, and a new
diff --git a/src/components/medications/sections/__tests__/destructive-zone-section.test.ts b/src/components/medications/sections/__tests__/destructive-zone-section.test.ts
deleted file mode 100644
index b1702880f..000000000
--- a/src/components/medications/sections/__tests__/destructive-zone-section.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { updateMedicationSchema } from "@/lib/validations/medication/create-update";
-
-import { endCourseBody } from "../destructive-zone-section";
-
-/**
- * "End medication" sent `new Date().toISOString()`, a full instant, against an
- * `endsOn` that only takes `YYYY-MM-DD`, so every press answered 422 and the
- * toast said the medication could not be ended. The body now carries the
- * person's own calendar day.
- */
-describe("endCourseBody", () => {
-  it("is a date the update schema accepts", () => {
-    const body = endCourseBody(
-      new Date("2026-10-21T09:30:00.000Z"),
-      "Europe/Berlin",
-    );
-    expect(body).toEqual({ endsOn: "2026-10-21" });
-    expect(updateMedicationSchema.safeParse(body).success).toBe(true);
-  });
-
-  it("is the person's day, not the UTC one", () => {
-    // 23:30 UTC is already the next day in Warsaw and still the same day in
-    // New York.
-    const lateUtc = new Date("2026-10-20T23:30:00.000Z");
-    expect(endCourseBody(lateUtc, "Europe/Warsaw").endsOn).toBe("2026-10-21");
-    expect(endCourseBody(lateUtc, "America/New_York").endsOn).toBe(
-      "2026-10-20",
-    );
-  });
-
-  it("is what the update schema refused before: a full instant is not a date", () => {
-    expect(
-      updateMedicationSchema.safeParse({
-        endsOn: new Date("2026-10-21T09:30:00.000Z").toISOString(),
-      }).success,
-    ).toBe(false);
-  });
-});
diff --git a/src/components/medications/sections/__tests__/destructive-zone-section.test.tsx b/src/components/medications/sections/__tests__/destructive-zone-section.test.tsx
new file mode 100644
index 000000000..3e71ba1da
--- /dev/null
+++ b/src/components/medications/sections/__tests__/destructive-zone-section.test.tsx
@@ -0,0 +1,91 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { I18nProvider } from "@/lib/i18n/context";
+import { updateMedicationSchema } from "@/lib/validations/medication/create-update";
+
+import {
+  canEndCourse,
+  endCourseBody,
+  LifecycleManageBody,
+} from "../destructive-zone-section";
+
+vi.mock("@/hooks/use-auth", () => ({
+  useAuth: () => ({
+    user: { id: "test-user", username: "tester", role: "USER" },
+    isAuthenticated: true,
+    isLoading: false,
+  }),
+}));
+
+/**
+ * "End medication" sent `new Date().toISOString()`, a full instant, against an
+ * `endsOn` that only takes `YYYY-MM-DD`, so every press answered 422 and the
+ * toast said the medication could not be ended. The body now carries the
+ * person's own calendar day.
+ */
+describe("endCourseBody", () => {
+  it("is a date the update schema accepts", () => {
+    const body = endCourseBody(
+      new Date("2026-10-21T09:30:00.000Z"),
+      "Europe/Berlin",
+    );
+    expect(body).toEqual({ endsOn: "2026-10-21" });
+    expect(updateMedicationSchema.safeParse(body).success).toBe(true);
+  });
+
+  it("is the person's day, not the UTC one", () => {
+    // 23:30 UTC is already the next day in Warsaw and still the same day in
+    // New York.
+    const lateUtc = new Date("2026-10-20T23:30:00.000Z");
+    expect(endCourseBody(lateUtc, "Europe/Warsaw").endsOn).toBe("2026-10-21");
+    expect(endCourseBody(lateUtc, "America/New_York").endsOn).toBe(
+      "2026-10-20",
+    );
+  });
+
+  it("is what the update schema refused before: a full instant is not a date", () => {
+    expect(
+      updateMedicationSchema.safeParse({
+        endsOn: new Date("2026-10-21T09:30:00.000Z").toISOString(),
+      }).success,
+    ).toBe(false);
+  });
+});
+
+/**
+ * Ending writes today as the end of the latest course. On a course that has
+ * already ended that would reopen it up to today, and on one that has not
+ * started it would become a one-day course today, so End is only offered while
+ * the course runs. A medication with no dates is CURRENT.
+ */
+describe("End is offered only for a running course", () => {
+  function render(courseStatus?: "UPCOMING" | "CURRENT" | "ENDED") {
+    return renderToStaticMarkup(
+      <I18nProvider initialLocale="en">
+        <QueryClientProvider client={new QueryClient()}>
+          <LifecycleManageBody
+            medicationId="med-1"
+            medicationName="Example"
+            active={true}
+            courseStatus={courseStatus}
+          />
+        </QueryClientProvider>
+      </I18nProvider>,
+    );
+  }
+
+  it.each([
+    ["CURRENT", true],
+    [undefined, true],
+    ["ENDED", false],
+    ["UPCOMING", false],
+  ] as const)("course %s → End shown: %s", (status, shown) => {
+    expect(canEndCourse(status)).toBe(shown);
+    const html = render(status);
+    expect(html.includes('data-slot="destructive-zone-end"')).toBe(shown);
+    // Pausing stays available whatever the course.
+    expect(html).toContain('id="medication-detail-pause-switch"');
+  });
+});
diff --git a/src/components/medications/sections/destructive-zone-section.tsx b/src/components/medications/sections/destructive-zone-section.tsx
index ef5853c38..e39b51b44 100644
--- a/src/components/medications/sections/destructive-zone-section.tsx
+++ b/src/components/medications/sections/destructive-zone-section.tsx
@@ -62,6 +62,19 @@ export function endCourseBody(now: Date, timeZone: string): { endsOn: string } {
   return { endsOn: userDayKey(now, timeZone) };
 }
 
+/**
+ * Whether "End" may be offered. Only a course that is running today can be
+ * ended today: the PUT rewrites the latest course's end, so pressing it on an
+ * ended course would reopen it up to today, and on a course that has not
+ * started it would turn into a one-day course today. Unknown (an older
+ * server) keeps the button.
+ */
+export function canEndCourse(
+  courseStatus: "UPCOMING" | "CURRENT" | "ENDED" | undefined,
+): boolean {
+  return courseStatus === undefined || courseStatus === "CURRENT";
+}
+
 const PAUSE_SWITCH_ID = "medication-detail-pause-switch";
 const PAUSE_TITLE_ID = "medication-detail-pause-title";
 const PAUSE_HELPER_ID = "medication-detail-pause-helper";
@@ -74,11 +87,14 @@ export function LifecycleManageBody({
   medicationId,
   medicationName,
   active,
+  courseStatus,
   onAfterAction,
 }: {
   medicationId: string;
   medicationName: string;
   active: boolean;
+  /** Where today sits in the course (server-resolved). */
+  courseStatus?: "UPCOMING" | "CURRENT" | "ENDED";
   onAfterAction?: () => void;
 }) {
   const { t } = useTranslations();
@@ -168,65 +184,69 @@ export function LifecycleManageBody({
         />
       </label>
 
-      <Separator />
+      {canEndCourse(courseStatus) ? (
+        <>
+          <Separator />
 
-      <div className="flex items-center justify-between gap-3">
-        <div className="space-y-1">
-          <p className="text-foreground text-sm font-medium">
-            {t("medications.detail.zone.end.title")}
-          </p>
-          <p className="text-muted-foreground text-xs">
-            {t("medications.detail.zone.end.helper")}
-          </p>
-        </div>
-        <Button
-          variant="destructive"
-          size="sm"
-          onClick={() => setEndDialogOpen(true)}
-          className="min-h-11 font-semibold sm:min-h-9"
-          data-slot="destructive-zone-end"
-        >
-          <Archive aria-hidden="true" className="h-4 w-4" />
-          {t("medications.detail.zone.end.button")}
-        </Button>
-      </div>
-
-      {/* Tier 2 — Beenden confirm */}
-      <AlertDialog open={endDialogOpen} onOpenChange={setEndDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {t("medications.detail.zone.end.dialogTitle", {
-                name: medicationName,
-              })}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {t("medications.detail.zone.end.dialogBody")}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-            <AlertDialogAction
+          <div className="flex items-center justify-between gap-3">
+            <div className="space-y-1">
+              <p className="text-foreground text-sm font-medium">
+                {t("medications.detail.zone.end.title")}
+              </p>
+              <p className="text-muted-foreground text-xs">
+                {t("medications.detail.zone.end.helper")}
+              </p>
+            </div>
+            <Button
               variant="destructive"
-              onClick={(e) => {
-                e.preventDefault();
-                void tier2End();
-              }}
-              disabled={tier2Busy}
-              aria-busy={tier2Busy || undefined}
-              className="font-semibold"
+              size="sm"
+              onClick={() => setEndDialogOpen(true)}
+              className="min-h-11 font-semibold sm:min-h-9"
+              data-slot="destructive-zone-end"
             >
-              {tier2Busy && (
-                <Loader2
-                  aria-hidden="true"
-                  className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none"
-                />
-              )}
+              <Archive aria-hidden="true" className="h-4 w-4" />
               {t("medications.detail.zone.end.button")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+            </Button>
+          </div>
+
+          {/* Tier 2 — Beenden confirm */}
+          <AlertDialog open={endDialogOpen} onOpenChange={setEndDialogOpen}>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>
+                  {t("medications.detail.zone.end.dialogTitle", {
+                    name: medicationName,
+                  })}
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  {t("medications.detail.zone.end.dialogBody")}
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+                <AlertDialogAction
+                  variant="destructive"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    void tier2End();
+                  }}
+                  disabled={tier2Busy}
+                  aria-busy={tier2Busy || undefined}
+                  className="font-semibold"
+                >
+                  {tier2Busy && (
+                    <Loader2
+                      aria-hidden="true"
+                      className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none"
+                    />
+                  )}
+                  {t("medications.detail.zone.end.button")}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </>
+      ) : null}
     </div>
   );
 }

From 9b8c76390185ff237b5e0e11750fe4c677a82510 Mon Sep 17 00:00:00 2001
From: haritowa <6107211+haritowa@users.noreply.github.com>
Date: Thu, 22 Oct 2026 18:18:07 +0000
Subject: [PATCH 3/5] refactor(medications): tidy the End guard after review

The course-status prop uses the shared CourseStatus type instead of a
spelled-out union, and the End confirmation's open state is dropped when
End stops being offered, so a dialog closed by a refetch cannot pop up
by itself once a later course offers End again.
---
 .../sections/destructive-zone-section.tsx     | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/medications/sections/destructive-zone-section.tsx b/src/components/medications/sections/destructive-zone-section.tsx
index e39b51b44..f627a22b4 100644
--- a/src/components/medications/sections/destructive-zone-section.tsx
+++ b/src/components/medications/sections/destructive-zone-section.tsx
@@ -50,6 +50,7 @@ import { useAuth } from "@/hooks/use-auth";
 import { useTranslations } from "@/lib/i18n/context";
 import { invalidateMedicationReads, queryKeys } from "@/lib/query-keys";
 import { apiDelete, apiPut } from "@/lib/api/api-fetch";
+import type { CourseStatus } from "@/lib/medications/course-window";
 import { DEFAULT_TIMEZONE, userDayKey } from "@/lib/tz/format";
 
 /**
@@ -69,9 +70,7 @@ export function endCourseBody(now: Date, timeZone: string): { endsOn: string } {
  * started it would turn into a one-day course today. Unknown (an older
  * server) keeps the button.
  */
-export function canEndCourse(
-  courseStatus: "UPCOMING" | "CURRENT" | "ENDED" | undefined,
-): boolean {
+export function canEndCourse(courseStatus: CourseStatus | undefined): boolean {
   return courseStatus === undefined || courseStatus === "CURRENT";
 }
 
@@ -94,19 +93,30 @@ export function LifecycleManageBody({
   medicationName: string;
   active: boolean;
   /** Where today sits in the course (server-resolved). */
-  courseStatus?: "UPCOMING" | "CURRENT" | "ENDED";
+  courseStatus?: CourseStatus;
   onAfterAction?: () => void;
 }) {
   const { t } = useTranslations();
   const queryClient = useQueryClient();
   const { user } = useAuth();
   const userTz = user?.timezone || DEFAULT_TIMEZONE;
+  const canEnd = canEndCourse(courseStatus);
 
   const [paused, setPaused] = useState(!active);
   const [tier1Busy, setTier1Busy] = useState(false);
   const [endDialogOpen, setEndDialogOpen] = useState(false);
   const [tier2Busy, setTier2Busy] = useState(false);
 
+  // A refetch can stop offering End while its confirmation is open (the
+  // course ended in another tab). Drop the open state with it, or the dialog
+  // would pop up by itself once a later course offers End again. Adjusted
+  // during render, React's pattern for state that follows a prop.
+  const [offeredEnd, setOfferedEnd] = useState(canEnd);
+  if (offeredEnd !== canEnd) {
+    setOfferedEnd(canEnd);
+    if (!canEnd) setEndDialogOpen(false);
+  }
+
   async function tier1Toggle(pauseNext: boolean) {
     if (tier1Busy) return;
     setTier1Busy(true);
@@ -184,7 +194,7 @@ export function LifecycleManageBody({
         />
       </label>
 
-      {canEndCourse(courseStatus) ? (
+      {canEnd ? (
         <>
           <Separator />
 

From fa20b1fe3a50fc44b6a81ee2ef3c86811c28f019 Mon Sep 17 00:00:00 2001
From: haritowa <6107211+haritowa@users.noreply.github.com>
Date: Sat, 24 Oct 2026 17:04:26 +0000
Subject: [PATCH 4/5] refactor(medications): give End its own component

End and its confirmation now live in EndCourseControl, which renders only
while the course runs. When End stops being offered, the open dialog and
its state unmount with it, so the state no longer has to be reset during
render.
---
 .../sections/destructive-zone-section.tsx     | 214 ++++++++++--------
 1 file changed, 115 insertions(+), 99 deletions(-)

diff --git a/src/components/medications/sections/destructive-zone-section.tsx b/src/components/medications/sections/destructive-zone-section.tsx
index f627a22b4..541d4ad8e 100644
--- a/src/components/medications/sections/destructive-zone-section.tsx
+++ b/src/components/medications/sections/destructive-zone-section.tsx
@@ -98,24 +98,9 @@ export function LifecycleManageBody({
 }) {
   const { t } = useTranslations();
   const queryClient = useQueryClient();
-  const { user } = useAuth();
-  const userTz = user?.timezone || DEFAULT_TIMEZONE;
-  const canEnd = canEndCourse(courseStatus);
 
   const [paused, setPaused] = useState(!active);
   const [tier1Busy, setTier1Busy] = useState(false);
-  const [endDialogOpen, setEndDialogOpen] = useState(false);
-  const [tier2Busy, setTier2Busy] = useState(false);
-
-  // A refetch can stop offering End while its confirmation is open (the
-  // course ended in another tab). Drop the open state with it, or the dialog
-  // would pop up by itself once a later course offers End again. Adjusted
-  // during render, React's pattern for state that follows a prop.
-  const [offeredEnd, setOfferedEnd] = useState(canEnd);
-  if (offeredEnd !== canEnd) {
-    setOfferedEnd(canEnd);
-    if (!canEnd) setEndDialogOpen(false);
-  }
 
   async function tier1Toggle(pauseNext: boolean) {
     if (tier1Busy) return;
@@ -143,27 +128,6 @@ export function LifecycleManageBody({
     }
   }
 
-  async function tier2End() {
-    if (tier2Busy) return;
-    setTier2Busy(true);
-    try {
-      await apiPut(
-        `/api/medications/${medicationId}`,
-        endCourseBody(new Date(), userTz),
-      );
-      await invalidateMedicationReads(queryClient);
-      toast.success(t("medications.detail.zone.end.toast"));
-      setEndDialogOpen(false);
-      onAfterAction?.();
-    } catch (failure) {
-      showErrorToast(t("medications.detail.zone.end.failed"), {
-        cause: failure,
-      });
-    } finally {
-      setTier2Busy(false);
-    }
-  }
-
   return (
     <div className="space-y-4" data-slot="destructive-zone-card-a">
       <label
@@ -194,73 +158,125 @@ export function LifecycleManageBody({
         />
       </label>
 
-      {canEnd ? (
-        <>
-          <Separator />
-
-          <div className="flex items-center justify-between gap-3">
-            <div className="space-y-1">
-              <p className="text-foreground text-sm font-medium">
-                {t("medications.detail.zone.end.title")}
-              </p>
-              <p className="text-muted-foreground text-xs">
-                {t("medications.detail.zone.end.helper")}
-              </p>
-            </div>
-            <Button
-              variant="destructive"
-              size="sm"
-              onClick={() => setEndDialogOpen(true)}
-              className="min-h-11 font-semibold sm:min-h-9"
-              data-slot="destructive-zone-end"
-            >
-              <Archive aria-hidden="true" className="h-4 w-4" />
-              {t("medications.detail.zone.end.button")}
-            </Button>
-          </div>
-
-          {/* Tier 2 — Beenden confirm */}
-          <AlertDialog open={endDialogOpen} onOpenChange={setEndDialogOpen}>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>
-                  {t("medications.detail.zone.end.dialogTitle", {
-                    name: medicationName,
-                  })}
-                </AlertDialogTitle>
-                <AlertDialogDescription>
-                  {t("medications.detail.zone.end.dialogBody")}
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-                <AlertDialogAction
-                  variant="destructive"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    void tier2End();
-                  }}
-                  disabled={tier2Busy}
-                  aria-busy={tier2Busy || undefined}
-                  className="font-semibold"
-                >
-                  {tier2Busy && (
-                    <Loader2
-                      aria-hidden="true"
-                      className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none"
-                    />
-                  )}
-                  {t("medications.detail.zone.end.button")}
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-        </>
-      ) : null}
+      {canEndCourse(courseStatus) && (
+        <EndCourseControl
+          medicationId={medicationId}
+          medicationName={medicationName}
+          onAfterAction={onAfterAction}
+        />
+      )}
     </div>
   );
 }
 
+/**
+ * Tier 2: End the course today, behind a confirmation. Rendered only while
+ * the course runs, so when End stops being offered (the course ended in
+ * another tab) the open dialog and its state go away with it.
+ */
+function EndCourseControl({
+  medicationId,
+  medicationName,
+  onAfterAction,
+}: {
+  medicationId: string;
+  medicationName: string;
+  onAfterAction?: () => void;
+}) {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  const { user } = useAuth();
+  const userTz = user?.timezone || DEFAULT_TIMEZONE;
+
+  const [endDialogOpen, setEndDialogOpen] = useState(false);
+  const [tier2Busy, setTier2Busy] = useState(false);
+
+  async function tier2End() {
+    if (tier2Busy) return;
+    setTier2Busy(true);
+    try {
+      await apiPut(
+        `/api/medications/${medicationId}`,
+        endCourseBody(new Date(), userTz),
+      );
+      await invalidateMedicationReads(queryClient);
+      toast.success(t("medications.detail.zone.end.toast"));
+      setEndDialogOpen(false);
+      onAfterAction?.();
+    } catch (failure) {
+      showErrorToast(t("medications.detail.zone.end.failed"), {
+        cause: failure,
+      });
+    } finally {
+      setTier2Busy(false);
+    }
+  }
+
+  return (
+    <>
+      <Separator />
+
+      <div className="flex items-center justify-between gap-3">
+        <div className="space-y-1">
+          <p className="text-foreground text-sm font-medium">
+            {t("medications.detail.zone.end.title")}
+          </p>
+          <p className="text-muted-foreground text-xs">
+            {t("medications.detail.zone.end.helper")}
+          </p>
+        </div>
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() => setEndDialogOpen(true)}
+          className="min-h-11 font-semibold sm:min-h-9"
+          data-slot="destructive-zone-end"
+        >
+          <Archive aria-hidden="true" className="h-4 w-4" />
+          {t("medications.detail.zone.end.button")}
+        </Button>
+      </div>
+
+      {/* Tier 2 — Beenden confirm */}
+      <AlertDialog open={endDialogOpen} onOpenChange={setEndDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("medications.detail.zone.end.dialogTitle", {
+                name: medicationName,
+              })}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("medications.detail.zone.end.dialogBody")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              onClick={(e) => {
+                e.preventDefault();
+                void tier2End();
+              }}
+              disabled={tier2Busy}
+              aria-busy={tier2Busy || undefined}
+              className="font-semibold"
+            >
+              {tier2Busy && (
+                <Loader2
+                  aria-hidden="true"
+                  className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none"
+                />
+              )}
+              {t("medications.detail.zone.end.button")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
 /**
  * v1.7.0 — irreversible danger zone: purge intake history + delete the
  * medication. v1.16.1 — the body is bare rows (the caller's

From 5e8fb126a33f23e543a6c2f7c5bf951fb3ee8a41 Mon Sep 17 00:00:00 2001
From: haritowa <6107211+haritowa@users.noreply.github.com>
Date: Sat, 24 Oct 2026 17:53:18 +0000
Subject: [PATCH 5/5] refactor(medications): hand the lifecycle controls the
 medication

LifecycleManageBody takes the medication (id, name, active, course
status) instead of one prop per field. The call site in
medication-detail-tabs.tsx shrinks to one line, so the course status
reaches the controls without growing a file the size ratchet holds.
---
 .../detail/medication-detail-tabs.tsx         |  7 +-----
 .../destructive-zone-section.test.tsx         | 10 ++++----
 .../sections/destructive-zone-section.tsx     | 24 +++++++++----------
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/medications/detail/medication-detail-tabs.tsx b/src/components/medications/detail/medication-detail-tabs.tsx
index ba0e5da5d..9cefc459a 100644
--- a/src/components/medications/detail/medication-detail-tabs.tsx
+++ b/src/components/medications/detail/medication-detail-tabs.tsx
@@ -923,12 +923,7 @@ export function MedicationDetailTabs({
             defaultOpen={false}
           >
             <div className="py-3">
-              <LifecycleManageBody
-                medicationId={id}
-                medicationName={medication.name}
-                active={medication.active}
-                courseStatus={served.courseStatus}
-              />
+              <LifecycleManageBody medication={medication} />
             </div>
             {/* v1.40 (#1024) — the courses: when it was taken, and a new
                 course once the last one has ended. */}
diff --git a/src/components/medications/sections/__tests__/destructive-zone-section.test.tsx b/src/components/medications/sections/__tests__/destructive-zone-section.test.tsx
index 3e71ba1da..5992803ea 100644
--- a/src/components/medications/sections/__tests__/destructive-zone-section.test.tsx
+++ b/src/components/medications/sections/__tests__/destructive-zone-section.test.tsx
@@ -66,10 +66,12 @@ describe("End is offered only for a running course", () => {
       <I18nProvider initialLocale="en">
         <QueryClientProvider client={new QueryClient()}>
           <LifecycleManageBody
-            medicationId="med-1"
-            medicationName="Example"
-            active={true}
-            courseStatus={courseStatus}
+            medication={{
+              id: "med-1",
+              name: "Example",
+              active: true,
+              courseStatus,
+            }}
           />
         </QueryClientProvider>
       </I18nProvider>,
diff --git a/src/components/medications/sections/destructive-zone-section.tsx b/src/components/medications/sections/destructive-zone-section.tsx
index 541d4ad8e..ae1c193c2 100644
--- a/src/components/medications/sections/destructive-zone-section.tsx
+++ b/src/components/medications/sections/destructive-zone-section.tsx
@@ -83,23 +83,23 @@ const PAUSE_HELPER_ID = "medication-detail-pause-helper";
  * Bare (no section / card chrome); the caller supplies its own grouping.
  */
 export function LifecycleManageBody({
-  medicationId,
-  medicationName,
-  active,
-  courseStatus,
+  medication,
   onAfterAction,
 }: {
-  medicationId: string;
-  medicationName: string;
-  active: boolean;
-  /** Where today sits in the course (server-resolved). */
-  courseStatus?: CourseStatus;
+  medication: {
+    id: string;
+    name: string;
+    active: boolean;
+    /** Where today sits in the course (server-resolved). */
+    courseStatus?: CourseStatus;
+  };
   onAfterAction?: () => void;
 }) {
   const { t } = useTranslations();
   const queryClient = useQueryClient();
+  const medicationId = medication.id;
 
-  const [paused, setPaused] = useState(!active);
+  const [paused, setPaused] = useState(!medication.active);
   const [tier1Busy, setTier1Busy] = useState(false);
 
   async function tier1Toggle(pauseNext: boolean) {
@@ -158,10 +158,10 @@ export function LifecycleManageBody({
         />
       </label>
 
-      {canEndCourse(courseStatus) && (
+      {canEndCourse(medication.courseStatus) && (
         <EndCourseControl
           medicationId={medicationId}
-          medicationName={medicationName}
+          medicationName={medication.name}
           onAfterAction={onAfterAction}
         />
       )}