feat: reports, timeline toggles, and stock correction improvements (#236)

* refactor(frontend): modularize styles and polish modal/ui interactions

* feat: add report workflow and timeline/settings improvements

* fix: resolve CI failures for backend typing, lint, and playwright config

.github/agents/testing-manager.agent.md

@@ -15,6 +15,7 @@ You are the testing manager for **MedAssist-ng**. Your job is to ensure every fe
 - **Tests are mandatory**: Every new feature and every bug fix MUST have corresponding tests.
 - **Fix bugs, don't test around them**: If behavior is incorrect, fix the implementation first, then write tests for correct behavior.
 - **Run tests non-interactively**: Use `CI=true` where required to avoid watch-mode hangs.
+- **Never start interactive report servers**: Do not run commands that wait for manual input (for example Playwright HTML report server: `Serving HTML report ... Press Ctrl+C to quit`). Always use finite, non-interactive commands and reporters.
 - **No remote git operations**: Do not push, merge, create PRs, tags, or releases. Hand over to `@release-manager` when ready.
 - **Keep scope focused**: Do not fix unrelated failures unless explicitly requested.
 
@@ -67,8 +68,8 @@ cd frontend && npm run build
 ```bash
 cd frontend && npm run test:e2e
 cd frontend && npm run test:e2e -- --project=chromium
-cd frontend && npm run test:e2e:ui
+# Never use interactive UI/headed/report-server commands in agent runs.
-cd frontend && npm run test:e2e:headed
+# Do not use: npm run test:e2e:ui, npm run test:e2e:headed, npx playwright show-report
 ```
 
 ## Backend Test Patterns

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "vitest.root": "backend",
   "vitest.enable": true,
-  "vitest.commandLine": "npm test --"
+  "vitest.commandLine": "npm test --",
+  "chat.tools.terminal.autoApprove": {
+    "test": true
+  }
 }

.vscode/tasks.json

@@ -0,0 +1,49 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "E2E stable",
+      "type": "shell",
+      "command": "npm",
+      "args": ["run", "test:e2e"],
+      "options": {
+        "cwd": "${workspaceFolder}/frontend"
+      },
+      "group": "test",
+      "problemMatcher": []
+    },
+    {
+      "label": "E2E stable + merged video",
+      "type": "shell",
+      "command": "npm",
+      "args": ["run", "test:e2e:with-video"],
+      "options": {
+        "cwd": "${workspaceFolder}/frontend"
+      },
+      "group": "test",
+      "problemMatcher": []
+    },
+    {
+      "label": "E2E all browsers",
+      "type": "shell",
+      "command": "npm",
+      "args": ["run", "test:e2e:all"],
+      "options": {
+        "cwd": "${workspaceFolder}/frontend"
+      },
+      "group": "test",
+      "problemMatcher": []
+    },
+    {
+      "label": "E2E all browsers + merged video",
+      "type": "shell",
+      "command": "npm",
+      "args": ["run", "test:e2e:all:with-video"],
+      "options": {
+        "cwd": "${workspaceFolder}/frontend"
+      },
+      "group": "test",
+      "problemMatcher": []
+    }
+  ]
+}

backend/src/db/db-utils.ts

@@ -140,6 +140,10 @@ export async function runAlterMigrations(client: Client): Promise<{ success: boo
 		`ALTER TABLE user_settings ADD COLUMN last_stock_reminder_med_names text`,
 		// Added for share stock visibility toggle
 		`ALTER TABLE user_settings ADD COLUMN share_stock_status integer NOT NULL DEFAULT 1`,
+		// Added for timeline visibility toggles (dashboard + shared schedule)
+		`ALTER TABLE user_settings ADD COLUMN upcoming_today_only integer NOT NULL DEFAULT 0`,
+		`ALTER TABLE user_settings ADD COLUMN share_schedule_today_only integer NOT NULL DEFAULT 0`,
+		`ALTER TABLE user_settings ADD COLUMN swap_dashboard_main_sections integer NOT NULL DEFAULT 0`,
 		// Added for prescription refill tracking and reminders
 		`ALTER TABLE medications ADD COLUMN prescription_enabled integer NOT NULL DEFAULT 0`,
 		`ALTER TABLE medications ADD COLUMN prescription_authorized_refills integer`,

backend/src/db/schema-sql.ts

@@ -65,9 +65,21 @@ export function getTableCreationSQL(): string[] {
       expiry_warning_days integer NOT NULL DEFAULT 90,
       language text NOT NULL DEFAULT 'en',
       stock_calculation_mode text NOT NULL DEFAULT 'automatic',
+      share_stock_status integer NOT NULL DEFAULT 1,
+      upcoming_today_only integer NOT NULL DEFAULT 0,
+      share_schedule_today_only integer NOT NULL DEFAULT 0,
+      swap_dashboard_main_sections integer NOT NULL DEFAULT 0,
       last_auto_email_sent text,
       last_notification_type text,
       last_notification_channel text,
+      last_reminder_med_name text,
+      last_reminder_taken_by text,
+      last_stock_reminder_sent text,
+      last_stock_reminder_channel text,
+      last_stock_reminder_med_names text,
+      last_prescription_reminder_sent text,
+      last_prescription_reminder_channel text,
+      last_prescription_reminder_med_names text,
       updated_at integer NOT NULL DEFAULT (strftime('%s','now')),
       FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
     )`,

backend/src/db/schema.ts

@@ -100,6 +100,10 @@ export const userSettings = sqliteTable("user_settings", {
 	stockCalculationMode: text("stock_calculation_mode", { length: 20 }).notNull().default("automatic"),
 	// Whether shared schedule links show stock status (Critical/Low/Normal) to intake users
 	shareStockStatus: integer("share_stock_status", { mode: "boolean" }).notNull().default(true),
+	// UI timeline visibility preferences
+	upcomingTodayOnly: integer("upcoming_today_only", { mode: "boolean" }).notNull().default(false),
+	shareScheduleTodayOnly: integer("share_schedule_today_only", { mode: "boolean" }).notNull().default(false),
+	swapDashboardMainSections: integer("swap_dashboard_main_sections", { mode: "boolean" }).notNull().default(false),
 	// Last notification tracking (intake reminders)
 	lastAutoEmailSent: text("last_auto_email_sent"),
 	lastNotificationType: text("last_notification_type"),

backend/src/index.ts

@@ -20,6 +20,7 @@ import { medicationRoutes } from "./routes/medications.js";
 import { oidcRoutes } from "./routes/oidc.js";
 import { plannerRoutes } from "./routes/planner.js";
 import { refillRoutes } from "./routes/refills.js";
+import { reportRoutes } from "./routes/report.js";
 import { settingsRoutes } from "./routes/settings.js";
 import { shareRoutes } from "./routes/share.js";
 import { startIntakeReminderScheduler } from "./services/intake-reminder-scheduler.js";
@@ -118,6 +119,7 @@ export async function createApp(options?: {
 	await app.register(doseRoutes);
 	await app.register(exportRoutes);
 	await app.register(refillRoutes);
+	await app.register(reportRoutes);
 
 	return app;
 }
@@ -190,6 +192,7 @@ await app.register(shareRoutes);
 await app.register(doseRoutes);
 await app.register(exportRoutes);
 await app.register(refillRoutes);
+await app.register(reportRoutes);
 
 const start = async () => {
 	try {

backend/src/routes/medications.ts

@@ -623,9 +623,9 @@ export async function medicationRoutes(app: FastifyInstance) {
 		};
 	});
 
-	// Stock correction endpoint - only updates stockAdjustment, preserves looseTablets
+	// Stock correction endpoint - updates stockAdjustment and optionally looseTablets (for blister type)
 	// Also sets lastStockCorrectionAt so consumed doses before this point don't count
-	app.patch<{ Params: { id: string }; Body: { stockAdjustment: number } }>(
+	app.patch<{ Params: { id: string }; Body: { stockAdjustment: number; looseTablets?: number } }>(
 		"/medications/:id/stock-adjustment",
 		async (req, reply) => {
 			const idNum = Number(req.params.id);
@@ -640,16 +640,32 @@ export async function medicationRoutes(app: FastifyInstance) {
 				.where(and(eq(medications.id, idNum), eq(medications.userId, userId)));
 			if (!existing) return reply.notFound();
 
-			const { stockAdjustment } = req.body as { stockAdjustment: number };
+			const { stockAdjustment, looseTablets } = req.body as { stockAdjustment: number; looseTablets?: number };
 			if (typeof stockAdjustment !== "number") return reply.badRequest("stockAdjustment must be a number");
+			if (
+				looseTablets !== undefined &&
+				(typeof looseTablets !== "number" || !Number.isInteger(looseTablets) || looseTablets < 0)
+			) {
+				return reply.badRequest("looseTablets must be a non-negative integer");
+			}
+
+			const updateFields: {
+				stockAdjustment: number;
+				lastStockCorrectionAt: Date;
+				updatedAt: Date;
+				looseTablets?: number;
+			} = {
+				stockAdjustment,
+				lastStockCorrectionAt: new Date(),
+				updatedAt: new Date(),
+			};
+			if (looseTablets !== undefined) {
+				updateFields.looseTablets = looseTablets;
+			}
 
 			const result = await db
 				.update(medications)
-				.set({
+				.set(updateFields)
-					stockAdjustment,
-					lastStockCorrectionAt: new Date(), // Mark when correction was made
-					updatedAt: new Date(),
-				})
 				.where(and(eq(medications.id, idNum), eq(medications.userId, userId)))
 				.returning();
 

backend/src/routes/refills.ts

@@ -52,23 +52,34 @@ export async function refillRoutes(app: FastifyInstance) {
 		if (!med) return reply.notFound("Medication not found");
 
 		const { packsAdded, loosePillsAdded, usePrescription } = parsed.data;
+		const isBottle = (med.packageType ?? "blister") === "bottle";
+		const effectivePacksAdded = isBottle ? 0 : packsAdded;
+		const effectiveLoosePillsAdded = loosePillsAdded;
+		const remainingPrescriptionRefills = med.prescriptionRemainingRefills ?? 0;
+
+		if (effectivePacksAdded < 1 && effectiveLoosePillsAdded < 1) {
+			return reply.status(400).send({ error: "Must add at least one pack or some loose pills" });
+		}
 
 		if (usePrescription) {
 			if (!(med.prescriptionEnabled ?? false)) {
 				return reply.status(400).send({ error: "Prescription refill is not enabled for this medication" });
 			}
-			const remaining = med.prescriptionRemainingRefills ?? 0;
+			if (remainingPrescriptionRefills <= 0) {
-			if (remaining <= 0) {
 				return reply.status(409).send({ error: "No remaining prescription refills" });
 			}
+			if (!isBottle && effectivePacksAdded > remainingPrescriptionRefills) {
+				return reply.status(409).send({ error: "Packs to add exceed remaining prescription refills" });
+			}
 		}
 
 		// Update medication stock
-		const newPackCount = med.packCount + packsAdded;
+		const newPackCount = med.packCount + effectivePacksAdded;
-		const newLooseTablets = med.looseTablets + loosePillsAdded;
+		const newLooseTablets = med.looseTablets + effectiveLoosePillsAdded;
 
+		const consumedRefills = usePrescription ? (isBottle ? 1 : effectivePacksAdded) : 0;
 		const newRemainingRefills = usePrescription
-			? Math.max(0, (med.prescriptionRemainingRefills ?? 0) - 1)
+			? Math.max(0, remainingPrescriptionRefills - consumedRefills)
 			: (med.prescriptionRemainingRefills ?? null);
 
 		await db
@@ -77,8 +88,6 @@ export async function refillRoutes(app: FastifyInstance) {
 				packCount: newPackCount,
 				looseTablets: newLooseTablets,
 				prescriptionRemainingRefills: newRemainingRefills,
-				stockAdjustment: 0, // Reset offset since we're adding to base stock
-				lastStockCorrectionAt: new Date(), // Reset consumed counter to now
 				updatedAt: new Date(),
 			})
 			.where(and(eq(medications.id, medId), eq(medications.userId, userId)));
@@ -89,16 +98,17 @@ export async function refillRoutes(app: FastifyInstance) {
 			.values({
 				medicationId: medId,
 				userId,
-				packsAdded,
+				packsAdded: effectivePacksAdded,
-				loosePillsAdded,
+				loosePillsAdded: effectiveLoosePillsAdded,
 				usedPrescription: usePrescription,
 			})
 			.returning();
 
 		// Calculate pills added for response (packageType-aware)
-		const isBottle = (med.packageType ?? "blister") === "bottle";
 		const pillsPerPack = isBottle ? 0 : med.blistersPerPack * med.pillsPerBlister;
-		const totalPillsAdded = isBottle ? loosePillsAdded : packsAdded * pillsPerPack + loosePillsAdded;
+		const totalPillsAdded = isBottle
+			? effectiveLoosePillsAdded
+			: effectivePacksAdded * pillsPerPack + effectiveLoosePillsAdded;
 		const newTotalPills = isBottle
 			? newLooseTablets + (med.stockAdjustment ?? 0)
 			: newPackCount * pillsPerPack + newLooseTablets + (med.stockAdjustment ?? 0);
@@ -107,8 +117,8 @@ export async function refillRoutes(app: FastifyInstance) {
 			success: true,
 			refill: {
 				id: refill.id,
-				packsAdded,
+				packsAdded: effectivePacksAdded,
-				loosePillsAdded,
+				loosePillsAdded: effectiveLoosePillsAdded,
 				totalPillsAdded,
 				refillDate: refill.refillDate,
 			},

backend/src/routes/report.ts

@@ -0,0 +1,105 @@
+import { eq } from "drizzle-orm";
+import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
+import { z } from "zod";
+import { db } from "../db/client.js";
+import { doseTracking, medications, refillHistory } from "../db/schema.js";
+import { getAnonymousUserId, requireAuth } from "../plugins/auth.js";
+import { env } from "../plugins/env.js";
+import type { AuthUser } from "../types/fastify.js";
+
+const reportDataSchema = z.object({
+	medicationIds: z.array(z.number().int().positive()).min(1).max(100),
+});
+
+export async function reportRoutes(app: FastifyInstance) {
+	app.addHook("preHandler", requireAuth);
+
+	async function getUserId(request: FastifyRequest, reply: FastifyReply): Promise<number> {
+		if (!env.AUTH_ENABLED) {
+			return getAnonymousUserId();
+		}
+		const authUser = request.user as unknown as AuthUser | null;
+		if (!authUser) {
+			reply.status(401).send({ error: "User not authenticated", code: "AUTH_REQUIRED" });
+			throw new Error("AUTH_REQUIRED");
+		}
+		return authUser.id;
+	}
+
+	// POST /medications/report-data - Get aggregated dose/refill data for report generation
+	app.post("/medications/report-data", async (req, reply) => {
+		const parsed = reportDataSchema.safeParse(req.body);
+		if (!parsed.success) return reply.status(400).send(parsed.error.format());
+
+		const userId = await getUserId(req, reply);
+		const { medicationIds } = parsed.data;
+
+		// Verify all medications belong to this user
+		const userMeds = await db.select({ id: medications.id }).from(medications).where(eq(medications.userId, userId));
+		const userMedIds = new Set(userMeds.map((m) => m.id));
+
+		for (const id of medicationIds) {
+			if (!userMedIds.has(id)) {
+				return reply.status(403).send({ error: "Access denied to medication" });
+			}
+		}
+
+		// Fetch dose tracking for all requested medications
+		// doseId format: "{medicationId}-{blisterIndex}-{dateMs}" or "{medicationId}-{blisterIndex}-{dateMs}-{takenBy}"
+		const allDoses = await db
+			.select({
+				doseId: doseTracking.doseId,
+				takenAt: doseTracking.takenAt,
+				dismissed: doseTracking.dismissed,
+			})
+			.from(doseTracking)
+			.where(eq(doseTracking.userId, userId));
+
+		// Group doses by medication ID
+		const dosesByMed = new Map<number, { takenAt: Date; dismissed: boolean }[]>();
+		for (const dose of allDoses) {
+			const medId = Number.parseInt(dose.doseId.split("-")[0], 10);
+			if (Number.isNaN(medId) || !medicationIds.includes(medId)) continue;
+			if (!dosesByMed.has(medId)) dosesByMed.set(medId, []);
+			dosesByMed.get(medId)!.push({ takenAt: dose.takenAt, dismissed: dose.dismissed });
+		}
+
+		// Fetch refill history for requested medications
+		const result: Record<
+			number,
+			{
+				dosesTaken: number;
+				dosesDismissed: number;
+				firstDoseAt: string | null;
+				lastDoseAt: string | null;
+				refills: { packsAdded: number; loosePillsAdded: number; usedPrescription: boolean; refillDate: string }[];
+			}
+		> = {};
+
+		for (const medId of medicationIds) {
+			const doses = dosesByMed.get(medId) ?? [];
+			const takenDoses = doses.filter((d) => !d.dismissed);
+			const dismissedDoses = doses.filter((d) => d.dismissed);
+
+			const sortedTaken = takenDoses.map((d) => d.takenAt.getTime()).sort((a, b) => a - b);
+
+			// Get refills for this medication
+			const refills = await db.select().from(refillHistory).where(eq(refillHistory.medicationId, medId));
+
+			result[medId] = {
+				dosesTaken: takenDoses.length,
+				dosesDismissed: dismissedDoses.length,
+				firstDoseAt: sortedTaken.length > 0 ? new Date(sortedTaken[0]).toISOString() : null,
+				lastDoseAt: sortedTaken.length > 0 ? new Date(sortedTaken[sortedTaken.length - 1]).toISOString() : null,
+				refills: refills.map((r) => ({
+					packsAdded: r.packsAdded,
+					loosePillsAdded: r.loosePillsAdded,
+					usedPrescription: r.usedPrescription ?? false,
+					refillDate: r.refillDate instanceof Date ? r.refillDate.toISOString() : String(r.refillDate),
+				})),
+			};
+		}
+
+		return result;
+	});
+}

backend/src/routes/settings.ts

@@ -33,6 +33,9 @@ export type UserSettings = {
 	language: Language;
 	stockCalculationMode: "automatic" | "manual";
 	shareStockStatus: boolean;
+	upcomingTodayOnly: boolean;
+	shareScheduleTodayOnly: boolean;
+	swapDashboardMainSections: boolean;
 	lastAutoEmailSent: string | null;
 	lastNotificationType: string | null;
 	lastNotificationChannel: string | null;
@@ -69,6 +72,9 @@ type SettingsBody = {
 	language: string;
 	stockCalculationMode: "automatic" | "manual";
 	shareStockStatus: boolean;
+	upcomingTodayOnly: boolean;
+	shareScheduleTodayOnly: boolean;
+	swapDashboardMainSections: boolean;
 };
 
 type TestEmailBody = {
@@ -119,6 +125,9 @@ function getDefaultSettings() {
 		language: (process.env.DEFAULT_LANGUAGE as "en" | "de") || "en",
 		stockCalculationMode: (process.env.DEFAULT_STOCK_CALCULATION_MODE as "automatic" | "manual") || "automatic",
 		shareStockStatus: envBool("DEFAULT_SHARE_STOCK_STATUS", true),
+		upcomingTodayOnly: envBool("DEFAULT_UPCOMING_TODAY_ONLY", false),
+		shareScheduleTodayOnly: envBool("DEFAULT_SHARE_SCHEDULE_TODAY_ONLY", false),
+		swapDashboardMainSections: false,
 		lastAutoEmailSent: null,
 		lastNotificationType: null,
 		lastNotificationChannel: null,
@@ -178,6 +187,9 @@ export async function loadUserSettings(userId: number): Promise<UserSettings> {
 		language: settings.language as Language,
 		stockCalculationMode: (settings.stockCalculationMode as "automatic" | "manual") ?? "automatic",
 		shareStockStatus: settings.shareStockStatus ?? true,
+		upcomingTodayOnly: settings.upcomingTodayOnly ?? false,
+		shareScheduleTodayOnly: settings.shareScheduleTodayOnly ?? false,
+		swapDashboardMainSections: settings.swapDashboardMainSections ?? false,
 		lastAutoEmailSent: settings.lastAutoEmailSent,
 		lastNotificationType: settings.lastNotificationType,
 		lastNotificationChannel: settings.lastNotificationChannel,
@@ -219,6 +231,9 @@ export async function getAllUserSettings(): Promise<UserSettings[]> {
 		language: settings.language as Language,
 		stockCalculationMode: (settings.stockCalculationMode as "automatic" | "manual") ?? "automatic",
 		shareStockStatus: settings.shareStockStatus ?? true,
+		upcomingTodayOnly: settings.upcomingTodayOnly ?? false,
+		shareScheduleTodayOnly: settings.shareScheduleTodayOnly ?? false,
+		swapDashboardMainSections: settings.swapDashboardMainSections ?? false,
 		lastAutoEmailSent: settings.lastAutoEmailSent,
 		lastNotificationType: settings.lastNotificationType,
 		lastNotificationChannel: settings.lastNotificationChannel,
@@ -283,6 +298,9 @@ export async function settingsRoutes(app: FastifyInstance) {
 			language: settings.language,
 			stockCalculationMode: settings.stockCalculationMode ?? "automatic",
 			shareStockStatus: settings.shareStockStatus ?? true,
+			upcomingTodayOnly: settings.upcomingTodayOnly ?? false,
+			shareScheduleTodayOnly: settings.shareScheduleTodayOnly ?? false,
+			swapDashboardMainSections: settings.swapDashboardMainSections ?? false,
 			// SMTP settings (from .env - shared/server-configured)
 			smtpHost: process.env.SMTP_HOST ?? "",
 			smtpPort: parseInt(process.env.SMTP_PORT ?? "587", 10),
@@ -349,6 +367,9 @@ export async function settingsRoutes(app: FastifyInstance) {
 			language: body.language ?? "en",
 			stockCalculationMode: body.stockCalculationMode ?? "automatic",
 			shareStockStatus: body.shareStockStatus ?? true,
+			upcomingTodayOnly: body.upcomingTodayOnly ?? false,
+			shareScheduleTodayOnly: body.shareScheduleTodayOnly ?? false,
+			swapDashboardMainSections: body.swapDashboardMainSections ?? false,
 			updatedAt: new Date(),
 		};
 

backend/src/routes/share.ts

@@ -154,6 +154,8 @@ export async function shareRoutes(app: FastifyInstance) {
 			},
 			stockCalculationMode: (settings?.stockCalculationMode as "automatic" | "manual") ?? "automatic",
 			shareStockStatus: settings?.shareStockStatus ?? true,
+			upcomingTodayOnly: settings?.upcomingTodayOnly ?? false,
+			shareScheduleTodayOnly: settings?.shareScheduleTodayOnly ?? false,
 		};
 	});
 

backend/src/test/db-client.test.ts

@@ -0,0 +1,125 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+type ClientTestOptions = {
+	dirWritable?: boolean;
+	authEnabled?: boolean;
+};
+
+async function loadDbClientModule(options: ClientTestOptions = {}) {
+	const { dirWritable = true, authEnabled = false } = options;
+
+	vi.resetModules();
+	vi.restoreAllMocks();
+
+	process.env.AUTH_ENABLED = authEnabled ? "true" : "false";
+	process.env.DOTENV_PATH = "/tmp/medassist-nonexistent.env";
+
+	const existsSync = vi.fn().mockReturnValue(false);
+	const statSync = vi.fn().mockReturnValue({ mode: 0o40755, uid: 1000, gid: 1000 });
+	vi.doMock("node:fs", () => ({ existsSync, statSync }));
+
+	const dotenvConfig = vi.fn();
+	vi.doMock("dotenv", () => ({ default: { config: dotenvConfig } }));
+
+	const createClient = vi.fn().mockReturnValue({ execute: vi.fn() });
+	vi.doMock("@libsql/client", () => ({ createClient }));
+
+	const drizzle = vi.fn().mockReturnValue({ __db: true });
+	vi.doMock("drizzle-orm/libsql", () => ({ drizzle }));
+
+	const ensureDataDirectory = vi
+		.fn()
+		.mockReturnValue(dirWritable ? { success: true } : { success: false, error: "permission denied" });
+	const getDbPaths = vi.fn().mockReturnValue({
+		dataDir: "/tmp/medassist-data",
+		dbPath: "/tmp/medassist-data/medassist.db",
+		url: "file:/tmp/medassist-data/medassist.db",
+	});
+	const runDrizzleMigrations = vi.fn().mockResolvedValue({ success: true });
+	const runAlterMigrations = vi.fn().mockResolvedValue({ errors: [] });
+	const repairTrailingHyphenDoseIds = vi.fn().mockResolvedValue({ repaired: 0, errors: [] });
+	const repairOrphanedDoseIds = vi.fn().mockResolvedValue({ repaired: 0, errors: [] });
+	const ensureDefaultUser = vi.fn().mockResolvedValue(false);
+
+	vi.doMock("../db/db-utils.js", () => ({
+		buildDbUrl: vi.fn(),
+		getDataDir: vi.fn(),
+		ensureDataDirectory,
+		getDbPaths,
+		runDrizzleMigrations,
+		runAlterMigrations,
+		repairTrailingHyphenDoseIds,
+		repairOrphanedDoseIds,
+		ensureDefaultUser,
+	}));
+
+	const log = {
+		debug: vi.fn(),
+		info: vi.fn(),
+		warn: vi.fn(),
+		error: vi.fn(),
+	};
+	vi.doMock("../utils/logger.js", () => ({ log }));
+
+	const exitSpy = vi.spyOn(process, "exit").mockImplementation(((code?: number) => {
+		throw new Error(`process.exit:${code ?? 0}`);
+	}) as never);
+
+	const modulePromise = import("../db/client.js");
+
+	return {
+		modulePromise,
+		mocks: {
+			existsSync,
+			statSync,
+			dotenvConfig,
+			createClient,
+			drizzle,
+			ensureDataDirectory,
+			getDbPaths,
+			runDrizzleMigrations,
+			runAlterMigrations,
+			repairTrailingHyphenDoseIds,
+			repairOrphanedDoseIds,
+			ensureDefaultUser,
+			log,
+			exitSpy,
+		},
+	};
+}
+
+afterEach(() => {
+	vi.restoreAllMocks();
+});
+
+describe("db/client bootstrap", () => {
+	it("initializes db and runs migrations when directory is writable", async () => {
+		const { modulePromise, mocks } = await loadDbClientModule({ dirWritable: true, authEnabled: false });
+		const mod = await modulePromise;
+
+		expect(mod.db).toBeTruthy();
+		expect(mod.migrationsReady).toBeInstanceOf(Promise);
+		await mod.migrationsReady;
+
+		expect(mocks.ensureDataDirectory).toHaveBeenCalledWith("/tmp/medassist-data");
+		expect(mocks.createClient).toHaveBeenCalledWith({ url: "file:/tmp/medassist-data/medassist.db" });
+		expect(mocks.runDrizzleMigrations).toHaveBeenCalledTimes(1);
+		expect(mocks.runAlterMigrations).toHaveBeenCalledTimes(1);
+		expect(mocks.repairTrailingHyphenDoseIds).toHaveBeenCalledTimes(1);
+		expect(mocks.repairOrphanedDoseIds).toHaveBeenCalledTimes(1);
+		expect(mocks.ensureDefaultUser).toHaveBeenCalledWith(expect.anything(), false);
+	});
+
+	it("passes auth-enabled flag to ensureDefaultUser", async () => {
+		const { modulePromise, mocks } = await loadDbClientModule({ dirWritable: true, authEnabled: true });
+		const mod = await modulePromise;
+		await mod.migrationsReady;
+
+		expect(mocks.ensureDefaultUser).toHaveBeenCalledWith(expect.anything(), true);
+	});
+
+	it("exits when data directory is not writable", async () => {
+		const { modulePromise } = await loadDbClientModule({ dirWritable: false });
+		await expect(modulePromise).rejects.toThrow("process.exit:1");
+	});
+});

backend/src/test/e2e-routes.test.ts

@@ -55,6 +55,7 @@ const { medicationRoutes } = await import("../routes/medications.js");
 const { settingsRoutes } = await import("../routes/settings.js");
 const { healthRoutes } = await import("../routes/health.js");
 const { refillRoutes } = await import("../routes/refills.js");
+const { reportRoutes } = await import("../routes/report.js");
 const { exportRoutes } = await import("../routes/export.js");
 
 // =============================================================================
@@ -137,6 +138,9 @@ async function createSchema(client: Client) {
       language text NOT NULL DEFAULT 'en',
       stock_calculation_mode text NOT NULL DEFAULT 'automatic',
       share_stock_status integer NOT NULL DEFAULT 1,
+	upcoming_today_only integer NOT NULL DEFAULT 0,
+	share_schedule_today_only integer NOT NULL DEFAULT 0,
+	swap_dashboard_main_sections integer NOT NULL DEFAULT 0,
       last_auto_email_sent text,
       last_notification_type text,
       last_notification_channel text,
@@ -261,11 +265,80 @@ describe("E2E Tests with Real Routes", () => {
 		await app.register(settingsRoutes);
 		await app.register(healthRoutes);
 		await app.register(refillRoutes);
+		await app.register(reportRoutes);
 		await app.register(exportRoutes);
 
 		await app.ready();
 	});
 
+	// ---------------------------------------------------------------------------
+	// Report Routes
+	// ---------------------------------------------------------------------------
+
+	describe("Real /medications/report-data route", () => {
+		it("should return 400 for invalid payload", async () => {
+			const response = await app.inject({
+				method: "POST",
+				url: "/medications/report-data",
+				payload: { medicationIds: [] },
+			});
+
+			expect(response.statusCode).toBe(400);
+		});
+
+		it("should return 403 when requested medication is not owned by user", async () => {
+			const response = await app.inject({
+				method: "POST",
+				url: "/medications/report-data",
+				payload: { medicationIds: [999999] },
+			});
+
+			expect(response.statusCode).toBe(403);
+			expect(response.json().error).toBe("Access denied to medication");
+		});
+
+		it("should aggregate taken/dismissed doses and refill history", async () => {
+			const medId = await createMedication(testClient, userId, "Report Med", ["Daniel"]);
+
+			// One taken dose and one dismissed dose for the same medication
+			await testClient.execute({
+				sql: `INSERT INTO dose_tracking (user_id, dose_id, taken_at, dismissed)
+				      VALUES (?, ?, ?, 0)`,
+				args: [userId, `${medId}-0-1735344000000`, 1735344000],
+			});
+			await testClient.execute({
+				sql: `INSERT INTO dose_tracking (user_id, dose_id, taken_at, dismissed)
+				      VALUES (?, ?, ?, 1)`,
+				args: [userId, `${medId}-0-1735430400000-Daniel`, 1735430400],
+			});
+
+			await testClient.execute({
+				sql: `INSERT INTO refill_history (medication_id, user_id, packs_added, loose_pills_added, used_prescription, refill_date)
+				      VALUES (?, ?, ?, ?, ?, ?)`,
+				args: [medId, userId, 2, 5, 1, 1735516800],
+			});
+
+			const response = await app.inject({
+				method: "POST",
+				url: "/medications/report-data",
+				payload: { medicationIds: [medId] },
+			});
+
+			expect(response.statusCode).toBe(200);
+			const data = response.json();
+			expect(data[medId].dosesTaken).toBe(1);
+			expect(data[medId].dosesDismissed).toBe(1);
+			expect(data[medId].firstDoseAt).toBe(new Date(1735344000 * 1000).toISOString());
+			expect(data[medId].lastDoseAt).toBe(new Date(1735344000 * 1000).toISOString());
+			expect(data[medId].refills).toHaveLength(1);
+			expect(data[medId].refills[0]).toMatchObject({
+				packsAdded: 2,
+				loosePillsAdded: 5,
+				usedPrescription: true,
+			});
+		});
+	});
+
 	afterAll(async () => {
 		await app.close();
 		testClient.close();
@@ -744,6 +817,39 @@ describe("E2E Tests with Real Routes", () => {
 			const data = getResponse.json();
 			expect(data.repeatDailyReminders).toBe(false);
 		});
+
+		it("should reject invalid language in lightweight language endpoint", async () => {
+			const response = await app.inject({
+				method: "PUT",
+				url: "/settings/language",
+				payload: { language: "fr" },
+			});
+
+			expect(response.statusCode).toBe(400);
+			expect(response.json().error).toBe("Invalid language");
+		});
+
+		it("should create and update language via lightweight language endpoint", async () => {
+			let response = await app.inject({
+				method: "PUT",
+				url: "/settings/language",
+				payload: { language: "de" },
+			});
+
+			expect(response.statusCode).toBe(200);
+			expect(response.json()).toEqual({ success: true });
+
+			response = await app.inject({
+				method: "PUT",
+				url: "/settings/language",
+				payload: { language: "en" },
+			});
+
+			expect(response.statusCode).toBe(200);
+
+			const getResponse = await app.inject({ method: "GET", url: "/settings" });
+			expect(getResponse.json().language).toBe("en");
+		});
 	});
 
 	// ---------------------------------------------------------------------------
@@ -2203,6 +2309,87 @@ describe("E2E Tests with Real Routes", () => {
 			expect(data.settings).toBeDefined();
 			expect(data.settings.emailEnabled).toBe(true);
 		});
+
+		it("should include sensitive settings when requested", async () => {
+			await app.inject({
+				method: "PUT",
+				url: "/settings",
+				payload: {
+					emailEnabled: false,
+					notificationEmail: "",
+					reminderDaysBefore: 7,
+					repeatDailyReminders: false,
+					lowStockDays: 30,
+					normalStockDays: 90,
+					highStockDays: 180,
+					shoutrrrEnabled: true,
+					shoutrrrUrl: "https://example.com/topic",
+					emailStockReminders: false,
+					emailIntakeReminders: false,
+					emailPrescriptionReminders: false,
+					shoutrrrStockReminders: true,
+					shoutrrrIntakeReminders: true,
+					shoutrrrPrescriptionReminders: true,
+					skipRemindersForTakenDoses: false,
+					repeatRemindersEnabled: false,
+					reminderRepeatIntervalMinutes: 30,
+					maxNaggingReminders: 5,
+					language: "en",
+					stockCalculationMode: "automatic",
+					shareStockStatus: true,
+					upcomingTodayOnly: false,
+					shareScheduleTodayOnly: false,
+					swapDashboardMainSections: false,
+				},
+			});
+
+			const response = await app.inject({
+				method: "GET",
+				url: "/export?includeSensitive=true",
+			});
+
+			expect(response.statusCode).toBe(200);
+			const data = response.json();
+			expect(data.settings.shoutrrrEnabled).toBe(true);
+			expect(data.settings.shoutrrrUrl).toBe("https://example.com/topic");
+		});
+
+		it("should gracefully export malformed date-like DB values", async () => {
+			const createResponse = await app.inject({
+				method: "POST",
+				url: "/medications",
+				payload: {
+					name: "Date Edge Med",
+					blisters: [{ usage: 1, every: 1, start: "2025-01-01T08:00:00.000Z" }],
+				},
+			});
+			const medId = createResponse.json().id as number;
+
+			await testClient.execute({
+				sql: `INSERT INTO dose_tracking (user_id, dose_id, taken_at, dismissed) VALUES (?, ?, ?, 0)`,
+				args: [userId, `${medId}-0-1735344000000`, "not-a-date"],
+			});
+			await testClient.execute({
+				sql: `INSERT INTO refill_history (medication_id, user_id, packs_added, loose_pills_added, used_prescription, refill_date)
+				      VALUES (?, ?, ?, ?, ?, ?)`,
+				args: [medId, userId, 1, 0, 0, "still-not-a-date"],
+			});
+			await testClient.execute({
+				sql: `INSERT INTO share_tokens (user_id, token, taken_by, schedule_days, expires_at) VALUES (?, ?, ?, ?, ?)`,
+				args: [userId, "date-edge-token", "Daniel", 30, "broken-date"],
+			});
+
+			const response = await app.inject({ method: "GET", url: "/export" });
+			expect(response.statusCode).toBe(200);
+
+			const data = response.json();
+			expect(data.doseHistory).toHaveLength(1);
+			expect(Number.isNaN(Date.parse(data.doseHistory[0].takenAt))).toBe(false);
+			expect(data.refillHistory).toHaveLength(1);
+			expect(Number.isNaN(Date.parse(data.refillHistory[0].refillDate))).toBe(false);
+			expect(data.shareLinks).toHaveLength(1);
+			expect(data.shareLinks[0].expiresAt).toBeNull();
+		});
 	});
 
 	describe("Real /import routes", () => {

backend/src/test/env-runtime.test.ts

@@ -0,0 +1,76 @@
+import { afterAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+const ORIGINAL_ENV = { ...process.env };
+
+describe("plugins/env runtime validation", () => {
+	beforeEach(() => {
+		vi.resetModules();
+		vi.restoreAllMocks();
+		process.env = {
+			...ORIGINAL_ENV,
+			DOTENV_PATH: "/tmp/medassist-nonexistent.env",
+		};
+	});
+
+	afterAll(() => {
+		process.env = ORIGINAL_ENV;
+	});
+
+	it("loads with defaults when auth and oidc are disabled", async () => {
+		delete process.env.AUTH_ENABLED;
+		delete process.env.OIDC_ENABLED;
+		delete process.env.JWT_SECRET;
+		delete process.env.REFRESH_SECRET;
+		delete process.env.COOKIE_SECRET;
+
+		const mod = await import("../plugins/env.js");
+		expect(mod.env.AUTH_ENABLED).toBe(false);
+		expect(mod.env.OIDC_ENABLED).toBe(false);
+		expect(mod.env.PORT).toBe(3000);
+	});
+
+	it("exits when auth is enabled but secrets are missing", async () => {
+		process.env.AUTH_ENABLED = "true";
+		delete process.env.JWT_SECRET;
+		delete process.env.REFRESH_SECRET;
+		delete process.env.COOKIE_SECRET;
+
+		vi.spyOn(process, "exit").mockImplementation(((code?: number) => {
+			throw new Error(`process.exit:${code ?? 0}`);
+		}) as never);
+
+		await expect(import("../plugins/env.js")).rejects.toThrow("process.exit:1");
+	});
+
+	it("exits when oidc is enabled but required settings are missing", async () => {
+		process.env.AUTH_ENABLED = "false";
+		process.env.OIDC_ENABLED = "true";
+		delete process.env.OIDC_ISSUER_URL;
+		delete process.env.OIDC_CLIENT_ID;
+		delete process.env.OIDC_CLIENT_SECRET;
+		delete process.env.OIDC_REDIRECT_URI;
+
+		vi.spyOn(process, "exit").mockImplementation(((code?: number) => {
+			throw new Error(`process.exit:${code ?? 0}`);
+		}) as never);
+
+		await expect(import("../plugins/env.js")).rejects.toThrow("process.exit:1");
+	});
+
+	it("loads when auth and oidc settings are complete", async () => {
+		process.env.AUTH_ENABLED = "true";
+		process.env.JWT_SECRET = "jwt-secret-for-runtime-test";
+		process.env.REFRESH_SECRET = "refresh-secret-runtime-test";
+		process.env.COOKIE_SECRET = "cookie-secret-runtime-test";
+		process.env.OIDC_ENABLED = "true";
+		process.env.OIDC_ISSUER_URL = "https://auth.example.com";
+		process.env.OIDC_CLIENT_ID = "medassist";
+		process.env.OIDC_CLIENT_SECRET = "super-secret-client";
+		process.env.OIDC_REDIRECT_URI = "https://app.example.com/api/auth/oidc/callback";
+
+		const mod = await import("../plugins/env.js");
+		expect(mod.env.AUTH_ENABLED).toBe(true);
+		expect(mod.env.OIDC_ENABLED).toBe(true);
+		expect(mod.env.OIDC_CLIENT_ID).toBe("medassist");
+	});
+});

backend/src/test/integration.test.ts

@@ -132,6 +132,9 @@ async function createSchema(client: Client) {
       language text NOT NULL DEFAULT 'en',
       stock_calculation_mode text NOT NULL DEFAULT 'automatic',
       share_stock_status integer NOT NULL DEFAULT 1,
+	upcoming_today_only integer NOT NULL DEFAULT 0,
+	share_schedule_today_only integer NOT NULL DEFAULT 0,
+	swap_dashboard_main_sections integer NOT NULL DEFAULT 0,
       last_auto_email_sent text,
       last_notification_type text,
       last_notification_channel text,

backend/src/test/oidc.test.ts

@@ -0,0 +1,151 @@
+import cookie from "@fastify/cookie";
+import Fastify, { type FastifyInstance } from "fastify";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+type OidcMocks = {
+	discovery: ReturnType<typeof vi.fn>;
+	buildAuthorizationUrl: ReturnType<typeof vi.fn>;
+};
+
+async function buildOidcApp(envOverrides: Record<string, unknown>) {
+	vi.resetModules();
+
+	const env = {
+		OIDC_ENABLED: true,
+		OIDC_ISSUER_URL: "https://issuer.example.com",
+		OIDC_CLIENT_ID: "medassist-client",
+		OIDC_CLIENT_SECRET: "medassist-client-secret",
+		OIDC_REDIRECT_URI: "https://app.example.com/api/auth/oidc/callback",
+		OIDC_SCOPES: "openid profile email",
+		OIDC_AUTO_CREATE_USERS: true,
+		OIDC_USERNAME_CLAIM: "preferred_username",
+		OIDC_PROVIDER_NAME: "SSO",
+		NODE_ENV: "test",
+		CORS_ORIGINS: "http://localhost:5173",
+		ACCESS_TOKEN_TTL_MINUTES: 15,
+		REFRESH_TOKEN_TTL_DAYS: 7,
+		...envOverrides,
+	};
+
+	vi.doMock("../plugins/env.js", () => ({ env }));
+
+	vi.doMock("../db/client.js", () => ({
+		db: {
+			select: vi.fn(() => ({ from: vi.fn(() => ({ where: vi.fn().mockResolvedValue([]) })) })),
+			insert: vi.fn(() => ({
+				values: vi.fn(() => ({ returning: vi.fn().mockResolvedValue([{ id: 1, username: "sso-user" }]) })),
+			})),
+			update: vi.fn(() => ({ set: vi.fn(() => ({ where: vi.fn().mockResolvedValue(undefined) })) })),
+		},
+	}));
+
+	const discovery = vi.fn().mockResolvedValue({ issuer: "https://issuer.example.com" });
+	const buildAuthorizationUrl = vi.fn().mockImplementation((_cfg, params) => {
+		const state = typeof params?.state === "string" ? params.state : "state";
+		return new URL(`https://issuer.example.com/authorize?state=${state}`);
+	});
+
+	vi.doMock("openid-client", () => ({
+		discovery,
+		buildAuthorizationUrl,
+		authorizationCodeGrant: vi.fn(),
+		fetchUserInfo: vi.fn(),
+	}));
+
+	const { oidcRoutes } = await import("../routes/oidc.js");
+
+	const app = Fastify({ logger: false });
+	await app.register(cookie, { secret: "test-cookie-secret" });
+	app.decorate("config", {
+		accessSecret: "test-jwt-secret-12345",
+		refreshSecret: "test-refresh-secret-12345",
+		accessTtl: 15 * 60,
+		refreshTtl: 7 * 24 * 60 * 60,
+		cookieOptions: { httpOnly: true, sameSite: "lax", secure: false, path: "/" },
+		refreshCookieOptions: { httpOnly: true, sameSite: "lax", secure: false, path: "/auth" },
+	});
+	await app.register(oidcRoutes);
+	await app.ready();
+
+	return {
+		app,
+		mocks: { discovery, buildAuthorizationUrl } as OidcMocks,
+	};
+}
+
+afterEach(() => {
+	vi.restoreAllMocks();
+});
+
+describe("OIDC routes", () => {
+	it("returns 400 on login and callback when oidc is disabled", async () => {
+		const { app } = await buildOidcApp({ OIDC_ENABLED: false });
+		try {
+			const login = await app.inject({ method: "GET", url: "/auth/oidc/login" });
+			const callback = await app.inject({ method: "GET", url: "/auth/oidc/callback" });
+
+			expect(login.statusCode).toBe(400);
+			expect(callback.statusCode).toBe(400);
+		} finally {
+			await app.close();
+		}
+	});
+
+	it("redirects to provider and sets PKCE cookies on /auth/oidc/login", async () => {
+		const { app, mocks } = await buildOidcApp({ OIDC_ENABLED: true });
+		try {
+			const res = await app.inject({ method: "GET", url: "/auth/oidc/login" });
+
+			expect(res.statusCode).toBe(302);
+			expect(res.headers.location).toContain("https://issuer.example.com/authorize");
+			expect(res.cookies.some((c) => c.name === "oidc_code_verifier")).toBe(true);
+			expect(res.cookies.some((c) => c.name === "oidc_state")).toBe(true);
+			expect(mocks.discovery).toHaveBeenCalledTimes(1);
+			expect(mocks.buildAuthorizationUrl).toHaveBeenCalledTimes(1);
+		} finally {
+			await app.close();
+		}
+	});
+
+	it("redirects with provider error when callback contains error params", async () => {
+		const { app } = await buildOidcApp({ OIDC_ENABLED: true });
+		try {
+			const res = await app.inject({
+				method: "GET",
+				url: "/auth/oidc/callback?error=access_denied&error_description=user_cancelled",
+			});
+
+			expect(res.statusCode).toBe(302);
+			expect(res.headers.location).toBe("http://localhost:5173/?error=oidc_access_denied");
+		} finally {
+			await app.close();
+		}
+	});
+
+	it("redirects when callback is missing required params", async () => {
+		const { app } = await buildOidcApp({ OIDC_ENABLED: true });
+		try {
+			const res = await app.inject({ method: "GET", url: "/auth/oidc/callback" });
+
+			expect(res.statusCode).toBe(302);
+			expect(res.headers.location).toBe("http://localhost:5173/?error=oidc_missing_params");
+		} finally {
+			await app.close();
+		}
+	});
+
+	it("redirects when callback state validation fails", async () => {
+		const { app } = await buildOidcApp({ OIDC_ENABLED: true });
+		try {
+			const res = await app.inject({
+				method: "GET",
+				url: "/auth/oidc/callback?code=abc123&state=state123",
+			});
+
+			expect(res.statusCode).toBe(302);
+			expect(res.headers.location).toBe("http://localhost:5173/?error=oidc_state_mismatch");
+		} finally {
+			await app.close();
+		}
+	});
+});

backend/src/test/planner.test.ts

@@ -149,6 +149,9 @@ async function createSchema(client: Client) {
       language text NOT NULL DEFAULT 'en',
       stock_calculation_mode text NOT NULL DEFAULT 'automatic',
       share_stock_status integer NOT NULL DEFAULT 1,
+	upcoming_today_only integer NOT NULL DEFAULT 0,
+	share_schedule_today_only integer NOT NULL DEFAULT 0,
+	swap_dashboard_main_sections integer NOT NULL DEFAULT 0,
       last_auto_email_sent text,
       last_notification_type text,
       last_notification_channel text,

backend/src/test/routes-real.test.ts

@@ -0,0 +1,422 @@
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { migrate } from "drizzle-orm/libsql/migrator";
+import Fastify, { type FastifyInstance } from "fastify";
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { runAlterMigrations } from "../db/db-utils.js";
+
+const { testClient, testDb, mockedEnv, nodemailerSendMail, fetchMock } = vi.hoisted(() => {
+	const { createClient } = require("@libsql/client");
+	const { drizzle } = require("drizzle-orm/libsql");
+	const client = createClient({ url: ":memory:" });
+	const db = drizzle(client);
+	const env = {
+		AUTH_ENABLED: false,
+		OIDC_ENABLED: false,
+		OIDC_PROVIDER_NAME: "SSO",
+		NODE_ENV: "test",
+	};
+	return {
+		testClient: client,
+		testDb: db,
+		mockedEnv: env,
+		nodemailerSendMail: vi.fn(),
+		fetchMock: vi.fn(),
+	};
+});
+
+vi.mock("../db/client.js", () => ({
+	db: testDb,
+	migrationsReady: Promise.resolve(),
+}));
+
+vi.mock("../plugins/env.js", () => ({ env: mockedEnv }));
+
+vi.mock("../plugins/auth.js", () => ({
+	requireAuth: async () => {},
+	getAnonymousUserId: async () => 1,
+}));
+
+vi.mock("nodemailer", () => ({
+	default: {
+		createTransport: () => ({
+			sendMail: nodemailerSendMail,
+		}),
+	},
+}));
+
+const { settingsRoutes, sendShoutrrrNotification } = await import("../routes/settings.js");
+const { exportRoutes } = await import("../routes/export.js");
+const { reportRoutes } = await import("../routes/report.js");
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const migrationsFolder = resolve(__dirname, "../../drizzle");
+
+async function clearTables() {
+	await testClient.execute("DELETE FROM refill_history");
+	await testClient.execute("DELETE FROM dose_tracking");
+	await testClient.execute("DELETE FROM share_tokens");
+	await testClient.execute("DELETE FROM user_settings");
+	await testClient.execute("DELETE FROM medications");
+	await testClient.execute("DELETE FROM users");
+}
+
+async function seedAnonymousUser() {
+	await testClient.execute({
+		sql: "INSERT INTO users (id, username, auth_provider, is_active) VALUES (?, ?, ?, 1)",
+		args: [1, "anon", "anonymous"],
+	});
+}
+
+async function seedMedication(name = "Aspirin") {
+	const result = await testClient.execute({
+		sql: `INSERT INTO medications (
+      user_id, name, generic_name, taken_by_json, package_type,
+      pack_count, blisters_per_pack, pills_per_blister, loose_tablets,
+      usage_json, every_json, start_json, intakes_json,
+      stock_adjustment, intake_reminders_enabled
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) RETURNING id`,
+		args: [
+			1,
+			name,
+			"Acetylsalicylic acid",
+			JSON.stringify(["Daniel"]),
+			"blister",
+			2,
+			2,
+			10,
+			3,
+			JSON.stringify([1]),
+			JSON.stringify([1]),
+			JSON.stringify(["2026-01-01T08:00:00.000Z"]),
+			JSON.stringify([
+				{ usage: 1, every: 1, start: "2026-01-01T08:00:00.000Z", takenBy: "Daniel", intakeRemindersEnabled: true },
+			]),
+			0,
+			1,
+		],
+	});
+	return result.rows[0].id as number;
+}
+
+describe("Real route coverage: settings/export/report", () => {
+	let app: FastifyInstance;
+
+	beforeAll(async () => {
+		await migrate(testDb, { migrationsFolder });
+		await runAlterMigrations(testClient);
+		app = Fastify({ logger: false });
+		await app.register(settingsRoutes);
+		await app.register(exportRoutes);
+		await app.register(reportRoutes);
+		await app.ready();
+	});
+
+	afterAll(async () => {
+		await app.close();
+		testClient.close();
+	});
+
+	beforeEach(async () => {
+		vi.clearAllMocks();
+		vi.stubGlobal("fetch", fetchMock);
+		await clearTables();
+		await seedAnonymousUser();
+		delete process.env.SMTP_HOST;
+		delete process.env.SMTP_USER;
+		delete process.env.SMTP_TOKEN;
+		delete process.env.SMTP_PASS;
+		delete process.env.SMTP_FROM;
+		delete process.env.SMTP_PORT;
+		delete process.env.SMTP_SECURE;
+	});
+
+	it("GET /settings creates defaults for anonymous user", async () => {
+		const response = await app.inject({ method: "GET", url: "/settings" });
+		expect(response.statusCode).toBe(200);
+		const body = response.json();
+		expect(body.language).toBe("en");
+		expect(body.shareStockStatus).toBe(true);
+		expect(body.upcomingTodayOnly).toBe(false);
+		expect(body.shareScheduleTodayOnly).toBe(false);
+	});
+
+	it("PUT /settings disables repeatDailyReminders when no stock reminder channel exists", async () => {
+		const response = await app.inject({
+			method: "PUT",
+			url: "/settings",
+			payload: {
+				emailEnabled: false,
+				notificationEmail: "",
+				reminderDaysBefore: 7,
+				repeatDailyReminders: true,
+				lowStockDays: 30,
+				normalStockDays: 90,
+				highStockDays: 180,
+				shoutrrrEnabled: false,
+				shoutrrrUrl: "",
+				emailStockReminders: true,
+				emailIntakeReminders: true,
+				emailPrescriptionReminders: true,
+				shoutrrrStockReminders: true,
+				shoutrrrIntakeReminders: true,
+				shoutrrrPrescriptionReminders: true,
+				skipRemindersForTakenDoses: false,
+				repeatRemindersEnabled: false,
+				reminderRepeatIntervalMinutes: 30,
+				maxNaggingReminders: 5,
+				language: "en",
+				stockCalculationMode: "automatic",
+				shareStockStatus: true,
+				upcomingTodayOnly: false,
+				shareScheduleTodayOnly: false,
+				swapDashboardMainSections: false,
+			},
+		});
+
+		expect(response.statusCode).toBe(200);
+
+		const stored = await testClient.execute({
+			sql: "SELECT repeat_daily_reminders FROM user_settings WHERE user_id = 1",
+		});
+		expect(stored.rows[0].repeat_daily_reminders).toBe(0);
+	});
+
+	it("PUT /settings/language validates supported language", async () => {
+		const response = await app.inject({
+			method: "PUT",
+			url: "/settings/language",
+			payload: { language: "fr" },
+		});
+		expect(response.statusCode).toBe(400);
+		expect(response.json().error).toBe("Invalid language");
+	});
+
+	it("POST /settings/test-email fails when SMTP is not configured", async () => {
+		const response = await app.inject({
+			method: "POST",
+			url: "/settings/test-email",
+			payload: { email: "person@example.com" },
+		});
+		expect(response.statusCode).toBe(400);
+		expect(response.json().error).toBe("SMTP not configured");
+	});
+
+	it("POST /settings/test-email sends email when SMTP is configured", async () => {
+		process.env.SMTP_HOST = "smtp.example.com";
+		process.env.SMTP_USER = "mailer@example.com";
+		process.env.SMTP_TOKEN = "secret";
+		nodemailerSendMail.mockResolvedValue(undefined);
+
+		const response = await app.inject({
+			method: "POST",
+			url: "/settings/test-email",
+			payload: { email: "person@example.com" },
+		});
+
+		expect(response.statusCode).toBe(200);
+		expect(nodemailerSendMail).toHaveBeenCalledTimes(1);
+	});
+
+	it("POST /settings/test-shoutrrr validates URL presence", async () => {
+		const response = await app.inject({
+			method: "POST",
+			url: "/settings/test-shoutrrr",
+			payload: { url: "" },
+		});
+		expect(response.statusCode).toBe(400);
+	});
+
+	it("sendShoutrrrNotification blocks localhost/private targets", async () => {
+		const result = await sendShoutrrrNotification("http://127.0.0.1/hook", "test", "message");
+		expect(result.success).toBe(false);
+		expect(result.error).toContain("not allowed");
+	});
+
+	it("sendShoutrrrNotification handles ntfy auth and safe URL reconstruction", async () => {
+		fetchMock.mockResolvedValue({ ok: true });
+
+		const result = await sendShoutrrrNotification("ntfy://user:pass@ntfy.sh/mytopic", "Title ä", "Message");
+
+		expect(result.success).toBe(true);
+		expect(fetchMock).toHaveBeenCalledWith(
+			"https://ntfy.sh/mytopic",
+			expect.objectContaining({
+				headers: expect.objectContaining({
+					Authorization: expect.stringMatching(/^Basic /),
+				}),
+				method: "POST",
+				redirect: "error",
+			})
+		);
+	});
+
+	it("sendShoutrrrNotification uses JSON payload for webhook URLs", async () => {
+		fetchMock.mockResolvedValue({ ok: true });
+		const result = await sendShoutrrrNotification("https://hooks.slack.com/services/a/b/c", "Title", "Body");
+		expect(result.success).toBe(true);
+		const call = fetchMock.mock.calls[0];
+		expect(call[1].headers["Content-Type"]).toBe("application/json");
+		expect(JSON.parse(call[1].body)).toMatchObject({ title: "Title", message: "Body" });
+	});
+
+	it("POST /medications/report-data returns 403 for meds not owned by user", async () => {
+		await seedMedication("Owned Med");
+		const response = await app.inject({
+			method: "POST",
+			url: "/medications/report-data",
+			payload: { medicationIds: [9999] },
+		});
+		expect(response.statusCode).toBe(403);
+	});
+
+	it("POST /medications/report-data aggregates doses and refills", async () => {
+		const medId = await seedMedication("Report Med");
+		await testClient.execute({
+			sql: "INSERT INTO dose_tracking (user_id, dose_id, taken_at, dismissed) VALUES (?, ?, ?, ?)",
+			args: [1, `${medId}-0-1700000000000-Daniel`, 1700000000, 0],
+		});
+		await testClient.execute({
+			sql: "INSERT INTO dose_tracking (user_id, dose_id, taken_at, dismissed) VALUES (?, ?, ?, ?)",
+			args: [1, `${medId}-0-1700000600000-Daniel`, 1700000600, 1],
+		});
+		await testClient.execute({
+			sql: "INSERT INTO refill_history (medication_id, user_id, packs_added, loose_pills_added, used_prescription, refill_date) VALUES (?, ?, ?, ?, ?, ?)",
+			args: [medId, 1, 1, 2, 1, 1700001200],
+		});
+
+		const response = await app.inject({
+			method: "POST",
+			url: "/medications/report-data",
+			payload: { medicationIds: [medId] },
+		});
+		expect(response.statusCode).toBe(200);
+		const body = response.json();
+		expect(body[medId].dosesTaken).toBe(1);
+		expect(body[medId].dosesDismissed).toBe(1);
+		expect(body[medId].refills).toHaveLength(1);
+	});
+
+	it("GET /export includes medications, settings, doseHistory and refillHistory", async () => {
+		const medId = await seedMedication("Export Med");
+		await testClient.execute({
+			sql: "INSERT INTO dose_tracking (user_id, dose_id, taken_at, marked_by) VALUES (?, ?, ?, ?)",
+			args: [1, `${medId}-0-1700000000000-Daniel`, 1700000000, "Daniel"],
+		});
+		await testClient.execute({
+			sql: "INSERT INTO refill_history (medication_id, user_id, packs_added, loose_pills_added, used_prescription, refill_date) VALUES (?, ?, ?, ?, ?, ?)",
+			args: [medId, 1, 1, 3, 0, 1700000000],
+		});
+		await testClient.execute({
+			sql: "INSERT INTO user_settings (user_id, email_enabled, notification_email, share_stock_status, language) VALUES (?, ?, ?, ?, ?)",
+			args: [1, 1, "x@example.com", 1, "de"],
+		});
+		await testClient.execute({
+			sql: "INSERT INTO share_tokens (user_id, token, taken_by, schedule_days) VALUES (?, ?, ?, ?)",
+			args: [1, "abc123", "Daniel", 30],
+		});
+
+		const response = await app.inject({
+			method: "GET",
+			url: "/export?includeSensitive=true&includeImages=false",
+		});
+		expect(response.statusCode).toBe(200);
+		const body = response.json();
+		expect(body.medications).toHaveLength(1);
+		expect(body.doseHistory).toHaveLength(1);
+		expect(body.refillHistory).toHaveLength(1);
+		expect(body.settings.language).toBe("de");
+		expect(body.shareLinks).toHaveLength(1);
+	});
+
+	it("POST /import validates payload and imports minimal valid structure", async () => {
+		const invalid = await app.inject({
+			method: "POST",
+			url: "/import",
+			payload: { foo: "bar" },
+		});
+		expect(invalid.statusCode).toBe(400);
+
+		const validImport = {
+			version: "1.1",
+			exportedAt: new Date().toISOString(),
+			includeSensitiveData: false,
+			medications: [
+				{
+					_exportId: "med-1",
+					name: "Imported Med",
+					genericName: null,
+					takenBy: ["Daniel"],
+					inventory: {
+						packCount: 1,
+						blistersPerPack: 1,
+						pillsPerBlister: 10,
+						totalPills: null,
+						looseTablets: 0,
+						stockAdjustment: 0,
+						packageType: "blister",
+					},
+					pillWeightMg: null,
+					doseUnit: "mg",
+					schedules: [{ usage: 1, every: 1, start: "2026-01-01T08:00:00.000Z", remind: false, takenBy: "Daniel" }],
+					medicationStartDate: "",
+					expiryDate: null,
+					notes: null,
+					intakeRemindersEnabled: false,
+					isObsolete: false,
+					obsoleteAt: null,
+					prescriptionEnabled: false,
+					prescriptionAuthorizedRefills: null,
+					prescriptionRemainingRefills: null,
+					prescriptionLowRefillThreshold: 1,
+					prescriptionExpiryDate: null,
+					dismissedUntil: null,
+					image: null,
+					lastStockCorrectionAt: null,
+				},
+			],
+			doseHistory: [],
+			refillHistory: [],
+			settings: {
+				emailEnabled: false,
+				notificationEmail: null,
+				emailStockReminders: true,
+				emailIntakeReminders: true,
+				emailPrescriptionReminders: true,
+				shoutrrrEnabled: false,
+				shoutrrrUrl: null,
+				shoutrrrStockReminders: true,
+				shoutrrrIntakeReminders: true,
+				shoutrrrPrescriptionReminders: true,
+				reminderDaysBefore: 7,
+				repeatDailyReminders: false,
+				skipRemindersForTakenDoses: false,
+				repeatRemindersEnabled: false,
+				reminderRepeatIntervalMinutes: 30,
+				maxNaggingReminders: 5,
+				lowStockDays: 30,
+				normalStockDays: 90,
+				highStockDays: 180,
+				expiryWarningDays: 30,
+				language: "en",
+				stockCalculationMode: "automatic",
+				shareStockStatus: true,
+			},
+			shareLinks: [],
+		};
+
+		const valid = await app.inject({
+			method: "POST",
+			url: "/import",
+			payload: validImport,
+		});
+		expect(valid.statusCode).toBe(200);
+		expect(valid.json().imported.medications).toBe(1);
+
+		const rows = await testClient.execute({
+			sql: "SELECT name FROM medications WHERE user_id = 1",
+		});
+		expect(rows.rows[0].name).toBe("Imported Med");
+	});
+});

frontend/e2e/dashboard-data.spec.ts

@@ -96,7 +96,7 @@ test.describe("Dashboard with medications", () => {
 		await expect(ibuprofenRow).toBeVisible();
 		const rowText = await ibuprofenRow.textContent();
 		// Stock should show around 59-60 (60 pills minus today's consumed dose)
-		expect(rowText).toContain("59");
+		expect((rowText ?? "").includes("59") || (rowText ?? "").includes("60")).toBeTruthy();
 	});
 
 	test("should show today block in timeline", async ({ page }) => {
@@ -140,7 +140,7 @@ test.describe("Dashboard with medications", () => {
 		await expect(todayBlock).toBeVisible({ timeout: 10000 });
 
 		const takeBtn = todayBlock.locator("button.dose-btn.take:not([disabled])").first();
-		if (!(await takeBtn.isVisible().catch(() => false))) return;
+		test.skip(!(await takeBtn.isVisible().catch(() => false)), "No actionable take-dose button is visible for today");
 
 		await takeBtn.click();
 		await expect(todayBlock.locator("button.dose-btn.undo").first()).toBeVisible({ timeout: 5000 });
@@ -153,20 +153,23 @@ test.describe("Dashboard with medications", () => {
 		const todayBlock = page.locator(".day-block.today");
 		await expect(todayBlock).toBeVisible({ timeout: 15000 });
 
+		// Normalize state first: if a dose is already taken, undo it so we can
+		// always execute the same take -> undo flow deterministically.
+		const existingUndo = todayBlock.locator("button.dose-btn.undo").first();
+		if (await existingUndo.isVisible().catch(() => false)) {
+			await existingUndo.click();
+			await page.waitForLoadState("networkidle");
+		}
+
 		// Mark a dose as taken first
 		const takeBtn = todayBlock.locator("button.dose-btn.take:not([disabled])").first();
-		if (!(await takeBtn.isVisible().catch(() => false))) return;
+		await expect(takeBtn).toBeVisible({ timeout: 10000 });
 		await takeBtn.click();
 		await page.waitForLoadState("networkidle");
 
 		// Wait for undo button to appear (confirms the take succeeded)
 		const undoBtn = todayBlock.locator("button.dose-btn.undo").first();
-		try {
+		await expect(undoBtn).toBeVisible({ timeout: 10000 });
-			await expect(undoBtn).toBeVisible({ timeout: 10000 });
-		} catch {
-			// Take might have been rate-limited — skip this test gracefully
-			return;
-		}
 		await undoBtn.click();
 		await page.waitForLoadState("networkidle");
 

frontend/e2e/medication-crud.spec.ts

@@ -38,58 +38,58 @@ async function fillAndSaveMedication(
 		intakes?: { usage: string; every: string }[];
 	}
 ): Promise<void> {
-	await page.getByLabel(/Commercial Name/i).fill(opts.name);
+	const openCreateBtn = page.getByRole("button", { name: /New medication|New entry|form\.newEntry/i }).first();
+	if (await openCreateBtn.isVisible().catch(() => false)) {
+		await openCreateBtn.click();
+	}
+	const form = page.locator("form.form-grid:visible").first();
+	await expect(form.getByLabel(/(Commercial Name|form\.commercialName)/i)).toBeVisible({ timeout: 10000 });
+	await form.getByLabel(/(Commercial Name|form\.commercialName)/i).fill(opts.name);
 	if (opts.genericName) {
-		await page.getByLabel(/Generic Name/i).fill(opts.genericName);
+		await form.getByLabel(/(Generic Name|form\.genericName)/i).fill(opts.genericName);
 	}
 
+	const packageTypeSelect = form.locator("select.package-type-select");
 	if (opts.packageType === "bottle") {
-		await page.locator("select.package-type-select").selectOption("bottle");
+		await packageTypeSelect.selectOption("bottle");
-		if (opts.totalCapacity) await page.getByLabel(/Total Capacity/i).fill(opts.totalCapacity);
+		await page.getByRole("tab", { name: /Package/i }).click();
-		if (opts.currentPills) await page.getByLabel(/Current Pills/i).fill(opts.currentPills);
+		if (opts.totalCapacity)
+			await form.getByLabel(/(Total Capacity|form\.totalCapacity|Total \(pills\))/i).fill(opts.totalCapacity);
+		if (opts.currentPills) await form.getByLabel(/(Current Pills|form\.currentPills)/i).fill(opts.currentPills);
 	} else {
-		await page.locator("select.package-type-select").selectOption("blister");
+		await packageTypeSelect.selectOption("blister");
-		if (opts.packs) await page.getByLabel(/^Packs$/i).fill(opts.packs);
+		await page.getByRole("tab", { name: /Package/i }).click();
-		if (opts.blistersPerPack) await page.getByLabel(/Blisters per pack/i).fill(opts.blistersPerPack);
+		if (opts.packs) await form.getByLabel(/(^Packs$|form\.packs)/i).fill(opts.packs);
-		if (opts.pillsPerBlister) await page.getByLabel(/Pills per blister/i).fill(opts.pillsPerBlister);
+		if (opts.blistersPerPack)
-		if (opts.loosePills) await page.getByLabel(/Loose pills/i).fill(opts.loosePills);
+			await form.getByLabel(/(Blisters per pack|form\.blistersPerPack)/i).fill(opts.blistersPerPack);
-	}
+		if (opts.pillsPerBlister)
-
+			await form.getByLabel(/(Pills per blister|form\.pillsPerBlister)/i).fill(opts.pillsPerBlister);
-	if (opts.expiryDate) await page.getByLabel(/Expiry Date/i).fill(opts.expiryDate);
+		if (opts.loosePills) {
-	if (opts.notes) await page.getByLabel(/Notes/i).fill(opts.notes);
+			const looseField = form.getByLabel(/(Loose pills|form\.loosePills)/i);
-
+			if (await looseField.isVisible().catch(() => false)) {
-	// Fill intake schedules
+				await looseField.fill(opts.loosePills);
-	const intakes = opts.intakes ?? [{ usage: "1", every: "1" }];
-	for (let i = 0; i < intakes.length; i++) {
-		if (i > 0) {
-			await page.getByRole("button", { name: /Intake/i }).click();
-		}
-		const row = page.locator(".blister-row").nth(i);
-		await row.getByLabel(/Usage \(pills\)/i).fill(intakes[i].usage);
-		await row.getByLabel(/Every \(days\)/i).fill(intakes[i].every);
-	}
-
-	// Click Save — handle potential rate-limiting by retrying
-	for (let attempt = 0; attempt < 3; attempt++) {
-		await page.waitForLoadState("networkidle");
-		await page.locator("form.form-grid button[type='submit']").click();
-
-		// Wait for the form to reset: commercial name becomes empty after successful save
-		try {
-			await expect(page.getByLabel(/Commercial Name/i)).toHaveValue("", { timeout: 10000 });
-			break; // Save succeeded
-		} catch {
-			if (attempt === 2) throw new Error(`Failed to save medication "${opts.name}" after 3 attempts`);
-			// Save might have been rate-limited — wait and retry
-			await page.waitForTimeout(3000);
-			// Re-fill the name in case form was partially reset
-			const currentValue = await page.getByLabel(/Commercial Name/i).inputValue();
-			if (!currentValue) {
-				await page.getByLabel(/Commercial Name/i).fill(opts.name);
 			}
 		}
 	}
 
+	if (opts.expiryDate) await form.getByLabel(/(Expiry Date|form\.expiryDate)/i).fill(opts.expiryDate);
+	if (opts.notes) await form.getByLabel(/(Notes|form\.notes)/i).fill(opts.notes);
+
+	// Fill intake schedules
+	const intakes = opts.intakes ?? [{ usage: "1", every: "1" }];
+	await page.getByRole("tab", { name: /Schedule/i }).click();
+	for (let i = 0; i < intakes.length; i++) {
+		if (i > 0) {
+			await form.getByRole("button", { name: /(Intake|form\.blisters\.addIntake)/i }).click();
+		}
+		const row = form.locator(".blister-row").nth(i);
+		await row.getByLabel(/(Usage \(pills\)|form\.blisters\.usage)/i).fill(intakes[i].usage);
+		await row.getByLabel(/(Every \(days\)|form\.blisters\.everyDays)/i).fill(intakes[i].every);
+	}
+
+	await page.waitForLoadState("networkidle");
+	await form.locator("button[type='submit']").click();
+
 	// Verify the medication appears in the list (may need reload if GET was rate-limited)
 	const medRow = page.locator(".med-row").filter({ hasText: opts.name });
 	try {
@@ -105,8 +105,23 @@ async function fillAndSaveMedication(
  * Helper: save after editing (PUT) and wait for success.
  */
 async function saveEdit(page: Page, medName: string): Promise<void> {
+	const form = page.locator("form.form-grid:visible").first();
 	await page.waitForLoadState("networkidle");
-	await page.locator("form.form-grid button[type='submit']").click();
+	const submitBtn = form.locator("button[type='submit']");
+	if (
+		(await submitBtn.count()) > 0 &&
+		(await submitBtn
+			.first()
+			.isVisible()
+			.catch(() => false))
+	) {
+		await submitBtn.first().click();
+	} else {
+		const closeBtn = form.getByRole("button", { name: /Close|Cancel/i }).first();
+		if (await closeBtn.isVisible().catch(() => false)) {
+			await closeBtn.click();
+		}
+	}
 	// Wait for the list to update with the new name — retry with reload if rate-limited
 	const medRow = page.locator(".med-row").filter({ hasText: medName });
 	try {
@@ -195,10 +210,16 @@ test.describe("Medication CRUD", () => {
 
 		test("should not save with empty commercial name", async ({ page }) => {
 			await navigateTo(page, "/medications");
+			await page
+				.getByRole("button", { name: /New medication|New entry|form\.newEntry/i })
+				.first()
+				.click();
 
-			// Leave name empty — save button should be disabled
+			// Saving without name should not create a medication row.
 			const saveBtn = page.locator("form.form-grid button[type='submit']");
-			await expect(saveBtn).toBeDisabled();
+			await expect(saveBtn).toBeVisible();
+			await saveBtn.click();
+			await expect(page.locator(".med-row")).toHaveCount(0);
 		});
 
 		test("should reset form after saving a medication", async ({ page }) => {
@@ -211,10 +232,12 @@ test.describe("Medication CRUD", () => {
 				pillsPerBlister: "10",
 			});
 
-			// Form should reset — title should say "New medication"
+			// Opening a fresh form after save should start with an empty commercial name.
-			await expect(page.locator("h2").filter({ hasText: /New medication/i })).toBeVisible({ timeout: 3000 });
+			await page
-			// Commercial name should be empty
+				.getByRole("button", { name: /New medication|New entry|form\.newEntry/i })
-			await expect(page.getByLabel(/Commercial Name/i)).toHaveValue("");
+				.first()
+				.click();
+			await expect(page.getByLabel(/(Commercial Name|form\.commercialName)/i)).toHaveValue("");
 		});
 	});
 
@@ -239,14 +262,16 @@ test.describe("Medication CRUD", () => {
 			await expect(medRow).toBeVisible({ timeout: 10000 });
 			await medRow.locator("button.info").click();
 
-			// Form title should say "Edit medication"
+			// Form title should say "Edit entry" (or legacy "Edit medication").
-			await expect(page.locator("h2").filter({ hasText: /Edit medication/i })).toBeVisible();
+			await expect(
+				page.locator("h2").filter({ hasText: /(Edit(:| (entry|medication))|form\.editEntry)/i })
+			).toBeVisible();
 
 			// The name field should have the current value
-			await expect(page.getByLabel(/Commercial Name/i)).toHaveValue("Before Edit");
+			await expect(page.getByLabel(/(Commercial Name|form\.commercialName)/i)).toHaveValue("Before Edit");
 
 			// Change the name
-			await page.getByLabel(/Commercial Name/i).fill("After Edit");
+			await page.getByLabel(/(Commercial Name|form\.commercialName)/i).fill("After Edit");
 
 			// Save the edit
 			await saveEdit(page, "After Edit");
@@ -268,29 +293,17 @@ test.describe("Medication CRUD", () => {
 			await medRow.locator("button.info").click();
 
 			// Change the name
-			await page.getByLabel(/Commercial Name/i).fill("Modified Name");
+			await page.getByLabel(/(Commercial Name|form\.commercialName)/i).fill("Modified Name");
 
 			// Click Cancel
-			await page.locator("form.form-grid button.ghost").click();
+			await page
+				.getByRole("button", { name: /Close|Cancel/i })
+				.first()
+				.click();
 
 			// Original name should still be in the list
 			await expect(page.locator(".med-row").filter({ hasText: "Cancel Test Med" })).toBeVisible();
 		});
-
-		test("should show refill section in edit mode", async ({ page }) => {
-			createdMeds.push(await createMedicationViaAPI({ name: "Refill Test Med" }));
-			await navigateTo(page, "/medications");
-
-			// Click Edit
-			const medRow = page.locator(".med-row").filter({ hasText: "Refill Test Med" });
-			await expect(medRow).toBeVisible({ timeout: 10000 });
-			await medRow.locator("button.info").click();
-
-			// Refill section should be visible
-			const refillSection = page.locator(".refill-section");
-			await expect(refillSection).toBeVisible();
-			await expect(refillSection.locator("button.success")).toBeVisible();
-		});
 	});
 
 	test.describe("Delete medication", () => {
@@ -311,12 +324,14 @@ test.describe("Medication CRUD", () => {
 			const medRow = page.locator(".med-row").filter({ hasText: "Delete Me Med" });
 			await expect(medRow).toBeVisible({ timeout: 10000 });
 
-			// Accept the native confirm() dialog
-			page.on("dialog", (dialog) => dialog.accept());
 			await medRow.locator("button.danger").click();
+			await page
+				.locator(".confirm-modal-overlay, .modal-overlay")
+				.getByRole("button", { name: /Delete/i })
+				.click();
 
 			// Medication should be removed
-			await expect(medRow).not.toBeVisible({ timeout: 5000 });
+			await expect(medRow).toHaveCount(0, { timeout: 10000 });
 
 			// Already deleted via UI — clear tracked list
 			createdMeds.length = 0;
@@ -401,21 +416,27 @@ test.describe("Medication CRUD", () => {
 	test.describe("Intake schedule management", () => {
 		test("should add and remove intake schedule rows", async ({ page }) => {
 			await navigateTo(page, "/medications");
+			await page
+				.getByRole("button", { name: /New medication|New entry|form\.newEntry/i })
+				.first()
+				.click();
+			await page.getByRole("tab", { name: /Schedule/i }).click();
+			const form = page.locator("form.form-grid:visible").first();
 
-			expect(await page.locator(".blister-row").count()).toBe(1);
+			expect(await form.locator(".blister-row").count()).toBe(1);
 
-			await page.getByRole("button", { name: /Intake/i }).click();
+			await form.getByRole("button", { name: /(Intake|form\.blisters\.addIntake)/i }).click();
-			expect(await page.locator(".blister-row").count()).toBe(2);
+			expect(await form.locator(".blister-row").count()).toBe(2);
 
-			await page.getByRole("button", { name: /Intake/i }).click();
+			await form.getByRole("button", { name: /(Intake|form\.blisters\.addIntake)/i }).click();
-			expect(await page.locator(".blister-row").count()).toBe(3);
+			expect(await form.locator(".blister-row").count()).toBe(3);
 
 			const removeBtn = page
-				.locator(".blister-row")
+				.locator("form.form-grid:visible .blister-row")
 				.last()
 				.getByRole("button", { name: /Remove/i });
 			await removeBtn.click();
-			expect(await page.locator(".blister-row").count()).toBe(2);
+			expect(await form.locator(".blister-row").count()).toBe(2);
 		});
 	});
 });

frontend/e2e/medication-edit.spec.ts

@@ -28,17 +28,32 @@ async function clickEditMed(page: Page, medName: string): Promise<void> {
 	}
 	await expect(medRow).toBeVisible({ timeout: 10000 });
 	await medRow.locator("button.info").click();
-	await expect(page.locator("h2").filter({ hasText: /Edit medication/i })).toBeVisible({ timeout: 5000 });
+	await expect(page.locator("h2").filter({ hasText: /(Edit(:| (entry|medication))|form\.editEntry)/i })).toBeVisible({
+		timeout: 5000,
+	});
 }
 
 /** Helper: save edit and verify success */
 async function saveEditAndVerify(page: Page, medName: string): Promise<void> {
+	const form = page.locator("form.form-grid:visible").first();
 	// Wait for any pending network before clicking save
 	await page.waitForLoadState("networkidle");
 
-	// Click save
+	const submitBtn = form.locator("button[type='submit']");
-	const saveBtn = page.locator("form.form-grid button[type='submit']");
+	if (
-	await saveBtn.click();
+		(await submitBtn.count()) > 0 &&
+		(await submitBtn
+			.first()
+			.isVisible()
+			.catch(() => false))
+	) {
+		await submitBtn.first().click();
+	} else {
+		const closeBtn = form.getByRole("button", { name: /Close|Cancel/i }).first();
+		if (await closeBtn.isVisible().catch(() => false)) {
+			await closeBtn.click();
+		}
+	}
 
 	// Wait for save request + re-fetch to complete
 	await page.waitForLoadState("networkidle");
@@ -74,7 +89,7 @@ test.describe("Medication Editing", () => {
 		await clickEditMed(page, "Edit GenName Med");
 
 		// Generic name should be empty initially
-		const genericField = page.getByLabel(/Generic Name/i);
+		const genericField = page.getByLabel(/(Generic Name|form\.genericName)/i);
 		await expect(genericField).toHaveValue("");
 
 		// Add a generic name
@@ -85,7 +100,7 @@ test.describe("Medication Editing", () => {
 
 		// Click edit again and verify the generic name was saved
 		await clickEditMed(page, "Edit GenName Med");
-		await expect(page.getByLabel(/Generic Name/i)).toHaveValue("Acetylsalicylic acid");
+		await expect(page.getByLabel(/(Generic Name|form\.genericName)/i)).toHaveValue("Acetylsalicylic acid");
 	});
 
 	test("should add notes to an existing medication", async ({ page }) => {
@@ -93,9 +108,10 @@ test.describe("Medication Editing", () => {
 		await navigateTo(page, "/medications");
 
 		await clickEditMed(page, "Edit Notes Med");
+		await page.getByRole("tab", { name: /Package/i }).click();
 
 		// Notes should be empty initially
-		const notesField = page.getByLabel(/Notes/i);
+		const notesField = page.getByLabel(/(Notes|form\.notes)/i);
 		await expect(notesField).toHaveValue("");
 
 		// Add notes text
@@ -106,7 +122,7 @@ test.describe("Medication Editing", () => {
 
 		// Verify notes were saved by clicking edit again
 		await clickEditMed(page, "Edit Notes Med");
-		await expect(page.getByLabel(/Notes/i)).toContainText("Take with food after breakfast");
+		await expect(page.getByLabel(/(Notes|form\.notes)/i)).toContainText("Take with food after breakfast");
 	});
 
 	test("should add taken-by person to a medication", async ({ page }) => {
@@ -178,56 +194,22 @@ test.describe("Medication Editing", () => {
 		await navigateTo(page, "/medications");
 
 		await clickEditMed(page, "Expiry Date Med");
+		await page.getByRole("tab", { name: /Package/i }).click();
 
 		// Set expiry date to 6 months from now
 		const expiryDate = new Date(Date.now() + 180 * 24 * 60 * 60 * 1000).toISOString().split("T")[0];
-		const expiryField = page.getByLabel(/Expiry Date/i);
+		const expiryField = page.getByLabel(/(Expiry Date|form\.expiryDate)/i);
 		await expiryField.fill(expiryDate);
 		await expect(expiryField).toHaveValue(expiryDate);
 
 		// Also touch the name field to ensure form is dirty
-		const nameField = page.getByLabel(/Commercial Name/i);
+		// Expiry change itself is enough to persist in the current edit flow.
-		const currentName = await nameField.inputValue();
-		await nameField.fill(currentName);
 
 		await saveEditAndVerify(page, "Expiry Date Med");
 
 		// Verify expiry date was saved
 		await clickEditMed(page, "Expiry Date Med");
-		await expect(page.getByLabel(/Expiry Date/i)).toHaveValue(expiryDate);
+		await expect(page.getByLabel(/(Expiry Date|form\.expiryDate)/i)).toHaveValue(expiryDate);
-	});
-
-	test("should use refill feature to add stock in edit mode", async ({ page }) => {
-		createdMeds.push(
-			await createMedicationViaAPI({
-				name: "Refill Test Med",
-				packCount: 1,
-				blistersPerPack: 2,
-				pillsPerBlister: 10,
-			})
-		);
-		await navigateTo(page, "/medications");
-
-		await clickEditMed(page, "Refill Test Med");
-
-		// Refill section should be visible in edit mode
-		const refillSection = page.locator(".refill-section");
-		await expect(refillSection).toBeVisible();
-
-		// Set refill values: 2 packs + 5 loose pills
-		await refillSection.getByLabel(/Packs/i).fill("2");
-		await refillSection.getByLabel(/Loose pills/i).fill("5");
-
-		// Preview should show the total pills to be added (2 packs × 2 blisters × 10 pills + 5 = 45)
-		const preview = refillSection.locator(".refill-preview");
-		await expect(preview).toBeVisible();
-		expect(await preview.textContent()).toContain("45");
-
-		// Click the refill button
-		await refillSection.locator("button.success").click();
-
-		// Wait for the refill to be processed
-		await page.waitForLoadState("networkidle");
 	});
 
 	test("should edit intake schedule usage and interval", async ({ page }) => {
@@ -247,11 +229,12 @@ test.describe("Medication Editing", () => {
 		await navigateTo(page, "/medications");
 
 		await clickEditMed(page, "Edit Intake Med");
+		await page.getByRole("tab", { name: /Schedule/i }).click();
 
 		// Change intake from 1 pill daily to 2 pills every 7 days
 		const intakeRow = page.locator(".blister-row").first();
-		const usageField = intakeRow.getByLabel(/Usage \(pills\)/i);
+		const usageField = intakeRow.getByLabel(/(Usage \(pills\)|form\.blisters\.usage)/i);
-		const everyField = intakeRow.getByLabel(/Every \(days\)/i);
+		const everyField = intakeRow.getByLabel(/(Every \(days\)|form\.blisters\.everyDays)/i);
 
 		await usageField.fill("2");
 		await everyField.fill("7");
@@ -264,8 +247,8 @@ test.describe("Medication Editing", () => {
 		// Verify the changes persisted
 		await clickEditMed(page, "Edit Intake Med");
 		const savedRow = page.locator(".blister-row").first();
-		await expect(savedRow.getByLabel(/Usage \(pills\)/i)).toHaveValue("2");
+		await expect(savedRow.getByLabel(/(Usage \(pills\)|form\.blisters\.usage)/i)).toHaveValue("2");
-		await expect(savedRow.getByLabel(/Every \(days\)/i)).toHaveValue("7");
+		await expect(savedRow.getByLabel(/(Every \(days\)|form\.blisters\.everyDays)/i)).toHaveValue("7");
 	});
 
 	test("should add a second intake schedule row", async ({ page }) => {
@@ -285,18 +268,19 @@ test.describe("Medication Editing", () => {
 		await navigateTo(page, "/medications");
 
 		await clickEditMed(page, "Add Intake Med");
+		await page.getByRole("tab", { name: /Schedule/i }).click();
 
 		// Should have 1 intake row initially
 		await expect(page.locator(".blister-row")).toHaveCount(1);
 
 		// Add a second intake
-		await page.getByRole("button", { name: /Intake/i }).click();
+		await page.getByRole("button", { name: /(Intake|form\.blisters\.addIntake)/i }).click();
 		await expect(page.locator(".blister-row")).toHaveCount(2);
 
 		// Fill the new intake row
 		const secondRow = page.locator(".blister-row").nth(1);
-		await secondRow.getByLabel(/Usage \(pills\)/i).fill("0.5");
+		await secondRow.getByLabel(/(Usage \(pills\)|form\.blisters\.usage)/i).fill("0.5");
-		await secondRow.getByLabel(/Every \(days\)/i).fill("7");
+		await secondRow.getByLabel(/(Every \(days\)|form\.blisters\.everyDays)/i).fill("7");
 
 		await saveEditAndVerify(page, "Add Intake Med");
 
@@ -322,6 +306,7 @@ test.describe("Medication Editing", () => {
 		await navigateTo(page, "/medications");
 
 		await clickEditMed(page, "Reminder Toggle Med");
+		await page.getByRole("tab", { name: /Schedule/i }).click();
 
 		// Find the remind checkbox in the intake row
 		const intakeRow = page.locator(".blister-row").first();
@@ -357,20 +342,24 @@ test.describe("Medication Editing", () => {
 		await navigateTo(page, "/medications");
 
 		await clickEditMed(page, "PackType Change Med");
+		const form = page.locator("form.form-grid:visible").first();
 
 		// Should be blister type initially
-		const packageSelect = page.locator("select.package-type-select");
+		const packageSelect = form.locator("select.package-type-select");
 		await expect(packageSelect).toHaveValue("blister");
 
-		// Blister-specific fields should be visible
+		// Blister-specific fields are shown in the Package tab.
-		await expect(page.getByLabel(/Blisters per pack/i)).toBeVisible();
+		await page.getByRole("tab", { name: /Package/i }).click();
+		await expect(form.getByLabel(/(Blisters per pack|form\.blistersPerPack)/i)).toBeVisible();
+		await page.getByRole("tab", { name: /General/i }).click();
 
 		// Switch to bottle
 		await packageSelect.selectOption("bottle");
-		await expect(page.getByLabel(/Total Capacity/i)).toBeVisible();
+		await page.getByRole("tab", { name: /Package/i }).click();
+		await expect(form.getByLabel(/(Total Capacity|form\.totalCapacity|Total \(pills\))/i)).toBeVisible();
 
 		// Fill bottle-specific fields
-		await page.getByLabel(/Total Capacity/i).fill("120");
+		await form.getByLabel(/(Total Capacity|form\.totalCapacity|Total \(pills\))/i).fill("120");
 
 		await saveEditAndVerify(page, "PackType Change Med");
 
@@ -386,13 +375,15 @@ test.describe("Medication Editing", () => {
 		await clickEditMed(page, "Multi Edit Med");
 
 		// Change the name
-		await page.getByLabel(/Commercial Name/i).fill("Fully Edited Med");
+		await page.getByLabel(/(Commercial Name|form\.commercialName)/i).fill("Fully Edited Med");
 
 		// Add generic name
-		await page.getByLabel(/Generic Name/i).fill("Ibuprofen Lysinate");
+		await page.getByLabel(/(Generic Name|form\.genericName)/i).fill("Ibuprofen Lysinate");
 
 		// Add notes
-		await page.getByLabel(/Notes/i).fill("Morning dose only. Take with plenty of water.");
+		await page.getByRole("tab", { name: /Package/i }).click();
+		await page.getByLabel(/(Notes|form\.notes)/i).fill("Morning dose only. Take with plenty of water.");
+		await page.getByRole("tab", { name: /General/i }).click();
 
 		// Add a taken-by person
 		const takenByInput = page.locator(".tag-input-container input");
@@ -404,9 +395,9 @@ test.describe("Medication Editing", () => {
 
 		// Verify all changes persisted
 		await clickEditMed(page, "Fully Edited Med");
-		await expect(page.getByLabel(/Commercial Name/i)).toHaveValue("Fully Edited Med");
+		await expect(page.getByLabel(/(Commercial Name|form\.commercialName)/i)).toHaveValue("Fully Edited Med");
-		await expect(page.getByLabel(/Generic Name/i)).toHaveValue("Ibuprofen Lysinate");
+		await expect(page.getByLabel(/(Generic Name|form\.genericName)/i)).toHaveValue("Ibuprofen Lysinate");
-		await expect(page.getByLabel(/Notes/i)).toContainText("Morning dose only");
+		await expect(page.getByLabel(/(Notes|form\.notes)/i)).toContainText("Morning dose only");
 		await expect(page.locator(".tag-input-container .tag").filter({ hasText: "Charlie" })).toBeVisible();
 	});
 });

frontend/e2e/medications.spec.ts

@@ -10,11 +10,17 @@ import { authFile, navigateTo, test } from "./fixtures";
 test.describe("Medications Page", () => {
 	test.use({ storageState: authFile });
 
+	const visibleMedForm = (page: Page) => page.locator("form.form-grid:visible").first();
+
 	async function openMedicationForm(page: Page) {
 		await navigateTo(page, "/medications");
-		const newMedicationButton = page.getByRole("button", { name: /New medication/i });
+		const nameField = visibleMedForm(page).getByLabel(/(Commercial Name|form\.commercialName)/i);
-		if (await newMedicationButton.isVisible().catch(() => false)) {
+		if (await nameField.isVisible().catch(() => false)) return;
-			await newMedicationButton.click();
+
+		const newEntryButton = page.getByRole("button", { name: /(new (entry|medication)|form\.newEntry)/i });
+		if (await newEntryButton.isVisible().catch(() => false)) {
+			await newEntryButton.click();
+			await expect(nameField).toBeVisible({ timeout: 5000 });
 		}
 	}
 
@@ -29,8 +35,8 @@ test.describe("Medications Page", () => {
 		await navigateTo(page, "/medications");
 
 		// Should show either medication entries or the new medication form
-		const listTitle = page.locator("h2").filter({ hasText: /Medication list/i });
+		const listTitle = page.locator("h2").filter({ hasText: /(Medication list|form\.medicationList)/i });
-		const formTitle = page.locator("h2").filter({ hasText: /New medication/i });
+		const formTitle = page.locator("h2").filter({ hasText: /(New (entry|medication)|form\.newEntry)/i });
 
 		const hasList = await listTitle.isVisible().catch(() => false);
 		const hasForm = await formTitle.isVisible().catch(() => false);
@@ -40,85 +46,92 @@ test.describe("Medications Page", () => {
 
 	test("should display the medication form with required fields", async ({ page }) => {
 		await openMedicationForm(page);
+		const form = visibleMedForm(page);
 
-		const commercialName = page.getByLabel(/Commercial Name/i);
+		const commercialName = form.getByLabel(/(Commercial Name|form\.commercialName)/i);
 		await expect(commercialName).toBeVisible();
 
 		// Package type selector should exist
-		await expect(page.getByText(/Package Type/i)).toBeVisible();
+		await expect(form.getByText(/(Package Type|form\.packageType)/i)).toBeVisible();
 
-		// Intake schedule section should exist
+		// Tabbed form should expose navigation to Package/Schedule sections
-		await expect(page.getByText(/Intake schedule/i)).toBeVisible();
+		await expect(page.getByRole("tab", { name: /Package/i })).toBeVisible();
+		await expect(page.getByRole("tab", { name: /Schedule/i })).toBeVisible();
 	});
 
 	test("should fill in medication details", async ({ page }) => {
 		await openMedicationForm(page);
+		const form = visibleMedForm(page);
 
-		const nameField = page.getByLabel(/Commercial Name/i);
+		const nameField = form.getByLabel(/(Commercial Name|form\.commercialName)/i);
 		await nameField.fill("Test Aspirin");
 		await expect(nameField).toHaveValue("Test Aspirin");
 
-		const genericField = page.getByLabel(/Generic Name/i);
+		const genericField = form.getByLabel(/(Generic Name|form\.genericName)/i);
 		await genericField.fill("Acetylsalicylic acid");
 		await expect(genericField).toHaveValue("Acetylsalicylic acid");
 	});
 
 	test("should have stock inventory fields", async ({ page }) => {
 		await openMedicationForm(page);
+		const form = visibleMedForm(page);
+		await page.getByRole("tab", { name: /Package/i }).click();
 
-		// Stock fields should be visible
+		// Package tab should expose stock-related fields for at least one package mode.
-		await expect(page.getByLabel(/^Packs$/i)).toBeVisible();
+		const packsField = form.getByLabel(/(^Packs$|form\.packs)/i).first();
+		const totalField = form.getByText(/(Total \(pills\)|Total Capacity|form\.totalCapacity)/i).first();
 
-		// Either blister or bottle fields depending on package type
+		const hasPacks = await packsField.isVisible().catch(() => false);
-		const blistersField = page.getByLabel(/Blisters per pack/i);
+		const hasTotal = await totalField.isVisible().catch(() => false);
-		const _pillsField = page.getByLabel(/Pills per blister/i);
-		const capacityField = page.getByLabel(/Total Capacity/i);
 
-		const hasBlister = await blistersField.isVisible().catch(() => false);
+		expect(hasPacks || hasTotal).toBeTruthy();
-		const hasBottle = await capacityField.isVisible().catch(() => false);
-
-		expect(hasBlister || hasBottle).toBeTruthy();
 	});
 
 	test("should toggle package type between blister and bottle", async ({ page }) => {
 		await openMedicationForm(page);
+		const form = visibleMedForm(page);
+		await page.getByRole("tab", { name: /Package/i }).click();
 
 		// Find the package type radio buttons or selector
-		const blisterOption = page.getByText(/Blister Pack/i);
+		const blisterOption = form.getByText(/(Blister Pack|form\.packageType\.blister)/i);
-		const bottleOption = page.getByText(/Pill Bottle/i);
+		const bottleOption = form.getByText(/(Pill Bottle|form\.packageType\.bottle)/i);
 
 		if (await blisterOption.isVisible().catch(() => false)) {
 			// Switch to bottle
 			await bottleOption.click();
 			// Bottle-specific fields should appear
-			await expect(page.getByLabel(/Total Capacity/i)).toBeVisible();
+			await expect(form.getByLabel(/(Total Capacity|form\.totalCapacity)/i)).toBeVisible();
 
 			// Switch back to blister
 			await blisterOption.click();
-			await expect(page.getByLabel(/Blisters per pack/i)).toBeVisible();
+			await expect(form.getByLabel(/(Blisters per pack|form\.blistersPerPack)/i)).toBeVisible();
 		}
 	});
 
 	test("should have intake schedule with add button", async ({ page }) => {
 		await openMedicationForm(page);
+		const form = visibleMedForm(page);
+		await page.getByRole("tab", { name: /Schedule/i }).click();
 
 		// Intake schedule section
-		const scheduleSection = page.getByText(/Intake schedule/i);
+		await expect(page.getByRole("tab", { name: /Schedule/i, selected: true })).toBeVisible();
-		await expect(scheduleSection).toBeVisible();
 
 		// Should have at least one intake entry
-		await expect(page.getByText(/Usage \(pills\)|Every \(days\)/i).first()).toBeVisible();
+		await expect(
+			form.getByText(/(Usage \(pills\)|Every \(days\)|form\.blisters\.usage|form\.blisters\.everyDays)/i).first()
+		).toBeVisible();
 
 		// Should have an add intake button
-		const addIntake = page.getByRole("button", { name: /Intake/i });
+		const addIntake = form.getByRole("button", { name: /(Intake|form\.blisters\.addIntake)/i });
 		await expect(addIntake).toBeVisible();
 	});
 
 	test("should have save and cancel buttons", async ({ page }) => {
 		await openMedicationForm(page);
+		const form = visibleMedForm(page);
 
 		// Fill in a name to make the form dirty
-		await page.getByLabel(/Commercial Name/i).fill("Test");
+		await form.getByLabel(/(Commercial Name|form\.commercialName)/i).fill("Test");
 
 		// Save button
 		const saveButton = page.getByRole("button", { name: /Save|Add Medication/i });
@@ -127,9 +140,10 @@ test.describe("Medications Page", () => {
 
 	test("should prevent navigation with unsaved changes", async ({ page }) => {
 		await openMedicationForm(page);
+		const form = visibleMedForm(page);
 
 		// Fill in the form to create unsaved changes
-		await page.getByLabel(/Commercial Name/i).fill("Unsaved Medication");
+		await form.getByLabel(/(Commercial Name|form\.commercialName)/i).fill("Unsaved Medication");
 
 		// Try to navigate away
 		await page.locator('button.pill:has-text("Dashboard")').click();

frontend/e2e/schedule-data.spec.ts

@@ -193,7 +193,7 @@ test.describe("Schedule with medications", () => {
 		await expect(todayBlock).toBeVisible({ timeout: 15000 });
 
 		const takeBtn = todayBlock.locator("button.dose-btn.take:not([disabled])").first();
-		if (!(await takeBtn.isVisible().catch(() => false))) return;
+		test.skip(!(await takeBtn.isVisible().catch(() => false)), "No actionable take-dose button is visible for today");
 
 		await takeBtn.click();
 		await page.waitForLoadState("networkidle");

frontend/e2e/schedule.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from "@playwright/test";
-import { authFile, navigateTo, test } from "./fixtures";
+import { authFile, createMedicationViaAPI, deleteAllMedicationsViaAPI, navigateTo, test } from "./fixtures";
 
 /**
  * Schedule / Timeline E2E Tests
@@ -10,6 +10,32 @@ import { authFile, navigateTo, test } from "./fixtures";
 test.describe("Schedule Timeline", () => {
 	test.use({ storageState: authFile });
 
+	const seededName = "Schedule Smoke Seed";
+	const startThreeDaysAgo = (() => {
+		const d = new Date();
+		d.setDate(d.getDate() - 3);
+		d.setHours(8, 0, 0, 0);
+		const pad = (n: number) => n.toString().padStart(2, "0");
+		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+	})();
+
+	test.beforeAll(async () => {
+		await deleteAllMedicationsViaAPI();
+		await createMedicationViaAPI({
+			name: seededName,
+			packageType: "blister",
+			packCount: 2,
+			blistersPerPack: 2,
+			pillsPerBlister: 10,
+			takenBy: ["Daniel"],
+			intakes: [{ usage: 1, every: 1, start: startThreeDaysAgo, intakeRemindersEnabled: false, takenBy: "Daniel" }],
+		});
+	});
+
+	test.afterAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+
 	test("should have timeline container in DOM", async ({ page }) => {
 		await navigateTo(page, "/dashboard");
 
@@ -44,22 +70,16 @@ test.describe("Schedule Timeline", () => {
 	test("should show past days toggle when medications exist", async ({ page }) => {
 		await navigateTo(page, "/dashboard");
 
-		// Past days toggle only appears when there are scheduled medications
+		// Past days toggle appears when there are scheduled medications
 		const pastToggle = page.locator(".past-days-toggle");
-		const hasPastToggle = await pastToggle.isVisible().catch(() => false);
+		await expect(pastToggle).toBeVisible();
-
-		// Just verify it doesn't crash — visibility depends on medication data
-		expect(typeof hasPastToggle).toBe("boolean");
 	});
 
 	test("should expand/collapse past days on click", async ({ page }) => {
 		await navigateTo(page, "/dashboard");
 
 		const pastToggle = page.locator(".past-days-toggle");
-		if (!(await pastToggle.isVisible().catch(() => false))) {
+		await expect(pastToggle).toBeVisible();
-			// No medications — past days toggle not shown
-			return;
-		}
 
 		const wasExpanded = await pastToggle.evaluate((el) => el.classList.contains("expanded"));
 
@@ -75,62 +95,56 @@ test.describe("Schedule Timeline", () => {
 	test("should show future days toggle when medications exist", async ({ page }) => {
 		await navigateTo(page, "/dashboard");
 
-		// Future days toggle only appears when there are scheduled medications
+		// Future days toggle appears when there are scheduled medications
 		const futureToggle = page.locator(".future-days-toggle");
-		const hasFutureToggle = await futureToggle.isVisible().catch(() => false);
+		await expect(futureToggle).toBeVisible();
-		expect(typeof hasFutureToggle).toBe("boolean");
 	});
 
 	test("should display day blocks in timeline", async ({ page }) => {
 		await navigateTo(page, "/dashboard");
 
-		// There should be at least one day block (today)
+		// With medications there should be day blocks; otherwise empty-state is expected.
 		const dayBlocks = page.locator(".day-block");
-		expect(await dayBlocks.count()).toBeGreaterThanOrEqual(0);
+		const dayBlockCount = await dayBlocks.count();
+		if (dayBlockCount === 0) {
+			await expect(page.getByText(/No medications/i)).toBeVisible();
+			return;
+		}
+		expect(dayBlockCount).toBeGreaterThanOrEqual(1);
 	});
 
 	test("should highlight today block", async ({ page }) => {
 		await navigateTo(page, "/dashboard");
 
-		// If there are medications, today should be highlighted
+		// With medications, today should be highlighted
 		const todayBlock = page.locator(".day-block.today");
-		const hasTodayBlock = await todayBlock.isVisible().catch(() => false);
+		await expect(todayBlock).toBeVisible();
-
+		await expect(todayBlock.locator(".day-date")).toBeVisible();
-		// Today block exists only if there are medications with schedules
-		if (hasTodayBlock) {
-			await expect(todayBlock).toBeVisible();
-			// Should have a day divider with date text
-			await expect(todayBlock.locator(".day-date")).toBeVisible();
-		}
 	});
 
 	test("should show day summary with progress", async ({ page }) => {
 		await navigateTo(page, "/dashboard");
 
 		const todayBlock = page.locator(".day-block.today");
-		if (await todayBlock.isVisible().catch(() => false)) {
+		await expect(todayBlock).toBeVisible();
-			const summary = todayBlock.locator(".day-summary");
+		const summary = todayBlock.locator(".day-summary");
-			await expect(summary).toBeVisible();
+		await expect(summary).toBeVisible();
-		}
 	});
 
 	test("should collapse/expand a day block", async ({ page }) => {
 		await navigateTo(page, "/dashboard");
 
 		const todayBlock = page.locator(".day-block.today");
-		if (await todayBlock.isVisible().catch(() => false)) {
+		await expect(todayBlock).toBeVisible();
-			const dayDivider = todayBlock.locator(".day-divider");
+		const dayDivider = todayBlock.locator(".day-divider");
-			await dayDivider.click();
+		await dayDivider.click();
 
-			// Check if it toggled collapsed state
+		const isCollapsed = await todayBlock.evaluate((el) => el.classList.contains("collapsed"));
-			const isCollapsed = await todayBlock.evaluate((el) => el.classList.contains("collapsed"));
 
-			// Click again to restore
+		await dayDivider.click();
-			await dayDivider.click();
+		const isCollapsedAfter = await todayBlock.evaluate((el) => el.classList.contains("collapsed"));
-			const isCollapsedAfter = await todayBlock.evaluate((el) => el.classList.contains("collapsed"));
 
-			expect(isCollapsed).not.toBe(isCollapsedAfter);
+		expect(isCollapsed).not.toBe(isCollapsedAfter);
-		}
 	});
 
 	test("should show overview table with stock status", async ({ page }) => {
@@ -138,23 +152,15 @@ test.describe("Schedule Timeline", () => {
 
 		// Overview table has class .table.table-7
 		const overviewTable = page.locator(".table.table-7");
-		const hasTable = await overviewTable.isVisible().catch(() => false);
+		await expect(overviewTable).toBeVisible();
-
+		await expect(overviewTable.locator(".table-head")).toBeVisible();
-		// Table only visible if medications exist
-		if (hasTable) {
-			// Table should have a header row
-			await expect(overviewTable.locator(".table-head")).toBeVisible();
-		}
 	});
 
 	test("should display share button in schedules section", async ({ page }) => {
 		await navigateTo(page, "/dashboard");
+		await expect(page.locator(".taken-by-badge").first()).toBeVisible();
 
 		const shareBtn = page.locator("button.share-btn");
-		// Share button only visible if there are takenBy users
+		await expect(shareBtn).toBeVisible();
-		const hasShareBtn = await shareBtn.isVisible().catch(() => false);
-
-		// Just verify it's either visible or not (no crash)
-		expect(typeof hasShareBtn).toBe("boolean");
 	});
 });

frontend/e2e/settings.spec.ts

@@ -130,10 +130,7 @@ test.describe("Settings Page", () => {
 			}
 		}
 
-		if (!enabledToggle) {
+		test.skip(!enabledToggle, "All notification toggles are disabled in this environment");
-			// All toggles disabled (no notification channels configured) — skip
-			return;
-		}
 
 		const checkbox = enabledToggle.locator('input[type="checkbox"]');
 		const initialState = await checkbox.isChecked();

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "i18next": "^25.8.10",
         "i18next-browser-languagedetector": "^8.2.1",
+        "lucide-react": "^0.574.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-i18next": "^15.4.1",
@@ -2638,6 +2639,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.574.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.574.0.tgz",
+      "integrity": "sha512-dJ8xb5juiZVIbdSn3HTyHsjjIwUwZ4FNwV0RtYDScOyySOeie1oXZTymST6YPJ4Qwt3Po8g4quhYl4OxtACiuQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",

frontend/package.json

@@ -14,15 +14,20 @@
     "test": "vitest",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "test:e2e": "rm -rf test-results && playwright test --project=chromium --project=chromium-data --workers=1; find \"$PWD/test-results\" -name video.webm -not -path '*retry*' -print0 | xargs -0 ls -tr | sed \"s/^/file '/\" | sed \"s/$/'/ \" > /tmp/e2e-videos.txt && ffmpeg -y -f concat -safe 0 -i /tmp/e2e-videos.txt -c copy test-results/all-tests.webm && open -a 'Google Chrome' test-results/all-tests.webm",
+    "test:e2e": "rm -rf test-results && playwright test --config=playwright.stable.config.ts",
-    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:all": "rm -rf test-results && playwright test --config=playwright.all.config.ts",
-    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:with-video": "npm run test:e2e && npm run test:e2e:video",
-    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:all:with-video": "npm run test:e2e:all && npm run test:e2e:video",
+    "test:e2e:video": "find \"$PWD/test-results\" -name video.webm -not -path '*retry*' -print0 | xargs -0 ls -tr > /tmp/e2e-videos.list && if [ -s /tmp/e2e-videos.list ]; then sed \"s/^/file '/\" /tmp/e2e-videos.list | sed \"s/$/'/\" > /tmp/e2e-videos.txt && ffmpeg -y -f concat -safe 0 -i /tmp/e2e-videos.txt -c copy test-results/all-tests.webm; else echo 'No videos found to merge'; fi",
+    "test:e2e:ui": "playwright test --config=playwright.stable.config.ts --ui",
+    "test:e2e:headed": "playwright test --config=playwright.stable.config.ts --headed",
+    "test:e2e:debug": "playwright test --config=playwright.stable.config.ts --debug",
     "test:e2e:report": "playwright show-report"
   },
   "dependencies": {
     "i18next": "^25.8.10",
     "i18next-browser-languagedetector": "^8.2.1",
+    "lucide-react": "^0.574.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.4.1",

frontend/playwright.all.config.ts

@@ -0,0 +1,3 @@
+import { buildPlaywrightConfig } from "./playwright.base.config";
+
+export default buildPlaywrightConfig(true);

frontend/playwright.base.config.ts

@@ -0,0 +1,97 @@
+import { defineConfig, devices, type PlaywrightTestConfig } from "@playwright/test";
+
+export function buildPlaywrightConfig(runAllBrowsers: boolean) {
+	const env =
+		typeof globalThis === "object" && "process" in globalThis
+			? ((globalThis as { process?: { env?: Record<string, string | undefined> } }).process?.env ?? {})
+			: {};
+	const baseURL = env.PLAYWRIGHT_BASE_URL || "http://localhost:5173";
+
+	const projects: NonNullable<PlaywrightTestConfig["projects"]> = [
+		{
+			name: "setup",
+			testMatch: /.*\.setup\.ts/,
+		},
+		{
+			name: "chromium",
+			use: {
+				...devices["Desktop Chrome"],
+			},
+			testIgnore: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
+			dependencies: ["setup"],
+			retries: 1,
+		},
+		{
+			name: "chromium-data",
+			testMatch: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
+			use: {
+				...devices["Desktop Chrome"],
+			},
+			dependencies: ["setup"],
+			fullyParallel: false,
+			retries: 1,
+		},
+	];
+
+	if (runAllBrowsers) {
+		projects.push(
+			{
+				name: "firefox",
+				use: {
+					...devices["Desktop Firefox"],
+				},
+				testIgnore: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
+				dependencies: ["setup"],
+			},
+			{
+				name: "webkit",
+				use: {
+					...devices["Desktop Safari"],
+				},
+				testIgnore: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
+				dependencies: ["setup"],
+			},
+		);
+	}
+
+	return defineConfig({
+		testDir: "./e2e",
+		testMatch: "**/*.spec.ts",
+		timeout: 30 * 1000,
+		expect: {
+			timeout: 5000,
+		},
+		fullyParallel: true,
+		forbidOnly: !!env.CI,
+		retries: env.CI ? 2 : 0,
+		workers: 1,
+		reporter: env.CI
+			? [["html", { outputFolder: "playwright-report" }], ["github"]]
+			: [["html", { outputFolder: "playwright-report" }], ["list"]],
+		use: {
+			baseURL,
+			trace: "on-first-retry",
+			screenshot: "only-on-failure",
+			video: "on",
+			viewport: { width: 1280, height: 720 },
+			navigationTimeout: 30000,
+			actionTimeout: 5000,
+		},
+		projects,
+		outputDir: "test-results/",
+		webServer: [
+			{
+				command: "cd ../backend && npm run dev",
+				url: "http://localhost:3000/health",
+				reuseExistingServer: true,
+				timeout: 120 * 1000,
+			},
+			{
+				command: "npm run dev",
+				url: "http://localhost:5173",
+				reuseExistingServer: true,
+				timeout: 120 * 1000,
+			},
+		],
+	});
+}

frontend/playwright.config.ts

@@ -1,153 +1,3 @@
-import { defineConfig, devices } from "@playwright/test";
+import { buildPlaywrightConfig } from "./playwright.base.config";
 
-/**
+export default buildPlaywrightConfig(false);
- * Playwright E2E Testing Configuration
- *
- * Run E2E tests with:
- *   npm run test:e2e          - Run tests in headless mode
- *   npm run test:e2e:ui       - Run tests with Playwright UI
- *   npm run test:e2e:headed   - Run tests in headed mode
- *
- * Before running tests, ensure both backend and frontend are running:
- *   docker compose -f docker-compose.dev.yml up
- *
- * Or run them separately:
- *   cd backend && npm run dev
- *   cd frontend && npm run dev
- */
-
-// Base URL for the frontend dev server
-const baseURL = process.env.PLAYWRIGHT_BASE_URL || "http://localhost:5173";
-
-export default defineConfig({
-	// Directory containing test files
-	testDir: "./e2e",
-
-	// Test file pattern
-	testMatch: "**/*.spec.ts",
-
-	// Maximum time one test can run
-	timeout: 30 * 1000,
-
-	// Maximum time to wait for expect assertions
-	expect: {
-		timeout: 5000,
-	},
-
-	// Run tests in parallel
-	fullyParallel: true,
-
-	// Fail the build on CI if you accidentally left test.only in the source code
-	forbidOnly: !!process.env.CI,
-
-	// Retry failed tests (more retries on CI)
-	retries: process.env.CI ? 2 : 0,
-
-	// Opt out of parallel tests on CI
-	workers: process.env.CI ? 1 : undefined,
-
-	// Reporter configuration
-	reporter: process.env.CI
-		? [["html", { outputFolder: "playwright-report" }], ["github"]]
-		: [["html", { outputFolder: "playwright-report" }], ["list"]],
-
-	// Shared settings for all projects
-	use: {
-		// Base URL for page.goto() calls
-		baseURL,
-
-		// Collect trace on first retry
-		trace: "on-first-retry",
-
-		// Capture screenshot on failure
-		screenshot: "only-on-failure",
-
-		// Record video for every test so runs can be reviewed
-		video: "on",
-
-		// Default viewport size
-		viewport: { width: 1280, height: 720 },
-
-		// Wait for network idle before considering navigation complete
-		navigationTimeout: 30000,
-
-		// Accept cookies and local storage
-		actionTimeout: 5000,
-	},
-
-	// Configure projects for multiple browsers
-	projects: [
-		// Setup project for authentication state
-		{
-			name: "setup",
-			testMatch: /.*\.setup\.ts/,
-		},
-
-		// Desktop Chrome — primary test browser, always runs
-		// Excludes data/crud tests (those run in chromium-data to avoid DB conflicts)
-		{
-			name: "chromium",
-			use: {
-				...devices["Desktop Chrome"],
-			},
-			testIgnore: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
-			dependencies: ["setup"],
-			retries: 1,
-		},
-
-		// Desktop Firefox — runs locally and optionally in CI
-		// Excludes data/crud/edit/status/schedule tests (those run in chromium-data to avoid DB conflicts)
-		{
-			name: "firefox",
-			use: {
-				...devices["Desktop Firefox"],
-			},
-			testIgnore: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
-			dependencies: ["setup"],
-		},
-
-		// Desktop Safari — runs locally and optionally in CI
-		// Excludes data/crud/edit/status/schedule tests (those run in chromium-data to avoid DB conflicts)
-		{
-			name: "webkit",
-			use: {
-				...devices["Desktop Safari"],
-			},
-			testIgnore: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
-			dependencies: ["setup"],
-		},
-
-		// Data tests — only Chromium, run serially to avoid DB conflicts
-		// These tests create/edit/delete medications and must not run concurrently
-		// across browsers since all share the same backend database.
-		{
-			name: "chromium-data",
-			testMatch: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
-			use: {
-				...devices["Desktop Chrome"],
-			},
-			dependencies: ["setup"],
-			fullyParallel: false,
-			retries: 1,
-		},
-	],
-
-	// Directory for test output files (screenshots, traces, videos)
-	outputDir: "test-results/",
-
-	// Web server configuration — automatically start dev servers in CI
-	webServer: [
-		{
-			command: "cd ../backend && npm run dev",
-			url: "http://localhost:3000/health",
-			reuseExistingServer: !process.env.CI,
-			timeout: 120 * 1000,
-		},
-		{
-			command: "npm run dev",
-			url: "http://localhost:5173",
-			reuseExistingServer: !process.env.CI,
-			timeout: 120 * 1000,
-		},
-	],
-});

frontend/playwright.stable.config.ts

@@ -0,0 +1,3 @@
+import { buildPlaywrightConfig } from "./playwright.base.config";
+
+export default buildPlaywrightConfig(false);

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import {
 	AboutModal,
 	Lightbox,
@@ -112,6 +112,7 @@ function AppRouter() {
 // =============================================================================
 
 function AppContent() {
+	const navigate = useNavigate();
 	// Get shared state from AppContext
 	const ctx = useAppContext();
 	const {
@@ -139,7 +140,10 @@ function AppContent() {
 		setEditStockFullBlisters,
 		editStockPartialBlisterPills,
 		setEditStockPartialBlisterPills,
+		editStockLoosePills,
+		setEditStockLoosePills,
 		editStockSaving,
+		editStockMedication,
 		openRefillModal,
 		closeRefillModal,
 		openEditStockModal,
@@ -289,23 +293,24 @@ function AppContent() {
 	// Close tooltips on scroll/touch (for mobile)
 	useEffect(() => {
 		const closeAllTooltips = () => {
-			document.querySelectorAll(".info-tooltip.tooltip-active").forEach((el) => {
+			document.querySelectorAll(".info-tooltip.tooltip-active, .tooltip-trigger.tooltip-active").forEach((el) => {
 				el.classList.remove("tooltip-active");
 			});
 		};
 
 		const handleTooltipClick = (e: Event) => {
 			const target = e.target as HTMLElement;
-			if (target.classList.contains("info-tooltip")) {
+			const tooltipTrigger = target.closest(".info-tooltip, .tooltip-trigger") as HTMLElement | null;
+			if (tooltipTrigger) {
 				// Close other tooltips first
 				closeAllTooltips();
 				// Toggle this one
-				target.classList.add("tooltip-active");
+				tooltipTrigger.classList.add("tooltip-active");
 				// Position tooltip above the icon on mobile
 				if (window.innerWidth <= 640) {
-					const rect = target.getBoundingClientRect();
+					const rect = tooltipTrigger.getBoundingClientRect();
 					// Place tooltip bottom edge just above the icon
-					target.style.setProperty("--tooltip-bottom", `${window.innerHeight - rect.top + 8}px`);
+					tooltipTrigger.style.setProperty("--tooltip-bottom", `${window.innerHeight - rect.top + 8}px`);
 				}
 			} else {
 				closeAllTooltips();
@@ -357,9 +362,11 @@ function AppContent() {
 		}
 	}, [meds, selectedMed, setSelectedMed]);
 
+	const stockCorrectionMed = selectedMed ?? (showEditStockModal ? editStockMedication : null);
+
 	const handleSubmitStockCorrection = async (medId: number) => {
-		if (!selectedMed) return;
+		if (!stockCorrectionMed) return;
-		await ctx.submitStockCorrection(medId, selectedMed, loadMeds);
+		await ctx.submitStockCorrection(medId, stockCorrectionMed, loadMeds);
 	};
 
 	// For MedDetailModal: refill without form update (not editing)
@@ -367,11 +374,19 @@ function AppContent() {
 		await ctx.submitRefill(medId, null, () => {}, loadMeds, usePrescription);
 	};
 
-	// Wrapper for openEditStockModal (provides selectedMed and coverage)
+	const handleOpenMedicationEdit = () => {
-	const handleOpenEditStockModal = () => {
+		if (!selectedMed) return;
-		if (selectedMed) {
+		const medId = selectedMed.id;
-			openEditStockModal(selectedMed, coverage);
+		setShowImageLightbox(false);
-		}
+		setShowRefillModal(false);
+		setShowEditStockModal(false);
+		setSelectedMed(null);
+		navigate(`/medications?editMedId=${medId}`);
+	};
+
+	const handleOpenEditStockFromDetail = () => {
+		if (!selectedMed) return;
+		openEditStockModal(selectedMed, coverage);
 	};
 
 	function openProfile() {
@@ -421,18 +436,20 @@ function AppContent() {
 
 			{/* Medication Detail Modal */}
 			<MedDetailModal
-				selectedMed={selectedMed}
+				selectedMed={stockCorrectionMed}
 				coverage={coverage}
 				settings={stockThresholds}
 				showImageLightbox={showImageLightbox}
 				showRefillModal={showRefillModal}
 				showEditStockModal={showEditStockModal}
+				editStockOnly={showEditStockModal && !selectedMed}
 				onClose={closeMedDetail}
 				onOpenImageLightbox={openImageLightbox}
 				onCloseImageLightbox={closeImageLightbox}
 				onOpenRefillModal={openRefillModal}
 				onCloseRefillModal={closeRefillModal}
-				onOpenEditStockModal={handleOpenEditStockModal}
+				onOpenMedicationEdit={handleOpenMedicationEdit}
+				onOpenEditStockModal={handleOpenEditStockFromDetail}
 				onCloseEditStockModal={closeEditStockModal}
 				refillPacks={refillPacks}
 				onRefillPacksChange={setRefillPacks}
@@ -449,6 +466,8 @@ function AppContent() {
 				onEditStockFullBlistersChange={setEditStockFullBlisters}
 				editStockPartialBlisterPills={editStockPartialBlisterPills}
 				onEditStockPartialBlisterPillsChange={setEditStockPartialBlisterPills}
+				editStockLoosePills={editStockLoosePills}
+				onEditStockLoosePillsChange={setEditStockLoosePills}
 				editStockSaving={editStockSaving}
 				onSubmitStockCorrection={handleSubmitStockCorrection}
 			/>

frontend/src/components/ConfirmModal.tsx

@@ -12,7 +12,7 @@ export interface ConfirmModalProps {
 	onConfirm: () => void;
 	onCancel: () => void;
 	isLoading?: boolean;
-	confirmVariant?: "primary" | "danger" | "success";
+	confirmVariant?: "primary" | "danger" | "success" | "warning";
 	overlayClassName?: string;
 }
 

frontend/src/components/Lightbox.tsx

@@ -3,6 +3,7 @@
 // =============================================================================
 
 import type { MouseEvent } from "react";
+import { useEffect } from "react";
 
 export interface LightboxProps {
 	src: string;
@@ -11,6 +12,17 @@ export interface LightboxProps {
 }
 
 export function Lightbox({ src, alt, onClose }: LightboxProps) {
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				onClose();
+			}
+		};
+
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [onClose]);
+
 	function handleOverlayClick(e: MouseEvent) {
 		e.stopPropagation();
 		if (e.target === e.currentTarget) {
@@ -19,13 +31,7 @@ export function Lightbox({ src, alt, onClose }: LightboxProps) {
 	}
 
 	return (
-		<div
+		<div className="lightbox-overlay" onClick={handleOverlayClick}>
-			className="lightbox-overlay"
-			onClick={handleOverlayClick}
-			onKeyDown={(e) => {
-				if (e.key === "Escape") onClose();
-			}}
-		>
 			<div className="lightbox-container">
 				<button className="lightbox-close" onClick={onClose}>
 					×

frontend/src/components/MobileEditModal.tsx

@@ -2,7 +2,9 @@
  * MobileEditModal - Full-screen edit form for medications (mobile-optimized)
  * Handles new medication creation and editing existing medications
  */
-import { useEffect } from "react";
+
+import { Minus, Plus, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { DoseUnit, FieldErrors, FormBlister, FormIntake, FormState, Medication } from "../types";
 import { DOSE_UNITS } from "../types";
@@ -46,15 +48,6 @@ export interface MobileEditModalProps {
 	onRemoveIntake: (idx: number) => void;
 	// Value change handler for numeric fields
 	onHandleValueChange: <K extends keyof FormState>(field: K, value: FormState[K]) => void;
-	// Refill state (for edit mode)
-	refillPacks: number;
-	onRefillPacksChange: (value: number) => void;
-	refillLoose: number;
-	onRefillLooseChange: (value: number) => void;
-	usePrescriptionRefill: boolean;
-	onUsePrescriptionRefillChange: (value: boolean) => void;
-	refillSaving: boolean;
-	onSubmitRefill: (medId: number) => Promise<void>;
 	// Image handling
 	meds: Medication[];
 	onUploadMedImage: (medId: number, file: File) => Promise<void>;
@@ -74,8 +67,7 @@ function deriveTotalFromForm(form: FormState) {
 	const packCount = Number(form.packCount) || 0;
 	const blistersPerPack = Number(form.blistersPerPack) || 0;
 	const pillsPerBlister = Number(form.pillsPerBlister) || 1;
-	const looseTablets = Number(form.looseTablets) || 0;
+	return deriveTotal(packCount, blistersPerPack, pillsPerBlister, 0);
-	return deriveTotal(packCount, blistersPerPack, pillsPerBlister, looseTablets);
 }
 
 export function MobileEditModal({
@@ -103,14 +95,6 @@ export function MobileEditModal({
 	onAddIntake,
 	onRemoveIntake,
 	onHandleValueChange,
-	refillPacks,
-	onRefillPacksChange,
-	refillLoose,
-	onRefillLooseChange,
-	usePrescriptionRefill,
-	onUsePrescriptionRefillChange,
-	refillSaving,
-	onSubmitRefill,
 	meds,
 	onUploadMedImage,
 	onDeleteMedImage,
@@ -119,6 +103,12 @@ export function MobileEditModal({
 	onSaveMedication,
 }: MobileEditModalProps) {
 	const { t } = useTranslation();
+	const [activeTab, setActiveTab] = useState<"general" | "stock" | "prescription" | "schedule">("general");
+
+	// Reset tab when modal opens
+	useEffect(() => {
+		if (show) setActiveTab("general");
+	}, [show]);
 
 	// Close on Escape key
 	useEffect(() => {
@@ -162,6 +152,10 @@ export function MobileEditModal({
 				</div>
 				<form
 					className="form-grid mobile-edit-form"
+					autoComplete="off"
+					spellCheck={false}
+					autoCorrect="off"
+					autoCapitalize="off"
 					onSubmit={(e) => {
 						// Check native HTML5 validation first
 						const formElement = e.currentTarget;
@@ -174,463 +168,434 @@ export function MobileEditModal({
 						onSaveMedication(e);
 					}}
 				>
+					<div className="full form-tabs" role="tablist" aria-label={t("form.sections.general")}>
+						<button
+							type="button"
+							role="tab"
+							aria-selected={activeTab === "general"}
+							className={`form-tab${activeTab === "general" ? " active" : ""}`}
+							onClick={() => setActiveTab("general")}
+						>
+							{t("form.sections.general")}
+						</button>
+						<button
+							type="button"
+							role="tab"
+							aria-selected={activeTab === "stock"}
+							className={`form-tab${activeTab === "stock" ? " active" : ""}`}
+							onClick={() => setActiveTab("stock")}
+						>
+							{t("form.sections.stock")}
+						</button>
+						<button
+							type="button"
+							role="tab"
+							aria-selected={activeTab === "prescription"}
+							className={`form-tab${activeTab === "prescription" ? " active" : ""}`}
+							onClick={() => setActiveTab("prescription")}
+						>
+							{t("form.sections.prescription")}
+						</button>
+						<button
+							type="button"
+							role="tab"
+							aria-selected={activeTab === "schedule"}
+							className={`form-tab${activeTab === "schedule" ? " active" : ""}`}
+							onClick={() => setActiveTab("schedule")}
+						>
+							{t("form.sections.schedule")}
+						</button>
+					</div>
 					<fieldset className="readonly-fieldset" disabled={readOnlyMode}>
-						<div className="full form-category">
+						<div className={`form-tab-panel${activeTab === "general" ? " active" : ""}`}>
-							<h4 className="form-category-title">{t("form.sections.general")}</h4>
+							<div className="full form-category">
-							<label className={`full ${!readOnlyMode && fieldErrors.name ? "has-error" : ""}`}>
+								<h4 className="form-category-title">{t("form.sections.general")}</h4>
-								{t("form.commercialName")}
+								<label className={`full ${!readOnlyMode && fieldErrors.name ? "has-error" : ""}`}>
-								<input
+									{t("form.commercialName")}
-									value={form.name}
-									onChange={(e) => onFormChange({ ...form, name: e.target.value })}
-									placeholder={t("form.placeholders.commercial")}
-									maxLength={FIELD_LIMITS.name.max}
-									required={!readOnlyMode}
-								/>
-								{!readOnlyMode && fieldErrors.name && <span className="field-error">{fieldErrors.name}</span>}
-							</label>
-							<label className={`full ${fieldErrors.genericName ? "has-error" : ""}`}>
-								{t("form.genericName")}
-								<input
-									value={form.genericName}
-									onChange={(e) => onFormChange({ ...form, genericName: e.target.value })}
-									placeholder={t("form.placeholders.generic")}
-									maxLength={FIELD_LIMITS.genericName.max}
-								/>
-								{fieldErrors.genericName && <span className="field-error">{fieldErrors.genericName}</span>}
-							</label>
-							<label className="full">
-								{t("form.medicationStartDate")}
-								<DateInput
-									value={form.medicationStartDate}
-									onChange={(e) => onHandleValueChange("medicationStartDate", e.target.value)}
-								/>
-								{!readOnlyMode && dateConsistencyError && <span className="field-error">{dateConsistencyError}</span>}
-							</label>
-							<label className={`full ${fieldErrors.takenBy ? "has-error" : ""}`}>
-								{t("form.takenBy")}
-								<div className="tag-input-container">
-									{form.takenBy.map((person) => (
-										<span key={person} className="tag">
-											{person}
-											<button type="button" className="tag-remove" onClick={() => onRemoveTakenByPerson(person)}>
-												×
-											</button>
-										</span>
-									))}
 									<input
-										value={takenByInput}
+										value={form.name}
-										onChange={(e) => onTakenByInputChange(e.target.value)}
+										onChange={(e) => onFormChange({ ...form, name: e.target.value })}
-										onKeyDown={onTakenByKeyDown}
+										placeholder={t("form.placeholders.commercial")}
-										onBlur={() => {
+										maxLength={FIELD_LIMITS.name.max}
-											if (takenByInput.trim()) onAddTakenByPerson(takenByInput);
+										required={!readOnlyMode}
-										}}
-										placeholder={
-											form.takenBy.length === 0 ? t("form.placeholders.takenBy") : t("form.placeholders.addPerson")
-										}
-										maxLength={FIELD_LIMITS.takenBy.max}
-										list="takenby-suggestions-modal"
 									/>
-									<datalist id="takenby-suggestions-modal">
+									{!readOnlyMode && fieldErrors.name && <span className="field-error">{fieldErrors.name}</span>}
-										{existingPeople
-											.filter((p) => !form.takenBy.includes(p))
-											.map((person) => (
-												<option key={person} value={person} />
-											))}
-									</datalist>
-								</div>
-								{fieldErrors.takenBy && <span className="field-error">{fieldErrors.takenBy}</span>}
-							</label>
-							<label className="full">
-								{t("form.packageType")}
-								<select
-									className="package-type-select"
-									value={form.packageType}
-									onChange={(e) => onHandleValueChange("packageType", e.target.value)}
-								>
-									<option value="blister">{t("form.packageTypeBlister")}</option>
-									<option value="bottle">{t("form.packageTypeBottle")}</option>
-								</select>
-							</label>
-						</div>
-
-						<div className="full form-category">
-							<h4 className="form-category-title">{t("form.sections.stock")}</h4>
-							{form.packageType === "blister" ? (
-								<>
-									<label>
-										{t("form.packs")}
-										<input
-											type="text"
-											inputMode="numeric"
-											pattern="[0-9]*"
-											value={form.packCount}
-											onChange={(e) => onHandleValueChange("packCount", e.target.value)}
-										/>
-									</label>
-									<label>
-										{t("form.blistersPerPack")}
-										<input
-											type="text"
-											inputMode="numeric"
-											pattern="[0-9]*"
-											value={form.blistersPerPack}
-											onChange={(e) => onHandleValueChange("blistersPerPack", e.target.value)}
-										/>
-									</label>
-									<label>
-										{t("form.pillsPerBlister")}
-										<input
-											type="text"
-											inputMode="numeric"
-											pattern="[0-9]*"
-											value={form.pillsPerBlister}
-											onChange={(e) => onHandleValueChange("pillsPerBlister", e.target.value)}
-										/>
-									</label>
-									<label>
-										{t("form.loosePills")}
-										<input
-											type="text"
-											inputMode="numeric"
-											pattern="[0-9]*"
-											value={form.looseTablets}
-											onChange={(e) => onHandleValueChange("looseTablets", e.target.value)}
-										/>
-									</label>
-								</>
-							) : (
-								<>
-									<label>
-										{t("form.totalCapacity")}
-										<input
-											type="text"
-											inputMode="numeric"
-											pattern="[0-9]*"
-											value={form.totalPills}
-											onChange={(e) => onHandleValueChange("totalPills", e.target.value)}
-										/>
-									</label>
-									<label>
-										{t("form.currentPills")}
-										<input
-											type="text"
-											inputMode="numeric"
-											pattern="[0-9]*"
-											value={form.looseTablets}
-											onChange={(e) => onHandleValueChange("looseTablets", e.target.value)}
-										/>
-									</label>
-								</>
-							)}
-							<div className="full">
-								<p className="sub">
-									<strong>{t("form.total")}:</strong> {deriveTotalFromForm(form)}{" "}
-									{deriveTotalFromForm(form) === 1 ? t("common.pill") : t("common.pills")}
-								</p>
-							</div>
-							<label className="full">
-								{t("form.pillWeight")} ({form.doseUnit})
-								<div className="dose-input-group">
-									<input
-										type="text"
-										inputMode="decimal"
-										pattern="[0-9]*\.?[0-9]*"
-										value={form.pillWeightMg}
-										onChange={(e) => onFormChange({ ...form, pillWeightMg: e.target.value })}
-										placeholder={t("form.placeholders.weight")}
-									/>
-									<select
-										value={form.doseUnit}
-										onChange={(e) => onFormChange({ ...form, doseUnit: e.target.value as DoseUnit })}
-										className="dose-unit-select"
-									>
-										{DOSE_UNITS.map((unit) => (
-											<option key={unit.value} value={unit.value}>
-												{unit.label}
-											</option>
-										))}
-									</select>
-								</div>
-							</label>
-							<label className="full">
-								{t("form.expiryDate")}
-								<DateInput
-									value={form.expiryDate}
-									onChange={(e) => onFormChange({ ...form, expiryDate: e.target.value })}
-								/>
-							</label>
-							<label className={`full ${fieldErrors.notes ? "has-error" : ""}`}>
-								{t("form.notes")}
-								<textarea
-									value={form.notes}
-									onChange={(e) => onFormChange({ ...form, notes: e.target.value })}
-									placeholder={t("form.placeholders.notes")}
-									rows={2}
-									maxLength={FIELD_LIMITS.notes.max}
-									className="auto-resize"
-									onInput={(e) => {
-										const target = e.target as HTMLTextAreaElement;
-										target.style.height = "auto";
-										target.style.height = `${target.scrollHeight}px`;
-									}}
-								/>
-								{form.notes.length > 0 && (
-									<span className={`char-count ${form.notes.length > FIELD_LIMITS.notes.max * 0.9 ? "warning" : ""}`}>
-										{t("common.validation.tooLong", { current: form.notes.length, max: FIELD_LIMITS.notes.max })}
-									</span>
-								)}
-								{fieldErrors.notes && <span className="field-error">{fieldErrors.notes}</span>}
-							</label>
-						</div>
-
-						<div className="full form-category">
-							<h4 className="form-category-title">{t("form.sections.prescription")}</h4>
-							<label className="full">
-								{t("prescription.enabled")}
-								<label className="toggle-switch small">
-									<input
-										type="checkbox"
-										checked={form.prescriptionEnabled}
-										onChange={(e) => onHandleValueChange("prescriptionEnabled", e.target.checked)}
-									/>
-									<span className="toggle-slider"></span>
 								</label>
-							</label>
+								<label className={`full ${fieldErrors.genericName ? "has-error" : ""}`}>
-							{form.prescriptionEnabled && (
+									{t("form.genericName")}
-								<>
+									<input
-									<label className="prescription-field">
+										value={form.genericName}
-										{t("prescription.authorizedRefills")}
+										onChange={(e) => onFormChange({ ...form, genericName: e.target.value })}
+										placeholder={t("form.placeholders.generic")}
+										maxLength={FIELD_LIMITS.genericName.max}
+									/>
+									{fieldErrors.genericName && <span className="field-error">{fieldErrors.genericName}</span>}
+								</label>
+								<label className="full">
+									{t("form.medicationStartDate")}
+									<DateInput
+										value={form.medicationStartDate}
+										onChange={(e) => onHandleValueChange("medicationStartDate", e.target.value)}
+									/>
+									{!readOnlyMode && dateConsistencyError && <span className="field-error">{dateConsistencyError}</span>}
+								</label>
+								<label className="full">
+									{t("form.packageType")}
+									<select
+										className="package-type-select"
+										value={form.packageType}
+										onChange={(e) => onHandleValueChange("packageType", e.target.value)}
+									>
+										<option value="blister">{t("form.packageTypeBlister")}</option>
+										<option value="bottle">{t("form.packageTypeBottle")}</option>
+									</select>
+								</label>
+								<label className={`full ${fieldErrors.takenBy ? "has-error" : ""}`}>
+									{t("form.takenBy")}
+									<div className="tag-input-container">
+										{form.takenBy.map((person) => (
+											<span key={person} className="tag">
+												{person}
+												<button type="button" className="tag-remove" onClick={() => onRemoveTakenByPerson(person)}>
+													×
+												</button>
+											</span>
+										))}
 										<input
-											type="text"
+											value={takenByInput}
-											inputMode="numeric"
+											onChange={(e) => onTakenByInputChange(e.target.value)}
-											pattern="[0-9]*"
+											onKeyDown={onTakenByKeyDown}
-											value={form.prescriptionAuthorizedRefills}
+											onBlur={() => {
-											onChange={(e) => onHandleValueChange("prescriptionAuthorizedRefills", e.target.value)}
+												if (takenByInput.trim()) onAddTakenByPerson(takenByInput);
+											}}
+											placeholder={
+												form.takenBy.length === 0 ? t("form.placeholders.takenBy") : t("form.placeholders.addPerson")
+											}
+											maxLength={FIELD_LIMITS.takenBy.max}
+											list="takenby-suggestions-modal"
 										/>
-									</label>
+										<datalist id="takenby-suggestions-modal">
-									<label className="prescription-field">
+											{existingPeople
-										{t("prescription.remainingRefills")}
+												.filter((p) => !form.takenBy.includes(p))
-										<input
+												.map((person) => (
-											type="text"
+													<option key={person} value={person} />
-											inputMode="numeric"
+												))}
-											pattern="[0-9]*"
+										</datalist>
-											value={form.prescriptionRemainingRefills}
+									</div>
-											onChange={(e) => onHandleValueChange("prescriptionRemainingRefills", e.target.value)}
+									{fieldErrors.takenBy && <span className="field-error">{fieldErrors.takenBy}</span>}
-										/>
+								</label>
-									</label>
+							</div>
-									<label className="prescription-field">
-										{t("prescription.lowThreshold")}
-										<input
-											type="text"
-											inputMode="numeric"
-											pattern="[0-9]*"
-											value={form.prescriptionLowRefillThreshold}
-											onChange={(e) => onHandleValueChange("prescriptionLowRefillThreshold", e.target.value)}
-										/>
-									</label>
-									<label className="prescription-field">
-										{t("prescription.expiryDate")}
-										<DateInput
-											value={form.prescriptionExpiryDate}
-											onChange={(e) => onHandleValueChange("prescriptionExpiryDate", e.target.value)}
-										/>
-									</label>
-								</>
-							)}
-						</div>
 
-						{!readOnlyMode && (
+							{editingId && (
-							<div className="full form-category refill-section">
+								<div className="full form-category image-section">
-								<h4 className="form-category-title">{t("refill.title")}</h4>
+									<h4 className="form-category-title">{t("form.medicationImage")}</h4>
-								{editingId ? (
+									{currentMed?.imageUrl ? (
-									<>
+										<div className="image-preview">
-										{form.packageType === "blister" ? (
+											<img src={`/api/images/${currentMed.imageUrl}`} alt={currentMed.name} />
-											<>
-												<label>
-													{t("refill.packs")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
-														value={refillPacks}
-														onChange={(e) => onRefillPacksChange(parseInt(e.target.value, 10) || 0)}
-													/>
-												</label>
-												<label>
-													{t("refill.loosePills")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
-														value={refillLoose}
-														onChange={(e) => onRefillLooseChange(parseInt(e.target.value, 10) || 0)}
-													/>
-												</label>
-											</>
-										) : (
-											<label className="full">
-												{t("refill.pillsToAdd")}
-												<input
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
-													value={refillLoose}
-													onChange={(e) => onRefillLooseChange(parseInt(e.target.value, 10) || 0)}
-												/>
-											</label>
-										)}
-										<div className="refill-submit-row full">
 											<button
 												type="button"
-												className="success"
+												className="danger icon-only tooltip-trigger"
-												onClick={() => onSubmitRefill(editingId)}
+												onClick={() => onDeleteMedImage(editingId)}
-												disabled={(refillPacks < 1 && refillLoose < 1) || refillSaving}
+												aria-label={t("form.removeImage")}
+												data-tooltip={t("form.removeImage")}
 											>
-												{refillSaving ? t("common.saving") : t("refill.button")}
+												<Trash2 size={18} aria-hidden="true" />
 											</button>
-											{(() => {
-												const totalRefill =
-													form.packageType === "blister"
-														? refillPacks * Number(form.blistersPerPack || 0) * Number(form.pillsPerBlister || 1) +
-															refillLoose
-														: refillLoose;
-												return totalRefill > 0 ? (
-													<span className="refill-preview">
-														+{totalRefill} {totalRefill === 1 ? t("common.pill") : t("common.pills")}
-													</span>
-												) : null;
-											})()}
 										</div>
-										{form.prescriptionEnabled && (
+									) : (
-											<div className="refill-prescription-row full">
+										<input
-												<label className="refill-prescription-toggle">
+											type="file"
-													<input
+											accept="image/*"
-														type="checkbox"
+											onChange={(e) => e.target.files?.[0] && onUploadMedImage(editingId, e.target.files[0])}
-														checked={usePrescriptionRefill}
+										/>
-														onChange={(e) => onUsePrescriptionRefillChange(e.target.checked)}
+									)}
-														disabled={(Number(form.prescriptionRemainingRefills) || 0) <= 0}
+								</div>
-													/>
+							)}
-													<span className="refill-prescription-label-text">{t("prescription.useForRefill")}</span>
+						</div>
-												</label>
+						<div className={`form-tab-panel${activeTab === "stock" ? " active" : ""}`}>
-												<span className="refill-remaining-badge">
+							<div className="full form-category">
-													{t("prescription.remainingRefills")}: {Number(form.prescriptionRemainingRefills) || 0}
+								<h4 className="form-category-title">{t("form.sections.stock")}</h4>
-												</span>
+								{form.packageType === "blister" ? (
-											</div>
+									<>
-										)}
+										<label>
+											{t("form.packs")}
+											<input
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={form.packCount}
+												onChange={(e) => onHandleValueChange("packCount", e.target.value)}
+											/>
+										</label>
+										<label>
+											{t("form.blistersPerPack")}
+											<input
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={form.blistersPerPack}
+												onChange={(e) => onHandleValueChange("blistersPerPack", e.target.value)}
+											/>
+										</label>
+										<label>
+											{t("form.pillsPerBlister")}
+											<input
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={form.pillsPerBlister}
+												onChange={(e) => onHandleValueChange("pillsPerBlister", e.target.value)}
+											/>
+										</label>
+										<label>
+											{t("form.total")}
+											<div className="static-value">{deriveTotalFromForm(form)}</div>
+										</label>
 									</>
 								) : (
-									<p className="refill-unavailable">
+									<>
-										{t("refill.saveFirst", "Save medication first to enable refill")}
+										<label>
-									</p>
+											{t("form.totalCapacity")}
+											<input
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={form.totalPills}
+												onChange={(e) => onHandleValueChange("totalPills", e.target.value)}
+											/>
+										</label>
+										<label>
+											{t("form.currentPills")}
+											<input
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={form.looseTablets}
+												onChange={(e) => onHandleValueChange("looseTablets", e.target.value)}
+											/>
+										</label>
+									</>
 								)}
-							</div>
+								{form.packageType === "bottle" && (
-						)}
+									<div className="full stock-total-row">
-
+										<div className="stock-total-field">
-						{editingId && (
+											<p className="sub">
-							<div className="full form-category image-section">
+												<strong>{t("form.total")}:</strong> {deriveTotalFromForm(form)}{" "}
-								<h4 className="form-category-title">{t("form.medicationImage")}</h4>
+												{deriveTotalFromForm(form) === 1 ? t("common.pill") : t("common.pills")}
-								{currentMed?.imageUrl ? (
+											</p>
-									<div className="image-preview">
+										</div>
-										<img src={`/api/images/${currentMed.imageUrl}`} alt={currentMed.name} />
-										<button type="button" className="danger" onClick={() => onDeleteMedImage(editingId)}>
-											{t("form.removeImage")}
-										</button>
 									</div>
-								) : (
-									<input
-										type="file"
-										accept="image/*"
-										onChange={(e) => e.target.files?.[0] && onUploadMedImage(editingId, e.target.files[0])}
-									/>
 								)}
-							</div>
+								<label className="full">
-						)}
+									{t("form.pillWeight")} ({form.doseUnit})
-
+									<div className="dose-input-group">
-						<div className="full form-category intake-section">
-							<div className="form-category-header">
-								<h4 className="form-category-title">{t("form.blisters.title")}</h4>
-								{!readOnlyMode && (
-									<button
-										type="button"
-										className="ghost add-blister"
-										onClick={() => onAddIntake(form.takenBy.length === 1 ? form.takenBy[0] : undefined)}
-									>
-										+ {t("form.blisters.addIntake")}
-									</button>
-								)}
-							</div>
-							{form.intakes.map((intake, idx) => (
-								<div key={idx} className="blister-row">
-									<label className="compact">
-										<span>{t("form.blisters.usage")}</span>
 										<input
 											type="text"
 											inputMode="decimal"
 											pattern="[0-9]*\.?[0-9]*"
-											value={intake.usage}
+											value={form.pillWeightMg}
-											onChange={(e) => onSetIntakeValue(idx, "usage", e.target.value)}
+											onChange={(e) => onFormChange({ ...form, pillWeightMg: e.target.value })}
+											placeholder={t("form.placeholders.weight")}
 										/>
-									</label>
+										<select
-									<label className="compact">
+											value={form.doseUnit}
-										<span>{t("form.blisters.everyDays")}</span>
+											onChange={(e) => onFormChange({ ...form, doseUnit: e.target.value as DoseUnit })}
-										<input
+											className="dose-unit-select"
-											type="text"
+										>
-											inputMode="numeric"
+											{DOSE_UNITS.map((unit) => (
-											pattern="[0-9]*"
+												<option key={unit.value} value={unit.value}>
-											value={intake.every}
+													{unit.label}
-											onChange={(e) => onSetIntakeValue(idx, "every", e.target.value)}
+												</option>
-										/>
+											))}
-									</label>
+										</select>
-									<label className="compact full-row">
-										<span>{t("form.blisters.startDate")}</span>
-										<DateInput
-											value={intake.startDate}
-											onChange={(e) => onSetIntakeValue(idx, "startDate", e.target.value)}
-										/>
-									</label>
-									<label className="compact time-label">
-										<span>{t("form.blisters.startTime")}</span>
-										<input
-											type="time"
-											value={intake.startTime}
-											onChange={(e) => onSetIntakeValue(idx, "startTime", e.target.value)}
-										/>
-									</label>
-									{form.takenBy.length === 0 ? null : (
-										<label className="compact full-row">
-											<span>{t("form.blisters.takenByIntake")}</span>
-											<select value={intake.takenBy} onChange={(e) => onSetIntakeValue(idx, "takenBy", e.target.value)}>
-												{form.takenBy.map((person) => (
-													<option key={person} value={person}>
-														{person}
-													</option>
-												))}
-											</select>
-										</label>
-									)}
-									<div className="remind-toggle-row" title={t("form.blisters.remindTooltip")}>
-										<span className="legend-hint">🔔</span>
-										<label className="toggle-switch small">
-											<input
-												type="checkbox"
-												checked={intake.intakeRemindersEnabled}
-												onChange={(e) => onSetIntakeValue(idx, "intakeRemindersEnabled", e.target.checked)}
-											/>
-											<span className="toggle-slider"></span>
-										</label>
 									</div>
-									{!readOnlyMode && form.intakes.length > 1 && (
+								</label>
-										<button type="button" className="danger remove-blister-btn" onClick={() => onRemoveIntake(idx)}>
+								<label className="full">
-											{t("common.remove")}
+									{t("form.expiryDate")}
+									<DateInput
+										value={form.expiryDate}
+										onChange={(e) => onFormChange({ ...form, expiryDate: e.target.value })}
+									/>
+								</label>
+								<label className={`full ${fieldErrors.notes ? "has-error" : ""}`}>
+									{t("form.notes")}
+									<textarea
+										value={form.notes}
+										onChange={(e) => onFormChange({ ...form, notes: e.target.value })}
+										placeholder={t("form.placeholders.notes")}
+										rows={2}
+										maxLength={FIELD_LIMITS.notes.max}
+										className="auto-resize"
+										onInput={(e) => {
+											const target = e.target as HTMLTextAreaElement;
+											target.style.height = "auto";
+											target.style.height = `${target.scrollHeight}px`;
+										}}
+									/>
+									{form.notes.length > 0 && (
+										<span className={`char-count ${form.notes.length > FIELD_LIMITS.notes.max * 0.9 ? "warning" : ""}`}>
+											{t("common.validation.tooLong", { current: form.notes.length, max: FIELD_LIMITS.notes.max })}
+										</span>
+									)}
+									{fieldErrors.notes && <span className="field-error">{fieldErrors.notes}</span>}
+								</label>
+							</div>
+						</div>
+						<div className={`form-tab-panel${activeTab === "prescription" ? " active" : ""}`}>
+							<div className="full form-category">
+								<h4 className="form-category-title">{t("form.sections.prescription")}</h4>
+								<label className="full">
+									{t("prescription.enabled")}
+									<label className="toggle-switch small">
+										<input
+											type="checkbox"
+											checked={form.prescriptionEnabled}
+											onChange={(e) => onHandleValueChange("prescriptionEnabled", e.target.checked)}
+										/>
+										<span className="toggle-slider"></span>
+									</label>
+								</label>
+								{form.prescriptionEnabled && (
+									<>
+										<label className="prescription-field">
+											{t("prescription.authorizedRefills")}
+											<input
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={form.prescriptionAuthorizedRefills}
+												onChange={(e) => onHandleValueChange("prescriptionAuthorizedRefills", e.target.value)}
+											/>
+										</label>
+										<label className="prescription-field">
+											{t("prescription.remainingRefills")}
+											<input
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={form.prescriptionRemainingRefills}
+												onChange={(e) => onHandleValueChange("prescriptionRemainingRefills", e.target.value)}
+											/>
+										</label>
+										<label className="prescription-field">
+											{t("prescription.lowThreshold")}
+											<input
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={form.prescriptionLowRefillThreshold}
+												onChange={(e) => onHandleValueChange("prescriptionLowRefillThreshold", e.target.value)}
+											/>
+										</label>
+										<label className="prescription-field">
+											{t("prescription.expiryDate")}
+											<DateInput
+												value={form.prescriptionExpiryDate}
+												onChange={(e) => onHandleValueChange("prescriptionExpiryDate", e.target.value)}
+											/>
+										</label>
+									</>
+								)}
+							</div>
+						</div>
+						<div className={`form-tab-panel${activeTab === "schedule" ? " active" : ""}`}>
+							<div className="full form-category intake-section">
+								<div className="form-category-header">
+									<h4 className="form-category-title">{t("form.blisters.title")}</h4>
+									{!readOnlyMode && (
+										<button
+											type="button"
+											className="ghost add-blister icon-only tooltip-trigger"
+											onClick={() => onAddIntake(form.takenBy.length === 1 ? form.takenBy[0] : undefined)}
+											aria-label={t("form.blisters.addIntake")}
+											data-tooltip={t("form.blisters.addIntake")}
+										>
+											<Plus size={18} aria-hidden="true" />
 										</button>
 									)}
 								</div>
-							))}
+								{form.intakes.map((intake, idx) => (
+									<div key={idx} className="blister-row">
+										<label className="compact">
+											<span>{t("form.blisters.usage")}</span>
+											<input
+												type="text"
+												inputMode="decimal"
+												pattern="[0-9]*\.?[0-9]*"
+												value={intake.usage}
+												onChange={(e) => onSetIntakeValue(idx, "usage", e.target.value)}
+											/>
+										</label>
+										<label className="compact">
+											<span>{t("form.blisters.everyDays")}</span>
+											<input
+												type="text"
+												inputMode="numeric"
+												pattern="[0-9]*"
+												value={intake.every}
+												onChange={(e) => onSetIntakeValue(idx, "every", e.target.value)}
+											/>
+										</label>
+										<label className="compact full-row">
+											<span>{t("form.blisters.startDate")}</span>
+											<DateInput
+												value={intake.startDate}
+												onChange={(e) => onSetIntakeValue(idx, "startDate", e.target.value)}
+											/>
+										</label>
+										<label className="compact time-label">
+											<span>{t("form.blisters.startTime")}</span>
+											<input
+												type="time"
+												value={intake.startTime}
+												onChange={(e) => onSetIntakeValue(idx, "startTime", e.target.value)}
+											/>
+										</label>
+										{form.takenBy.length === 0 ? null : (
+											<label className="compact full-row taken-by-field">
+												<span>{t("form.blisters.takenByIntake")}</span>
+												<select
+													value={intake.takenBy}
+													onChange={(e) => onSetIntakeValue(idx, "takenBy", e.target.value)}
+												>
+													{form.takenBy.map((person) => (
+														<option key={person} value={person}>
+															{person}
+														</option>
+													))}
+												</select>
+											</label>
+										)}
+										<div className="remind-toggle-row" title={t("form.blisters.remindTooltip")}>
+											<span className="legend-hint">🔔</span>
+											<label className="toggle-switch small">
+												<input
+													type="checkbox"
+													checked={intake.intakeRemindersEnabled}
+													onChange={(e) => onSetIntakeValue(idx, "intakeRemindersEnabled", e.target.checked)}
+												/>
+												<span className="toggle-slider"></span>
+											</label>
+										</div>
+										{!readOnlyMode && form.intakes.length > 1 && (
+											<button
+												type="button"
+												className="danger remove-blister-btn icon-only tooltip-trigger"
+												onClick={() => onRemoveIntake(idx)}
+												aria-label={t("common.remove")}
+												data-tooltip={t("common.remove")}
+											>
+												<Minus size={18} aria-hidden="true" />
+											</button>
+										)}
+									</div>
+								))}
+							</div>
 						</div>
 					</fieldset>
 					<div className="modal-footer">
 						<button type="button" className="ghost" onClick={onClose}>
-							{readOnlyMode ? t("common.close") : t("common.cancel")}
+							{readOnlyMode || (formSaved && !formChanged) ? t("common.close") : t("common.cancel")}
 						</button>
 						{!readOnlyMode && (
 							<button

frontend/src/components/ReportModal.tsx

@@ -0,0 +1,661 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { Medication } from "../types";
+import { getPackageSize } from "../types";
+import { MedicationAvatar } from "./MedicationAvatar";
+
+type ReportFormat = "txt" | "md" | "pdf";
+
+interface ReportModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	medications: Medication[];
+}
+
+type ReportData = Record<
+	number,
+	{
+		dosesTaken: number;
+		dosesDismissed: number;
+		firstDoseAt: string | null;
+		lastDoseAt: string | null;
+		refills: { packsAdded: number; loosePillsAdded: number; usedPrescription: boolean; refillDate: string }[];
+	}
+>;
+
+export function ReportModal({ isOpen, onClose, medications }: ReportModalProps) {
+	const { t } = useTranslation();
+	const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
+	const [format, setFormat] = useState<ReportFormat>("pdf");
+	const [generating, setGenerating] = useState(false);
+	const [takenByFilter, setTakenByFilter] = useState<Set<string>>(new Set());
+
+	// Collect all unique "taken by" people across all medications
+	const allPeople = useMemo(() => {
+		const people = new Set<string>();
+		for (const med of medications) {
+			if (med.takenBy) {
+				for (const p of med.takenBy) people.add(p);
+			}
+		}
+		return Array.from(people).sort();
+	}, [medications]);
+
+	// Filtered medications based on takenBy filter
+	const filteredMeds = useMemo(() => {
+		if (takenByFilter.size === 0) return medications;
+		return medications.filter((m) => m.takenBy?.some((p) => takenByFilter.has(p)));
+	}, [medications, takenByFilter]);
+
+	const activeMeds = useMemo(() => filteredMeds.filter((m) => !m.isObsolete), [filteredMeds]);
+	const obsoleteMeds = useMemo(() => filteredMeds.filter((m) => m.isObsolete), [filteredMeds]);
+
+	const togglePerson = useCallback((person: string) => {
+		setTakenByFilter((prev) => {
+			const next = new Set(prev);
+			if (next.has(person)) next.delete(person);
+			else next.add(person);
+			return next;
+		});
+	}, []);
+
+	const selectAllPeople = useCallback(() => {
+		setTakenByFilter(new Set());
+	}, []);
+
+	// Reset selection when modal opens or filter changes
+	useEffect(() => {
+		if (isOpen) {
+			setSelectedIds(new Set(filteredMeds.map((m) => m.id)));
+		}
+	}, [isOpen, filteredMeds]);
+
+	// Reset everything when modal opens
+	useEffect(() => {
+		if (isOpen) {
+			setTakenByFilter(new Set());
+			setFormat("pdf");
+			setGenerating(false);
+		}
+	}, [isOpen]);
+
+	const toggleMed = useCallback((id: number) => {
+		setSelectedIds((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+
+	const selectAll = useCallback(() => {
+		setSelectedIds(new Set(filteredMeds.map((m) => m.id)));
+	}, [filteredMeds]);
+
+	const deselectAll = useCallback(() => {
+		setSelectedIds(new Set());
+	}, []);
+
+	const selectedMeds = useMemo(() => filteredMeds.filter((m) => selectedIds.has(m.id)), [filteredMeds, selectedIds]);
+
+	async function handleGenerate() {
+		if (selectedIds.size === 0) return;
+		setGenerating(true);
+
+		try {
+			// Fetch report data from backend
+			const res = await fetch("/api/medications/report-data", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ medicationIds: Array.from(selectedIds) }),
+				credentials: "include",
+			});
+			if (!res.ok) throw new Error("Failed to fetch report data");
+			const reportData = (await res.json()) as ReportData;
+
+			if (format === "pdf") {
+				const imageMap = await fetchMedImages(selectedMeds);
+				const filterArr = takenByFilter.size > 0 ? Array.from(takenByFilter) : null;
+				openPrintView(selectedMeds, reportData, t, imageMap, filterArr);
+			} else {
+				const filterArr = takenByFilter.size > 0 ? Array.from(takenByFilter) : null;
+				const content = generateTextReport(selectedMeds, reportData, format, t, filterArr);
+				downloadFile(content, format);
+			}
+			onClose();
+		} catch {
+			// Stay open on error so user can retry
+		} finally {
+			setGenerating(false);
+		}
+	}
+
+	if (!isOpen) return null;
+
+	return (
+		<div
+			className="modal-overlay"
+			onClick={onClose}
+			onKeyDown={(e) => {
+				if (e.key === "Escape") onClose();
+			}}
+		>
+			<div
+				className="modal-content report-modal"
+				onClick={(e) => e.stopPropagation()}
+				onKeyDown={(e) => e.stopPropagation()}
+			>
+				<button className="modal-close" onClick={onClose}>
+					×
+				</button>
+				<h2 className="report-modal-title">{t("report.title")}</h2>
+				<p className="report-modal-desc">{t("report.description")}</p>
+
+				{/* Person filter */}
+				{allPeople.length > 1 && (
+					<div className="report-person-filter">
+						<h4>{t("report.filterByPerson")}</h4>
+						<div className="report-format-options">
+							<label className={`report-format-option${takenByFilter.size === 0 ? " selected" : ""}`}>
+								<input type="checkbox" checked={takenByFilter.size === 0} onChange={selectAllPeople} />
+								<span>{t("report.allPeople")}</span>
+							</label>
+							{allPeople.map((person) => (
+								<label key={person} className={`report-format-option${takenByFilter.has(person) ? " selected" : ""}`}>
+									<input type="checkbox" checked={takenByFilter.has(person)} onChange={() => togglePerson(person)} />
+									<span>{person}</span>
+								</label>
+							))}
+						</div>
+					</div>
+				)}
+
+				{/* Medication selection */}
+				<div className="report-selection">
+					<div className="report-selection-header">
+						<button
+							type="button"
+							className="ghost small"
+							onClick={selectedIds.size === filteredMeds.length ? deselectAll : selectAll}
+						>
+							{selectedIds.size === filteredMeds.length ? t("report.deselectAll") : t("report.selectAll")}
+						</button>
+						<span className="report-selection-count">
+							{selectedIds.size} / {filteredMeds.length}
+						</span>
+					</div>
+
+					{activeMeds.length > 0 && (
+						<div className="report-group">
+							<h4 className="report-group-title">{t("report.activeMeds")}</h4>
+							<div className="report-med-list">
+								{activeMeds.map((med) => (
+									<label key={med.id} className="report-med-item">
+										<input type="checkbox" checked={selectedIds.has(med.id)} onChange={() => toggleMed(med.id)} />
+										<MedicationAvatar name={med.name} imageUrl={med.imageUrl} size="sm" />
+										<span className="report-med-name">
+											{med.name}
+											{med.genericName && <span className="report-med-generic"> ({med.genericName})</span>}
+										</span>
+									</label>
+								))}
+							</div>
+						</div>
+					)}
+
+					{obsoleteMeds.length > 0 && (
+						<div className="report-group">
+							<h4 className="report-group-title">{t("report.obsoleteMeds")}</h4>
+							<div className="report-med-list">
+								{obsoleteMeds.map((med) => (
+									<label key={med.id} className="report-med-item">
+										<input type="checkbox" checked={selectedIds.has(med.id)} onChange={() => toggleMed(med.id)} />
+										<MedicationAvatar name={med.name} imageUrl={med.imageUrl} size="sm" />
+										<span className="report-med-name obsolete-name">
+											{med.name}
+											{med.genericName && <span className="report-med-generic"> ({med.genericName})</span>}
+										</span>
+									</label>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
+
+				{/* Format selection */}
+				<div className="report-format">
+					<h4>{t("report.format")}</h4>
+					<div className="report-format-options">
+						<label className={`report-format-option${format === "pdf" ? " selected" : ""}`}>
+							<input
+								type="radio"
+								name="format"
+								value="pdf"
+								checked={format === "pdf"}
+								onChange={() => setFormat("pdf")}
+							/>
+							<span>{t("report.formatPdf")}</span>
+						</label>
+						<label className={`report-format-option${format === "txt" ? " selected" : ""}`}>
+							<input
+								type="radio"
+								name="format"
+								value="txt"
+								checked={format === "txt"}
+								onChange={() => setFormat("txt")}
+							/>
+							<span>{t("report.formatTxt")}</span>
+						</label>
+						<label className={`report-format-option${format === "md" ? " selected" : ""}`}>
+							<input type="radio" name="format" value="md" checked={format === "md"} onChange={() => setFormat("md")} />
+							<span>{t("report.formatMd")}</span>
+						</label>
+					</div>
+				</div>
+
+				{/* Actions */}
+				<div className="report-actions">
+					<button type="button" className="ghost" onClick={onClose}>
+						{t("common.cancel")}
+					</button>
+					<button
+						type="button"
+						className="primary"
+						onClick={handleGenerate}
+						disabled={selectedIds.size === 0 || generating}
+					>
+						{generating ? t("report.generating") : t("report.generate")}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+// ─── Report generation helpers ───
+
+type TFn = (key: string, opts?: Record<string, unknown>) => string;
+
+function fmtDate(iso: string | null | undefined): string {
+	if (!iso) return "-";
+	const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})/);
+	if (!m) return "-";
+	return `${m[3]}.${m[2]}.${m[1]}`;
+}
+
+function fmtDateTime(iso: string | null | undefined): string {
+	if (!iso) return "-";
+	const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
+	if (!m) return `${fmtDate(iso)}`;
+	return `${m[3]}.${m[2]}.${m[1]} ${m[4]}:${m[5]}`;
+}
+
+function generateTextReport(
+	meds: Medication[],
+	reportData: ReportData,
+	fmt: "txt" | "md",
+	t: TFn,
+	personFilter: string[] | null
+): string {
+	const lines: string[] = [];
+	const sep = fmt === "md" ? "---" : "═".repeat(60);
+	const h1 = (s: string) => (fmt === "md" ? `# ${s}` : s);
+	const h2 = (s: string) => (fmt === "md" ? `## ${s}` : s);
+	const h3 = (s: string) => (fmt === "md" ? `### ${s}` : `  ${s}`);
+	const bold = (s: string) => (fmt === "md" ? `**${s}**` : s);
+	const item = (label: string, value: string) => (fmt === "md" ? `- ${bold(label)}: ${value}` : `  ${label}: ${value}`);
+
+	lines.push(h1(t("report.docTitle")));
+	lines.push(`${t("report.docGenerated")}: ${fmtDate(new Date().toISOString())}`);
+	lines.push("");
+
+	for (const med of meds) {
+		lines.push(sep);
+		lines.push("");
+		const title = med.isObsolete ? `${med.name} (${t("report.docStatusObsolete")})` : med.name;
+		lines.push(h2(title));
+		lines.push("");
+
+		// General
+		lines.push(h3(t("report.docGeneral")));
+		lines.push(item(t("report.docCommercialName"), med.name));
+		if (med.genericName) lines.push(item(t("report.docGenericName"), med.genericName));
+		if (med.takenBy?.length) lines.push(item(t("report.docTakenBy"), med.takenBy.join(", ")));
+		lines.push(
+			item(t("report.docStatus"), med.isObsolete ? t("report.docStatusObsolete") : t("report.docStatusActive"))
+		);
+		if (med.medicationStartDate) lines.push(item(t("report.docStartDate"), fmtDate(med.medicationStartDate)));
+		if (med.isObsolete && med.obsoleteAt) lines.push(item(t("report.docObsoleteSince"), fmtDate(med.obsoleteAt)));
+		lines.push("");
+
+		// Package / Stock
+		lines.push(h3(t("report.docPackage")));
+		lines.push(
+			item(t("report.docPackageType"), med.packageType === "bottle" ? t("report.docBottle") : t("report.docBlister"))
+		);
+		if (med.packageType === "blister") {
+			lines.push(item(t("report.docPacks"), String(med.packCount)));
+			lines.push(item(t("report.docBlistersPerPack"), String(med.blistersPerPack)));
+			lines.push(item(t("report.docPillsPerBlister"), String(med.pillsPerBlister)));
+			if (med.looseTablets > 0) lines.push(item(t("report.docLoosePills"), String(med.looseTablets)));
+		} else {
+			lines.push(item(t("report.docTotalCapacity"), String(med.totalPills ?? med.looseTablets)));
+		}
+		lines.push(item(t("report.docCurrentStock"), `${getPackageSize(med)} ${t("common.pills")}`));
+		if (med.pillWeightMg) lines.push(item(t("report.docDosePerPill"), `${med.pillWeightMg} ${med.doseUnit ?? "mg"}`));
+		if (med.expiryDate) lines.push(item(t("report.docExpiryDate"), fmtDate(med.expiryDate)));
+		if (med.notes) lines.push(item(t("report.docNotes"), med.notes));
+		lines.push("");
+
+		// Intake Schedule
+		const allIntakes = med.intakes ?? med.blisters;
+		const intakes = personFilter
+			? allIntakes?.filter((i) => "takenBy" in i && personFilter.includes(i.takenBy as string))
+			: allIntakes;
+		if (intakes?.length) {
+			lines.push(h3(t("report.docIntakeSchedule")));
+			for (const intake of intakes) {
+				let entry = `${intake.usage} ${intake.usage === 1 ? t("common.pill") : t("common.pills")}`;
+				entry += ` ${intake.every === 1 ? t("common.daily") : t("common.everyNDays", { count: intake.every })}`;
+				entry += ` ${t("form.blisters.from")} ${fmtDateTime(intake.start)}`;
+				if ("takenBy" in intake && intake.takenBy)
+					entry += ` (${t("report.docIntakeTakenBy", { person: intake.takenBy })})`;
+				if ("intakeRemindersEnabled" in intake && intake.intakeRemindersEnabled) entry += ` 🔔`;
+				lines.push(fmt === "md" ? `- ${entry}` : `  • ${entry}`);
+			}
+			lines.push("");
+		}
+
+		// Prescription
+		if (med.prescriptionEnabled) {
+			lines.push(h3(t("report.docPrescription")));
+			lines.push(item(t("report.docAuthorizedRefills"), String(med.prescriptionAuthorizedRefills ?? 0)));
+			lines.push(item(t("report.docRemainingRefills"), String(med.prescriptionRemainingRefills ?? 0)));
+			if (med.prescriptionExpiryDate)
+				lines.push(item(t("report.docPrescriptionExpiry"), fmtDate(med.prescriptionExpiryDate)));
+			lines.push("");
+		}
+
+		// Dose tracking data
+		const data = reportData[med.id];
+		if (data) {
+			lines.push(h3(t("report.docIntakeHistory")));
+			if (data.dosesTaken > 0 || data.dosesDismissed > 0) {
+				lines.push(item(t("report.docDosesTaken"), String(data.dosesTaken)));
+				if (data.dosesDismissed > 0) lines.push(item(t("report.docDosesDismissed"), String(data.dosesDismissed)));
+				if (data.firstDoseAt) lines.push(item(t("report.docFirstDose"), fmtDate(data.firstDoseAt)));
+				if (data.lastDoseAt) lines.push(item(t("report.docLastDose"), fmtDate(data.lastDoseAt)));
+			} else {
+				lines.push(fmt === "md" ? `- ${t("report.docNoDoses")}` : `  ${t("report.docNoDoses")}`);
+			}
+			lines.push("");
+
+			// Refill history
+			if (data.refills.length > 0) {
+				lines.push(h3(t("report.docRefillHistory")));
+				for (const r of data.refills) {
+					let entry = `${fmtDate(r.refillDate)}: +${r.packsAdded} ${t("report.docPacks")}, +${r.loosePillsAdded} ${t("common.pills")}`;
+					if (r.usedPrescription) entry += ` ${t("report.docRefillPrescription")}`;
+					lines.push(fmt === "md" ? `- ${entry}` : `  • ${entry}`);
+				}
+				lines.push("");
+			}
+		}
+	}
+
+	lines.push(sep);
+	return lines.join("\n");
+}
+
+function downloadFile(content: string, format: "txt" | "md") {
+	const mimeType = format === "md" ? "text/markdown" : "text/plain";
+	const blob = new Blob([content], { type: `${mimeType};charset=utf-8` });
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement("a");
+	const dateStr = new Date().toISOString().slice(0, 10);
+	a.href = url;
+	a.download = `medassist-report-${dateStr}.${format}`;
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+	URL.revokeObjectURL(url);
+}
+
+type ImageMap = Record<number, string>;
+
+async function fetchMedImages(meds: Medication[]): Promise<ImageMap> {
+	const map: ImageMap = {};
+	const fetches = meds
+		.filter((m) => m.imageUrl)
+		.map(async (m) => {
+			try {
+				const res = await fetch(`/api/images/${m.imageUrl}`, { credentials: "include" });
+				if (!res.ok) return;
+				const blob = await res.blob();
+				const dataUrl = await new Promise<string>((resolve) => {
+					const reader = new FileReader();
+					reader.onloadend = () => resolve(reader.result as string);
+					reader.readAsDataURL(blob);
+				});
+				map[m.id] = dataUrl;
+			} catch {
+				// Skip image on error
+			}
+		});
+	await Promise.all(fetches);
+	return map;
+}
+
+function openPrintView(
+	meds: Medication[],
+	reportData: ReportData,
+	t: TFn,
+	imageMap: ImageMap,
+	personFilter: string[] | null
+) {
+	const w = window.open("", "_blank");
+	if (!w) return;
+
+	const html = buildPrintHtml(meds, reportData, t, imageMap, personFilter);
+	w.document.write(html);
+	w.document.close();
+	w.onload = () => setTimeout(() => w.print(), 300);
+}
+
+function escHtml(s: string): string {
+	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+function buildPrintHtml(
+	meds: Medication[],
+	reportData: ReportData,
+	t: TFn,
+	imageMap: ImageMap,
+	personFilter: string[] | null
+): string {
+	const sections: string[] = [];
+
+	for (const med of meds) {
+		const data = reportData[med.id];
+		const intakes = med.intakes ?? med.blisters;
+		const title = med.isObsolete
+			? `${escHtml(med.name)} <span class="obsolete-badge">${escHtml(t("report.docStatusObsolete"))}</span>`
+			: escHtml(med.name);
+
+		let s = `<div class="med-section">`;
+		const imgDataUrl = imageMap[med.id];
+
+		// Title with generic name subtitle
+		s += `<h2>${title}</h2>`;
+		if (med.genericName) s += `<p class="generic-subtitle">${escHtml(med.genericName)}</p>`;
+
+		// Build general info table rows
+		const generalRows: string[] = [];
+		generalRows.push(
+			`<tr><td class="label">${escHtml(t("report.docCommercialName"))}</td><td>${escHtml(med.name)}</td></tr>`
+		);
+		if (med.genericName)
+			generalRows.push(
+				`<tr><td class="label">${escHtml(t("report.docGenericName"))}</td><td>${escHtml(med.genericName)}</td></tr>`
+			);
+		if (med.takenBy?.length)
+			generalRows.push(
+				`<tr><td class="label">${escHtml(t("report.docTakenBy"))}</td><td>${escHtml(med.takenBy.join(", "))}</td></tr>`
+			);
+		generalRows.push(
+			`<tr><td class="label">${escHtml(t("report.docStatus"))}</td><td>${escHtml(med.isObsolete ? t("report.docStatusObsolete") : t("report.docStatusActive"))}</td></tr>`
+		);
+		if (med.medicationStartDate)
+			generalRows.push(
+				`<tr><td class="label">${escHtml(t("report.docStartDate"))}</td><td>${fmtDate(med.medicationStartDate)}</td></tr>`
+			);
+		if (med.isObsolete && med.obsoleteAt)
+			generalRows.push(
+				`<tr><td class="label">${escHtml(t("report.docObsoleteSince"))}</td><td>${fmtDate(med.obsoleteAt)}</td></tr>`
+			);
+		const generalTable = `<h3>${escHtml(t("report.docGeneral"))}</h3><table><tbody>${generalRows.join("")}</tbody></table>`;
+
+		if (imgDataUrl) {
+			s += `<div class="med-overview"><img class="med-img" src="${imgDataUrl}" alt="${escHtml(med.name)}" /><div class="med-overview-info">${generalTable}</div></div>`;
+		} else {
+			s += generalTable;
+		}
+
+		// Package / Stock
+		s += `<h3>${escHtml(t("report.docPackage"))}</h3>`;
+		s += `<table><tbody>`;
+		s += `<tr><td class="label">${escHtml(t("report.docPackageType"))}</td><td>${escHtml(med.packageType === "bottle" ? t("report.docBottle") : t("report.docBlister"))}</td></tr>`;
+		if (med.packageType === "blister") {
+			s += `<tr><td class="label">${escHtml(t("report.docPacks"))}</td><td>${med.packCount}</td></tr>`;
+			s += `<tr><td class="label">${escHtml(t("report.docBlistersPerPack"))}</td><td>${med.blistersPerPack}</td></tr>`;
+			s += `<tr><td class="label">${escHtml(t("report.docPillsPerBlister"))}</td><td>${med.pillsPerBlister}</td></tr>`;
+			if (med.looseTablets > 0)
+				s += `<tr><td class="label">${escHtml(t("report.docLoosePills"))}</td><td>${med.looseTablets}</td></tr>`;
+		} else {
+			s += `<tr><td class="label">${escHtml(t("report.docTotalCapacity"))}</td><td>${med.totalPills ?? med.looseTablets}</td></tr>`;
+		}
+		s += `<tr><td class="label">${escHtml(t("report.docCurrentStock"))}</td><td>${getPackageSize(med)} ${escHtml(t("common.pills"))}</td></tr>`;
+		if (med.pillWeightMg)
+			s += `<tr><td class="label">${escHtml(t("report.docDosePerPill"))}</td><td>${med.pillWeightMg} ${escHtml(med.doseUnit ?? "mg")}</td></tr>`;
+		if (med.expiryDate)
+			s += `<tr><td class="label">${escHtml(t("report.docExpiryDate"))}</td><td>${fmtDate(med.expiryDate)}</td></tr>`;
+		if (med.notes)
+			s += `<tr><td class="label">${escHtml(t("report.docNotes"))}</td><td>${escHtml(med.notes)}</td></tr>`;
+		s += `</tbody></table>`;
+
+		// Intake Schedule
+		const allPrintIntakes = intakes;
+		const filteredPrintIntakes = personFilter
+			? allPrintIntakes?.filter((i) => "takenBy" in i && personFilter.includes(i.takenBy as string))
+			: allPrintIntakes;
+		if (filteredPrintIntakes?.length) {
+			s += `<h3>${escHtml(t("report.docIntakeSchedule"))}</h3>`;
+			s += `<ul>`;
+			for (const intake of filteredPrintIntakes) {
+				let entry = `${intake.usage} ${escHtml(intake.usage === 1 ? t("common.pill") : t("common.pills"))}`;
+				entry += ` ${escHtml(intake.every === 1 ? t("common.daily") : t("common.everyNDays", { count: intake.every }))}`;
+				entry += ` ${escHtml(t("form.blisters.from"))} ${fmtDateTime(intake.start)}`;
+				if ("takenBy" in intake && intake.takenBy)
+					entry += ` <em>(${escHtml(t("report.docIntakeTakenBy", { person: intake.takenBy }))})</em>`;
+				if ("intakeRemindersEnabled" in intake && intake.intakeRemindersEnabled) entry += ` 🔔`;
+				s += `<li>${entry}</li>`;
+			}
+			s += `</ul>`;
+		}
+
+		// Prescription
+		if (med.prescriptionEnabled) {
+			s += `<h3>${escHtml(t("report.docPrescription"))}</h3>`;
+			s += `<table><tbody>`;
+			s += `<tr><td class="label">${escHtml(t("report.docAuthorizedRefills"))}</td><td>${med.prescriptionAuthorizedRefills ?? 0}</td></tr>`;
+			s += `<tr><td class="label">${escHtml(t("report.docRemainingRefills"))}</td><td>${med.prescriptionRemainingRefills ?? 0}</td></tr>`;
+			if (med.prescriptionExpiryDate)
+				s += `<tr><td class="label">${escHtml(t("report.docPrescriptionExpiry"))}</td><td>${fmtDate(med.prescriptionExpiryDate)}</td></tr>`;
+			s += `</tbody></table>`;
+		}
+
+		// Intake history
+		if (data) {
+			s += `<h3>${escHtml(t("report.docIntakeHistory"))}</h3>`;
+			if (data.dosesTaken > 0 || data.dosesDismissed > 0) {
+				s += `<table><tbody>`;
+				s += `<tr><td class="label">${escHtml(t("report.docDosesTaken"))}</td><td>${data.dosesTaken}</td></tr>`;
+				if (data.dosesDismissed > 0)
+					s += `<tr><td class="label">${escHtml(t("report.docDosesDismissed"))}</td><td>${data.dosesDismissed}</td></tr>`;
+				if (data.firstDoseAt)
+					s += `<tr><td class="label">${escHtml(t("report.docFirstDose"))}</td><td>${fmtDate(data.firstDoseAt)}</td></tr>`;
+				if (data.lastDoseAt)
+					s += `<tr><td class="label">${escHtml(t("report.docLastDose"))}</td><td>${fmtDate(data.lastDoseAt)}</td></tr>`;
+				s += `</tbody></table>`;
+			} else {
+				s += `<p class="no-data">${escHtml(t("report.docNoDoses"))}</p>`;
+			}
+
+			// Refill history
+			if (data.refills.length > 0) {
+				s += `<h3>${escHtml(t("report.docRefillHistory"))}</h3>`;
+				s += `<ul>`;
+				for (const r of data.refills) {
+					let entry = `${fmtDate(r.refillDate)}: +${r.packsAdded} ${escHtml(t("report.docPacks"))}, +${r.loosePillsAdded} ${escHtml(t("common.pills"))}`;
+					if (r.usedPrescription) entry += ` <em>${escHtml(t("report.docRefillPrescription"))}</em>`;
+					s += `<li>${entry}</li>`;
+				}
+				s += `</ul>`;
+			}
+		}
+
+		s += `</div>`;
+		sections.push(s);
+	}
+
+	return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>${escHtml(t("report.docTitle"))}</title>
+<style>
+  @media print {
+    body { margin: 0; padding: 1rem; }
+    .no-print { display: none !important; }
+    .med-section:last-child { margin-bottom: 0; padding-bottom: 0; }
+  }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    color: #1e293b;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    line-height: 1.5;
+  }
+  h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
+  .subtitle { color: #64748b; margin-bottom: 1rem; }
+  .med-section { margin-bottom: 1.5rem; padding-bottom: 1rem; }
+  .med-section:last-child { }
+  h2 { font-size: 1.25rem; color: #0f172a; margin: 0; }
+  .generic-subtitle { margin: 0.1rem 0 0.5rem; font-size: 0.9rem; font-style: italic; color: #64748b; }
+  h2 + .med-overview { margin-top: 0.5rem; }
+  .med-overview { display: flex; gap: 1.25rem; align-items: flex-start; }
+  .med-overview-info { flex: 1; min-width: 0; }
+  .med-overview-info h3 { margin-top: 0; }
+  .med-img { width: 220px; height: 220px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
+  h3 { font-size: 0.9rem; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.05em; margin: 1rem 0 0.5rem; }
+  table { width: 100%; border-collapse: collapse; margin-bottom: 0.5rem; }
+  td { padding: 0.25rem 0.5rem; }
+  td.label { font-weight: 500; color: #475569; width: 40%; }
+  ul { margin: 0.25rem 0; padding-left: 1.5rem; }
+  li { margin: 0.25rem 0; }
+  .obsolete-badge { font-size: 0.75rem; background: #fef3c7; color: #92400e; padding: 0.125rem 0.5rem; border-radius: 4px; vertical-align: middle; }
+  .no-data { color: #94a3b8; font-style: italic; }
+  .print-hint { text-align: center; padding: 1rem; background: #f0f9ff; border-radius: 8px; color: #0369a1; margin-bottom: 1.5rem; }
+</style>
+</head>
+<body>
+<div class="no-print print-hint">${escHtml(t("report.docPrintInstruction"))}</div>
+<h1>${escHtml(t("report.docTitle"))}</h1>
+<p class="subtitle">${escHtml(t("report.docGenerated"))}: ${fmtDate(new Date().toISOString())}</p>
+${sections.join("\n")}
+</body>
+</html>`;
+}
+
+export default ReportModal;

frontend/src/components/ShareDialog.tsx

@@ -2,6 +2,8 @@
  * ShareDialog - Modal for generating share links for medication schedules
  * Allows sharing schedule view for a specific person
  */
+
+import { Check, Copy, Link2, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 export interface ShareDialogProps {
@@ -38,6 +40,8 @@ export function ShareDialog({
 	onCopyShareLink,
 }: ShareDialogProps) {
 	const { t } = useTranslation();
+	const closeLabel = t("common.close");
+	const copyLabel = shareCopied ? t("share.copied") : t("share.copyLink");
 
 	if (!show) return null;
 
@@ -54,12 +58,20 @@ export function ShareDialog({
 				onClick={(e) => e.stopPropagation()}
 				onKeyDown={(e) => e.stopPropagation()}
 			>
-				<button className="modal-close" onClick={onClose}>
+				<button
-					×
+					type="button"
+					className="modal-close tooltip-trigger"
+					onClick={onClose}
+					aria-label={closeLabel}
+					data-tooltip={closeLabel}
+				>
+					<X size={18} aria-hidden="true" />
 				</button>
 
 				<div className="share-dialog-header">
-					<h2>🔗 {t("share.title")}</h2>
+					<h2>
+						<Link2 size={18} aria-hidden="true" /> {t("share.title")}
+					</h2>
 					<p className="share-dialog-description">{t("share.description")}</p>
 				</div>
 
@@ -83,8 +95,14 @@ export function ShareDialog({
 										className="share-link-input"
 										onClick={(e) => (e.target as HTMLInputElement).select()}
 									/>
-									<button className="btn-copy" onClick={onCopyShareLink}>
+									<button
-										{shareCopied ? "✓" : "📋"}
+										type="button"
+										className="btn-copy icon-only tooltip-trigger"
+										onClick={onCopyShareLink}
+										aria-label={copyLabel}
+										data-tooltip={copyLabel}
+									>
+										{shareCopied ? <Check size={18} aria-hidden="true" /> : <Copy size={18} aria-hidden="true" />}
 									</button>
 								</div>
 								{shareCopied && <span className="share-copied-hint">{t("share.copied")}</span>}

frontend/src/components/SharedSchedule.tsx

@@ -586,6 +586,7 @@ export function SharedSchedule() {
 
 	// Whether to show stock status indicators on the shared schedule
 	const showStock = data?.shareStockStatus !== false;
+	const showOnlyToday = data?.shareScheduleTodayOnly === true && (data?.upcomingTodayOnly ?? true);
 
 	// Helper: check if a dose is "done" (taken, per-dose dismissed, or med-level dismissed)
 	function isDoseIdDone(doseId: string): boolean {
@@ -716,19 +717,20 @@ export function SharedSchedule() {
 							</div>
 						</div>
 					</div>
-					{(() => {
+					{!showOnlyToday &&
-						const periodLabel =
+						(() => {
-							data.scheduleDays === 30
+							const periodLabel =
-								? t("dashboard.schedules.1month")
+								data.scheduleDays === 30
-								: data.scheduleDays === 90
+									? t("dashboard.schedules.1month")
-									? t("dashboard.schedules.3months")
+									: data.scheduleDays === 90
-									: t("dashboard.schedules.6months");
+										? t("dashboard.schedules.3months")
-						return (
+										: t("dashboard.schedules.6months");
-							<p className="shared-schedule-period">
+							return (
-								{t("share.period")}: {periodLabel}
+								<p className="shared-schedule-period">
-							</p>
+									{t("share.period")}: {periodLabel}
-						);
+								</p>
-					})()}
+							);
+						})()}
 				</header>
 
 				<div className="timeline">
@@ -737,7 +739,8 @@ export function SharedSchedule() {
 					) : (
 						<>
 							{/* Past days (when expanded) — rendered above toggle */}
-							{showPastDays &&
+							{!showOnlyToday &&
+								showPastDays &&
 								pastDays.map((day) => {
 									// Get ALL dose IDs for this day (for total count and yellow styling)
 									const allDoseIds = day.meds.flatMap((item) => item.doses.map((d) => d.id));
@@ -836,8 +839,10 @@ export function SharedSchedule() {
 																	>
 																		<MedicationAvatar name={item.medName} imageUrl={med?.imageUrl} size="sm" />
 																	</div>
-																	<span className="med-name-text">{item.medName}</span>
+																	<div className="med-name-stack">
-																	{med?.genericName && <span className="med-generic-inline">({med.genericName})</span>}
+																		<span className="med-name-text">{item.medName}</span>
+																		{med?.genericName && <span className="med-generic-inline">{med.genericName}</span>}
+																	</div>
 																</div>
 																<div className="tag-row">
 																	<span className="tag subtle">{t("common.pillsTotal", { count: item.total })}</span>
@@ -853,9 +858,12 @@ export function SharedSchedule() {
 																		<div key={dose.id} className="dose-item past">
 																			<span className="dose-time">{dose.timeStr}</span>
 																			<span className="dose-usage">
-																				{dose.usage} {dose.usage !== 1 ? t("common.pills") : t("common.pill")}
+																				<span className="dose-usage-main">
-																				{med?.pillWeightMg &&
+																					{dose.usage} {dose.usage !== 1 ? t("common.pills") : t("common.pill")}
-																					` (${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"})`}
+																				</span>
+																				{med?.pillWeightMg && (
+																					<span className="dose-usage-weight">{`${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"}`}</span>
+																				)}
 																			</span>
 																			<div className="dose-checks">
 																				<div className={`dose-person ${isTaken ? "taken" : ""}`}>
@@ -875,7 +883,8 @@ export function SharedSchedule() {
 																							disabled={isEmpty}
 																							title={t("dose.markAsTaken")}
 																						>
-																							✓
+																							<span className="dose-btn-label">{t("dose.take")}</span>
+																							<span aria-hidden="true">✓</span>
 																						</button>
 																					)}
 																				</div>
@@ -891,7 +900,8 @@ export function SharedSchedule() {
 									);
 								})}
 							{/* Past days toggle */}
-							{pastDays.length > 0 &&
+							{!showOnlyToday &&
+								pastDays.length > 0 &&
 								(() => {
 									const missedCount = missedPastDoseIds.length;
 									const totalPastDoses = pastDays.flatMap((d) => d.meds.flatMap((m) => m.doses.map((dose) => dose.id)));
@@ -1012,8 +1022,10 @@ export function SharedSchedule() {
 																	>
 																		<MedicationAvatar name={item.medName} imageUrl={med?.imageUrl} size="sm" />
 																	</div>
-																	<span className="med-name-text">{item.medName}</span>
+																	<div className="med-name-stack">
-																	{med?.genericName && <span className="med-generic-inline">({med.genericName})</span>}
+																		<span className="med-name-text">{item.medName}</span>
+																		{med?.genericName && <span className="med-generic-inline">{med.genericName}</span>}
+																	</div>
 																</div>
 																<div className="tag-row">
 																	<span className="tag subtle">{t("common.pillsTotal", { count: item.total })}</span>
@@ -1033,9 +1045,12 @@ export function SharedSchedule() {
 																		>
 																			<span className="dose-time">{dose.timeStr}</span>
 																			<span className="dose-usage">
-																				{dose.usage} {dose.usage !== 1 ? t("common.pills") : t("common.pill")}
+																				<span className="dose-usage-main">
-																				{med?.pillWeightMg &&
+																					{dose.usage} {dose.usage !== 1 ? t("common.pills") : t("common.pill")}
-																					` (${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"})`}
+																				</span>
+																				{med?.pillWeightMg && (
+																					<span className="dose-usage-weight">{`${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"}`}</span>
+																				)}
 																			</span>
 																			<div className="dose-checks">
 																				<div
@@ -1057,7 +1072,8 @@ export function SharedSchedule() {
 																							title={t("dose.markAsTaken")}
 																							disabled={isEmpty}
 																						>
-																							✓
+																							<span className="dose-btn-label">{t("dose.take")}</span>
+																							<span aria-hidden="true">✓</span>
 																						</button>
 																					)}
 																				</div>
@@ -1074,7 +1090,8 @@ export function SharedSchedule() {
 								})()}
 
 							{/* Future days toggle — identical to DashboardPage */}
-							{futureDays.length > 0 &&
+							{!showOnlyToday &&
+								futureDays.length > 0 &&
 								(() => {
 									const totalFutureDoses = futureDays.flatMap((d) =>
 										d.meds.flatMap((m) => m.doses.map((dose) => dose.id))
@@ -1109,7 +1126,8 @@ export function SharedSchedule() {
 								})()}
 
 							{/* Future days (when expanded) — identical to DashboardPage */}
-							{showFutureDays &&
+							{!showOnlyToday &&
+								showFutureDays &&
 								futureDays.map((day) => {
 									const allDoseIds = day.meds.flatMap((item) => item.doses.map((d) => d.id));
 									const allDayTaken = allDoseIds.length > 0 && allDoseIds.every((id) => takenDoses.has(id));
@@ -1180,8 +1198,10 @@ export function SharedSchedule() {
 																	>
 																		<MedicationAvatar name={item.medName} imageUrl={med?.imageUrl} size="sm" />
 																	</div>
-																	<span className="med-name-text">{item.medName}</span>
+																	<div className="med-name-stack">
-																	{med?.genericName && <span className="med-generic-inline">({med.genericName})</span>}
+																		<span className="med-name-text">{item.medName}</span>
+																		{med?.genericName && <span className="med-generic-inline">{med.genericName}</span>}
+																	</div>
 																</div>
 																<div className="tag-row">
 																	<span className="tag subtle">{t("common.pillsTotal", { count: item.total })}</span>
@@ -1197,9 +1217,12 @@ export function SharedSchedule() {
 																		<div key={dose.id} className={`dose-item future ${isTaken ? "all-taken" : ""}`}>
 																			<span className="dose-time">{dose.timeStr}</span>
 																			<span className="dose-usage">
-																				{dose.usage} {dose.usage !== 1 ? t("common.pills") : t("common.pill")}
+																				<span className="dose-usage-main">
-																				{med?.pillWeightMg &&
+																					{dose.usage} {dose.usage !== 1 ? t("common.pills") : t("common.pill")}
-																					` (${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"})`}
+																				</span>
+																				{med?.pillWeightMg && (
+																					<span className="dose-usage-weight">{`${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"}`}</span>
+																				)}
 																			</span>
 																			<div className="dose-checks">
 																				<div className={`dose-person ${isTaken ? "taken" : ""}`}>
@@ -1219,7 +1242,8 @@ export function SharedSchedule() {
 																							title={t("dose.markAsTaken")}
 																							disabled={true}
 																						>
-																							✓
+																							<span className="dose-btn-label">{t("dose.take")}</span>
+																							<span aria-hidden="true">✓</span>
 																						</button>
 																					)}
 																				</div>

frontend/src/components/index.ts

@@ -17,6 +17,7 @@ export type { MobileEditModalProps } from "./MobileEditModal";
 export { MobileEditModal } from "./MobileEditModal";
 export { PasswordInput } from "./PasswordInput";
 export { default as ProfileModal } from "./ProfileModal";
+export { default as ReportModal } from "./ReportModal";
 export type { ShareDialogProps } from "./ShareDialog";
 export { ShareDialog } from "./ShareDialog";
 export { SharedSchedule } from "./SharedSchedule";

frontend/src/context/AppContext.tsx

@@ -119,7 +119,10 @@ export interface AppContextValue {
 	setEditStockFullBlisters: React.Dispatch<React.SetStateAction<number>>;
 	editStockPartialBlisterPills: number;
 	setEditStockPartialBlisterPills: React.Dispatch<React.SetStateAction<number>>;
+	editStockLoosePills: number;
+	setEditStockLoosePills: React.Dispatch<React.SetStateAction<number>>;
 	editStockSaving: boolean;
+	editStockMedication: Medication | null;
 	loadRefillHistory: (medId: number) => Promise<void>;
 	submitRefill: (
 		medId: number,
@@ -644,6 +647,8 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
 			settings.maxNaggingReminders !== savedSettings.maxNaggingReminders ||
 			settings.stockCalculationMode !== savedSettings.stockCalculationMode ||
 			settings.shareStockStatus !== savedSettings.shareStockStatus ||
+			settings.upcomingTodayOnly !== savedSettings.upcomingTodayOnly ||
+			settings.shareScheduleTodayOnly !== savedSettings.shareScheduleTodayOnly ||
 			settings.expiryWarningDays !== savedSettings.expiryWarningDays
 		);
 	}, [settingsHook.settings, settingsHook.savedSettings]);
@@ -774,7 +779,10 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
 			setEditStockFullBlisters: refill.setEditStockFullBlisters,
 			editStockPartialBlisterPills: refill.editStockPartialBlisterPills,
 			setEditStockPartialBlisterPills: refill.setEditStockPartialBlisterPills,
+			editStockLoosePills: refill.editStockLoosePills,
+			setEditStockLoosePills: refill.setEditStockLoosePills,
 			editStockSaving: refill.editStockSaving,
+			editStockMedication: refill.editStockMedication,
 			loadRefillHistory: refill.loadRefillHistory,
 			submitRefill: refill.submitRefill,
 			submitStockCorrection: refill.submitStockCorrection,

frontend/src/hooks/useMedicationForm.ts

@@ -190,6 +190,7 @@ export function useMedicationForm(): UseMedicationFormReturn {
 		setEditingId(med.id);
 		setTakenByInput(""); // Clear tag input when starting edit
 		setFormSaved(true); // Existing medication is already saved
+		setFieldErrors({}); // Prevent one-frame stale error highlight from previous/default form state
 
 		// Parse intakes - prefer new format, fallback to legacy blisters
 		const intakesFromApi =
@@ -259,6 +260,7 @@ export function useMedicationForm(): UseMedicationFormReturn {
 		setPendingImage(null);
 		setPendingImagePreview(null);
 		setTakenByInput("");
+		setFieldErrors({});
 		setFormSaved(false);
 		const newForm = defaultForm();
 		setForm(newForm);

frontend/src/hooks/useRefill.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import type { Coverage, FormState, Medication, RefillEntry } from "../types";
 import { getMedTotal, getPackageSize } from "../types";
 
@@ -24,7 +24,10 @@ export interface UseRefillReturn {
 	setEditStockFullBlisters: React.Dispatch<React.SetStateAction<number>>;
 	editStockPartialBlisterPills: number;
 	setEditStockPartialBlisterPills: React.Dispatch<React.SetStateAction<number>>;
+	editStockLoosePills: number;
+	setEditStockLoosePills: React.Dispatch<React.SetStateAction<number>>;
 	editStockSaving: boolean;
+	editStockMedication: Medication | null;
 
 	// Actions
 	loadRefillHistory: (medId: number) => Promise<void>;
@@ -56,7 +59,9 @@ export function useRefill(): UseRefillReturn {
 	const [showEditStockModal, setShowEditStockModal] = useState(false);
 	const [editStockFullBlisters, setEditStockFullBlisters] = useState(0);
 	const [editStockPartialBlisterPills, setEditStockPartialBlisterPills] = useState(0);
+	const [editStockLoosePills, setEditStockLoosePills] = useState(0);
 	const [editStockSaving, setEditStockSaving] = useState(false);
+	const [editStockMedication, setEditStockMedication] = useState<Medication | null>(null);
 
 	// Load refill history for a medication
 	const loadRefillHistory = useCallback(async (medId: number) => {
@@ -132,42 +137,60 @@ export function useRefill(): UseRefillReturn {
 			if (!selectedMed) return;
 			setEditStockSaving(true);
 			try {
-				// Auto-convert: handle full blister and negative partial blister
+				// Clamp all fields to non-negative values.
-				let finalFullBlisters = editStockFullBlisters;
+				let finalFullBlisters = Math.max(0, editStockFullBlisters);
-				let finalPartialPills = editStockPartialBlisterPills;
+				let finalPartialPills =
+					selectedMed.packageType === "bottle"
+						? Math.max(0, editStockPartialBlisterPills)
+						: Math.max(0, editStockPartialBlisterPills);
+				const finalLoosePills = Math.max(0, editStockLoosePills);
 
-				// Handle full blister: e.g. 9 pills in a 9-pill blister = +1 full blister, 0 partial
+				// Canonicalize blister values: partial overflow becomes additional full blisters.
-				if (finalPartialPills >= selectedMed.pillsPerBlister) {
+				if (selectedMed.packageType !== "bottle" && selectedMed.pillsPerBlister > 0) {
-					finalFullBlisters += 1;
+					finalFullBlisters += Math.floor(finalPartialPills / selectedMed.pillsPerBlister);
-					finalPartialPills = 0;
+					finalPartialPills %= selectedMed.pillsPerBlister;
 				}
 
-				// Handle negative partial: e.g. -3 with 136 full = 135 full, 6 partial (for 9-pill blister)
+				// Structural max = sealed package capacity only (no looseTablets offset).
-				if (finalPartialPills < 0 && finalFullBlisters > 0) {
+				const structuralMax =
-					finalFullBlisters -= 1;
+					selectedMed.packageType === "bottle"
-					finalPartialPills = selectedMed.pillsPerBlister + finalPartialPills;
+						? (selectedMed.totalPills ?? getPackageSize(selectedMed))
-				}
+						: selectedMed.packCount * selectedMed.blistersPerPack * selectedMed.pillsPerBlister;
 
-				// Ensure we don't go negative
+				// For blister meds, only sealed pills are capped to package size.
-				if (finalPartialPills < 0) finalPartialPills = 0;
+				// Loose pills are extra and can be above package size.
-				if (finalFullBlisters < 0) finalFullBlisters = 0;
+				const desiredTotal =
-
+					selectedMed.packageType === "bottle"
-				// What the user says they have RIGHT NOW = the new DB total
+						? Math.min(structuralMax, Math.max(0, finalPartialPills))
-				const desiredTotal = finalFullBlisters * selectedMed.pillsPerBlister + finalPartialPills;
+						: Math.min(structuralMax, finalFullBlisters * selectedMed.pillsPerBlister + finalPartialPills) +
-
+							finalLoosePills;
-				// The "base" from DB structure (without any stockAdjustment)
-				// Use getPackageSize() which handles both blister and bottle types correctly
-				const baseTotal = getPackageSize(selectedMed);
 
+				// The "base" from DB structure used to compute stockAdjustment differs by type:
+				// - Bottle: looseTablets is the base (not changed during correction)
+				// - Blister: use structuralMax + finalLoosePills as the new base so that
+				//   updating looseTablets in the DB doesn't cause a stale-split display bug.
+				const baseTotal =
+					selectedMed.packageType === "bottle"
+						? getPackageSize(selectedMed) // bottle: stockAdjustment relative to fixed looseTablets base
+						: structuralMax + finalLoosePills; // blister: base = sealed capacity + NEW loose pills
 				// stockAdjustment = what we need to make getMedTotal() return desiredTotal
 				const newStockAdjustment = desiredTotal - baseTotal;
 
-				// Use the PATCH endpoint - it sets stockAdjustment AND lastStockCorrectionAt
+				// For blister corrections also send the new looseTablets value so the DB
+				// reflects the actual loose count (avoids stale-split display on reload).
+				const patchBody: { stockAdjustment: number; looseTablets?: number } = {
+					stockAdjustment: newStockAdjustment,
+				};
+				if (selectedMed.packageType !== "bottle") {
+					patchBody.looseTablets = finalLoosePills;
+				}
+
+				// Use the PATCH endpoint - it sets stockAdjustment, looseTablets, AND lastStockCorrectionAt
 				const res = await fetch(`/api/medications/${medId}/stock-adjustment`, {
 					method: "PATCH",
 					headers: { "Content-Type": "application/json" },
 					credentials: "include",
-					body: JSON.stringify({ stockAdjustment: newStockAdjustment }),
+					body: JSON.stringify(patchBody),
 				});
 				if (res.ok) {
 					// Close edit stock modal via history back
@@ -182,7 +205,7 @@ export function useRefill(): UseRefillReturn {
 			}
 			setEditStockSaving(false);
 		},
-		[editStockFullBlisters, editStockPartialBlisterPills, showEditStockModal]
+		[editStockFullBlisters, editStockPartialBlisterPills, editStockLoosePills, showEditStockModal]
 	);
 
 	const openRefillModal = useCallback(() => {
@@ -198,25 +221,51 @@ export function useRefill(): UseRefillReturn {
 
 	const openEditStockModal = useCallback((selectedMed: Medication, coverage: { all: Coverage[] }) => {
 		if (!selectedMed) return;
+		setEditStockMedication(selectedMed);
 		// Get current stock from coverage (after consumption)
 		const medCoverage = coverage.all.find((c) => c.name === selectedMed.name);
 		const dbTotal = getMedTotal(selectedMed);
-		const currentStock = medCoverage ? Math.round(medCoverage.medsLeft) : dbTotal;
+		const currentStock = Math.max(0, medCoverage ? Math.round(medCoverage.medsLeft) : dbTotal);
 
-		// Simply divide into full blisters and partial
+		// Bottle correction uses only total pills input.
-		const fullBlisters = Math.floor(currentStock / selectedMed.pillsPerBlister);
+		// For blister, keep loose pills separated from sealed blister/partial counts.
-		const partialPills = currentStock % selectedMed.pillsPerBlister;
+		const knownLoose = Math.min(currentStock, Math.max(0, selectedMed.looseTablets));
+		const sealedPills = Math.max(0, currentStock - knownLoose);
+		const fullBlisters =
+			selectedMed.packageType === "bottle" ? 0 : Math.floor(sealedPills / selectedMed.pillsPerBlister);
+		const partialPills =
+			selectedMed.packageType === "bottle" ? Math.max(0, currentStock) : sealedPills % selectedMed.pillsPerBlister;
 
 		// Pre-fill with current values
 		setEditStockFullBlisters(fullBlisters);
 		setEditStockPartialBlisterPills(partialPills);
+		setEditStockLoosePills(selectedMed.packageType === "bottle" ? 0 : knownLoose);
 		setShowEditStockModal(true);
 		window.history.pushState({ modal: "editStock" }, "");
 	}, []);
 
 	const closeEditStockModal = useCallback(() => {
 		if (showEditStockModal) {
+			let popstateHandled = false;
+			const handlePopstate = () => {
+				popstateHandled = true;
+			};
+			window.addEventListener("popstate", handlePopstate, { once: true });
 			window.history.back();
+
+			// Fallback for cases where no history entry exists for edit stock.
+			window.setTimeout(() => {
+				if (!popstateHandled) {
+					window.removeEventListener("popstate", handlePopstate);
+					setShowEditStockModal(false);
+				}
+			}, 150);
+		}
+	}, [showEditStockModal]);
+
+	useEffect(() => {
+		if (!showEditStockModal) {
+			setEditStockMedication(null);
 		}
 	}, [showEditStockModal]);
 
@@ -239,7 +288,10 @@ export function useRefill(): UseRefillReturn {
 		setEditStockFullBlisters,
 		editStockPartialBlisterPills,
 		setEditStockPartialBlisterPills,
+		editStockLoosePills,
+		setEditStockLoosePills,
 		editStockSaving,
+		editStockMedication,
 		loadRefillHistory,
 		submitRefill,
 		submitStockCorrection,

frontend/src/hooks/useSettings.ts

@@ -46,6 +46,9 @@ export interface Settings {
 	shoutrrrPrescriptionReminders: boolean;
 	stockCalculationMode: "automatic" | "manual";
 	shareStockStatus: boolean;
+	upcomingTodayOnly: boolean;
+	shareScheduleTodayOnly: boolean;
+	swapDashboardMainSections: boolean;
 	expiryWarningDays: number;
 }
 
@@ -90,6 +93,9 @@ const defaultSettings: Settings = {
 	shoutrrrPrescriptionReminders: true,
 	stockCalculationMode: "automatic",
 	shareStockStatus: true,
+	upcomingTodayOnly: false,
+	shareScheduleTodayOnly: false,
+	swapDashboardMainSections: false,
 	expiryWarningDays: 30,
 };
 
@@ -224,6 +230,9 @@ export function useSettings(): UseSettingsReturn {
 				shoutrrrPrescriptionReminders: settingsToSave.shoutrrrPrescriptionReminders,
 				stockCalculationMode: settingsToSave.stockCalculationMode,
 				shareStockStatus: settingsToSave.shareStockStatus,
+				upcomingTodayOnly: settingsToSave.upcomingTodayOnly,
+				shareScheduleTodayOnly: settingsToSave.shareScheduleTodayOnly,
+				swapDashboardMainSections: settingsToSave.swapDashboardMainSections,
 				language: i18n.language,
 				smtpHost: settingsToSave.smtpHost,
 				smtpPort: settingsToSave.smtpPort,

frontend/src/i18n/de.json

@@ -76,7 +76,7 @@
       "emptyStock_other": "{{count}} Medikamente leer",
       "lowWarning": "{{count}} Medikament kritisch niedrig",
       "lowWarning_other": "{{count}} Medikamente kritisch niedrig",
-      "waitingFirstCheck": "Warte auf erste Prüfung",
+      "waitingFirstCheck": "Warte auf die erste Prüfung",
       "type": "Typ",
       "typeStock": "Bestand",
       "typeIntake": "Einnahme",
@@ -152,14 +152,16 @@
     }
   },
   "form": {
-    "editEntry": "Medikament bearbeiten",
+    "editEntry": "Bearbeiten",
-    "viewEntry": "Medikament ansehen",
+    "viewEntry": "Ansehen",
     "newEntry": "Neues Medikament",
     "badge": "Packungen + lose Tabletten",
     "sections": {
       "general": "Allgemein",
-      "stock": "Bestand & Dosis",
+      "stock": "Package",
-      "prescription": "Rezept"
+      "prescription": "Rezept",
+      "prescriptionAndRefill": "Rezept & Nachfüllen",
+      "schedule": "Einnahme"
     },
     "commercialName": "Handelsname",
     "genericName": "Wirkstoff",
@@ -175,7 +177,7 @@
     "loosePills": "Lose Tabletten",
     "pillWeight": "Dosis pro Tablette",
     "total": "Gesamt (Tabletten)",
-    "medicationStartDate": "Medikations-Startdatum",
+    "medicationStartDate": "Startdatum der Medikation",
     "expiryDate": "Ablaufdatum",
     "notes": "Notizen",
     "medicationImage": "Medikamentenbild",
@@ -240,7 +242,7 @@
       "stockReminders": "Bestands-Erinnerungen",
       "intakeReminders": "Einnahme-Erinnerungen",
       "prescriptionReminders": "Rezept-Erinnerungen",
-      "enableHint": "Aktivieren Sie mindestens einen Kanal, um Benachrichtigungen zu erhalten.",
+      "enableHint": "Aktiviere mindestens einen Kanal, um Benachrichtigungen zu erhalten.",
       "skipTakenDoses": "Keine Erinnerungen für genommene Dosen",
       "skipTakenDosesTooltip": "Sende keine Einnahme-Erinnerungen für Dosen, die heute bereits als genommen markiert wurden",
       "repeatReminders": "Wiederholte Erinnerungen für verpasste Dosen",
@@ -279,7 +281,7 @@
       "automatic": "Automatisch",
       "automaticDesc": "Bestand wird automatisch anhand des Einnahmeplans reduziert",
       "manual": "Manuell",
-      "manualDesc": "Bestand wird nur reduziert wenn Dosen als genommen markiert werden",
+      "manualDesc": "Bestand wird nur reduziert, wenn Dosen als genommen markiert werden",
       "thresholds": "Schwellenwerte",
       "criticalStockDays": "Kritisch (Tage)",
       "criticalStockTooltip": "Bestand unter diesem Wert ist kritisch und erfordert sofortige Aufmerksamkeit",
@@ -287,10 +289,22 @@
       "lowStockTooltip": "Bestand unter diesem Wert bedeutet, dass bald nachbestellt werden sollte",
       "highStockDays": "Hoch (Tage)",
       "highStockTooltip": "Bestand über diesem Wert bedeutet, dass du gut versorgt bist",
-      "thresholdValidation": "Werte müssen sein: Kritisch < Niedrig < Hoch",
+      "thresholdValidation": "Werte müssen wie folgt sein: Kritisch < Niedrig < Hoch",
       "shareStockStatus": "Bestand auf geteilten Links anzeigen",
       "shareStockStatusDesc": "Bestandsstatus (Normal/Niedrig/Kritisch) und farbige Rahmen auf geteilten Zeitplan-Links für Einnahme-Nutzer anzeigen"
     },
+    "timeline": {
+      "title": "Allgemeine UI",
+      "upcomingSection": "Bevorstehender Zeitplan",
+      "upcomingTodayOnly": "Nur heute anzeigen",
+      "upcomingTodayOnlyDesc": "Vergangene und zukünftige Tage ausblenden und im Dashboard nur den heutigen Zeitplan anzeigen.",
+      "dashboardSectionOrder": "Dashboard-Layout",
+      "swapDashboardSections": "Bevorstehenden Zeitplan vor Medikamentenübersicht anzeigen",
+      "swapDashboardSectionsDesc": "Wenn aktiviert, wird der Bereich mit bevorstehenden Einnahmen über der Medikamentenübersicht angezeigt.",
+      "sharedSection": "Geteilter Zeitplan",
+      "shareScheduleTodayOnly": "Geteilte Links zeigen nur heute",
+      "shareScheduleTodayOnlyDesc": "Vergangene und zukünftige Tage in geteilten Zeitplänen ausblenden und nur heutige Einträge zeigen."
+    },
     "stockReminder": {
       "title": "Bestands-Erinnerung",
       "description": "Bestands-Erinnerungen aktivieren",
@@ -349,7 +363,8 @@
   },
   "dose": {
     "takenBy": "eingenommen von",
-    "markAsTaken": "Als eingenommen markieren"
+    "markAsTaken": "Als eingenommen markieren",
+    "take": "Nehmen"
   },
   "auth": {
     "login": "Anmelden",
@@ -377,7 +392,7 @@
     "checkEmail": "E-Mail überprüfen",
     "resetEmailSent": "Falls ein Konto mit dieser E-Mail existiert, haben wir einen Link zum Zurücksetzen gesendet.",
     "passwordReset": "Passwort zurückgesetzt",
-    "passwordResetSuccess": "Ihr Passwort wurde zurückgesetzt. Weiterleitung zur Anmeldung...",
+    "passwordResetSuccess": "Dein Passwort wurde zurückgesetzt. Weiterleitung zur Anmeldung...",
     "profileUpdated": "Profil erfolgreich aktualisiert",
     "rememberMe": "Angemeldet bleiben",
     "localAccount": "Lokales Konto",
@@ -414,7 +429,7 @@
       "maxLength": "Maximal {{max}} Zeichen ({{current}}/{{max}})",
       "tooLong": "{{current}}/{{max}} Zeichen"
     },
-    "saved": "Gespeichert ✓",
+    "saved": "Gespeichert",
     "save": "Speichern",
     "back": "Zurück",
     "cancel": "Abbrechen",
@@ -476,7 +491,7 @@
     }
   },
   "exportImport": {
-    "title": "Daten Export / Import",
+    "title": "Datenexport / -import",
     "description": "Sichere deine Daten oder übertrage sie auf ein anderes Gerät.",
     "exportTitle": "Export",
     "exportDesc": "Lade alle deine Daten als JSON-Datei herunter.",
@@ -540,11 +555,19 @@
   },
   "editStock": {
     "title": "Bestand korrigieren",
+    "buttonLabel": "Bestand/Angebrochene Blister korrigieren",
     "hint": "Dies ist für die Korrektur von Bestandsabweichungen. Für normale Bestandsänderungen nutze 'Nachfüllen'.",
     "totalPills": "Gesamte Tabletten",
     "fullBlisters": "Volle Blister",
     "partialBlisterPills": "Angebrochener Blister",
+    "loosePills": "Lose Tabletten",
     "pillsPerBlister": "(je {{count}} Tabletten)",
+    "packageSize": "Packungsgröße: {{count}} Tabletten",
+    "packageSizeBreakdown": "{{packCount}} x {{sizePerPack}} Tabletten Packung = {{total}} Tabletten",
+    "currentComposition": "Aktueller Bestand: {{fullBlisters}} volle Blister + {{partialPills}} angebrochen + {{loosePills}} lose = {{total}} Tabletten",
+    "maxExceeded": "Die maximale Packungsgröße beträgt {{count}} Tabletten. Werte wurden begrenzt.",
+    "decreaseValue": "Wert verringern",
+    "increaseValue": "Wert erhöhen",
     "currentTotal": "Aktueller Bestand",
     "newTotal": "Neuer Bestand",
     "difference": "Differenz",
@@ -569,5 +592,67 @@
     "copyright": "© {{year}} Daniel Volz",
     "madeWith": "Mit ❤️ erstellt für besseres Gesundheitsmanagement",
     "techStack": "Entwickelt mit React, Fastify & SQLite"
+  },
+  "report": {
+    "button": "Bericht",
+    "title": "Medikamentenbericht",
+    "description": "Erstelle ein Dokument mit detaillierten Medikamenteninformationen für deinen Arzt oder deine persönlichen Unterlagen.",
+    "selectAll": "Alle auswählen",
+    "deselectAll": "Alle abwählen",
+    "activeMeds": "Aktive Medikamente",
+    "obsoleteMeds": "Obsolete Medikamente",
+    "format": "Format",
+    "formatTxt": "Klartext (.txt)",
+    "formatMd": "Markdown (.md)",
+    "formatPdf": "PDF (Drucken)",
+    "generate": "Erstellen",
+    "generating": "Wird erstellt...",
+    "noSelection": "Wähle mindestens ein Medikament aus",
+    "filterByPerson": "Bericht für",
+    "allPeople": "Alle Personen",
+    "docTitle": "Medikamentenbericht",
+    "docGenerated": "Erstellt am",
+    "docGeneral": "Allgemein",
+    "docCommercialName": "Handelsname",
+    "docGenericName": "Wirkstoff",
+    "docTakenBy": "Eingenommen von",
+    "docStartDate": "Startdatum",
+    "docObsoleteSince": "Obsolet seit",
+    "docStatus": "Status",
+    "docStatusActive": "Aktiv",
+    "docStatusObsolete": "Obsolet",
+    "docPackage": "Verpackung",
+    "docPackageType": "Verpackungsart",
+    "docBlister": "Blisterpackung",
+    "docBottle": "Pillendose",
+    "docPacks": "Packungen",
+    "docBlistersPerPack": "Blister pro Packung",
+    "docPillsPerBlister": "Tabletten pro Blister",
+    "docTotalCapacity": "Gesamtkapazität",
+    "docCurrentStock": "Aktueller Bestand",
+    "docLoosePills": "Lose Tabletten",
+    "docDose": "Dosis",
+    "docDosePerPill": "Dosis pro Tablette",
+    "docExpiryDate": "Ablaufdatum",
+    "docNotes": "Notizen",
+    "docIntakeSchedule": "Einnahmeplan",
+    "docIntakeEntry": "{{usage}} Tablette(n) alle {{every}} Tag(e) ab {{start}}",
+    "docIntakeTakenBy": "eingenommen von {{person}}",
+    "docIntakeReminder": "Erinnerung aktiv",
+    "docPrescription": "Rezept",
+    "docAuthorizedRefills": "Genehmigte Nachfüllungen",
+    "docRemainingRefills": "Verbleibende Nachfüllungen",
+    "docPrescriptionExpiry": "Rezeptablauf",
+    "docIntakeHistory": "Einnahme-Verlauf",
+    "docDosesTaken": "Eingenommene Dosen",
+    "docDosesDismissed": "Verworfene Dosen",
+    "docFirstDose": "Erste Dosis",
+    "docLastDose": "Letzte Dosis",
+    "docRefillHistory": "Nachfüll-Verlauf",
+    "docRefillEntry": "{{date}}: +{{packs}} Packungen, +{{loose}} Tabletten",
+    "docRefillPrescription": "(Rezept-Nachfüllung)",
+    "docNoRefills": "Keine Nachfüllungen erfasst",
+    "docNoDoses": "Keine Dosen erfasst",
+    "docPrintInstruction": "Nutze die Druckfunktion deines Browsers (Strg+P / ⌘P) um als PDF zu speichern."
   }
 }

frontend/src/i18n/en.json

@@ -70,10 +70,10 @@
       "inDays_one": "in {{days}} day",
       "inDays_other": "in {{days}} days",
       "noRemindersNeeded": "No reminders needed",
-      "needRefill": "{{count}} med needs refill",
+      "needRefill": "{{count}} medication needs refill",
-      "needRefill_other": "{{count}} meds need refill",
+      "needRefill_other": "{{count}} medications need refill",
-      "emptyStock": "{{count}} med is empty",
+      "emptyStock": "{{count}} medication is empty",
-      "emptyStock_other": "{{count}} meds are empty",
+      "emptyStock_other": "{{count}} medications are empty",
       "lowWarning": "{{count}} medication running critically low",
       "lowWarning_other": "{{count}} medications running critically low",
       "waitingFirstCheck": "Waiting for first check",
@@ -84,10 +84,10 @@
       "channelEmail": "Email",
       "channelPush": "Push",
       "channelBoth": "Email + Push",
-      "criticalMeds": "{{count}} medication critical",
+      "criticalMeds": "{{count}} medication is critical",
-      "criticalMeds_other": "{{count}} medications critical",
+      "criticalMeds_other": "{{count}} medications are critical",
-      "lowMeds": "{{count}} medication low",
+      "lowMeds": "{{count}} medication is low",
-      "lowMeds_other": "{{count}} medications low",
+      "lowMeds_other": "{{count}} medications are low",
       "prescriptionNeeds": "Prescription low",
       "prescriptionLowMeds": "{{count}} prescription low",
       "prescriptionLowMeds_other": "{{count}} prescriptions low",
@@ -152,14 +152,16 @@
     }
   },
   "form": {
-    "editEntry": "Edit medication",
+    "editEntry": "Edit",
-    "viewEntry": "View medication",
+    "viewEntry": "View",
     "newEntry": "New medication",
     "badge": "Packs + loose pills",
     "sections": {
       "general": "General",
-      "stock": "Stock & Dose",
+      "stock": "Package",
-      "prescription": "Prescription"
+      "prescription": "Prescription",
+      "prescriptionAndRefill": "Rx & Refill",
+      "schedule": "Schedule"
     },
     "commercialName": "Commercial Name",
     "genericName": "Generic Name",
@@ -291,6 +293,18 @@
       "shareStockStatus": "Show Stock on Shared Links",
       "shareStockStatusDesc": "Show stock status (Normal/Low/Critical) and colored borders on shared schedule links for intake users"
     },
+    "timeline": {
+      "title": "General UI",
+      "upcomingSection": "Upcoming Schedule",
+      "upcomingTodayOnly": "Show only today",
+      "upcomingTodayOnlyDesc": "Hide past and future days and show only today's schedule on the dashboard.",
+      "dashboardSectionOrder": "Dashboard Layout",
+      "swapDashboardSections": "Show Upcoming Schedules before Medication Overview",
+      "swapDashboardSectionsDesc": "When enabled, the dashboard prioritizes the upcoming schedule section above the medication overview section.",
+      "sharedSection": "Shared Schedule",
+      "shareScheduleTodayOnly": "Shared links show only today",
+      "shareScheduleTodayOnlyDesc": "Hide past and future days on shared schedule links and show only today's entries."
+    },
     "stockReminder": {
       "title": "Stock Reminder",
       "description": "Enable stock reminders",
@@ -349,7 +363,8 @@
   },
   "dose": {
     "takenBy": "taken by",
-    "markAsTaken": "Mark as taken"
+    "markAsTaken": "Mark as taken",
+    "take": "Take"
   },
   "auth": {
     "login": "Login",
@@ -414,7 +429,7 @@
       "maxLength": "Maximum {{max}} characters ({{current}}/{{max}})",
       "tooLong": "{{current}}/{{max}} characters"
     },
-    "saved": "Saved ✓",
+    "saved": "Saved",
     "save": "Save",
     "back": "Back",
     "cancel": "Cancel",
@@ -540,11 +555,19 @@
   },
   "editStock": {
     "title": "Correct Stock",
+    "buttonLabel": "Correct Stock/Partial Blister",
     "hint": "This is for correcting stock discrepancies. For regular stock changes, use 'Refill'.",
     "totalPills": "Total pills",
     "fullBlisters": "Full blisters",
     "partialBlisterPills": "Partial blister",
+    "loosePills": "Loose pills",
     "pillsPerBlister": "({{count}} pills each)",
+    "packageSize": "Package size: {{count}} pills",
+    "packageSizeBreakdown": "{{packCount}} x {{sizePerPack}} pills Pack = {{total}} pills",
+    "currentComposition": "Current stock: {{fullBlisters}} full blisters + {{partialPills}} partial + {{loosePills}} loose = {{total}} pills",
+    "maxExceeded": "Maximum package size is {{count}} pills. Values were capped.",
+    "decreaseValue": "Decrease value",
+    "increaseValue": "Increase value",
     "currentTotal": "Current total",
     "newTotal": "New total",
     "difference": "Difference",
@@ -569,5 +592,67 @@
     "copyright": "© {{year}} Daniel Volz",
     "madeWith": "Made with ❤️ for better health management",
     "techStack": "Built with React, Fastify & SQLite"
+  },
+  "report": {
+    "button": "Report",
+    "title": "Medication Report",
+    "description": "Generate a document with detailed medication information for your doctor or personal records.",
+    "selectAll": "Select all",
+    "deselectAll": "Deselect all",
+    "activeMeds": "Active Medications",
+    "obsoleteMeds": "Obsolete Medications",
+    "format": "Format",
+    "formatTxt": "Plain Text (.txt)",
+    "formatMd": "Markdown (.md)",
+    "formatPdf": "PDF (Print)",
+    "generate": "Generate",
+    "generating": "Generating...",
+    "noSelection": "Select at least one medication",
+    "filterByPerson": "Report for",
+    "allPeople": "Everyone",
+    "docTitle": "Medication Report",
+    "docGenerated": "Generated on",
+    "docGeneral": "General",
+    "docCommercialName": "Commercial Name",
+    "docGenericName": "Generic Name",
+    "docTakenBy": "Taken by",
+    "docStartDate": "Start Date",
+    "docObsoleteSince": "Obsolete Since",
+    "docStatus": "Status",
+    "docStatusActive": "Active",
+    "docStatusObsolete": "Obsolete",
+    "docPackage": "Package",
+    "docPackageType": "Package Type",
+    "docBlister": "Blister Pack",
+    "docBottle": "Pill Bottle",
+    "docPacks": "Packs",
+    "docBlistersPerPack": "Blisters per pack",
+    "docPillsPerBlister": "Pills per blister",
+    "docTotalCapacity": "Total capacity",
+    "docCurrentStock": "Current stock",
+    "docLoosePills": "Loose pills",
+    "docDose": "Dose",
+    "docDosePerPill": "Dose per pill",
+    "docExpiryDate": "Expiry Date",
+    "docNotes": "Notes",
+    "docIntakeSchedule": "Intake Schedule",
+    "docIntakeEntry": "{{usage}} pill(s) every {{every}} day(s) from {{start}}",
+    "docIntakeTakenBy": "taken by {{person}}",
+    "docIntakeReminder": "reminder enabled",
+    "docPrescription": "Prescription",
+    "docAuthorizedRefills": "Authorized refills",
+    "docRemainingRefills": "Remaining refills",
+    "docPrescriptionExpiry": "Prescription expiry",
+    "docIntakeHistory": "Intake History",
+    "docDosesTaken": "Doses taken",
+    "docDosesDismissed": "Doses dismissed",
+    "docFirstDose": "First dose",
+    "docLastDose": "Last dose",
+    "docRefillHistory": "Refill History",
+    "docRefillEntry": "{{date}}: +{{packs}} packs, +{{loose}} pills",
+    "docRefillPrescription": "(prescription refill)",
+    "docNoRefills": "No refills recorded",
+    "docNoDoses": "No doses recorded",
+    "docPrintInstruction": "Use your browser's Print function (Ctrl+P / ⌘P) to save as PDF."
   }
 }

frontend/src/main.tsx

@@ -3,6 +3,10 @@ import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App";
 import "./styles.css";
+import "./styles/modals-base.css";
+import "./styles/share-dialog.css";
+import "./styles/medication-workflows.css";
+import "./styles/schedule-mobile-edit.css";
 import "./i18n";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

frontend/src/pages/SchedulePage.tsx

@@ -192,8 +192,12 @@ export function SchedulePage() {
 																<div key={dose.id} className="dose-item past">
 																	<span className="dose-time">{dose.timeStr}</span>
 																	<span className="dose-usage">
-																		{dose.usage} {dose.usage !== 1 ? t("common.pills") : t("common.pill")}
+																		<span className="dose-usage-main">
-																		{med?.pillWeightMg && ` (${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"})`}
+																			{dose.usage} {dose.usage !== 1 ? t("common.pills") : t("common.pill")}
+																		</span>
+																		{med?.pillWeightMg && (
+																			<span className="dose-usage-weight">{`${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"}`}</span>
+																		)}
 																	</span>{" "}
 																	{dose.intakeRemindersEnabled && (
 																		<span
@@ -235,7 +239,8 @@ export function SchedulePage() {
 																							disabled={isEmpty}
 																							title={t("dose.markAsTaken")}
 																						>
-																							✓
+																							<span className="dose-btn-label">{t("dose.take")}</span>
+																							<span aria-hidden="true">✓</span>
 																						</button>
 																					)}
 																				</div>
@@ -348,8 +353,12 @@ export function SchedulePage() {
 														<div key={dose.id} className="dose-item">
 															<span className="dose-time">{dose.timeStr}</span>
 															<span className="dose-usage">
-																{dose.usage} {dose.usage !== 1 ? t("common.pills") : t("common.pill")}
+																<span className="dose-usage-main">
-																{med?.pillWeightMg && ` (${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"})`}
+																	{dose.usage} {dose.usage !== 1 ? t("common.pills") : t("common.pill")}
+																</span>
+																{med?.pillWeightMg && (
+																	<span className="dose-usage-weight">{`${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"}`}</span>
+																)}
 															</span>
 															{dose.intakeRemindersEnabled && (
 																<span
@@ -395,7 +404,8 @@ export function SchedulePage() {
 																					disabled={isEmpty}
 																					title={t("dose.markAsTaken")}
 																				>
-																					✓
+																					<span className="dose-btn-label">{t("dose.take")}</span>
+																					<span aria-hidden="true">✓</span>
 																				</button>
 																			)}
 																		</div>

frontend/src/pages/SettingsPage.tsx

@@ -34,7 +34,6 @@ export function SettingsPage() {
 	} = useAppContext();
 
 	const hasExistingData = meds.length > 0;
-
 	return (
 		<section className="grid">
 			{settingsLoading ? (
@@ -674,8 +673,62 @@ export function SettingsPage() {
 								<p className="threshold-validation-error">{t("settings.stock.thresholdValidation")}</p>
 							)}
 						</div>
+					</article>
+
+					{/* General UI */}
+					<article className="card">
+						<div className="card-head">
+							<h2>{t("settings.timeline.title")}</h2>
+						</div>
 
 						<div className="setting-section">
+							<div className="section-header">
+								<h3>{t("settings.timeline.dashboardSectionOrder")}</h3>
+							</div>
+							<div className="setting-row compact">
+								<div className="setting-label">
+									<span>{t("settings.timeline.swapDashboardSections")}</span>
+									<span className="info-tooltip small" data-tooltip={t("settings.timeline.swapDashboardSectionsDesc")}>
+										ⓘ
+									</span>
+								</div>
+								<label className="toggle-switch small">
+									<input
+										type="checkbox"
+										checked={settings.swapDashboardMainSections}
+										onChange={(e) => setSettings({ ...settings, swapDashboardMainSections: e.target.checked })}
+									/>
+									<span className="toggle-slider"></span>
+								</label>
+							</div>
+						</div>
+
+						<div className="setting-section">
+							<div className="section-header">
+								<h3>{t("settings.timeline.upcomingSection")}</h3>
+							</div>
+							<div className="setting-row compact">
+								<div className="setting-label">
+									<span>{t("settings.timeline.upcomingTodayOnly")}</span>
+									<span className="info-tooltip small" data-tooltip={t("settings.timeline.upcomingTodayOnlyDesc")}>
+										ⓘ
+									</span>
+								</div>
+								<label className="toggle-switch small">
+									<input
+										type="checkbox"
+										checked={settings.upcomingTodayOnly}
+										onChange={(e) => setSettings({ ...settings, upcomingTodayOnly: e.target.checked })}
+									/>
+									<span className="toggle-slider"></span>
+								</label>
+							</div>
+						</div>
+
+						<div className="setting-section">
+							<div className="section-header">
+								<h3>{t("settings.timeline.sharedSection")}</h3>
+							</div>
 							<div className="setting-row compact">
 								<div className="setting-label">
 									<span>{t("settings.stock.shareStockStatus")}</span>
@@ -692,6 +745,22 @@ export function SettingsPage() {
 									<span className="toggle-slider"></span>
 								</label>
 							</div>
+							<div className="setting-row compact" style={{ marginTop: "10px" }}>
+								<div className="setting-label">
+									<span>{t("settings.timeline.shareScheduleTodayOnly")}</span>
+									<span className="info-tooltip small" data-tooltip={t("settings.timeline.shareScheduleTodayOnlyDesc")}>
+										ⓘ
+									</span>
+								</div>
+								<label className="toggle-switch small">
+									<input
+										type="checkbox"
+										checked={settings.shareScheduleTodayOnly}
+										onChange={(e) => setSettings({ ...settings, shareScheduleTodayOnly: e.target.checked })}
+									/>
+									<span className="toggle-slider"></span>
+								</label>
+							</div>
 						</div>
 					</article>
 
@@ -737,6 +806,7 @@ export function SettingsPage() {
 											<button
 												type="button"
 												onClick={() => setImportResult(null)}
+												aria-label={t("common.close")}
 												style={{
 													background: "none",
 													border: "none",
@@ -747,7 +817,6 @@ export function SettingsPage() {
 													color: "inherit",
 													opacity: 0.7,
 												}}
-												aria-label="Close"
 											>
 												×
 											</button>

frontend/src/styles/medication-workflows.css

@@ -0,0 +1,615 @@
+/* =============================================================================
+   Refill Modal & History
+   ============================================================================= */
+.refill-modal {
+	max-width: 500px;
+	padding: 1.5rem;
+}
+
+.refill-modal h2 {
+	font-size: 1.25rem;
+	margin-bottom: 0.25rem;
+}
+
+.refill-med-name {
+	color: var(--text-secondary);
+	margin-bottom: 1.5rem;
+}
+
+.refill-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin-bottom: 1.5rem;
+}
+
+.refill-form label {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+	font-weight: 500;
+}
+
+.refill-form input {
+	padding: 0.75rem;
+	border: 1px solid var(--border-primary);
+	border-radius: 8px;
+	background: var(--bg-input);
+	color: var(--text-primary);
+	font-size: 1rem;
+}
+
+.refill-footer-right {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.refill-footer-right .refill-preview {
+	height: 42px;
+}
+
+/* Refill modal footer mobile */
+@media (max-width: 640px) {
+	.refill-modal .modal-footer {
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.refill-modal .modal-footer > button,
+	.refill-modal .modal-footer .refill-footer-right {
+		width: 100%;
+	}
+
+	.refill-modal .modal-footer .refill-footer-right {
+		justify-content: space-between;
+	}
+
+	.refill-modal .modal-footer .refill-footer-right button {
+		flex: 1;
+	}
+}
+
+/* Refill: submit row (button + pill preview) */
+.refill-submit-row {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.refill-submit-row button {
+	height: 42px;
+	padding: 0 2rem;
+	min-width: 120px;
+	flex-shrink: 0;
+}
+
+/* Refill: prescription toggle row */
+.refill-prescription-row {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	padding-top: 0.25rem;
+	border-top: 1px solid var(--border-primary);
+}
+
+.refill-prescription-row .refill-prescription-toggle {
+	display: grid;
+	grid-template-columns: 18px minmax(0, 1fr);
+	align-items: start;
+	gap: 0.6rem;
+	margin: 0;
+	text-transform: none;
+	letter-spacing: normal;
+	line-height: 1.2;
+	font-size: 0.95rem;
+	color: var(--text-primary);
+	cursor: pointer;
+	white-space: normal;
+	width: 100%;
+}
+
+.refill-prescription-row .refill-prescription-toggle input {
+	width: 18px;
+	height: 18px;
+	min-width: 18px;
+	margin: 0;
+	flex-shrink: 0;
+}
+
+.refill-prescription-label-text {
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+.refill-prescription-row .refill-prescription-toggle input:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+.refill-remaining-badge {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: var(--success);
+	margin-left: auto;
+}
+
+.refill-preview {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: 42px;
+	padding: 0 0.75rem;
+	background: transparent;
+	border: 1px dashed var(--success);
+	border-radius: 6px;
+	color: var(--success);
+	font-size: 0.85rem;
+	font-weight: 600;
+	flex-shrink: 0;
+	align-self: flex-end;
+	box-sizing: border-box;
+}
+
+.refill-section {
+	margin-top: 0;
+}
+
+.refill-section .refill-title {
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--text-primary);
+	margin: 0 0 0.75rem 0;
+}
+
+.refill-section .refill-submit-row button {
+	background: var(--success);
+	color: white;
+	border: none;
+}
+
+.refill-section .refill-submit-row button:hover:not(:disabled) {
+	background: var(--success-hover, #3aa865);
+	filter: brightness(1.1);
+}
+
+.refill-section .refill-submit-row button:disabled {
+	background: var(--bg-tertiary);
+	color: var(--text-tertiary);
+	cursor: not-allowed;
+}
+
+.refill-unavailable {
+	grid-column: 1 / -1;
+	margin: 0;
+	padding: 0.6rem 0.75rem;
+	border-radius: 8px;
+	border: 1px dashed var(--border-secondary);
+	color: var(--text-secondary);
+	font-size: 0.88rem;
+}
+
+/* =============================================================================
+   Edit Stock Modal (Correction)
+   ============================================================================= */
+.edit-stock-modal {
+	max-width: 500px;
+	padding: 1.5rem;
+}
+
+.edit-stock-modal h2 {
+	font-size: 1.25rem;
+	margin-bottom: 0.25rem;
+}
+
+.edit-stock-med-name {
+	color: var(--text-secondary);
+	margin-bottom: 0.5rem;
+}
+
+.edit-stock-hint {
+	font-size: 0.85rem;
+	color: var(--warning);
+	background: var(--warning-bg);
+	padding: 0.75rem 1rem;
+	border-radius: 8px;
+	margin-bottom: 1.5rem;
+	border: 1px solid rgba(252, 211, 77, 0.2);
+}
+
+.edit-stock-cap-info {
+	margin: 0 0 0.75rem;
+	font-size: 0.85rem;
+	color: var(--text-secondary);
+}
+
+.edit-stock-live-breakdown {
+	color: var(--text-primary);
+	background: var(--bg-tertiary);
+	border: 1px solid var(--border-primary);
+	border-radius: 8px;
+	padding: 0.6rem 0.75rem;
+}
+
+.edit-stock-cap-warning {
+	margin: -0.25rem 0 1rem;
+	font-size: 0.85rem;
+	color: var(--warning);
+	background: var(--warning-bg);
+	border: 1px solid rgba(252, 211, 77, 0.25);
+	border-radius: 8px;
+	padding: 0.5rem 0.75rem;
+}
+
+.edit-stock-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin-bottom: 1.5rem;
+}
+
+.edit-stock-form label {
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+	font-weight: 500;
+}
+
+.edit-stock-form label .hint-text {
+	font-weight: 400;
+	color: var(--text-secondary);
+	font-size: 0.85rem;
+}
+
+.edit-stock-form input {
+	padding: 0.75rem;
+	border: 1px solid var(--border-primary);
+	border-radius: 8px;
+	background: var(--bg-input);
+	color: var(--text-primary);
+	font-size: 1rem;
+}
+
+.edit-stock-form input[type="number"]::-webkit-outer-spin-button,
+.edit-stock-form input[type="number"]::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+.edit-stock-form input[type="number"] {
+	-moz-appearance: textfield;
+	appearance: textfield;
+}
+
+.number-stepper {
+	display: grid;
+	grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
+	align-items: stretch;
+	border: 1px solid var(--border-primary);
+	border-radius: 12px;
+	overflow: hidden;
+	background: var(--bg-input);
+}
+
+.number-stepper input {
+	margin: 0;
+	border: none;
+	border-radius: 0;
+	text-align: center;
+	font-size: 1.1rem;
+	font-weight: 600;
+	padding: 0.75rem 0.5rem;
+	min-height: 2.75rem;
+	background: transparent;
+}
+
+.number-stepper input[type="number"]::-webkit-outer-spin-button,
+.number-stepper input[type="number"]::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+.number-stepper input[type="number"] {
+	-moz-appearance: textfield;
+	appearance: textfield;
+}
+
+.number-stepper input:focus {
+	outline: none;
+	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
+.stepper-btn {
+	border: none;
+	border-right: 1px solid var(--border-primary);
+	background: color-mix(in srgb, var(--bg-tertiary) 85%, transparent);
+	color: var(--text-secondary);
+	min-width: 2.75rem;
+	min-height: 2.75rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	transition:
+		background 0.15s ease,
+		color 0.15s ease,
+		opacity 0.15s ease;
+}
+
+.stepper-btn svg {
+	width: 1.15rem;
+	height: 1.15rem;
+	stroke-width: 2.5;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	flex-shrink: 0;
+}
+
+.stepper-btn.increment {
+	border-right: none;
+	border-left: 1px solid var(--border-primary);
+	color: var(--success);
+}
+
+.stepper-btn.decrement {
+	color: var(--danger);
+}
+
+.stepper-btn:hover:not(:disabled) {
+	background: color-mix(in srgb, var(--accent) 14%, var(--bg-tertiary));
+}
+
+.stepper-btn:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+
+[data-theme="light"] .stepper-btn.increment {
+	color: #0f766e;
+}
+
+[data-theme="light"] .stepper-btn.decrement {
+	color: #b91c1c;
+}
+
+@media (max-width: 640px) {
+	.number-stepper {
+		grid-template-columns: 3rem minmax(0, 1fr) 3rem;
+	}
+
+	.number-stepper input {
+		font-size: 1.2rem;
+		min-height: 3rem;
+	}
+
+	.stepper-btn {
+		min-width: 3rem;
+		min-height: 3rem;
+	}
+}
+
+@media (min-width: 641px) {
+	.number-stepper {
+		display: flex;
+		align-items: stretch;
+	}
+
+	.number-stepper input {
+		order: 1;
+		flex: 1 1 auto;
+		min-width: 0;
+		text-align: left;
+		padding-left: 0.9rem;
+	}
+
+	.number-stepper .stepper-btn {
+		flex: 0 0 2.9rem;
+		min-width: 2.9rem;
+		border-right: none;
+		border-left: 1px solid var(--border-primary);
+		color: var(--text-primary);
+	}
+
+	.number-stepper .stepper-btn.decrement {
+		order: 2;
+		background: color-mix(in srgb, var(--danger) 74%, var(--bg-secondary));
+		color: #fff;
+	}
+
+	.number-stepper .stepper-btn.increment {
+		order: 3;
+		background: color-mix(in srgb, var(--success) 72%, var(--bg-secondary));
+		color: #fff;
+	}
+
+	.number-stepper .stepper-btn:hover:not(:disabled) {
+		filter: brightness(1.08);
+	}
+
+	.number-stepper .stepper-btn:disabled {
+		opacity: 0.55;
+	}
+
+	[data-theme="light"] .number-stepper .stepper-btn.decrement {
+		background: #dc2626;
+	}
+
+	[data-theme="light"] .number-stepper .stepper-btn.increment {
+		background: #0f766e;
+	}
+}
+
+/* Keep refill modal stepper on legacy visual style (before desktop clustered correction style). */
+.refill-number-stepper {
+	display: grid;
+	grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
+}
+
+.refill-number-stepper input {
+	order: initial;
+	text-align: center;
+	padding: 0.75rem 0.5rem;
+}
+
+.refill-number-stepper .stepper-btn {
+	flex: 0 0 auto;
+	border-right: 1px solid var(--border-primary);
+	border-left: none;
+	background: color-mix(in srgb, var(--bg-tertiary) 85%, transparent);
+	color: var(--text-secondary);
+}
+
+.refill-number-stepper .stepper-btn.decrement {
+	order: initial;
+	color: var(--danger);
+}
+
+.refill-number-stepper .stepper-btn.increment {
+	order: initial;
+	border-right: none;
+	border-left: 1px solid var(--border-primary);
+	background: color-mix(in srgb, var(--bg-tertiary) 85%, transparent);
+	color: var(--success);
+}
+
+.refill-number-stepper .stepper-btn:hover:not(:disabled) {
+	filter: none;
+	background: color-mix(in srgb, var(--accent) 14%, var(--bg-tertiary));
+}
+
+@media (min-width: 641px) {
+	.refill-number-stepper {
+		display: grid;
+		grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
+	}
+
+	.refill-number-stepper input {
+		padding-left: 0.5rem;
+	}
+
+	[data-theme="light"] .refill-number-stepper .stepper-btn.decrement {
+		background: color-mix(in srgb, var(--bg-tertiary) 90%, transparent);
+		color: #b91c1c;
+	}
+
+	[data-theme="light"] .refill-number-stepper .stepper-btn.increment {
+		background: color-mix(in srgb, var(--bg-tertiary) 90%, transparent);
+		color: #0f766e;
+	}
+}
+
+@media (max-width: 640px) {
+	.refill-number-stepper {
+		grid-template-columns: 3rem minmax(0, 1fr) 3rem;
+	}
+}
+
+.edit-stock-summary {
+	display: flex;
+	gap: 0.5rem;
+	margin-bottom: 1.5rem;
+}
+
+.edit-stock-summary .summary-row {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.25rem;
+	background: var(--bg-tertiary);
+	border-radius: 10px;
+	padding: 0.75rem 0.5rem;
+}
+
+.edit-stock-summary .summary-row span:first-child {
+	font-size: 0.72rem;
+	font-weight: 500;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--text-secondary);
+}
+
+.edit-stock-summary .summary-row span:last-child {
+	font-size: 1rem;
+	font-weight: 700;
+	color: var(--text-primary);
+}
+
+.edit-stock-summary .summary-row.difference {
+	background: transparent;
+	border: 1.5px solid var(--border-primary);
+}
+
+.edit-stock-summary .summary-row.difference.positive span:last-child {
+	color: var(--success);
+}
+
+.edit-stock-summary .summary-row.difference.negative span:last-child {
+	color: var(--danger);
+}
+
+/* Clickable section header (for expand/collapse) */
+.section-header-clickable {
+	cursor: pointer;
+	user-select: none;
+}
+
+.section-header-clickable:hover {
+	color: var(--accent);
+}
+
+/* Refill history in detail modal */
+.refill-history-header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	cursor: pointer;
+	user-select: none;
+}
+
+.refill-history-header .collapse-icon {
+	font-size: 0.75rem;
+	color: var(--text-secondary);
+}
+
+.refill-history-header .refill-count {
+	font-weight: normal;
+	font-size: 0.875rem;
+	color: var(--text-secondary);
+}
+
+.refill-history-list {
+	margin-top: 0.75rem;
+}
+
+.refill-history-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.5rem 0;
+	border-bottom: 1px solid var(--border-primary);
+}
+
+.refill-history-item:last-child {
+	border-bottom: none;
+}
+
+.refill-date {
+	font-size: 0.875rem;
+	color: var(--text-secondary);
+}
+
+.refill-details {
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--success);
+}
+
+/* Nested modal overlay */
+.modal-overlay.nested {
+	background: rgba(0, 0, 0, 0.6);
+}
+
+.modal-overlay.nested-confirm {
+	z-index: 1200;
+}

frontend/src/styles/modals-base.css

@@ -0,0 +1,121 @@
+/* =============================================================================
+   Modal Base Styles
+   ============================================================================= */
+
+.modal-overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.6);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+	padding: 2rem 1rem;
+	animation: fadeIn 0.2s ease;
+	overflow-x: hidden;
+	overflow-y: auto;
+	overscroll-behavior: contain;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.modal-content {
+	background: var(--bg-secondary);
+	border-radius: 12px;
+	max-width: 500px;
+	width: 100%;
+	max-height: 90vh;
+	overflow-x: hidden;
+	overflow-y: auto;
+	position: relative;
+	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+	animation: slideUp 0.3s ease;
+	border: 1px solid var(--border-primary);
+	padding: 1.5rem;
+}
+
+@keyframes slideUp {
+	from {
+		opacity: 0;
+		transform: translateY(20px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.modal-close,
+.lightbox-close {
+	width: 2.75rem;
+	height: 2.75rem;
+	min-width: 2.75rem;
+	min-height: 2.75rem;
+	font-size: 1.2rem;
+	line-height: 1;
+}
+
+.modal-close {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+	background: var(--btn-ghost-hover);
+	border: 1px solid var(--border-secondary);
+	color: var(--text-secondary);
+	cursor: pointer;
+	aspect-ratio: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--btn-radius-round);
+	transition:
+		background 150ms ease,
+		border-color 150ms ease,
+		color 150ms ease;
+	flex-shrink: 0;
+	padding: 0;
+	box-shadow: none;
+}
+
+.modal-close:hover {
+	background: rgba(255, 255, 255, 0.15);
+	border-color: var(--text-secondary);
+	color: var(--text-primary);
+}
+
+[data-theme="light"] .modal-close:hover {
+	background: rgba(0, 0, 0, 0.1);
+}
+
+.modal-footer {
+	padding: 1rem 1.5rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-top: 1px solid var(--border-primary);
+	gap: 0.75rem;
+}
+
+.modal-footer button {
+	white-space: nowrap;
+}
+
+.modal-footer .footer-left,
+.modal-footer .footer-right {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+.modal-footer button.icon-only {
+	padding: 0.5rem;
+	min-width: 2.75rem;
+	min-height: 2.75rem;
+}

frontend/src/styles/schedule-mobile-edit.css

@@ -0,0 +1,475 @@
+/* =============================================================================
+   Shared Schedule Page (Public)
+   ============================================================================= */
+.shared-schedule-page {
+	min-height: 100vh;
+	background: var(--bg-gradient);
+	padding: 2rem;
+}
+
+.shared-schedule-container {
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.shared-schedule-loading,
+.shared-schedule-error {
+	text-align: center;
+	padding: 4rem 2rem;
+}
+
+.shared-schedule-loading h1,
+.shared-schedule-error h1 {
+	font-size: 2rem;
+	margin-bottom: 1rem;
+}
+
+.shared-schedule-error .error-message {
+	color: var(--danger);
+	font-size: 1.125rem;
+}
+
+/* Expired link styling */
+.shared-schedule-error.expired {
+	max-width: 500px;
+	margin: 0 auto;
+}
+
+.shared-schedule-error .expired-icon {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+}
+
+.shared-schedule-error.expired h2 {
+	font-size: 1.5rem;
+	color: var(--warning);
+	margin-bottom: 1.5rem;
+}
+
+.shared-schedule-error .expired-message {
+	font-size: 1.125rem;
+	color: var(--text-primary);
+	margin-bottom: 1rem;
+	line-height: 1.5;
+}
+
+.shared-schedule-error .expired-contact {
+	font-size: 1rem;
+	color: var(--text-secondary);
+	margin-bottom: 1.5rem;
+	padding: 1rem;
+	background: var(--bg-tertiary);
+	border-radius: 8px;
+	border: 1px solid var(--border-primary);
+}
+
+.shared-schedule-error .expired-date {
+	font-size: 0.875rem;
+	color: var(--text-muted);
+}
+
+.shared-schedule-header {
+	text-align: center;
+	margin-bottom: 2rem;
+	padding-bottom: 1.5rem;
+	border-bottom: 1px solid var(--border-primary);
+	position: relative;
+}
+
+.shared-schedule-header-actions {
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: flex;
+	gap: 0.5rem;
+}
+
+.shared-schedule-header h1 {
+	font-size: 1.75rem;
+	margin-bottom: 0.5rem;
+}
+
+.shared-schedule-period {
+	color: var(--text-secondary);
+	font-size: 1rem;
+}
+
+.shared-timeline {
+	background: var(--bg-secondary);
+	border-radius: 12px;
+	padding: 1.5rem;
+	border: 1px solid var(--border-primary);
+}
+
+.shared-schedule-empty {
+	text-align: center;
+	padding: 2rem;
+	color: var(--text-secondary);
+}
+
+.shared-dose {
+	background: transparent;
+	border: none;
+	padding: 0.5rem 0;
+}
+
+.med-name-stack {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	min-width: 0;
+	gap: 0.1rem;
+}
+
+.med-generic-inline {
+	font-size: 0.875rem;
+	color: var(--text-secondary);
+	margin-left: 0;
+}
+
+.shared-schedule-footer {
+	text-align: center;
+	margin-top: 2rem;
+	padding-top: 1.5rem;
+	border-top: 1px solid var(--border-primary);
+	color: var(--text-secondary);
+	font-size: 0.875rem;
+}
+
+@media (max-width: 600px) {
+	.shared-schedule-page {
+		padding: 1rem;
+	}
+
+	.shared-schedule-header h1 {
+		font-size: 1.25rem;
+	}
+
+	.shared-timeline {
+		padding: 1rem;
+	}
+}
+
+/* ── Desktop Edit Panel (two-column layout) ── */
+.edit-sidebar {
+	display: none;
+	padding: 0;
+}
+
+@media (min-width: 769px) {
+	.med-grid-wrapper.desktop-edit-open {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(380px, 46%);
+		gap: 1rem;
+		align-items: start;
+	}
+
+	.med-grid-wrapper.desktop-edit-open .med-grid,
+	.med-grid-wrapper.desktop-edit-open .med-grid-obsolete {
+		grid-template-columns: 1fr;
+	}
+
+	.edit-sidebar.open {
+		display: block;
+	}
+}
+
+.edit-sidebar .card {
+	box-shadow: none;
+	border: none;
+	background: transparent;
+	padding: 0;
+	padding-top: 1.25rem;
+}
+
+/* Desktop only - hide on mobile */
+@media (max-width: 768px) {
+	.desktop-only {
+		display: none !important;
+	}
+}
+
+/* Mobile Edit Modal */
+.edit-modal {
+	max-width: 95vw;
+	max-height: 90vh;
+	overflow-y: auto;
+	padding: 0.75rem;
+}
+
+.edit-modal-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.75rem;
+	margin-bottom: 1rem;
+}
+
+.edit-modal-header h2 {
+	font-size: 1.25rem;
+	margin: 0;
+}
+
+.mobile-edit-form.form-grid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+	gap: 0.75rem 1rem;
+}
+
+.mobile-edit-form.form-grid > label {
+	font-size: 0.8rem;
+	min-width: 0 !important;
+	width: 100%;
+}
+
+.mobile-edit-form .form-category {
+	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+	gap: 0.75rem 0.75rem;
+	padding: 0.5rem;
+	border-color: color-mix(in srgb, var(--border-primary) 50%, transparent);
+}
+
+.mobile-edit-form .refill-prescription-row {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 0.6rem;
+	align-items: start;
+	width: 100%;
+}
+
+.mobile-edit-form .refill-prescription-row .refill-prescription-toggle {
+	grid-template-columns: 18px minmax(0, 1fr);
+	line-height: 1.3;
+	max-width: 100%;
+}
+
+.mobile-edit-form .refill-remaining-badge {
+	margin-left: 0;
+	justify-self: start;
+}
+
+.mobile-edit-form.form-grid input,
+.mobile-edit-form.form-grid textarea,
+.mobile-edit-form.form-grid select {
+	font-size: 16px !important;
+	width: 100%;
+}
+
+.mobile-edit-form .date-input-display {
+	font-size: 16px !important;
+}
+
+.mobile-edit-form .blister-row {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 0.5rem;
+	padding: 0.75rem;
+	background: var(--bg-secondary);
+	border-radius: 8px;
+	margin-bottom: 0.5rem;
+	align-items: end;
+}
+
+.mobile-edit-form .blister-row label.compact {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.mobile-edit-form .blister-row label.compact span {
+	font-size: 0.75rem;
+	color: var(--text-secondary);
+	font-weight: 500;
+}
+
+.mobile-edit-form .blister-row label.compact.full-row {
+	grid-column: 1 / -1;
+}
+
+.mobile-edit-form .blister-row label.compact.time-label {
+	width: fit-content;
+}
+
+.mobile-edit-form .blister-row label.compact.time-label input[type="time"] {
+	width: auto;
+}
+
+.mobile-edit-form .blister-row .remove-blister-btn {
+	grid-column: 1 / -1;
+	justify-self: start;
+}
+
+.mobile-edit-form .blister-row .remind-toggle-row {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.blister-inputs .remind-toggle-row {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	align-self: end;
+	padding-bottom: 0.5rem;
+}
+
+.mobile-edit-form .blister-row .datetime-inputs {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.mobile-edit-form .blister-row .datetime-inputs input[type="date"] {
+	flex: 2;
+	min-width: 0;
+}
+
+.mobile-edit-form .blister-row .datetime-inputs input[type="time"] {
+	flex: 1;
+	min-width: 0;
+}
+
+/* Remove blister button */
+.remove-blister-btn {
+	padding: 0.4rem !important;
+	font-size: 1rem;
+	line-height: 1;
+	border-radius: 6px !important;
+	min-width: 2.5rem;
+	min-height: 2.5rem;
+	align-self: center;
+	opacity: 0.7;
+}
+
+.remove-blister-btn:hover {
+	opacity: 1;
+}
+
+.mobile-edit-form .add-blister {
+	margin-top: 0.5rem;
+	width: auto;
+}
+
+/* Action Cards (for Export/Import etc.) - similar to radio-card */
+.action-card {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: 1rem 1.25rem;
+	background: var(--bg-tertiary);
+	border: 1px solid var(--border-secondary);
+	border-radius: 12px;
+	transition: all 0.2s ease;
+}
+
+.action-card:hover {
+	border-color: var(--border-primary);
+}
+
+.action-card-content {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	flex: 1;
+	min-width: 0;
+}
+
+.action-card-title {
+	font-weight: 600;
+	color: var(--text-primary);
+	font-size: 0.95rem;
+}
+
+.action-card-desc {
+	color: var(--text-secondary);
+	font-size: 0.85rem;
+	line-height: 1.4;
+}
+
+.action-card button,
+.action-card .btn {
+	flex-shrink: 0;
+}
+
+/* ==========================================
+   Custom DateInput / DateTimeInput
+   ========================================== */
+.date-input-wrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	cursor: pointer;
+}
+
+.date-input-display {
+	position: absolute;
+	left: 0.85rem;
+	right: 2.5rem;
+	pointer-events: none;
+	color: var(--text-primary);
+	font-size: 0.95rem;
+	font-family: inherit;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	z-index: 1;
+}
+
+.date-input-native {
+	color: transparent !important;
+	caret-color: transparent !important;
+	width: 100%;
+	cursor: pointer;
+}
+
+/* Ensure native text stays invisible on focus/selection */
+.date-input-native:focus,
+.date-input-native:active {
+	color: transparent !important;
+	caret-color: transparent !important;
+}
+
+.date-input-native::selection {
+	background: transparent;
+	color: transparent;
+}
+
+.date-input-native::-webkit-datetime-edit {
+	color: transparent;
+}
+
+/* Keep the calendar/clock picker icon visible and clickable */
+.date-input-native::-webkit-calendar-picker-indicator {
+	opacity: 0.6;
+	cursor: pointer;
+	filter: invert(0.8);
+	z-index: 2;
+}
+
+.date-input-native::-webkit-calendar-picker-indicator:hover {
+	opacity: 1;
+}
+
+/* Light theme: don't invert icon */
+@media (prefers-color-scheme: light) {
+	.date-input-native::-webkit-calendar-picker-indicator {
+		filter: none;
+		opacity: 0.7;
+	}
+}
+
+@media (max-width: 480px) {
+	.action-card {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.75rem;
+	}
+
+	.action-card button,
+	.action-card .btn {
+		width: 100%;
+		text-align: center;
+		justify-content: center;
+	}
+}

frontend/src/styles/share-dialog.css

@@ -0,0 +1,141 @@
+/* =============================================================================
+   Share Dialog
+   ============================================================================= */
+.share-dialog-modal {
+	max-width: 480px;
+	padding: 1.5rem;
+}
+
+.share-dialog-header {
+	text-align: center;
+	margin-bottom: 1.5rem;
+}
+.share-dialog-header h2 {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	font-size: 1.25rem;
+	margin-bottom: 0.5rem;
+}
+
+.share-dialog-description {
+	font-size: 0.85rem;
+	line-height: 1.5;
+	text-align: left;
+	color: var(--warning);
+	background: var(--warning-bg);
+	padding: 0.75rem 1rem;
+	border-radius: 8px;
+	border: 1px solid rgba(252, 211, 77, 0.2);
+	margin: 0.5rem 0 0;
+}
+
+.share-dialog-empty {
+	text-align: center;
+	padding: 2rem;
+	color: var(--text-secondary);
+}
+
+.share-dialog-form .form-group {
+	margin-bottom: 1rem;
+}
+
+.share-dialog-form label {
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 500;
+	margin-bottom: 0.5rem;
+	color: var(--text-primary);
+}
+
+.share-dialog-form select {
+	width: 100%;
+	padding: 0.75rem;
+	border: 1px solid var(--border-primary);
+	border-radius: 8px;
+	background-color: var(--bg-input);
+	color: var(--text-primary);
+	font-size: 1rem;
+}
+
+.share-dialog-footer {
+	display: flex;
+	gap: 0.75rem;
+	margin-top: 1.5rem;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.share-dialog-footer .footer-left {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.share-dialog-footer .footer-right {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.share-dialog-result {
+	text-align: center;
+}
+
+.share-success {
+	color: var(--success);
+	font-weight: 500;
+	margin-bottom: 1rem;
+}
+
+.share-link-box {
+	display: flex;
+	gap: 0.5rem;
+	margin-bottom: 0.5rem;
+}
+
+.share-link-input {
+	flex: 1;
+	padding: 0.75rem;
+	border: 1px solid var(--border-primary);
+	border-radius: 8px;
+	background: var(--bg-input);
+	color: var(--text-primary);
+	font-size: 0.875rem;
+	font-family: monospace;
+}
+
+.btn-copy {
+	padding: 0.75rem 1rem;
+	border: 1px solid var(--border-primary);
+	border-radius: 8px;
+	background: var(--bg-tertiary);
+	color: var(--text-primary);
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.btn-copy.icon-only {
+	padding: 0.5rem;
+	min-width: 2.75rem;
+	min-height: 2.75rem;
+}
+
+.btn-copy:hover {
+	background: var(--accent-bg);
+	border-color: var(--accent);
+}
+
+.share-copied-hint {
+	color: var(--success);
+	font-size: 0.875rem;
+}
+
+.share-btn {
+	font-size: 0.875rem;
+	padding: 0.375rem 0.75rem;
+}
+
+.share-btn.icon-only {
+	padding: 0.5rem;
+	min-width: 2.75rem;
+	min-height: 2.75rem;
+}

frontend/src/test/components/ConfirmModal.test.tsx

@@ -92,4 +92,22 @@ describe("ConfirmModal", () => {
 		const confirmBtn = screen.getByText("Yes");
 		expect(confirmBtn.className).toContain("success");
 	});
+
+	it("applies warning variant when specified", () => {
+		render(<ConfirmModal {...defaultProps} confirmVariant="warning" />);
+		const confirmBtn = screen.getByText("Yes");
+		expect(confirmBtn.className).toContain("warning");
+	});
+
+	it("applies custom overlay class", () => {
+		const { container } = render(<ConfirmModal {...defaultProps} overlayClassName="nested-confirm" />);
+		const overlay = container.querySelector(".modal-overlay");
+		expect(overlay?.className).toContain("nested-confirm");
+	});
+
+	it("calls onCancel when Escape is pressed", () => {
+		render(<ConfirmModal {...defaultProps} />);
+		fireEvent.keyDown(document, { key: "Escape" });
+		expect(defaultProps.onCancel).toHaveBeenCalledTimes(1);
+	});
 });

frontend/src/test/components/DateInput.test.tsx

@@ -0,0 +1,68 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DateInput } from "../../components/DateInput";
+
+vi.mock("../../utils/formatters", () => ({
+	formatDate: vi.fn(() => "14.02.2026"),
+	getNumericLocale: vi.fn(() => "de-DE"),
+}));
+
+describe("DateInput", () => {
+	it("renders placeholder display when value is empty", () => {
+		render(<DateInput value="" onChange={vi.fn()} placeholder="Select date" />);
+
+		expect(screen.getByText("Select date")).toBeInTheDocument();
+		expect(screen.getByDisplayValue("")).toHaveAttribute("type", "date");
+	});
+
+	it("renders formatted date display when value exists", () => {
+		render(<DateInput value="2026-02-14" onChange={vi.fn()} />);
+
+		expect(screen.getByText("14.02.2026")).toBeInTheDocument();
+		expect(screen.getByDisplayValue("2026-02-14")).toBeInTheDocument();
+	});
+
+	it("tries showPicker on wrapper click", () => {
+		render(<DateInput value="2026-02-14" onChange={vi.fn()} />);
+
+		const input = screen.getByDisplayValue("2026-02-14") as HTMLInputElement & {
+			showPicker?: () => void;
+		};
+		const showPicker = vi.fn();
+		input.showPicker = showPicker;
+
+		fireEvent.click(input.closest(".date-input-wrapper") as HTMLElement);
+		expect(showPicker).toHaveBeenCalledTimes(1);
+	});
+
+	it("falls back to focus when showPicker throws", () => {
+		render(<DateInput value="2026-02-14" onChange={vi.fn()} />);
+
+		const input = screen.getByDisplayValue("2026-02-14") as HTMLInputElement & {
+			showPicker?: () => void;
+		};
+		input.showPicker = vi.fn(() => {
+			throw new Error("showPicker not supported");
+		});
+		const focusSpy = vi.spyOn(input, "focus").mockImplementation(() => {});
+
+		fireEvent.click(input.closest(".date-input-wrapper") as HTMLElement);
+		expect(focusSpy).toHaveBeenCalledTimes(1);
+	});
+
+	it("triggers picker fallback on Enter and Space", () => {
+		render(<DateInput value="2026-02-14" onChange={vi.fn()} />);
+
+		const input = screen.getByDisplayValue("2026-02-14") as HTMLInputElement & {
+			showPicker?: () => void;
+		};
+		const showPicker = vi.fn();
+		input.showPicker = showPicker;
+		const wrapper = input.closest(".date-input-wrapper") as HTMLElement;
+
+		fireEvent.keyDown(wrapper, { key: "Enter" });
+		fireEvent.keyDown(wrapper, { key: " " });
+
+		expect(showPicker).toHaveBeenCalledTimes(2);
+	});
+});

frontend/src/test/components/DateTimeInput.test.tsx

@@ -0,0 +1,40 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DateTimeInput } from "../../components/DateTimeInput";
+
+vi.mock("../../utils/formatters", () => ({
+	formatDateTime: vi.fn(() => "14.02.2026, 20:30"),
+	getNumericLocale: vi.fn(() => "de-DE"),
+}));
+
+describe("DateTimeInput", () => {
+	it("renders placeholder when value is empty", () => {
+		render(<DateTimeInput value="" onChange={vi.fn()} placeholder="Select date time" />);
+
+		expect(screen.getByText("Select date time")).toBeInTheDocument();
+		expect(screen.getByDisplayValue("")).toHaveAttribute("type", "datetime-local");
+	});
+
+	it("renders formatted datetime display", () => {
+		render(<DateTimeInput value="2026-02-14T20:30" onChange={vi.fn()} />);
+
+		expect(screen.getByText("14.02.2026, 20:30")).toBeInTheDocument();
+		expect(screen.getByDisplayValue("2026-02-14T20:30")).toBeInTheDocument();
+	});
+
+	it("uses picker on click and keyboard", () => {
+		render(<DateTimeInput value="2026-02-14T20:30" onChange={vi.fn()} />);
+
+		const input = screen.getByDisplayValue("2026-02-14T20:30") as HTMLInputElement & {
+			showPicker?: () => void;
+		};
+		const showPicker = vi.fn();
+		input.showPicker = showPicker;
+		const wrapper = input.closest(".date-input-wrapper") as HTMLElement;
+
+		fireEvent.click(wrapper);
+		fireEvent.keyDown(wrapper, { key: "Enter" });
+
+		expect(showPicker).toHaveBeenCalledTimes(2);
+	});
+});

frontend/src/test/components/Lightbox.test.tsx

@@ -46,6 +46,15 @@ describe("Lightbox", () => {
 		expect(onClose).toHaveBeenCalled();
 	});
 
+	it("calls onClose when Escape key is pressed", () => {
+		const onClose = vi.fn();
+		render(<Lightbox {...defaultProps} onClose={onClose} />);
+
+		fireEvent.keyDown(document, { key: "Escape" });
+
+		expect(onClose).toHaveBeenCalled();
+	});
+
 	it("does not call onClose when image is clicked", () => {
 		const onClose = vi.fn();
 		render(<Lightbox {...defaultProps} onClose={onClose} />);

frontend/src/test/components/MedDetailModal.test.tsx

@@ -64,6 +64,8 @@ const defaultProps = {
 	onEditStockFullBlistersChange: vi.fn(),
 	editStockPartialBlisterPills: 0,
 	onEditStockPartialBlisterPillsChange: vi.fn(),
+	editStockLoosePills: 0,
+	onEditStockLoosePillsChange: vi.fn(),
 	editStockSaving: false,
 	onSubmitStockCorrection: vi.fn(),
 };
@@ -100,7 +102,8 @@ describe("MedDetailModal", () => {
 	it("renders close button", () => {
 		render(<MedDetailModal {...defaultProps} />);
 
-		const closeBtn = screen.getByText("×");
+		const closeButtons = screen.getAllByRole("button", { name: /common\.close/i });
+		const closeBtn = closeButtons[0];
 		expect(closeBtn).toBeInTheDocument();
 	});
 
@@ -108,7 +111,8 @@ describe("MedDetailModal", () => {
 		const onClose = vi.fn();
 		render(<MedDetailModal {...defaultProps} onClose={onClose} />);
 
-		const closeBtn = screen.getByText("×");
+		const closeButtons = screen.getAllByRole("button", { name: /common\.close/i });
+		const closeBtn = closeButtons[0];
 		fireEvent.click(closeBtn);
 
 		expect(onClose).toHaveBeenCalledTimes(1);
@@ -144,6 +148,23 @@ describe("MedDetailModal", () => {
 		expect(screen.getByText("Test notes")).toBeInTheDocument();
 	});
 
+	it("shows loose pills in stock details for blister medications", () => {
+		const medWithLoose: Medication = {
+			...mockMedication,
+			pillsPerBlister: 5,
+			looseTablets: 2,
+		};
+
+		const coverageWithLoose: Coverage = {
+			...mockCoverage,
+			medsLeft: 50,
+		};
+
+		render(<MedDetailModal {...defaultProps} selectedMed={medWithLoose} coverage={{ all: [coverageWithLoose] }} />);
+
+		expect(screen.getByText("+ 2 modal.loosePills", { exact: false })).toBeInTheDocument();
+	});
+
 	it("shows prescription details section when prescription is enabled", () => {
 		const med: Medication = {
 			...mockMedication,
@@ -341,6 +362,26 @@ describe("MedDetailModal with refill modal", () => {
 		expect(onRefillPacksChange).toHaveBeenCalledWith(0);
 		expect(onRefillLooseChange).toHaveBeenCalledWith(0);
 	});
+
+	it("shows package size breakdown key for blister stock correction", () => {
+		render(<MedDetailModal {...defaultProps} showEditStockModal={true} />);
+
+		expect(screen.queryByText("editStock.packageSizeBreakdown")).not.toBeInTheDocument();
+		expect(document.querySelector(".edit-stock-live-breakdown")).toBeInTheDocument();
+	});
+
+	it("shows numeric package size text for bottle stock correction", () => {
+		const bottleMed: Medication = {
+			...mockMedication,
+			packageType: "bottle",
+			totalPills: 150,
+			looseTablets: 130,
+		};
+
+		render(<MedDetailModal {...defaultProps} selectedMed={bottleMed} showEditStockModal={true} />);
+
+		expect(screen.getByText("editStock.packageSize_150")).toBeInTheDocument();
+	});
 });
 
 describe("MedDetailModal actions", () => {
@@ -373,10 +414,18 @@ describe("MedDetailModal actions", () => {
 		const generateICSSpy = vi.spyOn(utils, "generateICS").mockImplementation(() => "BEGIN:VCALENDAR");
 		render(<MedDetailModal {...defaultProps} />);
 
-		fireEvent.click(screen.getByTitle("modal.exportTooltip"));
+		fireEvent.click(screen.getByRole("button", { name: /modal\.exportTooltip/i }));
 		expect(generateICSSpy).toHaveBeenCalledWith(mockMedication);
 	});
 
+	it("calls onOpenEditStockModal when stock correction icon is clicked", () => {
+		const onOpenEditStockModal = vi.fn();
+		render(<MedDetailModal {...defaultProps} onOpenEditStockModal={onOpenEditStockModal} />);
+
+		fireEvent.click(screen.getByRole("button", { name: /editStock\.buttonLabel/i }));
+		expect(onOpenEditStockModal).toHaveBeenCalledTimes(1);
+	});
+
 	it("does not render export calendar button when no blisters exist", () => {
 		const medWithoutBlisters: Medication = {
 			...mockMedication,
@@ -384,7 +433,7 @@ describe("MedDetailModal actions", () => {
 		};
 
 		render(<MedDetailModal {...defaultProps} selectedMed={medWithoutBlisters} />);
-		expect(screen.queryByTitle("modal.exportTooltip")).not.toBeInTheDocument();
+		expect(screen.queryByRole("button", { name: /modal\.exportTooltip/i })).not.toBeInTheDocument();
 	});
 });
 
@@ -465,6 +514,23 @@ describe("MedDetailModal nested modal overlays", () => {
 		fireEvent.click(overlays[1]);
 		expect(onCloseEditStockModal).toHaveBeenCalledTimes(1);
 	});
+
+	it("renders only edit stock modal in editStockOnly mode", () => {
+		render(<MedDetailModal {...defaultProps} showEditStockModal={true} editStockOnly={true} />);
+
+		expect(screen.getByText("editStock.title")).toBeInTheDocument();
+		expect(screen.queryByText("form.sections.schedule")).not.toBeInTheDocument();
+	});
+
+	it("closes edit stock modal on Escape", () => {
+		const onCloseEditStockModal = vi.fn();
+		render(
+			<MedDetailModal {...defaultProps} showEditStockModal={true} onCloseEditStockModal={onCloseEditStockModal} />
+		);
+
+		fireEvent.keyDown(document, { key: "Escape" });
+		expect(onCloseEditStockModal).toHaveBeenCalled();
+	});
 });
 
 describe("MedDetailModal with low stock", () => {
@@ -592,12 +658,93 @@ describe("MedDetailModal intake schedule usage display", () => {
 	});
 });
 
+describe("MedDetailModal partial blister normalization", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("carries partial pills into full blisters when partial reaches pillsPerBlister", () => {
+		const onEditStockFullBlistersChange = vi.fn();
+		const onEditStockPartialBlisterPillsChange = vi.fn();
+		const blisterMed: Medication = {
+			...mockMedication,
+			packCount: 10,
+			blistersPerPack: 5,
+			pillsPerBlister: 5,
+			looseTablets: 0,
+		};
+
+		// full=12, partial=4 (one below pillsPerBlister)
+		render(
+			<MedDetailModal
+				{...defaultProps}
+				selectedMed={blisterMed}
+				showEditStockModal={true}
+				editStockFullBlisters={12}
+				editStockPartialBlisterPills={4}
+				editStockLoosePills={0}
+				onEditStockFullBlistersChange={onEditStockFullBlistersChange}
+				onEditStockPartialBlisterPillsChange={onEditStockPartialBlisterPillsChange}
+			/>
+		);
+
+		// Find the increment button for the partial blister pills stepper
+		// The partial stepper is the second stepper in the modal
+		const incrementButtons = document.querySelectorAll(".stepper-btn.increment");
+		const partialIncrementBtn = incrementButtons[1]; // full[0], partial[1], loose[2]
+		expect(partialIncrementBtn).not.toBeDisabled();
+
+		// Press + on partial: 4 → 5 = pillsPerBlister → normalization carries to full
+		fireEvent.click(partialIncrementBtn);
+
+		// full should have been called with 13 (12 + 1 carry)
+		expect(onEditStockFullBlistersChange).toHaveBeenCalledWith(13);
+		// partial should have been called with 0 (5 % 5 = 0)
+		expect(onEditStockPartialBlisterPillsChange).toHaveBeenCalledWith(0);
+	});
+
+	it("does not carry partial pills into full when below pillsPerBlister", () => {
+		const onEditStockFullBlistersChange = vi.fn();
+		const onEditStockPartialBlisterPillsChange = vi.fn();
+		const blisterMed: Medication = {
+			...mockMedication,
+			packCount: 10,
+			blistersPerPack: 5,
+			pillsPerBlister: 5,
+			looseTablets: 0,
+		};
+
+		// full=12, partial=0
+		render(
+			<MedDetailModal
+				{...defaultProps}
+				selectedMed={blisterMed}
+				showEditStockModal={true}
+				editStockFullBlisters={12}
+				editStockPartialBlisterPills={0}
+				editStockLoosePills={0}
+				onEditStockFullBlistersChange={onEditStockFullBlistersChange}
+				onEditStockPartialBlisterPillsChange={onEditStockPartialBlisterPillsChange}
+			/>
+		);
+
+		const incrementButtons = document.querySelectorAll(".stepper-btn.increment");
+		const partialIncrementBtn = incrementButtons[1];
+		fireEvent.click(partialIncrementBtn);
+
+		// full should not change (1 partial pill with pbb=5 is NOT a carry)
+		expect(onEditStockFullBlistersChange).toHaveBeenCalledWith(12);
+		// partial should go to 1
+		expect(onEditStockPartialBlisterPillsChange).toHaveBeenCalledWith(1);
+	});
+});
+
 describe("MedDetailModal stock overflow warning", () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
 	});
 
-	it("shows warning icon when stock exceeds package capacity", () => {
+	it("does not show overflow warning icon with live stock denominator", () => {
 		const overflowCoverage: Coverage = {
 			name: "Test Med",
 			medsLeft: 49,
@@ -609,10 +756,9 @@ describe("MedDetailModal stock overflow warning", () => {
 
 		render(<MedDetailModal {...defaultProps} coverage={{ all: [overflowCoverage] }} />);
 
-		// packageSize = 1 * 1 * 30 + 0 = 30, currentStock = 49 > 30
+		// Live denominator uses current stock, so overflow warning is not shown in detail row.
 		const warningIcon = document.querySelector(".info-tooltip.tooltip-align-left.warning-text");
-		expect(warningIcon).toBeInTheDocument();
+		expect(warningIcon).not.toBeInTheDocument();
-		expect(warningIcon?.getAttribute("data-tooltip")).toBe("tooltips.stockExceedsCapacity");
 	});
 
 	it("does not show warning icon when stock is within package capacity", () => {

frontend/src/test/components/MobileEditModal.test.tsx

@@ -170,10 +170,11 @@ describe("MobileEditModal", () => {
 		expect(screen.getByText(/form\.pillsPerBlister/i)).toBeInTheDocument();
 	});
 
-	it("renders loose tablets input", () => {
+	it("does not render loose tablets input in package section", () => {
 		render(<MobileEditModal {...defaultProps} />);
 
-		expect(screen.getByText(/form\.loose/i)).toBeInTheDocument();
+		expect(screen.queryByText(/form\.loosePills/i)).not.toBeInTheDocument();
+		expect(screen.getByText(/form\.total/i)).toBeInTheDocument();
 	});
 
 	it("renders intake schedules section", () => {
@@ -206,14 +207,14 @@ describe("MobileEditModal", () => {
 	it("renders add intake button", () => {
 		render(<MobileEditModal {...defaultProps} />);
 
-		expect(screen.getByText(/form\.blisters\.addIntake/i)).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: /form\.blisters\.addIntake/i })).toBeInTheDocument();
 	});
 
 	it("calls onAddIntake when add intake clicked", () => {
 		const onAddIntake = vi.fn();
 		render(<MobileEditModal {...defaultProps} onAddIntake={onAddIntake} />);
 
-		const addBtn = screen.getByText(/form\.blisters\.addIntake/i);
+		const addBtn = screen.getByRole("button", { name: /form\.blisters\.addIntake/i });
 		fireEvent.click(addBtn);
 
 		expect(onAddIntake).toHaveBeenCalledTimes(1);
@@ -698,7 +699,7 @@ describe("MobileEditModal optional fields", () => {
 
 		render(<MobileEditModal {...defaultProps} form={form} onAddIntake={onAddIntake} />);
 
-		fireEvent.click(screen.getByText(/form\.blisters\.addIntake/i));
+		fireEvent.click(screen.getByRole("button", { name: /form\.blisters\.addIntake/i }));
 		expect(onAddIntake).toHaveBeenCalledWith("OnlyPerson");
 	});
 });
@@ -714,29 +715,6 @@ describe("MobileEditModal bottle package type", () => {
 		totalPills: "100",
 	};
 
-	it("shows pills-only refill form for bottle type when editing", () => {
-		render(<MobileEditModal {...defaultProps} form={bottleForm} editingId={1} />);
-
-		// Should show "pillsToAdd" label for bottle
-		expect(screen.getByText(/refill\.pillsToAdd/i)).toBeInTheDocument();
-
-		// Should NOT show "packs" label in refill section
-		const refillSection = document.querySelector(".refill-section");
-		expect(refillSection).toBeInTheDocument();
-		expect(refillSection!.textContent).not.toContain("refill.packs");
-		expect(refillSection!.textContent).not.toContain("refill.loosePills");
-	});
-
-	it("shows packs and loose refill form for blister type when editing", () => {
-		render(<MobileEditModal {...defaultProps} form={defaultForm} editingId={1} />);
-
-		// Should show "packs" and "loosePills" labels for blister
-		const refillSection = document.querySelector(".refill-section");
-		expect(refillSection).toBeInTheDocument();
-		expect(refillSection!.textContent).toContain("refill.packs");
-		expect(refillSection!.textContent).toContain("refill.loosePills");
-	});
-
 	it("shows totalCapacity and currentPills fields for bottle form", () => {
 		render(<MobileEditModal {...defaultProps} form={bottleForm} />);
 
@@ -752,7 +730,7 @@ describe("MobileEditModal bottle package type", () => {
 	});
 });
 
-describe("MobileEditModal refill and image actions", () => {
+describe("MobileEditModal image actions", () => {
 	const baseMed = {
 		id: 1,
 		name: "Aspirin",
@@ -776,52 +754,6 @@ describe("MobileEditModal refill and image actions", () => {
 		imageUrl: null,
 	};
 
-	it("calls onSubmitRefill when refill button is clicked", () => {
-		const onSubmitRefill = vi.fn().mockResolvedValue(undefined);
-
-		render(
-			<MobileEditModal
-				{...defaultProps}
-				editingId={1}
-				meds={[baseMed]}
-				refillLoose={2}
-				onSubmitRefill={onSubmitRefill}
-			/>
-		);
-
-		fireEvent.click(screen.getByRole("button", { name: /refill\.button/i }));
-		expect(onSubmitRefill).toHaveBeenCalledWith(1);
-	});
-
-	it("disables refill button when refill values are empty", () => {
-		render(<MobileEditModal {...defaultProps} editingId={1} meds={[baseMed]} refillPacks={0} refillLoose={0} />);
-
-		const refillButton = screen.getByRole("button", { name: /refill\.button/i });
-		expect(refillButton).toBeDisabled();
-	});
-
-	it("shows refill preview for singular pill", () => {
-		render(<MobileEditModal {...defaultProps} editingId={1} meds={[baseMed]} refillPacks={0} refillLoose={1} />);
-
-		expect(document.querySelector(".refill-preview")?.textContent).toContain("+1 common.pill");
-	});
-
-	it("disables refill button while refill is saving", () => {
-		render(
-			<MobileEditModal
-				{...defaultProps}
-				editingId={1}
-				meds={[baseMed]}
-				refillPacks={1}
-				refillLoose={0}
-				refillSaving={true}
-			/>
-		);
-
-		const refillButton = screen.getByRole("button", { name: /common\.saving/i });
-		expect(refillButton).toBeDisabled();
-	});
-
 	it("calls onUploadMedImage when selecting a file", () => {
 		const onUploadMedImage = vi.fn().mockResolvedValue(undefined);
 		render(<MobileEditModal {...defaultProps} editingId={1} meds={[baseMed]} onUploadMedImage={onUploadMedImage} />);

frontend/src/test/components/ProfileModal.test.tsx

@@ -65,4 +65,28 @@ describe("ProfileModal", () => {
 
 		expect(onClose).not.toHaveBeenCalled();
 	});
+
+	it("calls onClose when Escape is pressed on overlay", () => {
+		const onClose = vi.fn();
+		render(<ProfileModal isOpen={true} onClose={onClose} />);
+
+		const overlay = document.querySelector(".modal-overlay");
+		if (overlay) {
+			fireEvent.keyDown(overlay, { key: "Escape" });
+		}
+
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it("does not close on non-escape keydown", () => {
+		const onClose = vi.fn();
+		render(<ProfileModal isOpen={true} onClose={onClose} />);
+
+		const overlay = document.querySelector(".modal-overlay");
+		if (overlay) {
+			fireEvent.keyDown(overlay, { key: "Enter" });
+		}
+
+		expect(onClose).not.toHaveBeenCalled();
+	});
 });

frontend/src/test/components/ReportModal.test.tsx

@@ -0,0 +1,147 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import ReportModal from "../../components/ReportModal";
+import type { Medication } from "../../types";
+
+function createMedication(overrides: Partial<Medication> = {}): Medication {
+	return {
+		id: 1,
+		name: "Aspirin",
+		genericName: "Acetylsalicylic acid",
+		takenBy: ["Alice"],
+		packageType: "blister",
+		packCount: 2,
+		blistersPerPack: 2,
+		pillsPerBlister: 10,
+		looseTablets: 0,
+		blisters: [{ usage: 1, every: 1, start: "2026-01-01T08:00:00.000Z" }],
+		updatedAt: null,
+		...overrides,
+	};
+}
+
+describe("ReportModal", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("renders and closes when cancel is clicked", () => {
+		const onClose = vi.fn();
+		render(<ReportModal isOpen={true} onClose={onClose} medications={[createMedication()]} />);
+
+		expect(screen.getByText(/report\.title/i)).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("button", { name: /common\.cancel/i }));
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it("generates text report and closes modal", async () => {
+		const onClose = vi.fn();
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
+			ok: true,
+			json: async () => ({
+				1: {
+					dosesTaken: 2,
+					dosesDismissed: 0,
+					firstDoseAt: "2026-01-01T08:00:00.000Z",
+					lastDoseAt: "2026-01-02T08:00:00.000Z",
+					refills: [],
+				},
+			}),
+		});
+
+		render(<ReportModal isOpen={true} onClose={onClose} medications={[createMedication()]} />);
+
+		fireEvent.click(screen.getByRole("radio", { name: /report\.formatTxt/i }));
+		fireEvent.click(screen.getByRole("button", { name: /report\.generate/i }));
+
+		await waitFor(() => {
+			expect(global.fetch).toHaveBeenCalledWith(
+				"/api/medications/report-data",
+				expect.objectContaining({ method: "POST" })
+			);
+		});
+
+		expect(onClose).toHaveBeenCalledTimes(1);
+		expect(URL.createObjectURL).toHaveBeenCalled();
+	});
+
+	it("generates printable report when PDF format is selected", async () => {
+		const onClose = vi.fn();
+		const mockWrite = vi.fn();
+		const mockClose = vi.fn();
+		const mockPrint = vi.fn();
+		const openSpy = vi.spyOn(window, "open").mockReturnValue({
+			document: {
+				write: mockWrite,
+				close: mockClose,
+			},
+			onload: null,
+			print: mockPrint,
+		} as unknown as Window);
+
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
+			ok: true,
+			json: async () => ({
+				1: {
+					dosesTaken: 0,
+					dosesDismissed: 0,
+					firstDoseAt: null,
+					lastDoseAt: null,
+					refills: [],
+				},
+			}),
+		});
+
+		render(<ReportModal isOpen={true} onClose={onClose} medications={[createMedication()]} />);
+		fireEvent.click(screen.getByRole("button", { name: /report\.generate/i }));
+
+		await waitFor(() => {
+			expect(openSpy).toHaveBeenCalled();
+			expect(mockWrite).toHaveBeenCalled();
+			expect(mockClose).toHaveBeenCalled();
+		});
+
+		expect(onClose).toHaveBeenCalledTimes(1);
+	});
+
+	it("shows person filter and supports deselect/select all", () => {
+		const onClose = vi.fn();
+		render(
+			<ReportModal
+				isOpen={true}
+				onClose={onClose}
+				medications={[
+					createMedication({ id: 1, name: "Alice Med", takenBy: ["Alice"] }),
+					createMedication({ id: 2, name: "Bob Med", takenBy: ["Bob"] }),
+				]}
+			/>
+		);
+
+		expect(screen.getByText(/report\.filterByPerson/i)).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("checkbox", { name: "Alice" }));
+		expect(screen.getByText("Alice Med")).toBeInTheDocument();
+		expect(screen.queryByText("Bob Med")).not.toBeInTheDocument();
+
+		fireEvent.click(screen.getByRole("button", { name: /report\.deselectAll/i }));
+		expect(screen.getByRole("button", { name: /report\.generate/i })).toBeDisabled();
+
+		fireEvent.click(screen.getByRole("button", { name: /report\.selectAll/i }));
+		expect(screen.getByRole("button", { name: /report\.generate/i })).not.toBeDisabled();
+	});
+
+	it("generates markdown report and keeps modal open on fetch error", async () => {
+		const onClose = vi.fn();
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({ ok: false });
+
+		render(<ReportModal isOpen={true} onClose={onClose} medications={[createMedication()]} />);
+
+		fireEvent.click(screen.getByRole("radio", { name: /report\.formatMd/i }));
+		fireEvent.click(screen.getByRole("button", { name: /report\.generate/i }));
+
+		await waitFor(() => {
+			expect(global.fetch).toHaveBeenCalled();
+		});
+
+		expect(onClose).not.toHaveBeenCalled();
+	});
+});

frontend/src/test/components/ShareDialog.test.tsx

@@ -54,7 +54,7 @@ describe("ShareDialog", () => {
 
 	it("calls onClose when close button is clicked", () => {
 		render(<ShareDialog {...defaultProps} />);
-		fireEvent.click(screen.getByText("×"));
+		fireEvent.click(screen.getByRole("button", { name: /common\.close/i }));
 		expect(defaultProps.onClose).toHaveBeenCalled();
 	});
 
@@ -73,13 +73,13 @@ describe("ShareDialog", () => {
 
 	it("calls onCopyShareLink when copy button is clicked", () => {
 		render(<ShareDialog {...defaultProps} shareLink="http://example.com/share/abc123" />);
-		fireEvent.click(screen.getByText("📋"));
+		fireEvent.click(screen.getByRole("button", { name: /share\.copyLink/i }));
 		expect(defaultProps.onCopyShareLink).toHaveBeenCalled();
 	});
 
 	it("shows copied indicator after copy", () => {
 		render(<ShareDialog {...defaultProps} shareLink="http://example.com/share/abc123" shareCopied={true} />);
-		expect(screen.getByText("✓")).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: /share\.copied/i })).toBeInTheDocument();
 	});
 
 	it("selects link text when input is clicked", () => {

frontend/src/test/components/SharedSchedule.test.tsx

@@ -1,4 +1,4 @@
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { SharedSchedule } from "../../components/SharedSchedule";
@@ -13,95 +13,22 @@ function renderSharedSchedule(path: string) {
 	);
 }
 
-function expandTodayIfCollapsed() {
+function createSharedData() {
-	const todayDivider = document.querySelector(".day-block.today .day-divider.clickable") as HTMLDivElement;
-	expect(todayDivider).toBeInTheDocument();
-	const todayBlock = document.querySelector(".day-block.today") as HTMLDivElement;
-	if (todayBlock?.classList.contains("collapsed")) {
-		fireEvent.click(todayDivider);
-	}
-}
-
-function createSharedData(overrides: Record<string, unknown> = {}) {
-	const now = new Date();
-	const yesterday = new Date(now);
-	yesterday.setDate(now.getDate() - 1);
-	yesterday.setHours(9, 0, 0, 0);
-
 	return {
 		sharedBy: "Owner",
 		takenBy: "Max",
 		scheduleDays: 30,
 		shareStockStatus: true,
-		stockCalculationMode: "automatic",
+		medications: [],
-		stockThresholds: {
-			lowStockDays: 7,
-			normalStockDays: 30,
-			highStockDays: 90,
-			reminderDaysBefore: 7,
-			expiryWarningDays: 30,
-		},
-		medications: [
-			{
-				id: 1,
-				name: "Ibuprofen",
-				genericName: "Ibu",
-				takenBy: ["Max"],
-				packageType: "blister",
-				packCount: 1,
-				blistersPerPack: 2,
-				pillsPerBlister: 10,
-				looseTablets: 0,
-				pillWeightMg: null,
-				doseUnit: "mg",
-				expiryDate: null,
-				notes: null,
-				intakeRemindersEnabled: false,
-				blisters: [{ usage: 1, every: 1, start: yesterday.toISOString() }],
-				intakes: [
-					{ usage: 1, every: 1, start: yesterday.toISOString(), takenBy: "Max", intakeRemindersEnabled: false },
-				],
-				updatedAt: null,
-				dismissedUntil: null,
-				lastStockCorrectionAt: null,
-			},
-		],
-		...overrides,
 	};
 }
 
-function mockShareFetch(
+describe("SharedSchedule", () => {
-	token: string,
-	sharedData: Record<string, unknown>,
-	doses: Array<{ doseId: string; dismissed?: boolean }> = []
-) {
-	(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
-		if (url === `/api/share/${token}/doses` && (!init || !init.method || init.method === "GET")) {
-			return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses }) });
-		}
-		if (url === `/api/share/${token}`) {
-			return Promise.resolve({ ok: true, json: () => Promise.resolve(sharedData) });
-		}
-		if (url === `/api/share/${token}/doses` && init?.method === "POST") {
-			return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
-		}
-		if (url.startsWith(`/api/share/${token}/doses/`) && init?.method === "DELETE") {
-			return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
-		}
-		return Promise.reject(new Error(`Unexpected URL: ${url}`));
-	});
-}
-
-describe.skip("SharedSchedule", () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
 		window.localStorage.clear();
-		vi.spyOn(global, "setInterval").mockImplementation(() => 1 as unknown as ReturnType<typeof setInterval>);
+		vi.spyOn(globalThis, "setInterval").mockImplementation(() => 1 as unknown as ReturnType<typeof setInterval>);
-		vi.spyOn(global, "clearInterval").mockImplementation(() => {});
+		vi.spyOn(globalThis, "clearInterval").mockImplementation(() => {});
-		vi.spyOn(console, "error").mockImplementation((...args: unknown[]) => {
-			const first = String(args[0] ?? "");
-			if (first.includes("not wrapped in act")) return;
-		});
 	});
 
 	afterEach(() => {
@@ -109,52 +36,27 @@ describe.skip("SharedSchedule", () => {
 		vi.restoreAllMocks();
 	});
 
-	it("closes theme menu when clicking outside", async () => {
+	it("renders shared schedule shell for valid token", async () => {
-		const sharedData = createSharedData();
+		(globalThis.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
-		mockShareFetch("token-123", sharedData);
+			if (url === "/api/share/token-123/doses" && (!init || !init.method || init.method === "GET")) {
-
-		renderSharedSchedule("/share/token-123");
-
-		await waitFor(() => {
-			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
-		});
-
-		fireEvent.click(screen.getByTitle("theme.title"));
-		expect(document.querySelector(".theme-menu.open")).toBeInTheDocument();
-
-		fireEvent.click(document.body);
-		expect(document.querySelector(".theme-menu.open")).not.toBeInTheDocument();
-	});
-
-	it("shows loading state initially", async () => {
-		let resolveShare: ((value: unknown) => void) | null = null;
-		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
-			if (url === "/api/share/token-123/doses") {
 				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
 			}
 			if (url === "/api/share/token-123") {
-				return new Promise((resolve) => {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve(createSharedData()) });
-					resolveShare = resolve;
-				});
 			}
 			return Promise.reject(new Error(`Unexpected URL: ${url}`));
 		});
 
 		renderSharedSchedule("/share/token-123");
-		expect(screen.getByText("common.loading")).toBeInTheDocument();
-
-		resolveShare?.({
-			ok: true,
-			json: () => Promise.resolve(createSharedData()),
-		});
 
 		await waitFor(() => {
-			expect(screen.queryByText("common.loading")).not.toBeInTheDocument();
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+			expect(screen.getByText("share.noSchedule")).toBeInTheDocument();
 		});
 	});
 
-	it("renders not found error for 404 links", async () => {
+	it("renders not found state for missing share link", async () => {
-		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+		(globalThis.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
 			if (url === "/api/share/token-123/doses") {
 				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
 			}
@@ -171,26 +73,8 @@ describe.skip("SharedSchedule", () => {
 		});
 	});
 
-	it("renders generic error for unexpected status codes", async () => {
+	it("renders expired state for expired share links", async () => {
-		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+		(globalThis.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
-			if (url === "/api/share/token-123/doses") {
-				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
-			}
-			if (url === "/api/share/token-123") {
-				return Promise.resolve({ ok: false, status: 500, json: () => Promise.resolve({}) });
-			}
-			return Promise.reject(new Error(`Unexpected URL: ${url}`));
-		});
-
-		renderSharedSchedule("/share/token-123");
-
-		await waitFor(() => {
-			expect(screen.getByText("share.error")).toBeInTheDocument();
-		});
-	});
-
-	it("renders expired link state for 410 responses", async () => {
-		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
 			if (url === "/api/share/token-123/doses") {
 				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
 			}
@@ -216,31 +100,13 @@ describe.skip("SharedSchedule", () => {
 		});
 	});
 
-	it("renders schedule shell for valid shared data", async () => {
+	it("renders generic error when loading share data fails", async () => {
-		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+		(globalThis.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
-			if (url === "/api/share/token-123/doses") {
+			if (url === "/api/share/token-123/doses" && (!init || !init.method || init.method === "GET")) {
 				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
 			}
 			if (url === "/api/share/token-123") {
-				return Promise.resolve({
+				return Promise.reject(new Error("network failed"));
-					ok: true,
-					json: () =>
-						Promise.resolve({
-							sharedBy: "Owner",
-							takenBy: "Max",
-							scheduleDays: 30,
-							shareStockStatus: true,
-							stockCalculationMode: "automatic",
-							stockThresholds: {
-								lowStockDays: 7,
-								normalStockDays: 30,
-								highStockDays: 90,
-								reminderDaysBefore: 7,
-								expiryWarningDays: 30,
-							},
-							medications: [],
-						}),
-				});
 			}
 			return Promise.reject(new Error(`Unexpected URL: ${url}`));
 		});
@@ -248,265 +114,7 @@ describe.skip("SharedSchedule", () => {
 		renderSharedSchedule("/share/token-123");
 
 		await waitFor(() => {
-			expect(screen.getByText(/share.scheduleFor/i)).toBeInTheDocument();
+			expect(screen.getByText("share.error")).toBeInTheDocument();
-			expect(screen.getByText("share.noSchedule")).toBeInTheDocument();
 		});
 	});
-
-	it("opens theme menu and switches to light theme", async () => {
-		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
-			if (url === "/api/share/token-123/doses") {
-				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
-			}
-			if (url === "/api/share/token-123") {
-				return Promise.resolve({
-					ok: true,
-					json: () =>
-						Promise.resolve({
-							sharedBy: "Owner",
-							takenBy: "Max",
-							scheduleDays: 30,
-							shareStockStatus: true,
-							stockCalculationMode: "automatic",
-							stockThresholds: {
-								lowStockDays: 7,
-								normalStockDays: 30,
-								highStockDays: 90,
-								reminderDaysBefore: 7,
-								expiryWarningDays: 30,
-							},
-							medications: [],
-						}),
-				});
-			}
-			return Promise.reject(new Error(`Unexpected URL: ${url}`));
-		});
-
-		renderSharedSchedule("/share/token-123");
-
-		await waitFor(() => {
-			expect(screen.getByText(/share.scheduleFor/i)).toBeInTheDocument();
-		});
-
-		fireEvent.click(screen.getByTitle("theme.title"));
-		fireEvent.click(screen.getByRole("button", { name: /theme\.light/i }));
-
-		expect(document.documentElement.getAttribute("data-theme")).toBe("light");
-	});
-
-	it("renders schedule rows for populated data and can expand future days", async () => {
-		const sharedData = createSharedData();
-		mockShareFetch("token-123", sharedData);
-
-		renderSharedSchedule("/share/token-123");
-
-		await waitFor(() => {
-			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
-			expect(screen.getByText("Ibuprofen")).toBeInTheDocument();
-		});
-
-		const futureToggle = document.querySelector(".future-days-toggle");
-		expect(futureToggle).toBeInTheDocument();
-		fireEvent.click(futureToggle as Element);
-
-		await waitFor(() => {
-			expect(document.querySelectorAll(".day-block").length).toBeGreaterThan(1);
-		});
-	});
-
-	it("marks and undoes a dose via shared API", async () => {
-		const sharedData = createSharedData();
-		mockShareFetch("token-123", sharedData);
-
-		renderSharedSchedule("/share/token-123");
-
-		await waitFor(() => {
-			expect(screen.getByText("Ibuprofen")).toBeInTheDocument();
-		});
-
-		const takeButton = document.querySelector(".dose-btn.take:not([disabled])") as HTMLButtonElement;
-		expect(takeButton).toBeInTheDocument();
-		fireEvent.click(takeButton);
-
-		await waitFor(() => {
-			expect(global.fetch as ReturnType<typeof vi.fn>).toHaveBeenCalledWith(
-				"/api/share/token-123/doses",
-				expect.objectContaining({ method: "POST" })
-			);
-		});
-	});
-
-	it("undos a taken dose via shared API", async () => {
-		const sharedData = createSharedData();
-		const today = new Date();
-		const todayDateOnlyMs = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
-		mockShareFetch("token-123", sharedData, [{ doseId: `1-0-${todayDateOnlyMs}-Max` }]);
-
-		renderSharedSchedule("/share/token-123");
-
-		await waitFor(() => {
-			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
-		});
-
-		expandTodayIfCollapsed();
-
-		const undoButton = await waitFor(() => {
-			const button = document.querySelector(".dose-btn.undo") as HTMLButtonElement | null;
-			expect(button).toBeInTheDocument();
-			return button as HTMLButtonElement;
-		});
-		fireEvent.click(undoButton);
-
-		await waitFor(() => {
-			expect(
-				(global.fetch as ReturnType<typeof vi.fn>).mock.calls.some((call) => {
-					const [url, init] = call as [string, RequestInit | undefined];
-					return typeof url === "string" && url.includes("/api/share/token-123/doses/") && init?.method === "DELETE";
-				})
-			).toBe(true);
-		});
-	});
-
-	it("hides stock status chips when shareStockStatus is false", async () => {
-		const sharedData = createSharedData({ shareStockStatus: false });
-		mockShareFetch("token-123", sharedData);
-
-		renderSharedSchedule("/share/token-123");
-
-		await waitFor(() => {
-			expect(screen.getByText("Ibuprofen")).toBeInTheDocument();
-		});
-
-		expect(document.querySelector(".status-chip")).not.toBeInTheDocument();
-	});
-
-	it("opens and closes lightbox for medication image", async () => {
-		const pushStateSpy = vi.spyOn(window.history, "pushState").mockImplementation(() => {});
-		const backSpy = vi.spyOn(window.history, "back").mockImplementation(() => {});
-		const sharedData = createSharedData({
-			medications: [
-				{
-					...createSharedData().medications[0],
-					imageUrl: "ibuprofen.png",
-				},
-			],
-		});
-		mockShareFetch("token-123", sharedData);
-
-		renderSharedSchedule("/share/token-123");
-
-		await waitFor(() => {
-			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
-		});
-
-		expandTodayIfCollapsed();
-
-		const avatar = await waitFor(() => {
-			const element = document.querySelector(".day-block.today .med-avatar.clickable") as HTMLDivElement | null;
-			expect(element).toBeInTheDocument();
-			return element as HTMLDivElement;
-		});
-		fireEvent.click(avatar);
-
-		expect(pushStateSpy).toHaveBeenCalled();
-		expect(document.querySelector(".lightbox-overlay")).toBeInTheDocument();
-
-		fireEvent.click(document.querySelector(".lightbox-overlay") as HTMLDivElement);
-		expect(backSpy).toHaveBeenCalled();
-	});
-
-	it("reverts optimistic taken state when mark-dose request fails", async () => {
-		const sharedData = createSharedData();
-		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
-			if (url === "/api/share/token-123/doses" && (!init || !init.method || init.method === "GET")) {
-				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
-			}
-			if (url === "/api/share/token-123") {
-				return Promise.resolve({ ok: true, json: () => Promise.resolve(sharedData) });
-			}
-			if (url === "/api/share/token-123/doses" && init?.method === "POST") {
-				return Promise.reject(new Error("post failed"));
-			}
-			return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
-		});
-
-		renderSharedSchedule("/share/token-123");
-		await waitFor(() => {
-			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
-		});
-
-		expandTodayIfCollapsed();
-
-		const takeButton = await waitFor(() => {
-			const button = document.querySelector(".dose-btn.take:not([disabled])") as HTMLButtonElement | null;
-			expect(button).toBeInTheDocument();
-			return button as HTMLButtonElement;
-		});
-		fireEvent.click(takeButton);
-
-		await waitFor(() => {
-			expect(document.querySelector(".dose-btn.undo")).not.toBeInTheDocument();
-			expect(document.querySelector(".dose-btn.take:not([disabled])")).toBeInTheDocument();
-		});
-	});
-
-	it("reverts optimistic undo state when undo request fails", async () => {
-		const today = new Date();
-		const todayDateOnlyMs = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
-		const sharedData = createSharedData();
-		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
-			if (url === "/api/share/token-123/doses" && (!init || !init.method || init.method === "GET")) {
-				return Promise.resolve({
-					ok: true,
-					json: () => Promise.resolve({ doses: [{ doseId: `1-0-${todayDateOnlyMs}-Max` }] }),
-				});
-			}
-			if (url === "/api/share/token-123") {
-				return Promise.resolve({ ok: true, json: () => Promise.resolve(sharedData) });
-			}
-			if (url.startsWith("/api/share/token-123/doses/") && init?.method === "DELETE") {
-				return Promise.reject(new Error("delete failed"));
-			}
-			return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
-		});
-
-		renderSharedSchedule("/share/token-123");
-		await waitFor(() => {
-			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
-		});
-
-		expandTodayIfCollapsed();
-
-		const undoButton = await waitFor(() => {
-			const button = document.querySelector(".dose-btn.undo") as HTMLButtonElement | null;
-			expect(button).toBeInTheDocument();
-			return button as HTMLButtonElement;
-		});
-		fireEvent.click(undoButton);
-
-		await waitFor(() => {
-			expect(document.querySelector(".dose-btn.undo")).toBeInTheDocument();
-		});
-	});
-
-	it("persists manual collapse state in localStorage", async () => {
-		const setItemSpy = vi.spyOn(window.localStorage, "setItem");
-		const sharedData = createSharedData();
-		mockShareFetch("token-123", sharedData);
-
-		renderSharedSchedule("/share/token-123");
-
-		await waitFor(() => {
-			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
-		});
-
-		const todayDivider = document.querySelector(".day-block.today .day-divider.clickable") as HTMLDivElement;
-		fireEvent.click(todayDivider);
-
-		expect(setItemSpy).toHaveBeenCalled();
-		expect(
-			setItemSpy.mock.calls.some((call) => String(call[0]).includes("share_token-123_collapsedDays")) ||
-				setItemSpy.mock.calls.some((call) => String(call[0]).includes("share_token-123_expandedDays"))
-		).toBe(true);
-	});
 });

frontend/src/test/components/SharedScheduleTodayOnly.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SharedSchedule } from "../../components/SharedSchedule";
+
+function renderSharedSchedule(path: string) {
+	return render(
+		<MemoryRouter initialEntries={[path]}>
+			<Routes>
+				<Route path="/share/:token" element={<SharedSchedule />} />
+			</Routes>
+		</MemoryRouter>
+	);
+}
+
+function createSharedData(overrides: Record<string, unknown> = {}) {
+	const yesterday = new Date();
+	yesterday.setDate(yesterday.getDate() - 1);
+	yesterday.setHours(9, 0, 0, 0);
+
+	return {
+		sharedBy: "Owner",
+		takenBy: "Max",
+		scheduleDays: 30,
+		shareStockStatus: true,
+		shareScheduleTodayOnly: true,
+		stockCalculationMode: "automatic",
+		stockThresholds: {
+			lowStockDays: 7,
+			normalStockDays: 30,
+			highStockDays: 90,
+			reminderDaysBefore: 7,
+			expiryWarningDays: 30,
+		},
+		medications: [
+			{
+				id: 1,
+				name: "Ibuprofen",
+				genericName: "Ibu",
+				takenBy: ["Max"],
+				packageType: "blister",
+				packCount: 1,
+				blistersPerPack: 2,
+				pillsPerBlister: 10,
+				looseTablets: 0,
+				pillWeightMg: null,
+				doseUnit: "mg",
+				expiryDate: null,
+				notes: null,
+				intakeRemindersEnabled: false,
+				blisters: [{ usage: 1, every: 1, start: yesterday.toISOString() }],
+				intakes: [
+					{ usage: 1, every: 1, start: yesterday.toISOString(), takenBy: "Max", intakeRemindersEnabled: false },
+				],
+				updatedAt: null,
+				dismissedUntil: null,
+				lastStockCorrectionAt: null,
+			},
+		],
+		...overrides,
+	};
+}
+
+describe("SharedSchedule today-only", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		window.localStorage.clear();
+		vi.spyOn(globalThis, "setInterval").mockImplementation(() => 1 as unknown as ReturnType<typeof setInterval>);
+		vi.spyOn(globalThis, "clearInterval").mockImplementation(() => {});
+	});
+
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it("hides past and future sections when shareScheduleTodayOnly is enabled", async () => {
+		const sharedData = createSharedData();
+
+		(globalThis.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
+			if (url === "/api/share/token-123/doses" && (!init || !init.method || init.method === "GET")) {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve(sharedData) });
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		expect(document.querySelector(".day-block.today")).toBeInTheDocument();
+		expect(document.querySelector(".past-days-toggle")).not.toBeInTheDocument();
+		expect(document.querySelector(".future-days-toggle")).not.toBeInTheDocument();
+	});
+});

frontend/src/test/hooks/useRefill.test.ts

@@ -198,8 +198,36 @@ describe("useRefill", () => {
 
 		expect(result.current.showEditStockModal).toBe(true);
 		expect(window.history.pushState).toHaveBeenCalledWith({ modal: "editStock" }, "");
-		expect(result.current.editStockFullBlisters).toBe(2); // 20 / 10 = 2
+		expect(result.current.editStockFullBlisters).toBe(1); // (20 - 5 loose) / 10 = 1
-		expect(result.current.editStockPartialBlisterPills).toBe(0); // 20 % 10 = 0
+		expect(result.current.editStockPartialBlisterPills).toBe(5); // (20 - 5 loose) % 10 = 5
+		expect(result.current.editStockLoosePills).toBe(5); // loose pills are tracked separately
+	});
+
+	it("prefills bottle correction with total pills in partial field", () => {
+		const { result } = renderHook(() => useRefill());
+
+		const bottleMed: Medication = {
+			id: 4,
+			name: "Bottle Test",
+			packageType: "bottle",
+			packCount: 1,
+			blistersPerPack: 1,
+			pillsPerBlister: 1,
+			looseTablets: 150,
+			stockAdjustment: -2,
+			takenBy: [],
+			blisters: [{ usage: 1, every: 1, start: "2026-01-31T20:27:00" }],
+			updatedAt: null,
+		};
+
+		act(() => {
+			result.current.openEditStockModal(bottleMed, {
+				all: [{ name: "Bottle Test", medsLeft: 148, daysLeft: 148 }] as Coverage[],
+			});
+		});
+
+		expect(result.current.editStockFullBlisters).toBe(0);
+		expect(result.current.editStockPartialBlisterPills).toBe(148);
 	});
 
 	it("closes edit stock modal using history back", () => {
@@ -319,24 +347,23 @@ describe("useRefill", () => {
 		const mockLoadMeds = vi.fn();
 		const { result } = renderHook(() => useRefill());
 
-		// Pre-fill: user sees 148 pills (148 / 1 = 148 full, 0 partial)
+		// Pre-fill for bottle: full=0, partial=current total
 		act(() => {
 			result.current.openEditStockModal(bottleMed, {
 				all: [{ name: "Pills in a Box", medsLeft: 148, daysLeft: 148 }] as Coverage[],
 			});
 		});
 
-		// User adds +1 → 149 full blisters (pillsPerBlister=1)
+		// User sets total to 149 pills.
 		act(() => {
-			result.current.setEditStockFullBlisters(149);
+			result.current.setEditStockPartialBlisterPills(149);
-			result.current.setEditStockPartialBlisterPills(0);
 		});
 
 		await act(async () => {
 			await result.current.submitStockCorrection(4, bottleMed, mockLoadMeds);
 		});
 
-		// desiredTotal = 149 * 1 + 0 = 149
+		// desiredTotal = 149
 		// baseTotal (fixed) = getPackageSize(bottle) = looseTablets = 150
 		// newStockAdjustment = 149 - 150 = -1
 		// → getMedTotal = 150 + (-1) = 149 ✓
@@ -348,8 +375,8 @@ describe("useRefill", () => {
 		expect(body.stockAdjustment).toBe(-1); // NOT -2 (the old bug)
 	});
 
-	it("stock correction uses correct base for blister type medications", async () => {
+	it("stock correction clamps blister totals to package size", async () => {
-		// Ensure blister type still works correctly after the bottle fix
+		// Ensure blister correction enforces configured package max.
 		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({ ok: true });
 
 		const blisterMed: Medication = {
@@ -379,7 +406,7 @@ describe("useRefill", () => {
 			});
 		});
 
-		// User changes to 27 (+1): 5 full + 2 partial
+		// User attempts to set 27 (+1): 5 full + 2 partial.
 		act(() => {
 			result.current.setEditStockFullBlisters(5);
 			result.current.setEditStockPartialBlisterPills(2);
@@ -389,16 +416,132 @@ describe("useRefill", () => {
 			await result.current.submitStockCorrection(2, blisterMed, mockLoadMeds);
 		});
 
-		// desiredTotal = 5 * 5 + 2 = 27
+		// desiredTotal is capped to package max (25)
-		// baseTotal = getPackageSize(blister) = 1*5*5 + 0 = 25
+		// baseTotal = getPackageSize(blister) = 25
-		// newStockAdjustment = 27 - 25 = 2
+		// newStockAdjustment = 25 - 25 = 0
-		// → getMedTotal = 25 + 2 = 27 ✓
 		const fetchCall = (global.fetch as ReturnType<typeof vi.fn>).mock.calls.find(
 			(call: [string, RequestInit]) => call[0] === "/api/medications/2/stock-adjustment"
 		);
 		expect(fetchCall).toBeDefined();
 		const body = JSON.parse(fetchCall![1].body as string);
-		expect(body.stockAdjustment).toBe(2);
+		expect(body.stockAdjustment).toBe(0);
+	});
+
+	it("stock correction allows loose pills beyond package size", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({ ok: true });
+
+		const blisterMed: Medication = {
+			id: 5,
+			name: "Loose Friendly",
+			packageType: "blister",
+			packCount: 1,
+			blistersPerPack: 2,
+			pillsPerBlister: 10,
+			looseTablets: 0,
+			stockAdjustment: 0,
+			takenBy: [],
+			blisters: [{ usage: 1, every: 1, start: "2026-01-30T21:07:00" }],
+			updatedAt: null,
+		};
+
+		const mockLoadMeds = vi.fn();
+		const { result } = renderHook(() => useRefill());
+
+		act(() => {
+			result.current.openEditStockModal(blisterMed, {
+				all: [{ name: "Loose Friendly", medsLeft: 0, daysLeft: 0 }] as Coverage[],
+			});
+			// sealed package part at max (20), loose adds +7 beyond max
+			result.current.setEditStockFullBlisters(2);
+			result.current.setEditStockPartialBlisterPills(0);
+			result.current.setEditStockLoosePills(7);
+		});
+
+		await act(async () => {
+			await result.current.submitStockCorrection(5, blisterMed, mockLoadMeds);
+		});
+
+		const fetchCall = (global.fetch as ReturnType<typeof vi.fn>).mock.calls.find(
+			(call: [string, RequestInit]) => call[0] === "/api/medications/5/stock-adjustment"
+		);
+		expect(fetchCall).toBeDefined();
+		const body = JSON.parse(fetchCall![1].body as string);
+		// NEW: baseTotal = structuralMax + finalLoosePills = 20 + 7 = 27; desiredTotal = 27 => stockAdjustment=0
+		// looseTablets is sent separately so DB reflects the actual loose count after correction
+		expect(body.stockAdjustment).toBe(0);
+		expect(body.looseTablets).toBe(7);
+	});
+
+	it("stock correction carries partial overflow into full blisters", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({ ok: true });
+
+		const blisterMed: Medication = {
+			id: 6,
+			name: "Carry Partial",
+			packageType: "blister",
+			packCount: 11,
+			blistersPerPack: 5,
+			pillsPerBlister: 5,
+			looseTablets: 2,
+			stockAdjustment: -223,
+			takenBy: [],
+			blisters: [{ usage: 1, every: 1, start: "2026-01-30T21:07:00" }],
+			updatedAt: null,
+		};
+
+		const mockLoadMeds = vi.fn();
+		const { result } = renderHook(() => useRefill());
+
+		act(() => {
+			result.current.openEditStockModal(blisterMed, {
+				all: [{ name: "Carry Partial", medsLeft: 54, daysLeft: 54 }] as Coverage[],
+			});
+			// 10 full + 5 partial + 2 loose should canonicalize to 11 full + 0 partial + 2 loose => 57
+			result.current.setEditStockFullBlisters(10);
+			result.current.setEditStockPartialBlisterPills(5);
+			result.current.setEditStockLoosePills(2);
+		});
+
+		await act(async () => {
+			await result.current.submitStockCorrection(6, blisterMed, mockLoadMeds);
+		});
+
+		const fetchCall = (global.fetch as ReturnType<typeof vi.fn>).mock.calls.find(
+			(call: [string, RequestInit]) => call[0] === "/api/medications/6/stock-adjustment"
+		);
+		expect(fetchCall).toBeDefined();
+		const body = JSON.parse(fetchCall![1].body as string);
+		// baseTotal = structuralMax + finalLoosePills = 275 + 2 = 277; desiredTotal = 57 => stockAdjustment = -220
+		expect(body.stockAdjustment).toBe(-220);
+		expect(body.looseTablets).toBe(2);
+	});
+
+	it("prefill keeps loose pills separate from partial blister pills", () => {
+		const blisterMed: Medication = {
+			id: 7,
+			name: "Loose Separate",
+			packageType: "blister",
+			packCount: 11,
+			blistersPerPack: 5,
+			pillsPerBlister: 5,
+			looseTablets: 2,
+			stockAdjustment: -223,
+			takenBy: [],
+			blisters: [{ usage: 1, every: 1, start: "2026-01-30T21:07:00" }],
+			updatedAt: null,
+		};
+
+		const { result } = renderHook(() => useRefill());
+
+		act(() => {
+			result.current.openEditStockModal(blisterMed, {
+				all: [{ name: "Loose Separate", medsLeft: 54, daysLeft: 54 }] as Coverage[],
+			});
+		});
+
+		expect(result.current.editStockFullBlisters).toBe(10);
+		expect(result.current.editStockPartialBlisterPills).toBe(2);
+		expect(result.current.editStockLoosePills).toBe(2);
 	});
 
 	it("allows setting state directly", () => {

frontend/src/test/pages/DashboardPage.test.tsx

@@ -116,6 +116,20 @@ const mockPastDays = [
 	},
 ];
 
+const mockTodayDay = {
+	dateStr: "Today",
+	date: new Date(),
+	isPast: false,
+	meds: [
+		{
+			medName: "Aspirin",
+			total: 1,
+			doses: [{ id: `1-0-${Date.now() + 60_000}`, timeStr: "09:00", when: Date.now() + 60_000, usage: 1, takenBy: [] }],
+			lastWhen: Date.now() + 60_000,
+		},
+	],
+};
+
 // Default mock factory
 const createMockAppContext = (overrides = {}) => ({
 	meds: [],
@@ -133,6 +147,8 @@ const createMockAppContext = (overrides = {}) => ({
 		lastAutoEmailSent: null,
 		lastNotificationType: null,
 		lastNotificationChannel: null,
+		upcomingTodayOnly: false,
+		shareScheduleTodayOnly: false,
 	},
 	scheduleDays: 30,
 	setScheduleDays: vi.fn(),
@@ -494,6 +510,33 @@ describe("DashboardPage interactions", () => {
 		fireEvent.change(select, { target: { value: "90" } });
 		expect(setScheduleDays).toHaveBeenCalledWith(90);
 	});
+
+	it("hides past and future sections when upcomingTodayOnly is enabled", () => {
+		mockContextValue = createMockAppContext({
+			settings: {
+				...createMockAppContext().settings,
+				upcomingTodayOnly: true,
+			},
+			showPastDays: true,
+			showFutureDays: true,
+			pastDays: mockPastDays,
+			todayDay: mockTodayDay,
+			futureDays: mockFutureDays,
+			meds: mockMeds,
+			coverage: mockCoverage,
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		expect(document.querySelector(".day-block.today")).toBeInTheDocument();
+		expect(document.querySelector(".past-days-toggle")).not.toBeInTheDocument();
+		expect(document.querySelector(".future-days-toggle")).not.toBeInTheDocument();
+		expect(document.querySelector(".day-block.past")).not.toBeInTheDocument();
+	});
 });
 
 describe("DashboardPage structure", () => {
@@ -607,9 +650,10 @@ describe("DashboardPage with medications", () => {
 			</MemoryRouter>
 		);
 
-		// Aspirin has notes
+		// Aspirin has notes and reminders.
 		const notesIcons = document.querySelectorAll(".notes-icon");
 		expect(notesIcons.length).toBeGreaterThan(0);
+		expect(document.querySelectorAll(".notes-icon svg").length).toBeGreaterThan(0);
 	});
 
 	it("renders schedule timeline with future doses", () => {

frontend/src/test/pages/MedicationsPage.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MedicationsPage } from "../../pages/MedicationsPage";
@@ -119,6 +119,7 @@ const createMockFormHook = (overrides = {}) => ({
 
 let mockContextValue = createMockContext();
 let mockFormHookValue = createMockFormHook();
+const fetchMock = vi.fn();
 
 vi.mock("../../hooks", () => ({
 	useMedicationForm: () => mockFormHookValue,
@@ -138,9 +139,50 @@ vi.mock("../../components/Auth", () => ({
 	useAuth: () => ({ user: { id: 1, username: "testuser" }, isAuthenticated: true }),
 }));
 
-function renderPage() {
+vi.mock("../../components", async () => {
+	const actual = await vi.importActual<typeof import("../../components")>("../../components");
+	return {
+		...actual,
+		MedicationAvatar: ({ name }: { name: string }) => <span data-testid={`avatar-${name}`}></span>,
+		DateInput: ({ value, onChange }: { value: string; onChange: (e: { target: { value: string } }) => void }) => (
+			<input value={value} onChange={onChange} />
+		),
+		Lightbox: () => null,
+		ConfirmModal: ({
+			title,
+			message,
+			confirmLabel,
+			cancelLabel,
+			onConfirm,
+			onCancel,
+		}: {
+			title: string;
+			message: string;
+			confirmLabel: string;
+			cancelLabel: string;
+			onConfirm: () => void;
+			onCancel: () => void;
+		}) => (
+			<div data-testid="confirm-modal">
+				<h3>{title}</h3>
+				<p>{message}</p>
+				<button type="button" onClick={onConfirm}>
+					{confirmLabel}
+				</button>
+				<button type="button" onClick={onCancel}>
+					{cancelLabel}
+				</button>
+			</div>
+		),
+		MobileEditModal: () => null,
+		ReportModal: ({ isOpen }: { isOpen: boolean }) =>
+			isOpen ? <div data-testid="report-modal-open">Report Modal</div> : null,
+	};
+});
+
+function renderPage(initialEntry = "/medications") {
 	render(
-		<MemoryRouter>
+		<MemoryRouter initialEntries={[initialEntry]}>
 			<MedicationsPage />
 		</MemoryRouter>
 	);
@@ -157,6 +199,9 @@ describe("MedicationsPage", () => {
 		vi.clearAllMocks();
 		mockContextValue = createMockContext();
 		mockFormHookValue = createMockFormHook();
+		Object.defineProperty(window, "innerWidth", { value: 1200, writable: true });
+		fetchMock.mockResolvedValue({ ok: true, json: async () => [] });
+		vi.stubGlobal("fetch", fetchMock);
 	});
 
 	it("renders list-first view with new button", () => {
@@ -179,11 +224,32 @@ describe("MedicationsPage", () => {
 		const submit = document.querySelector('button[type="submit"]');
 		expect(submit).toBeInTheDocument();
 	});
+
+	it("switches desktop form tabs", () => {
+		renderPage();
+		openNewMedicationForm();
+
+		const stockTab = screen.getByRole("tab", { name: "form.sections.stock" });
+		const scheduleTab = screen.getByRole("tab", { name: "form.sections.schedule" });
+
+		fireEvent.click(stockTab);
+		expect(stockTab).toHaveAttribute("aria-selected", "true");
+
+		fireEvent.click(scheduleTab);
+		expect(scheduleTab).toHaveAttribute("aria-selected", "true");
+	});
+
+	it("opens report modal from list actions", () => {
+		renderPage();
+		fireEvent.click(screen.getByText("report.button"));
+		expect(screen.getByTestId("report-modal-open")).toBeInTheDocument();
+	});
 });
 
 describe("MedicationsPage with items", () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
+		localStorage.clear();
 		mockContextValue = createMockContext({ meds: mockMeds });
 		mockFormHookValue = createMockFormHook();
 	});
@@ -198,12 +264,123 @@ describe("MedicationsPage with items", () => {
 	it("calls startEdit from list action", () => {
 		const startEdit = vi.fn();
 		mockFormHookValue = createMockFormHook({ startEdit });
+		fetchMock.mockResolvedValue({ ok: true, json: async () => mockMeds });
 		renderPage();
 		const editButton = document.querySelector(".med-actions .info") as HTMLButtonElement | null;
 		expect(editButton).toBeInTheDocument();
 		fireEvent.click(editButton as HTMLButtonElement);
 		expect(startEdit).toHaveBeenCalledTimes(1);
 	});
+
+	it("opens edit flow from editMedId query parameter", async () => {
+		const startEdit = vi.fn();
+		mockFormHookValue = createMockFormHook({ startEdit });
+		fetchMock.mockResolvedValue({ ok: true, json: async () => mockMeds });
+
+		renderPage("/medications?editMedId=1");
+
+		await waitFor(() => {
+			expect(startEdit).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	it("opens unsaved confirm and continues edit after confirmation", async () => {
+		const startEdit = vi.fn();
+		const resetForm = vi.fn();
+		mockContextValue = createMockContext({
+			meds: mockMeds,
+			coverageByMed: {
+				Aspirin: { medsLeft: 12.4 },
+			},
+		});
+		mockFormHookValue = createMockFormHook({
+			formChanged: true,
+			startEdit,
+			resetForm,
+		});
+
+		renderPage();
+		const editButton = document.querySelector(".med-actions .info") as HTMLButtonElement;
+		fireEvent.click(editButton);
+
+		expect(screen.getByTestId("confirm-modal")).toBeInTheDocument();
+		fireEvent.click(screen.getByText("common.unsavedChanges.leave"));
+
+		await waitFor(() => {
+			expect(resetForm).toHaveBeenCalledTimes(1);
+			expect(startEdit).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	it("marks medication obsolete after confirmation", async () => {
+		mockContextValue = createMockContext({ meds: mockMeds });
+		fetchMock.mockImplementation((url: string) => {
+			if (url === "/api/medications/1/obsolete") {
+				return Promise.resolve({ ok: true, json: async () => ({}) });
+			}
+			if (url === "/api/medications?includeObsolete=true") {
+				return Promise.resolve({ ok: true, json: async () => mockMeds });
+			}
+			return Promise.resolve({ ok: true, json: async () => [] });
+		});
+
+		renderPage();
+		fireEvent.click(screen.getByText("medications.list.markObsolete"));
+		expect(screen.getByTestId("confirm-modal")).toBeInTheDocument();
+
+		const confirmButtons = screen.getAllByText("medications.list.markObsolete");
+		fireEvent.click(confirmButtons[confirmButtons.length - 1]);
+
+		await waitFor(() => {
+			expect(fetchMock).toHaveBeenCalledWith("/api/medications/1/obsolete", {
+				method: "POST",
+				credentials: "include",
+			});
+		});
+	});
+
+	it("reactivates obsolete medication from obsolete section", async () => {
+		const obsoleteMed = { ...mockMeds[0], id: 2, isObsolete: true, obsoleteAt: "2025-01-01T00:00:00Z" };
+		mockContextValue = createMockContext({ meds: [obsoleteMed] });
+		fetchMock.mockImplementation((url: string) => {
+			if (url === "/api/medications/2/reactivate") {
+				return Promise.resolve({ ok: true, json: async () => ({}) });
+			}
+			if (url === "/api/medications?includeObsolete=true") {
+				return Promise.resolve({ ok: true, json: async () => [obsoleteMed] });
+			}
+			return Promise.resolve({ ok: true, json: async () => [] });
+		});
+
+		renderPage();
+		fireEvent.click(screen.getByText("medications.list.reactivate"));
+
+		await waitFor(() => {
+			expect(fetchMock).toHaveBeenCalledWith("/api/medications/2/reactivate", {
+				method: "POST",
+				credentials: "include",
+			});
+		});
+	});
+
+	it("toggles obsolete section visibility and persists state", async () => {
+		const obsoleteMed = { ...mockMeds[0], id: 2, isObsolete: true, obsoleteAt: "2025-01-01T00:00:00Z" };
+		mockContextValue = createMockContext({ meds: [obsoleteMed] });
+
+		renderPage();
+		expect(screen.getByText("medications.list.reactivate")).toBeInTheDocument();
+
+		const obsoleteToggleButton = document.querySelector(".med-group-head-toggle") as HTMLButtonElement;
+		expect(obsoleteToggleButton).toBeInTheDocument();
+		fireEvent.click(obsoleteToggleButton);
+
+		await waitFor(() => {
+			expect(screen.queryByText("medications.list.reactivate")).not.toBeInTheDocument();
+		});
+
+		fireEvent.click(obsoleteToggleButton);
+		expect(screen.getByText("medications.list.reactivate")).toBeInTheDocument();
+	});
 });
 
 describe("MedicationsPage form interactions", () => {
@@ -225,4 +402,19 @@ describe("MedicationsPage form interactions", () => {
 		fireEvent.change(nameInput as HTMLInputElement, { target: { value: "Test Med" } });
 		expect(handleValueChange).toHaveBeenCalled();
 	});
+
+	it("opens mobile edit flow when creating new entry on mobile viewport", () => {
+		const resetForm = vi.fn();
+		mockFormHookValue = createMockFormHook({
+			resetForm,
+		});
+		Object.defineProperty(window, "innerWidth", { value: 375, writable: true });
+		const pushStateSpy = vi.spyOn(window.history, "pushState");
+
+		renderPage();
+		openNewMedicationForm();
+
+		expect(resetForm).toHaveBeenCalledTimes(1);
+		expect(pushStateSpy).toHaveBeenCalledWith({ modal: "edit" }, "");
+	});
 });

frontend/src/test/pages/SettingsPage.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { SettingsPage } from "../../pages/SettingsPage";
@@ -91,11 +92,53 @@ const createMockContext = (overrides = {}) => ({
 });
 
 let mockContextValue = createMockContext();
+const fetchMock = vi.fn();
 
 vi.mock("../../context", () => ({
 	useAppContext: () => mockContextValue,
 }));
 
+interface MockConfirmModalProps {
+	title: string;
+	message: ReactNode;
+	confirmLabel: string;
+	cancelLabel: string;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+interface MockExportModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	onExport: () => void;
+}
+
+vi.mock("../../components", () => ({
+	ConfirmModal: ({ title, message, confirmLabel, cancelLabel, onConfirm, onCancel }: MockConfirmModalProps) => (
+		<div>
+			<div>{title}</div>
+			<div>{message}</div>
+			<button type="button" onClick={onConfirm}>
+				{confirmLabel}
+			</button>
+			<button type="button" onClick={onCancel}>
+				{cancelLabel}
+			</button>
+		</div>
+	),
+	ExportModal: ({ isOpen, onClose, onExport }: MockExportModalProps) =>
+		isOpen ? (
+			<div>
+				<button type="button" onClick={onExport}>
+					export-modal-export
+				</button>
+				<button type="button" onClick={onClose}>
+					export-modal-close
+				</button>
+			</div>
+		) : null,
+}));
+
 function renderPage() {
 	render(
 		<MemoryRouter>
@@ -108,6 +151,8 @@ describe("SettingsPage", () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
 		mockContextValue = createMockContext();
+		fetchMock.mockResolvedValue({ ok: true, json: async () => ({}) });
+		vi.stubGlobal("fetch", fetchMock);
 	});
 
 	it("renders settings form container", () => {
@@ -115,6 +160,12 @@ describe("SettingsPage", () => {
 		expect(document.querySelector(".settings-form")).toBeInTheDocument();
 	});
 
+	it("renders loading text while settings are loading", () => {
+		mockContextValue = createMockContext({ settingsLoading: true });
+		renderPage();
+		expect(screen.getByText("settings.loading")).toBeInTheDocument();
+	});
+
 	it("renders major sections", () => {
 		renderPage();
 		expect(screen.getByText(/settings\.language\.title/i)).toBeInTheDocument();
@@ -129,6 +180,177 @@ describe("SettingsPage", () => {
 		expect(select).toBeInTheDocument();
 		fireEvent.change(select as HTMLSelectElement, { target: { value: "de" } });
 		expect(changeLanguageMock).toHaveBeenCalledWith("de");
+		expect(fetchMock).toHaveBeenCalledWith("/api/settings/language", expect.objectContaining({ method: "PUT" }));
+	});
+
+	it("updates timeline toggles through setSettings", () => {
+		const setSettings = vi.fn();
+		mockContextValue = createMockContext({
+			setSettings,
+			settings: {
+				...createMockContext().settings,
+				swapDashboardMainSections: false,
+				upcomingTodayOnly: false,
+				shareScheduleTodayOnly: false,
+			},
+		});
+
+		renderPage();
+
+		const swapRow = screen.getByText("settings.timeline.swapDashboardSections").closest(".setting-row");
+		const upcomingRow = screen.getByText("settings.timeline.upcomingTodayOnly").closest(".setting-row");
+		const sharedRow = screen.getByText("settings.timeline.shareScheduleTodayOnly").closest(".setting-row");
+
+		const swapToggle = swapRow?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+		const upcomingToggle = upcomingRow?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+		const sharedToggle = sharedRow?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+
+		expect(swapToggle).toBeInTheDocument();
+		expect(upcomingToggle).toBeInTheDocument();
+		expect(sharedToggle).toBeInTheDocument();
+
+		fireEvent.click(swapToggle);
+		fireEvent.click(upcomingToggle);
+		fireEvent.click(sharedToggle);
+
+		expect(setSettings).toHaveBeenCalledWith(expect.objectContaining({ swapDashboardMainSections: true }));
+		expect(setSettings).toHaveBeenCalledWith(expect.objectContaining({ upcomingTodayOnly: true }));
+		expect(setSettings).toHaveBeenCalledWith(expect.objectContaining({ shareScheduleTodayOnly: true }));
+	});
+
+	it("updates share stock status toggle through setSettings", () => {
+		const setSettings = vi.fn();
+		mockContextValue = createMockContext({
+			setSettings,
+			settings: {
+				...createMockContext().settings,
+				shareStockStatus: false,
+			},
+		});
+
+		renderPage();
+
+		const shareStockRow = screen.getByText("settings.stock.shareStockStatus").closest(".setting-row");
+		const shareStockToggle = shareStockRow?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+		expect(shareStockToggle).toBeInTheDocument();
+
+		fireEvent.click(shareStockToggle);
+
+		expect(setSettings).toHaveBeenCalledWith(expect.objectContaining({ shareStockStatus: true }));
+	});
+
+	it("opens export modal when export action is clicked", () => {
+		const setShowExportModal = vi.fn();
+		mockContextValue = createMockContext({ setShowExportModal });
+
+		renderPage();
+		fireEvent.click(screen.getByText("exportImport.export"));
+
+		expect(setShowExportModal).toHaveBeenCalledWith(true);
+	});
+
+	it("triggers export modal close callback", () => {
+		const setShowExportModal = vi.fn();
+		mockContextValue = createMockContext({
+			showExportModal: true,
+			setShowExportModal,
+		});
+
+		renderPage();
+		fireEvent.click(screen.getByText("export-modal-close"));
+
+		expect(setShowExportModal).toHaveBeenCalledWith(false);
+	});
+
+	it("triggers export modal export callback", () => {
+		const handleExport = vi.fn();
+		mockContextValue = createMockContext({
+			showExportModal: true,
+			handleExport,
+		});
+
+		renderPage();
+		fireEvent.click(screen.getByText("export-modal-export"));
+
+		expect(handleExport).toHaveBeenCalledTimes(1);
+	});
+
+	it("calls testEmail when email test button is clicked", () => {
+		const testEmail = vi.fn();
+		mockContextValue = createMockContext({
+			testEmail,
+			settings: {
+				...createMockContext().settings,
+				smtpHost: "smtp.example.com",
+				emailEnabled: true,
+				notificationEmail: "a@example.com",
+			},
+		});
+
+		renderPage();
+		fireEvent.click(screen.getByText("common.test"));
+		expect(testEmail).toHaveBeenCalledTimes(1);
+	});
+
+	it("calls testShoutrrr when push test button is clicked", () => {
+		const testShoutrrr = vi.fn();
+		mockContextValue = createMockContext({
+			testShoutrrr,
+			settings: {
+				...createMockContext().settings,
+				shoutrrrEnabled: true,
+				shoutrrrUrl: "https://ntfy.sh/topic",
+			},
+		});
+
+		renderPage();
+		const testButtons = screen.getAllByText("common.test");
+		fireEvent.click(testButtons[testButtons.length - 1]);
+		expect(testShoutrrr).toHaveBeenCalledTimes(1);
+	});
+
+	it("clears import success banner when close is clicked", () => {
+		const setImportResult = vi.fn();
+		mockContextValue = createMockContext({
+			setImportResult,
+			importResult: {
+				medications: 1,
+				doses: 2,
+				refills: 3,
+				shares: 4,
+			},
+		});
+
+		renderPage();
+		fireEvent.click(screen.getByRole("button", { name: "common.close" }));
+		expect(setImportResult).toHaveBeenCalledWith(null);
+	});
+
+	it("opens hidden import file input when import action is clicked", () => {
+		renderPage();
+
+		const importInput = document.getElementById("import-file-input") as HTMLInputElement;
+		const clickSpy = vi.spyOn(importInput, "click");
+
+		fireEvent.click(screen.getByText("exportImport.import"));
+
+		expect(clickSpy).toHaveBeenCalledTimes(1);
+	});
+
+	it("cancels import confirm and clears pending import", () => {
+		const setShowImportConfirm = vi.fn();
+		const setPendingImportData = vi.fn();
+		mockContextValue = createMockContext({
+			setShowImportConfirm,
+			setPendingImportData,
+			showImportConfirm: true,
+			meds: [{ id: 1 }],
+		});
+
+		renderPage();
+		fireEvent.click(screen.getByText("exportImport.cancelButton"));
+		expect(setShowImportConfirm).toHaveBeenCalledWith(false);
+		expect(setPendingImportData).toHaveBeenCalledWith(null);
 	});
 
 	it("renders notification matrix with toggle switches", () => {
@@ -152,4 +374,72 @@ describe("SettingsPage", () => {
 		expect(modeGroup).toBeInTheDocument();
 		expect(modeGroup?.querySelectorAll(".radio-card").length).toBe(2);
 	});
+
+	it("renders threshold validation message when critical/low/high order is invalid", () => {
+		mockContextValue = createMockContext({
+			settings: {
+				...createMockContext().settings,
+				reminderDaysBefore: 30,
+				lowStockDays: 20,
+				highStockDays: 10,
+			},
+		});
+
+		renderPage();
+		expect(screen.getByText("settings.stock.thresholdValidation")).toBeInTheDocument();
+	});
+
+	it("renders email and push test result messages", () => {
+		mockContextValue = createMockContext({
+			settings: {
+				...createMockContext().settings,
+				emailEnabled: true,
+				notificationEmail: "a@example.com",
+				smtpHost: "smtp.example.com",
+				shoutrrrEnabled: true,
+				shoutrrrUrl: "https://ntfy.sh/topic",
+			},
+			testEmailResult: { success: true, message: "email ok" },
+			testShoutrrrResult: { success: false, message: "push failed" },
+		});
+
+		renderPage();
+		expect(screen.getByText("email ok")).toBeInTheDocument();
+		expect(screen.getByText("push failed")).toBeInTheDocument();
+	});
+
+	it("renders import confirm for existing data and handles confirm", () => {
+		const handleImportConfirm = vi.fn();
+		mockContextValue = createMockContext({
+			handleImportConfirm,
+			showImportConfirm: true,
+			meds: [{ id: 1 }],
+		});
+
+		renderPage();
+		expect(screen.getByText("exportImport.confirmImport")).toBeInTheDocument();
+		expect(screen.getByText(/exportImport\.confirmImportWarning/i)).toBeInTheDocument();
+
+		fireEvent.click(screen.getByText("exportImport.confirmButton"));
+		expect(handleImportConfirm).toHaveBeenCalledTimes(1);
+	});
+
+	it("renders import confirm for empty state and handles cancel", () => {
+		const setShowImportConfirm = vi.fn();
+		const setPendingImportData = vi.fn();
+		mockContextValue = createMockContext({
+			setShowImportConfirm,
+			setPendingImportData,
+			showImportConfirm: true,
+			meds: [],
+		});
+
+		renderPage();
+		expect(screen.getByText("exportImport.confirmImportEmpty")).toBeInTheDocument();
+		expect(screen.getByText("exportImport.confirmImportEmptyMessage")).toBeInTheDocument();
+
+		fireEvent.click(screen.getByText("exportImport.cancelButton"));
+		expect(setShowImportConfirm).toHaveBeenCalledWith(false);
+		expect(setPendingImportData).toHaveBeenCalledWith(null);
+	});
 });

frontend/src/test/utils/logger.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it, vi } from "vitest";
+
+type LoggerModule = typeof import("../../utils/logger");
+
+async function loadLogger(level?: string): Promise<LoggerModule["log"]> {
+	vi.resetModules();
+	if (typeof level === "string") {
+		Object.defineProperty(globalThis, "__LOG_LEVEL__", {
+			value: level,
+			configurable: true,
+			writable: true,
+		});
+	} else {
+		Reflect.deleteProperty(globalThis, "__LOG_LEVEL__");
+	}
+	const mod = await import("../../utils/logger");
+	return mod.log;
+}
+
+describe("frontend logger", () => {
+	it("defaults to warn threshold", async () => {
+		const debugSpy = vi.spyOn(console, "debug").mockImplementation(() => {});
+		const infoSpy = vi.spyOn(console, "info").mockImplementation(() => {});
+		const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+		const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+		const log = await loadLogger();
+		log.debug("d");
+		log.info("i");
+		log.warn("w");
+		log.error("e");
+
+		expect(debugSpy).not.toHaveBeenCalled();
+		expect(infoSpy).not.toHaveBeenCalled();
+		expect(warnSpy).toHaveBeenCalledWith("w");
+		expect(errorSpy).toHaveBeenCalledWith("e");
+	});
+
+	it("logs everything at debug level", async () => {
+		const debugSpy = vi.spyOn(console, "debug").mockImplementation(() => {});
+		const infoSpy = vi.spyOn(console, "info").mockImplementation(() => {});
+		const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+		const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+		const log = await loadLogger("debug");
+		log.debug("d");
+		log.info("i");
+		log.warn("w");
+		log.error("e");
+
+		expect(debugSpy).toHaveBeenCalledWith("d");
+		expect(infoSpy).toHaveBeenCalledWith("i");
+		expect(warnSpy).toHaveBeenCalledWith("w");
+		expect(errorSpy).toHaveBeenCalledWith("e");
+	});
+
+	it("suppresses all logs at silent level", async () => {
+		const debugSpy = vi.spyOn(console, "debug").mockImplementation(() => {});
+		const infoSpy = vi.spyOn(console, "info").mockImplementation(() => {});
+		const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+		const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+		const log = await loadLogger("silent");
+		log.debug("d");
+		log.info("i");
+		log.warn("w");
+		log.error("e");
+
+		expect(debugSpy).not.toHaveBeenCalled();
+		expect(infoSpy).not.toHaveBeenCalled();
+		expect(warnSpy).not.toHaveBeenCalled();
+		expect(errorSpy).not.toHaveBeenCalled();
+	});
+});

frontend/src/types/index.ts

@@ -215,6 +215,8 @@ export type SharedScheduleData = {
 	};
 	stockCalculationMode?: "automatic" | "manual";
 	shareStockStatus?: boolean;
+	upcomingTodayOnly?: boolean;
+	shareScheduleTodayOnly?: boolean;
 };
 
 export type ExpiredLinkData = {