1043 lines
30 KiB
HTML
1043 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GP Clinical System — Multi-Panel Workspace</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg: #ECEEF1;
|
|
--panel-bg: #FFFFFF;
|
|
--panel-border: #D1D5DB;
|
|
--header-bg: #334155;
|
|
--header-text: #FFFFFF;
|
|
--active: #4F46E5;
|
|
--active-light: #EEF2FF;
|
|
--clinical: #0F766E;
|
|
--alert: #DC2626;
|
|
--alert-bg: #FEF2F2;
|
|
--warning: #D97706;
|
|
--warning-bg: #FFFBEB;
|
|
--normal: #16A34A;
|
|
--normal-bg: #F0FDF4;
|
|
--zebra: #F8FAFC;
|
|
--text: #1E293B;
|
|
--text-secondary: #64748B;
|
|
--text-muted: #94A3B8;
|
|
--divider: #E2E8F0;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
font-size: 13px;
|
|
line-height: 1.35;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ── PATIENT BANNER ── */
|
|
.patient-banner {
|
|
height: 65px;
|
|
background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
|
|
color: #F8FAFC;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
gap: 0;
|
|
flex-shrink: 0;
|
|
border-bottom: 2px solid var(--active);
|
|
position: relative;
|
|
}
|
|
|
|
.patient-banner::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--active), #7C3AED, var(--active));
|
|
}
|
|
|
|
.patient-name {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
letter-spacing: -0.01em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.patient-details {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.patient-details .sep {
|
|
color: #64748B;
|
|
margin: 0 8px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.patient-details .detail {
|
|
color: #CBD5E1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.patient-details .detail-label {
|
|
color: #94A3B8;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.patient-details .nhs-num {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
letter-spacing: 0.02em;
|
|
color: #E2E8F0;
|
|
}
|
|
|
|
.allergy-badge {
|
|
background: var(--alert);
|
|
color: #FFF;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
padding: 3px 10px;
|
|
border-radius: 3px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-left: 8px;
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
|
|
50% { box-shadow: 0 0 8px 2px rgba(220, 38, 38, 0.25); }
|
|
}
|
|
|
|
.alerts-count {
|
|
background: var(--warning);
|
|
color: #FFF;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 10px;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
margin-left: 8px;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── TOOLBAR ── */
|
|
.toolbar {
|
|
height: 32px;
|
|
background: #FFFFFF;
|
|
border-bottom: 1px solid var(--panel-border);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 8px;
|
|
gap: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toolbar-btn {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
color: #475569;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
padding: 2px 8px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
height: 24px;
|
|
white-space: nowrap;
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
.toolbar-btn:hover {
|
|
background: #F1F5F9;
|
|
border-color: var(--panel-border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.toolbar-btn:active {
|
|
background: #E2E8F0;
|
|
}
|
|
|
|
.toolbar-btn .icon {
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.toolbar-divider {
|
|
width: 1px;
|
|
height: 16px;
|
|
background: var(--divider);
|
|
margin: 0 4px;
|
|
}
|
|
|
|
/* ── PANEL GRID ── */
|
|
.panel-grid {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.4fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 1px;
|
|
background: var(--bg);
|
|
padding: 3px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.panel {
|
|
background: var(--panel-bg);
|
|
border: 1px solid var(--panel-border);
|
|
border-radius: 3px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-header {
|
|
height: 28px;
|
|
min-height: 28px;
|
|
background: var(--header-bg);
|
|
color: var(--header-text);
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.panel-header .panel-icon {
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.panel-header .panel-count {
|
|
margin-left: auto;
|
|
background: rgba(255,255,255,0.15);
|
|
padding: 1px 6px;
|
|
border-radius: 8px;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.panel-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.panel-body::-webkit-scrollbar { width: 4px; }
|
|
.panel-body::-webkit-scrollbar-track { background: transparent; }
|
|
.panel-body::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 2px; }
|
|
.panel-body::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
|
|
|
|
/* ── TABLES ── */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.data-table th {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-secondary);
|
|
padding: 5px 8px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--divider);
|
|
background: #F8FAFC;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.data-table td {
|
|
padding: 4px 8px;
|
|
border-bottom: 1px solid #F1F5F9;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.data-table tr:nth-child(even) td {
|
|
background: var(--zebra);
|
|
}
|
|
|
|
.data-table tr.row-selected td {
|
|
background: var(--active-light) !important;
|
|
border-left: 3px solid var(--active);
|
|
}
|
|
|
|
.data-table tr.row-selected td:first-child {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.data-table tr:hover td {
|
|
background: #F1F5F9;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.data-table tr.row-selected:hover td {
|
|
background: var(--active-light) !important;
|
|
}
|
|
|
|
/* ── CLINICAL CODES & VALUES ── */
|
|
.clinical-code {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--clinical);
|
|
background: #F0FDFA;
|
|
padding: 1px 4px;
|
|
border-radius: 2px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.clinical-value {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.date-val {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── STATUS INDICATORS ── */
|
|
.status-dot {
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
margin-right: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
.status-dot.green { background: var(--normal); box-shadow: 0 0 3px rgba(22,163,74,0.3); }
|
|
.status-dot.amber { background: var(--warning); box-shadow: 0 0 3px rgba(217,119,6,0.3); }
|
|
.status-dot.red { background: var(--alert); box-shadow: 0 0 3px rgba(220,38,38,0.3); }
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.badge-active { background: #DCFCE7; color: #166534; }
|
|
.badge-repeat { background: #DBEAFE; color: #1E40AF; }
|
|
.badge-acute { background: #FEF3C7; color: #92400E; }
|
|
.badge-red { background: #FEE2E2; color: #991B1B; }
|
|
|
|
/* ── CONSULTATION DETAIL ── */
|
|
.consult-detail {
|
|
padding: 8px 10px;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.consult-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding-bottom: 6px;
|
|
border-bottom: 1px solid var(--divider);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.consult-meta .clinician {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.consult-meta .time {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.consult-title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
color: var(--active);
|
|
margin-bottom: 8px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.consult-section {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.consult-section-title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 3px;
|
|
padding-bottom: 2px;
|
|
border-bottom: 1px solid #F1F5F9;
|
|
}
|
|
|
|
.consult-section p {
|
|
margin-bottom: 2px;
|
|
color: #334155;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.consult-section ul {
|
|
margin: 0;
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.consult-section ul li {
|
|
margin-bottom: 2px;
|
|
color: #334155;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.exam-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2px 12px;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.exam-item {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.exam-item .label {
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.exam-item .value {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── SUB-SECTIONS ── */
|
|
.sub-section {
|
|
border-bottom: 1px solid var(--divider);
|
|
}
|
|
|
|
.sub-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.sub-header {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-secondary);
|
|
padding: 5px 8px 3px;
|
|
background: #F8FAFC;
|
|
border-bottom: 1px solid #F1F5F9;
|
|
}
|
|
|
|
/* ── ALERTS / REMINDERS ── */
|
|
.alert-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 4px 8px;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
border-bottom: 1px solid #F1F5F9;
|
|
}
|
|
|
|
.alert-item.alert-red {
|
|
background: var(--alert-bg);
|
|
border-left: 3px solid var(--alert);
|
|
}
|
|
|
|
.alert-item.alert-amber {
|
|
background: var(--warning-bg);
|
|
border-left: 3px solid var(--warning);
|
|
}
|
|
|
|
.alert-item .alert-icon {
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.alert-item .alert-text {
|
|
flex: 1;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.alert-item .alert-text strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.reminder-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 3px 8px;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
border-bottom: 1px solid #F1F5F9;
|
|
}
|
|
|
|
.reminder-item .reminder-date {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
min-width: 70px;
|
|
}
|
|
|
|
.imm-check {
|
|
color: var(--normal);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.allergy-row td {
|
|
background: var(--alert-bg) !important;
|
|
border-left: 3px solid var(--alert);
|
|
font-weight: 500;
|
|
color: var(--alert);
|
|
}
|
|
|
|
.ref-range {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ── STATUS BAR ── */
|
|
.status-bar {
|
|
height: 22px;
|
|
background: var(--header-bg);
|
|
color: #94A3B8;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
gap: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-bar .status-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status-bar .status-sep {
|
|
color: #475569;
|
|
margin: 0 10px;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.status-bar .status-indicator {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--normal);
|
|
box-shadow: 0 0 4px rgba(22,163,74,0.4);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
|
|
<!-- ═══════════ PATIENT BANNER ═══════════ -->
|
|
<div class="patient-banner">
|
|
<span class="patient-name">Sarah Mitchell</span>
|
|
<div class="patient-details">
|
|
<span class="sep">|</span>
|
|
<span class="detail">F</span>
|
|
<span class="sep">|</span>
|
|
<span class="detail">58y</span>
|
|
<span class="sep">|</span>
|
|
<span class="detail"><span class="detail-label">DOB</span>14/03/1967</span>
|
|
<span class="sep">|</span>
|
|
<span class="detail"><span class="detail-label">NHS</span><span class="nhs-num">943 216 8821</span></span>
|
|
<span class="sep">|</span>
|
|
<span class="detail">14 Oakfield Rd, Bristol BS8 2BN</span>
|
|
<span class="sep">|</span>
|
|
<span class="detail"><span class="nhs-num">07712 845 392</span></span>
|
|
<span class="sep">|</span>
|
|
<span class="detail"><span class="detail-label">GP</span>Dr. J Patterson</span>
|
|
</div>
|
|
<span class="allergy-badge">⚠ ALLERGY: Penicillin</span>
|
|
<span class="alerts-count">Alerts: 2</span>
|
|
</div>
|
|
|
|
<!-- ═══════════ TOOLBAR ═══════════ -->
|
|
<div class="toolbar">
|
|
<button class="toolbar-btn"><span class="icon">+</span> Consultation</button>
|
|
<button class="toolbar-btn"><span class="icon">℞</span> Prescribe</button>
|
|
<button class="toolbar-btn"><span class="icon">+</span> Problem</button>
|
|
<div class="toolbar-divider"></div>
|
|
<button class="toolbar-btn"><span class="icon">🔬</span> Order Test</button>
|
|
<button class="toolbar-btn"><span class="icon">↗</span> Refer</button>
|
|
<button class="toolbar-btn"><span class="icon">📋</span> Fit Note</button>
|
|
<div class="toolbar-divider"></div>
|
|
<button class="toolbar-btn"><span class="icon">🖨</span> Print</button>
|
|
<button class="toolbar-btn"><span class="icon">⌕</span> Search</button>
|
|
</div>
|
|
|
|
<!-- ═══════════ SIX-PANEL GRID ═══════════ -->
|
|
<div class="panel-grid">
|
|
|
|
<!-- ──── PANEL 1: CONSULTATIONS ──── -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-icon">📋</span> Consultations
|
|
<span class="panel-count">8</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr><th>Date</th><th>Clinician</th><th>Type</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="row-selected">
|
|
<td><span class="date-val">13/02/26</span></td>
|
|
<td>Dr Patterson</td>
|
|
<td>Diabetes Review</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">28/01/26</span></td>
|
|
<td>Dr Hughes</td>
|
|
<td>Knee Pain F/U</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">02/12/25</span></td>
|
|
<td>Dr Patterson</td>
|
|
<td>Medication Review</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">05/11/25</span></td>
|
|
<td>Nurse Williams</td>
|
|
<td>Flu Vaccination</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">18/10/25</span></td>
|
|
<td>Nurse Williams</td>
|
|
<td>COVID Booster</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">15/08/25</span></td>
|
|
<td>Dr Patterson</td>
|
|
<td>Blood Results</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">22/05/25</span></td>
|
|
<td>Dr Osei</td>
|
|
<td>Hypertension Review</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">14/02/25</span></td>
|
|
<td>Dr Patterson</td>
|
|
<td>Diabetes Annual</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ──── PANEL 2: CONSULTATION DETAIL ──── -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-icon">📝</span> Consultation Detail
|
|
<span class="panel-count">13/02/26</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="consult-detail">
|
|
<div class="consult-meta">
|
|
<span class="clinician">Dr J Patterson</span>
|
|
<span class="time">10:35</span>
|
|
<span class="clinical-code">C10E.</span>
|
|
</div>
|
|
<div class="consult-title">DIABETES ANNUAL REVIEW</div>
|
|
|
|
<div class="consult-section">
|
|
<div class="consult-section-title">History</div>
|
|
<p>T2DM annual review. Patient reports generally well and feeling stable. Adherent to Metformin 500mg BD — no missed doses. No episodes of hypoglycaemia reported. Denies polyuria, polydipsia, or visual disturbance. Reports intermittent right knee pain, worse on stairs and prolonged walking. No chest pain or SOB. Diet reasonable, limited exercise due to knee.</p>
|
|
</div>
|
|
|
|
<div class="consult-section">
|
|
<div class="consult-section-title">Examination</div>
|
|
<div class="exam-grid">
|
|
<div class="exam-item"><span class="label">BP</span><span class="value">138/82</span><span class="clinical-code" style="margin-left:4px">XaJ9D</span></div>
|
|
<div class="exam-item"><span class="label">Weight</span><span class="value">74.2 kg</span></div>
|
|
<div class="exam-item"><span class="label">BMI</span><span class="value">27.4</span><span class="clinical-code" style="margin-left:4px">XaJQp</span></div>
|
|
<div class="exam-item"><span class="label">HbA1c</span><span class="value">52 mmol/mol</span></div>
|
|
<div class="exam-item"><span class="label">Feet</span><span class="value">NAD</span></div>
|
|
<div class="exam-item"><span class="label">Pulses</span><span class="value">Present bilat</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="consult-section">
|
|
<div class="consult-section-title">Assessment</div>
|
|
<ul>
|
|
<li>T2DM — suboptimal control, HbA1c 52 (target <48). Trending upward from 49.</li>
|
|
<li>HTN — BP slightly above target 140/80. Continue monitoring.</li>
|
|
<li>OA right knee — ongoing, managing with PRN analgesia.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="consult-section">
|
|
<div class="consult-section-title">Plan</div>
|
|
<ul>
|
|
<li>Continue Metformin 500mg BD. Discuss dose increase at next review if HbA1c rises further.</li>
|
|
<li>Dietary advice given — reduce refined carbohydrates, increase fibre intake.</li>
|
|
<li>Re-check BP in 4 weeks — if persistently elevated, consider increasing Amlodipine to 10mg.</li>
|
|
<li>Repeat bloods in 6 months — HbA1c, U&E, lipids, LFT.</li>
|
|
<li>Foot check satisfactory — next due Feb 2027.</li>
|
|
<li>Continue Ibuprofen PRN for knee. Avoid prolonged use — review if worsening. Refer physio if not improving.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ──── PANEL 3: PROBLEMS & MEDICATIONS ──── -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-icon">⚕</span> Problems & Medications
|
|
</div>
|
|
<div class="panel-body">
|
|
<!-- Problems -->
|
|
<div class="sub-section">
|
|
<div class="sub-header">Active Problems</div>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr><th>Problem</th><th>Since</th><th>Status</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Type 2 Diabetes Mellitus <span class="clinical-code">C10E.</span></td>
|
|
<td><span class="date-val">2019</span></td>
|
|
<td><span class="badge badge-active">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Hypertension <span class="clinical-code">G20..</span></td>
|
|
<td><span class="date-val">2015</span></td>
|
|
<td><span class="badge badge-active">Active</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>OA Right Knee <span class="clinical-code">N05.4</span></td>
|
|
<td><span class="date-val">2021</span></td>
|
|
<td><span class="badge badge-active">Active</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Medications -->
|
|
<div class="sub-section">
|
|
<div class="sub-header">Current Medications</div>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr><th>Medication</th><th>Dose</th><th>Issued</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Metformin</td>
|
|
<td><span class="clinical-value">500mg BD</span></td>
|
|
<td><span class="date-val">02/12/25</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Amlodipine</td>
|
|
<td><span class="clinical-value">5mg OD</span></td>
|
|
<td><span class="date-val">02/12/25</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Ibuprofen</td>
|
|
<td><span class="clinical-value">400mg PRN</span></td>
|
|
<td><span class="date-val">28/01/26</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Allergies -->
|
|
<div class="sub-section">
|
|
<div class="sub-header">Allergies</div>
|
|
<table class="data-table">
|
|
<tbody>
|
|
<tr class="allergy-row">
|
|
<td>⚠ <strong>PENICILLIN</strong></td>
|
|
<td>Rash</td>
|
|
<td><span class="badge badge-red">Allergy</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ──── PANEL 4: RESULTS ──── -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-icon">🔬</span> Results
|
|
<span class="panel-count">8</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr><th></th><th>Test</th><th>Value</th><th>Range</th><th>Date</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="status-dot amber"></span></td>
|
|
<td>HbA1c</td>
|
|
<td><span class="clinical-value">52</span></td>
|
|
<td><span class="ref-range"><48</span></td>
|
|
<td><span class="date-val">07/02/26</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="status-dot green"></span></td>
|
|
<td>eGFR</td>
|
|
<td><span class="clinical-value">78</span></td>
|
|
<td><span class="ref-range">>60</span></td>
|
|
<td><span class="date-val">07/02/26</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="status-dot green"></span></td>
|
|
<td>Creatinine</td>
|
|
<td><span class="clinical-value">92</span></td>
|
|
<td><span class="ref-range">45-104</span></td>
|
|
<td><span class="date-val">07/02/26</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="status-dot amber"></span></td>
|
|
<td>Total Chol</td>
|
|
<td><span class="clinical-value">5.2</span></td>
|
|
<td><span class="ref-range"><5.0</span></td>
|
|
<td><span class="date-val">07/02/26</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="status-dot green"></span></td>
|
|
<td>HDL</td>
|
|
<td><span class="clinical-value">1.3</span></td>
|
|
<td><span class="ref-range">>1.0</span></td>
|
|
<td><span class="date-val">07/02/26</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="status-dot amber"></span></td>
|
|
<td>LDL</td>
|
|
<td><span class="clinical-value">3.1</span></td>
|
|
<td><span class="ref-range"><3.0</span></td>
|
|
<td><span class="date-val">07/02/26</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="status-dot green"></span></td>
|
|
<td>TSH</td>
|
|
<td><span class="clinical-value">2.4</span></td>
|
|
<td><span class="ref-range">0.3-4.2</span></td>
|
|
<td><span class="date-val">15/08/25</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="status-dot green"></span></td>
|
|
<td>ALT</td>
|
|
<td><span class="clinical-value">28</span></td>
|
|
<td><span class="ref-range"><41</span></td>
|
|
<td><span class="date-val">15/08/25</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ──── PANEL 5: PRESCRIBING ──── -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-icon">℞</span> Prescribing
|
|
<span class="panel-count">6</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr><th>Date</th><th>Medication</th><th>Type</th><th>Issued By</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><span class="date-val">13/02/26</span></td>
|
|
<td>Metformin 500mg tabs</td>
|
|
<td><span class="badge badge-repeat">Repeat</span></td>
|
|
<td>Dr Patterson</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">13/02/26</span></td>
|
|
<td>Amlodipine 5mg tabs</td>
|
|
<td><span class="badge badge-repeat">Repeat</span></td>
|
|
<td>Dr Patterson</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">28/01/26</span></td>
|
|
<td>Ibuprofen 400mg tabs</td>
|
|
<td><span class="badge badge-acute">Acute</span></td>
|
|
<td>Dr Hughes</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">02/12/25</span></td>
|
|
<td>Metformin 500mg tabs</td>
|
|
<td><span class="badge badge-repeat">Repeat</span></td>
|
|
<td>Dr Patterson</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">02/12/25</span></td>
|
|
<td>Amlodipine 5mg tabs</td>
|
|
<td><span class="badge badge-repeat">Repeat</span></td>
|
|
<td>Dr Patterson</td>
|
|
</tr>
|
|
<tr>
|
|
<td><span class="date-val">15/08/25</span></td>
|
|
<td>Co-codamol 8/500 tabs</td>
|
|
<td><span class="badge badge-acute">Acute</span></td>
|
|
<td>Dr Osei</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ──── PANEL 6: ALERTS & REMINDERS ──── -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="panel-icon">⚠</span> Alerts & Reminders
|
|
</div>
|
|
<div class="panel-body">
|
|
<!-- Alerts -->
|
|
<div class="sub-section">
|
|
<div class="sub-header">Active Alerts</div>
|
|
<div class="alert-item alert-red">
|
|
<span class="alert-icon">🔴</span>
|
|
<span class="alert-text"><strong>ALLERGY</strong> — Penicillin (Rash)</span>
|
|
</div>
|
|
<div class="alert-item alert-amber">
|
|
<span class="alert-icon">🟠</span>
|
|
<span class="alert-text"><strong>BP above target</strong> — 138/82 (target <140/80)</span>
|
|
</div>
|
|
<div class="alert-item alert-amber">
|
|
<span class="alert-icon">🟠</span>
|
|
<span class="alert-text"><strong>HbA1c above threshold</strong> — 52 (target <48)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Care Reminders -->
|
|
<div class="sub-section">
|
|
<div class="sub-header">Care Reminders</div>
|
|
<div class="reminder-item">
|
|
<span class="reminder-date">Mar 2026</span>
|
|
<span>BP re-check</span>
|
|
</div>
|
|
<div class="reminder-item">
|
|
<span class="reminder-date">Aug 2026</span>
|
|
<span>Annual bloods — HbA1c, U&E, Lipids, LFT</span>
|
|
</div>
|
|
<div class="reminder-item">
|
|
<span class="reminder-date">Feb 2027</span>
|
|
<span>Diabetic foot check</span>
|
|
</div>
|
|
<div class="reminder-item">
|
|
<span class="reminder-date">May 2026</span>
|
|
<span>Cervical screening due</span>
|
|
</div>
|
|
<div class="reminder-item">
|
|
<span class="reminder-date">Jun 2026</span>
|
|
<span>Medication review</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Immunisations -->
|
|
<div class="sub-section">
|
|
<div class="sub-header">Immunisations</div>
|
|
<div class="reminder-item">
|
|
<span class="reminder-date">05/11/25</span>
|
|
<span>Influenza</span>
|
|
<span class="imm-check" style="margin-left:auto;">✓</span>
|
|
</div>
|
|
<div class="reminder-item">
|
|
<span class="reminder-date">18/10/25</span>
|
|
<span>COVID Booster</span>
|
|
<span class="imm-check" style="margin-left:auto;">✓</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /panel-grid -->
|
|
|
|
<!-- ═══════════ STATUS BAR ═══════════ -->
|
|
<div class="status-bar">
|
|
<span class="status-item"><span class="status-indicator"></span> Riverside Medical Centre</span>
|
|
<span class="status-sep">|</span>
|
|
<span class="status-item">Dr. J Patterson</span>
|
|
<span class="status-sep">|</span>
|
|
<span class="status-item">Thu 13 Feb 2026 14:35</span>
|
|
<span class="status-sep">|</span>
|
|
<span class="status-item">Record: Read/Write</span>
|
|
<span class="status-sep">|</span>
|
|
<span class="status-item">Panels: 6/6</span>
|
|
</div>
|
|
|
|
</div><!-- /app -->
|
|
</body>
|
|
</html> |