fix: align desktop intake labels and form field pairing (#368)

* fix: align desktop intake labels and form field pairing

* chore: align frontend lockfile version and include remaining local changes

.gitignore

@@ -82,5 +82,5 @@ Thumbs.db
 .claude/
 AGENTS.md
 docs/TECH_STACK.md
-doku
-plan
+doku/
+plan/

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "medassist-ng-backend",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "private": true,
   "type": "module",
   "scripts": {

doku/memory_notes.md

@@ -23,6 +23,51 @@ Use this block for each meaningful task:
 
 ## Entries
 
+### 2026-03-02 (lockfile version alignment + include remaining local changes in PR #368)
+
+- 🧩 Task: Fix accidental frontend lockfile version drift and include remaining local changes in the active PR.
+- ✅ Decisions:
+	- Corrected `frontend/package-lock.json` root/package version from `1.17.1` to `1.18.0` to match `frontend/package.json`.
+	- Kept `.gitignore` local diff and lockfile diff in the same active branch `fix/desktop-intake-label-parity` so they can be added to PR #368 together.
+- 📁 Files touched:
+	- `frontend/package-lock.json`
+	- `.gitignore`
+	- `doku/memory_notes.md`
+	- `doku/report.md`
+- 🔜 Follow-up/open points:
+	- Push updated commit to PR #368 and verify updated file set in the PR.
+
+### 2026-03-02 (schedule usage label follows selected intake unit)
+
+- 🧩 Task: Ensure liquid intake schedule label switches from ml to tsp/tbsp when intake unit is changed.
+- ✅ Decisions:
+	- Desktop schedule tab in `MedicationsPage` used a static `usageMl` label for `liquid_container`.
+	- Replaced static usage label with per-intake unit mapping (`ml`, `tsp`, `tbsp`) using existing i18n keys.
+	- Kept parity with `MobileEditModal`, which already had the correct per-intake label logic.
+- 📁 Files touched:
+	- `frontend/src/pages/MedicationsPage.tsx`
+	- `doku/memory_notes.md`
+	- `doku/report.md`
+- 🔜 Follow-up/open points:
+	- Optional: add/extend UI tests that assert label text updates after switching intake unit in desktop edit form.
+
+### 2026-03-02 (recover missing desktop form detail: date/package field alignment)
+
+- 🧩 Task: Restore missing desktop medication-form detail where date fields and package/form fields should be vertically paired.
+- ✅ Decisions:
+	- Confirmed secondary worktree had no frontend form edits; relevant data-loss signal was not from that worktree.
+	- Searched stash inventory and validated missing detail should be restored directly on `main`.
+	- Reordered `MedicationsPage` general-tab field sequence so layout pairs are stable in the two-column grid:
+		- left column: `Medication Start Date` then `Medication End Date`
+		- right column: `Package Type` then `Pill Form`/`Medication Form`
+	- Kept labels/i18n keys and behavior unchanged; this is layout-order only.
+- 📁 Files touched:
+	- `frontend/src/pages/MedicationsPage.tsx`
+	- `doku/memory_notes.md`
+	- `doku/report.md`
+- 🔜 Follow-up/open points:
+	- If desired, mirror identical visual grouping hints in mobile form (functional order is already consistent there).
+
 ### 2026-03-02 (PR #364 CI triage: frontend build + Playwright stable)
 
 - 🧩 Task: Diagnose and fix failing checks on `fix/frontend-tube-liquid-semantics-parity` for `Test/Frontend Build` and `E2E Tests/Playwright E2E Stable`.
@@ -3475,6 +3520,16 @@ Use this block for each meaningful task:
 - 🔜 Follow-up/open points:
 	- Full repo-wide frontend `npm run check` still reports unrelated pre-existing e2e formatting issues outside this scope.
 
+### 2026-03-02 (pre-PR frontend MedicationsPage label/order gate)
+
+- 🧩 Task: Validate local pre-PR quality gate for `frontend/src/pages/MedicationsPage.tsx` UI label/order updates.
+- ✅ Validation run:
+	- `cd frontend && npm run lint` -> passed (`npx biome check .` reported no issues).
+	- `cd frontend && CI=true npm run test:run -- src/test/utils/schedule.test.ts` -> passed (82/82).
+	- `cd frontend && PLAYWRIGHT_HTML_OPEN=never PLAYWRIGHT_WORKERS=1 npx playwright test e2e/medication-edit.spec.ts e2e/schedule.spec.ts --config=playwright.stable.config.ts --workers=1` -> passed (23/23).
+- 📌 Outcome:
+	- Local pre-PR gate for this scoped frontend change is PASS.
+
 ### 2026-02-27 (package types plan decision lock)
 
 - 🧩 Task: Capture user-approved decisions for lifecycle derivation and V1 scope in package type planning.

doku/report.md

@@ -25,6 +25,45 @@ For each task, add:
 ```
 ## Entries
 
+### 2026-03-02 (Fix: frontend lockfile version drift and PR scope completion)
+
+- **🧩 Scope**: Correct stale frontend lockfile metadata and include remaining local edits in active fix PR.
+- **🛠️ What changed**:
+  - Fixed `frontend/package-lock.json` root/package version from `1.17.1` to `1.18.0` to match `frontend/package.json`.
+  - Prepared remaining local edits (`.gitignore` trailing slash normalization and lockfile correction) to be added to PR `#368`.
+- **📁 Files touched**:
+  - `frontend/package-lock.json`
+  - `.gitignore`
+  - `doku/memory_notes.md`
+  - `doku/report.md`
+
+### 2026-03-02 (Fix: liquid usage label follows selected intake unit)
+
+- **🧩 Scope**: Medication edit schedule label for liquid intakes.
+- **🛠️ What changed**:
+  - Updated desktop intake schedule label logic in `MedicationsPage` so `Usage (...)` follows the selected intake unit:
+    - `ml` -> `Usage (ml)`
+    - `tsp` -> `Usage (tsp)`
+    - `tbsp` -> `Usage (tbsp)`
+  - This now matches existing mobile behavior and keeps allowed units exactly as requested (`ml`, `teaspoon`, `tablespoon`).
+- **📁 Files touched**:
+  - `frontend/src/pages/MedicationsPage.tsx`
+  - `doku/memory_notes.md`
+  - `doku/report.md`
+
+### 2026-03-02 (Recovery: desktop form field alignment restored)
+
+- **🧩 Scope**: Restore missing detail in desktop medication form layout.
+- **🛠️ What changed**:
+  - In `MedicationsPage` general tab, reordered form fields to enforce vertical pairing in the 2-column layout:
+    - left column: `Medication Start Date` above `Medication End Date`
+    - right column: `Package Type` above `Pill Form` (or `Medication Form` for tube/liquid container)
+  - No behavior or i18n text changes; order-only UI recovery.
+- **📁 Files touched**:
+  - `frontend/src/pages/MedicationsPage.tsx`
+  - `doku/memory_notes.md`
+  - `doku/report.md`
+
 ### 2026-03-02 (PR #364: fix failing Frontend Build + Playwright Stable checks)
 
 - **🧩 Scope**: Diagnose and fix CI failures on branch `fix/frontend-tube-liquid-semantics-parity` for:
@@ -2552,3 +2591,16 @@ For each task, add:
   - `doku/report.md`
 - **🔜 Follow-ups**:
   - Optional: run full repo-wide frontend check after existing unrelated E2E formatting diffs are cleaned up.
+
+## 2026-03-02 - Pre-PR Gate Validation (MedicationsPage label/order UI update)
+
+- Scope validated: `frontend/src/pages/MedicationsPage.tsx` (usage label selection by intake unit and medication end-date field order adjustment).
+- Commands executed:
+  - `cd frontend && npm run lint`
+  - `cd frontend && CI=true npm run test:run -- src/test/utils/schedule.test.ts`
+  - `cd frontend && PLAYWRIGHT_HTML_OPEN=never PLAYWRIGHT_WORKERS=1 npx playwright test e2e/medication-edit.spec.ts e2e/schedule.spec.ts --config=playwright.stable.config.ts --workers=1`
+- Results:
+  - Lint: PASS (`biome check` clean).
+  - Targeted frontend unit test: PASS (82 passed).
+  - Targeted frontend E2E tests: PASS (23 passed).
+- Gate decision: PASS for pre-PR local quality gate on this change scope.

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "medassist-ng-frontend",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "medassist-ng-frontend",
-      "version": "1.17.0",
+      "version": "1.18.0",
       "dependencies": {
         "i18next": "^25.8.13",
         "i18next-browser-languagedetector": "^8.2.1",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "medassist-ng-frontend",
   "private": true,
-  "version": "1.18.0",
+  "version": "1.18.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/pages/MedicationsPage.tsx

@@ -279,16 +279,21 @@ export function MedicationsPage() {
 		return form.pillForm === "tablet";
 	}, [form.packageType, form.medicationForm, form.pillForm]);
 
-	const usageLabel = useMemo(() => {
-		if (form.packageType === "liquid_container") {
-			return t("form.blisters.usageMl");
-		}
-		if (form.packageType === "tube") {
-			return form.medicationForm === "liquid" ? t("form.blisters.usageMl") : t("form.blisters.usageApplication");
-		}
-		if (form.pillForm === "capsule") return t("form.blisters.usageCapsules");
-		return t("form.blisters.usageTablets");
-	}, [form.packageType, form.medicationForm, form.pillForm, t]);
+	const getUsageLabel = useCallback(
+		(intakeUnit: "ml" | "tsp" | "tbsp") => {
+			if (form.packageType === "liquid_container") {
+				if (intakeUnit === "tsp") return t("form.blisters.usageTsp");
+				if (intakeUnit === "tbsp") return t("form.blisters.usageTbsp");
+				return t("form.blisters.usageMl");
+			}
+			if (form.packageType === "tube") {
+				return form.medicationForm === "liquid" ? t("form.blisters.usageMl") : t("form.blisters.usageApplication");
+			}
+			if (form.pillForm === "capsule") return t("form.blisters.usageCapsules");
+			return t("form.blisters.usageTablets");
+		},
+		[form.packageType, form.medicationForm, form.pillForm, t]
+	);
 
 	const usesAmountLabels = form.packageType === "tube" || form.packageType === "liquid_container";
 	const totalCapacityLabel = usesAmountLabels ? t("form.totalAmount") : t("form.totalCapacity");
@@ -1255,6 +1260,14 @@ export function MedicationsPage() {
 											<option value="liquid_container">{t("form.packageTypeLiquidContainer")}</option>
 										</select>
 									</label>
+									<label>
+										{t("form.medicationEndDate")}
+										<DateInput
+											value={form.medicationEndDate}
+											onChange={(e) => handleValueChange("medicationEndDate", e.target.value)}
+											placeholder={t("common.optional")}
+										/>
+									</label>
 									{form.packageType !== "tube" && form.packageType !== "liquid_container" && (
 										<label>
 											{t("form.pillForm")}
@@ -1283,14 +1296,6 @@ export function MedicationsPage() {
 											</select>
 										</label>
 									)}
-									<label>
-										{t("form.medicationEndDate")}
-										<DateInput
-											value={form.medicationEndDate}
-											onChange={(e) => handleValueChange("medicationEndDate", e.target.value)}
-											placeholder={t("common.optional")}
-										/>
-									</label>
 									{form.medicationEndDate && (
 										<label className="full">
 											{t("form.autoMarkObsoleteAfterEndDate")}
@@ -1703,7 +1708,7 @@ export function MedicationsPage() {
 										<div key={idx} className="blister-row">
 											<div className="blister-inputs">
 												<label>
-													{usageLabel}
+													{getUsageLabel(intake.intakeUnit)}
 													<FormNumberStepper
 														value={intake.usage}
 														onChange={(nextValue) => setIntakeValue(idx, "usage", nextValue)}