Skip to content

Commit 426792c

Browse files
yuvnaguptaclaude
yuvnagupta
and
claude
committed
Redesign Mölnlycke dashboard with map view and UI overhaul
- Remove sidebar, move branding to top bar - Add US map (Leaflet) showing hospital locations with bag count bubbles - Add 'Expiring Soon (<10d)' and 'Bags Saved' KPI cards (6 total) - Add amber row highlight + ⚠ symbol for bags expiring in <10 days - Add CSV export via share icon on table card - Spread mock hospital coordinates across US for geographic clarity Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 7924c48 commit 426792c

File tree

4 files changed

+202
-128
lines changed

4 files changed

+202
-128
lines changed

‎molnlycke-dashboard/css/style.css‎

Lines changed: 70 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,76 +7,67 @@
77
}
88

99
body {
10-
display: flex;
11-
background-color: #f4f7fa; /* Light clean background */
10+
background-color: #f4f7fa;
1211
color: #333;
13-
height: 100vh;
14-
overflow: hidden;
1512
}
1613

17-
/* 2. SIDEBAR (The Mölnlycke Green Strip) */
18-
.sidebar {
19-
width: 260px;
20-
background-color: #00754a; /* OFFICIAL GREEN from Logo */
21-
color: white;
14+
/* 2. MAIN CONTENT AREA */
15+
.main-content {
16+
padding: 30px;
17+
max-width: 1600px;
18+
margin: 0 auto;
19+
}
20+
21+
/* Header */
22+
.top-bar {
2223
display: flex;
23-
flex-direction: column;
24-
padding: 20px;
24+
justify-content: space-between;
25+
align-items: center;
26+
margin-bottom: 30px;
27+
background: white;
28+
padding: 15px 25px;
29+
border-radius: 12px;
30+
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
31+
border-bottom: 3px solid #00754a;
2532
}
2633

27-
.logo h2 {
28-
font-size: 24px;
34+
.brand {
35+
display: flex;
36+
flex-direction: column;
37+
}
38+
.brand-name {
39+
font-size: 20px;
2940
font-weight: 700;
41+
color: #00754a;
3042
letter-spacing: 0.5px;
3143
}
32-
33-
.subtitle {
44+
.brand-sub {
3445
font-size: 11px;
35-
color: #a3e0c7; /* Lighter green text for contrast */
46+
color: #999;
3647
text-transform: uppercase;
3748
letter-spacing: 1px;
3849
}
3950

40-
.nav-links {
41-
list-style: none;
42-
margin-top: 40px;
43-
}
44-
45-
.nav-links li {
46-
padding: 15px 10px;
51+
.share-btn {
52+
background: none;
53+
border: 1px solid #ddd;
54+
border-radius: 6px;
55+
padding: 5px 9px;
4756
cursor: pointer;
48-
border-radius: 8px;
49-
margin-bottom: 5px;
50-
transition: background 0.2s;
51-
display: flex;
52-
align-items: center;
53-
gap: 12px;
57+
color: #666;
5458
font-size: 14px;
59+
transition: all 0.2s;
5560
}
56-
57-
.nav-links li:hover, .nav-links li.active {
58-
background-color: #005c3a; /* Slightly darker green for hover */
59-
font-weight: 500;
60-
}
61-
62-
/* 3. MAIN CONTENT AREA */
63-
.main-content {
64-
flex: 1;
65-
overflow-y: auto;
66-
padding: 30px;
61+
.share-btn:hover {
62+
background: #f0fdf4;
63+
border-color: #00754a;
64+
color: #00754a;
6765
}
6866

69-
/* Header */
70-
.top-bar {
67+
.card-header {
7168
display: flex;
7269
justify-content: space-between;
7370
align-items: center;
74-
margin-bottom: 30px;
75-
background: white;
76-
padding: 15px 25px;
77-
border-radius: 12px;
78-
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
79-
border-bottom: 3px solid #00754a; /* Green accent line */
8071
}
8172

8273
.client-selector label {
@@ -96,10 +87,10 @@ body {
9687
font-weight: 600;
9788
}
9889

99-
/* 4. KPI GRID (The 4 Cards) */
90+
/* 4. KPI GRID */
10091
.kpi-grid {
10192
display: grid;
102-
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
93+
grid-template-columns: repeat(6, 1fr);
10394
gap: 20px;
10495
margin-bottom: 30px;
10596
}
@@ -131,12 +122,12 @@ body {
131122
color: #888;
132123
}
133124

134-
/* 5. INSIGHTS SECTION (Graph + Table) */
125+
/* 5. INSIGHTS SECTION (Map + Table) */
135126
.insights-container {
136127
display: grid;
137-
grid-template-columns: 1fr 2fr; /* LEFT: Graph (1 part), RIGHT: Table (2 parts) */
128+
grid-template-columns: 1fr 2fr;
138129
gap: 20px;
139-
height: 500px;
130+
height: 520px;
140131
}
141132

142133
.chart-card, .table-card {
@@ -146,12 +137,12 @@ body {
146137
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
147138
display: flex;
148139
flex-direction: column;
149-
height: 100%; /* Fill the 500px container */
150-
overflow: hidden; /* Prevent the CARD from scrolling */
140+
height: 100%;
141+
overflow: hidden;
151142
}
152143

153144
.card-header {
154-
flex-shrink: 0; /* Ensures title never gets squished */
145+
flex-shrink: 0;
155146
margin-bottom: 15px;
156147
border-bottom: 1px solid #eee;
157148
padding-bottom: 10px;
@@ -163,11 +154,20 @@ body {
163154
font-weight: 700;
164155
}
165156

157+
.card-header-left { display: flex; flex-direction: column; }
158+
166159
.card-subtitle {
167160
font-size: 12px;
168161
color: #999;
169162
}
170163

164+
#usMap {
165+
flex: 1;
166+
min-height: 0;
167+
border-radius: 8px;
168+
overflow: hidden;
169+
}
170+
171171
/* 6. TABLE STYLING */
172172
.table-wrapper {
173173
flex: 1; /* Takes up all available space below title */
@@ -205,6 +205,20 @@ body {
205205
background-color: #f0fdf4; /* Very light green highlight on hover */
206206
}
207207

208+
.kpi-card.expiring {
209+
border-left-color: #d32f2f;
210+
}
211+
.kpi-card.expiring .value {
212+
color: #d32f2f;
213+
}
214+
215+
.row-expiring {
216+
background-color: #fff8e1;
217+
}
218+
.row-expiring:hover {
219+
background-color: #fff3cd !important;
220+
}
221+
208222
/* 7. GRAPH STYLING (Simple Bars) */
209223
.chart-placeholder {
210224
flex: 1;

‎molnlycke-dashboard/data/mock-database.js‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,29 @@
99

1010
// --- 1. CONFIGURATION: The "Story" for each hospital ---
1111
const CLIENTS = [
12-
{
13-
id: "hosp_001",
14-
name: "Stanford Health Care",
15-
total_purchased: 350,
16-
compliance_target: 0.65, // 65% adoption
17-
behavior_profile: "mixed"
12+
{
13+
id: "hosp_001",
14+
name: "Stanford Health Care",
15+
total_purchased: 350,
16+
compliance_target: 0.65,
17+
behavior_profile: "mixed",
18+
lat: 37.4419, lng: -122.1430 // Palo Alto, CA
1819
},
19-
{
20-
id: "hosp_002",
21-
name: "UCSF Medical Center",
22-
total_purchased: 150,
23-
compliance_target: 0.92, // High adoption (Gold Standard)
24-
behavior_profile: "hero"
20+
{
21+
id: "hosp_002",
22+
name: "UCSF Medical Center",
23+
total_purchased: 150,
24+
compliance_target: 0.92,
25+
behavior_profile: "hero",
26+
lat: 41.8781, lng: -87.6298 // Chicago, IL (mock spread)
2527
},
26-
{
27-
id: "hosp_003",
28-
name: "Kaiser Permanente",
29-
total_purchased: 500,
30-
compliance_target: 0.15, // Low adoption (Problem Child)
31-
behavior_profile: "villain"
28+
{
29+
id: "hosp_003",
30+
name: "Kaiser Permanente",
31+
total_purchased: 500,
32+
compliance_target: 0.15,
33+
behavior_profile: "villain",
34+
lat: 29.7604, lng: -95.3698 // Houston, TX (mock spread)
3235
}
3336
];
3437

‎molnlycke-dashboard/index.html‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,20 @@
66
<title>Mölnlycke | Usage Insights Portal</title>
77
<link rel="stylesheet" href="css/style.css">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
910
</head>
1011
<body>
1112

12-
<nav class="sidebar">
13-
<div class="logo">
14-
<h2>Mölnlycke</h2>
15-
<span class="subtitle">Usage Insights</span>
16-
</div>
17-
18-
<ul class="nav-links">
19-
<li class="active"><i class="fa-solid fa-chart-pie"></i> Usage Patterns</li>
20-
<li><i class="fa-solid fa-file-export"></i> Raw Data Export</li>
21-
</ul>
22-
</nav>
23-
2413
<main class="main-content">
25-
14+
2615
<header class="top-bar">
16+
<div class="brand">
17+
<span class="brand-name">Mölnlycke</span>
18+
<span class="brand-sub">Usage Insights</span>
19+
</div>
2720
<div class="client-selector">
2821
<label>Viewing Data For:</label>
29-
<select id="hospitalSelect">
30-
</select>
22+
<select id="hospitalSelect"></select>
3123
</div>
3224
<div class="date-display">
3325
<i class="fa-regular fa-calendar"></i> <span id="currentDate">Feb 18, 2026</span>
@@ -59,23 +51,38 @@ <h2>Mölnlycke</h2>
5951
<div class="value" id="kpi-utilization-ratio">--%</div>
6052
<div class="trend">Active use vs. idle time</div>
6153
</div>
54+
55+
<div class="kpi-card expiring">
56+
<div class="label">Expiring Soon (&lt;10d)</div>
57+
<div class="value" id="kpi-expiring-soon">--</div>
58+
<div class="trend" id="kpi-expiring-trend">Bags needing attention</div>
59+
</div>
60+
61+
<div class="kpi-card">
62+
<div class="label">Bags Saved</div>
63+
<div class="value" id="kpi-bags-saved">--</div>
64+
<div class="trend">Via multi-patient reuse</div>
65+
</div>
6266
</section>
6367

6468
<section class="insights-container">
6569

6670
<div class="chart-card">
6771
<div class="card-header">
68-
<h3>Sustainability Impact</h3>
69-
<span class="card-subtitle">Bags saved via multi-patient reuse</span>
70-
</div>
71-
<div class="chart-placeholder" id="reuseHistogram">
72-
<div class="empty-state">Select a hospital to view data</div>
72+
<div class="card-header-left">
73+
<h3>Fleet Geography</h3>
74+
<span class="card-subtitle">Active positioners by location</span>
75+
</div>
7376
</div>
77+
<div id="usMap"></div>
7478
</div>
7579

7680
<div class="table-card">
7781
<div class="card-header">
7882
<h3>Detailed Bag Logs</h3>
83+
<button class="share-btn" onclick="exportCSV()" title="Export as CSV">
84+
<i class="fa-solid fa-share-nodes"></i>
85+
</button>
7986
</div>
8087
<div class="table-wrapper">
8188
<table class="data-table">
@@ -99,6 +106,7 @@ <h3>Detailed Bag Logs</h3>
99106

100107
</main>
101108

109+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
102110
<script src="data/mock-database.js"></script>
103111
<script src="js/app.js"></script>
104112
</body>

0 commit comments

Comments
 (0)