abhishekbhakat/zhealth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign biomarker display as a vertical list with status indicators and scale bars

Browse Source
This commit is contained in:
abhishekbhakat
2025-12-20 12:57:33 +05:30
parent 69bc5675dc
commit 89815e7e21
2 changed files with 105 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/pages/Dashboard.tsx
View File

@@ -85,7 +85,7 @@ export function DashboardPage() {
}}
>
<div>
<span style={{ fontSize: '16px', fontWeight: 600 }}>{category.name}</span>
<span style={{ fontSize: '16px', fontWeight: 600, textTransform: 'uppercase' }}>{category.name}</span>
<span className="text-secondary text-sm" style={{ marginLeft: 'var(--space-sm)' }}>
({categoryBiomarkers.length} biomarkers)
</span>
@@ -102,15 +102,17 @@ export function DashboardPage() {
No biomarkers in this category
</p>
) : (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-xs)' }}>
<div className="biomarker-list">
{categoryBiomarkers.map(biomarker => (
<div
key={biomarker.id}
className="biomarker-chip"
title={`${biomarker.name} (${biomarker.unit})`}
>
<span className="biomarker-name">{biomarker.name}</span>
<span className="biomarker-unit">{biomarker.unit}</span>
<div key={biomarker.id} className="biomarker-row">
<div className="biomarker-dot" title="No data"></div>
<div className="biomarker-info">
<span className="biomarker-name">{biomarker.name}</span>
<span className="biomarker-unit">{biomarker.unit}</span>
</div>
<div className="biomarker-scale">
<div className="scale-bar placeholder"></div>
</div>
</div>
))}
</div>