Patrick/medassist-ng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(med-details): enhance medication detail display with current stock and package details

Browse Source
This commit is contained in:
Daniel Volz
2025-12-27 15:19:14 +01:00
parent 9ccb5b1f0f
commit 6b6c20bdc3
4 changed files with 48 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+25 -13
View File
@@ -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>
);
frontend/src/i18n/de.json
+3 -2
View File
@@ -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",
frontend/src/i18n/en.json
+3 -2
View File
@@ -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",
frontend/src/styles.css
+17
View File
@@ -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);