From 6b6c20bdc3c38763ee58b7d5a1548004e71e19f3 Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Sat, 27 Dec 2025 15:19:14 +0100
Subject: [PATCH] feat(med-details): enhance medication detail display with
 current stock and package details

---
 frontend/src/App.tsx      | 38 +++++++++++++++++++++++++-------------
 frontend/src/i18n/de.json |  5 +++--
 frontend/src/i18n/en.json |  5 +++--
 frontend/src/styles.css   | 17 +++++++++++++++++
 4 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ccb76eb..dea79cc 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1966,6 +1966,7 @@ function AppContent() {
 								{(() => {
 									const medCoverage = coverage.all.find(c => c.name === selectedMed.name);
 									const currentStock = medCoverage ? Math.round(medCoverage.medsLeft) : selectedMed.count;
+									const totalStock = (selectedMed.packCount ?? 1) * (selectedMed.stripsPerPack ?? 1) * (selectedMed.tabsPerStrip ?? 1) + (selectedMed.looseTablets ?? 0);
 									const status = medCoverage ? getStockStatus(medCoverage.daysLeft, medCoverage.medsLeft, settings) : null;
 									const textClass = status?.className === "danger" ? "danger-text" : status?.className === "warning" ? "warning-text" : "";
 									const stock = getBlisterStock(
@@ -1984,6 +1985,18 @@ function AppContent() {
 										<span className="med-detail-label">{t('table.openBlister')}</span>
 										<span className={`med-detail-value ${textClass}`}>{formatOpenBlisterAndLoose(stock.openBlisterPills, stock.loosePills, selectedMed.tabsPerStrip ?? 1, t)}</span>
 									</div>
+									<div className="med-detail-item full-width">
+										<span className="med-detail-label">{t('modal.currentStock')}</span>
+										<span className={`med-detail-value ${textClass}`}>{currentStock} / {totalStock}</span>
+									</div>
+								</div>
+									);
+								})()}
+							</div>
+
+							<div className="med-detail-section">
+								<h3>{t('modal.packageDetails')}</h3>
+								<div className="med-detail-grid">
 									<div className="med-detail-item">
 										<span className="med-detail-label">{t('modal.packs')}</span>
 										<span className="med-detail-value">{selectedMed.packCount ?? 0}</span>
@@ -2002,15 +2015,15 @@ function AppContent() {
 											<span className="med-detail-value">{selectedMed.pillWeightMg} mg</span>
 										</div>
 									)}
-									<div className="med-detail-item">
-										<span className="med-detail-label">{t('modal.expiryDate')}</span>
-										<span className={`med-detail-value ${selectedMed.expiryDate && new Date(selectedMed.expiryDate) < new Date() ? 'danger-text' : ''}`}>
-											{selectedMed.expiryDate ? new Date(selectedMed.expiryDate).toLocaleDateString(i18n.language, { day: "2-digit", month: "short", year: "numeric" }) : "—"}
-										</span>
-									</div>
+									{selectedMed.expiryDate && (
+										<div className="med-detail-item">
+											<span className="med-detail-label">{t('modal.expiryDate')}</span>
+											<span className={`med-detail-value ${new Date(selectedMed.expiryDate) < new Date() ? 'danger-text' : ''}`}>
+												{new Date(selectedMed.expiryDate).toLocaleDateString(i18n.language, { day: "2-digit", month: "short", year: "numeric" })}
+											</span>
+										</div>
+									)}
 								</div>
-									);
-								})()}
 						</div>
 
 							{selectedMed.blisters.length > 0 && (
@@ -2034,7 +2047,10 @@ function AppContent() {
 								const status = getStockStatus(medCoverage.daysLeft, medCoverage.medsLeft, settings);
 								return (
 									<div className="med-detail-section">
-										<h3>{t('modal.coverageStatus')}</h3>
+										<h3 className="section-header-with-badge">
+											{t('modal.coverageStatus')}
+											<span className={`status-chip small ${status.className}`}>{t(status.label)}</span>
+										</h3>
 										<div className="med-detail-grid">
 											<div className="med-detail-item">
 												<span className="med-detail-label">{t('modal.daysLeft')}</span>
@@ -2044,10 +2060,6 @@ function AppContent() {
 												<span className="med-detail-label">{t('modal.runsOut')}</span>
 												<span className="med-detail-value">{medCoverage.depletionDate ?? "—"}</span>
 											</div>
-											<div className="med-detail-item full-width">
-												<span className="med-detail-label">{t('table.status')}</span>
-												<span className={`status-chip ${status.className}`}>{t(status.label)}</span>
-											</div>
 										</div>
 									</div>
 								);
diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json
index 31f34e1..935d813 100644
--- a/frontend/src/i18n/de.json
+++ b/frontend/src/i18n/de.json
@@ -186,8 +186,9 @@
   "modal": {
     "for": "für",
     "at": "um",
-    "stockInfo": "Bestandsinformationen",
-    "currentStock": "Aktueller Bestand",
+    "stockInfo": "Aktueller Bestand",
+    "packageDetails": "Packungsdetails",
+    "currentStock": "Tabletten",
     "packs": "Packungen",
     "blistersPerPack": "Blister/Packung",
     "pillsPerBlister": "Tabletten/Blister",
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 661c1ad..4681018 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -188,8 +188,9 @@
   "modal": {
     "for": "for",
     "at": "at",
-    "stockInfo": "Stock Information",
-    "currentStock": "Current Stock",
+    "stockInfo": "Current Stock",
+    "packageDetails": "Package Details",
+    "currentStock": "Pills",
     "packs": "Packs",
     "blistersPerPack": "Blisters/Pack",
     "pillsPerBlister": "Pills/Blister",
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 7f99ced..d9a033c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -2071,10 +2071,14 @@ textarea {
 
 .med-detail-section {
   margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .med-detail-section:last-child {
   margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
 }
 
 .med-detail-section h3 {
@@ -2085,6 +2089,19 @@ textarea {
   margin: 0 0 0.75rem;
 }
 
+.med-detail-section h3.section-header-with-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.med-detail-section h3 .status-chip.small {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.5rem;
+  text-transform: none;
+  letter-spacing: normal;
+}
+
 .med-detail-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);