curaflow/dashboard.html

540 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard | Curio</title>
<link rel="stylesheet" href="globals.css?v=26">
<link rel="stylesheet" href="index.css?v=26">
<link rel="stylesheet" href="dashboard.css?v=28">
<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;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
<script src="tenantLoader.js?v=26"></script>
</head>
<body class="dashboard-body">
<div class="sidebar-mobile-toggle" onclick="toggleSidebar()">☰ Menu</div>
<aside class="sidebar compact-rail" id="sidebar">
<div class="logo">
<span class="logo-icon">C</span>
<span class="logo-text" data-tenant-name>Curio</span>
</div>
<nav class="side-nav" id="sideNav">
<a href="#" data-section="overview" class="active"><span>🏠</span> Overview</a>
<a href="#" data-section="queue"><span>👥</span> Queue</a>
<a href="#" data-section="patients"><span>📂</span> Patients</a>
<a href="#" data-section="pharmacy"><span>💊</span> Pharmacy</a>
<a href="#" data-section="lab"><span>🔬</span> Lab</a>
<a href="billing.html" data-section="billing" data-external><span>💳</span> Billing & Accounts</a>
<a href="staff.html" data-section="staff" data-external><span>👔</span> Staff & Payroll</a>
<a href="#" data-section="settings"><span>⚙️</span> Settings</a>
</nav>
<div class="user-profile">
<div class="avatar">DS</div>
<div class="info">
<strong>Dr. Sharma</strong>
<span>Cardiologist</span>
<div style="font-size: 0.65rem; color: #94a3b8; margin-top: 0.25rem;">Build: 1.4.0-ZEN</div>
<a href="login.html" class="logout-btn"><span>🚪</span> Logout</a>
</div>
</div>
</aside>
<main class="dashboard-main">
<header class="dash-header">
<div class="search-bar">
<span class="search-icon">🔍</span>
<input type="text" id="patientSearch" placeholder="Search patients by name or WhatsApp number..." aria-label="Search patients">
</div>
<div class="header-actions">
<div class="date-picker-group">
<span class="calendar-icon">📅</span>
<input type="date" id="queueDate" class="date-input" aria-label="Queue Date">
</div>
<span class="badge counter-badge">Reception Counter: 1</span>
<button class="btn-primary" id="newWalkinBtn">+ New Walk-in (Print Token)</button>
</div>
</header>
<div id="section-page-header" class="section-page-header hidden">
<h1 id="sectionPageTitle"></h1>
<p id="sectionPageSubtitle"></p>
</div>
<!-- Settings Section (Internal) -->
<div id="settings-section" class="section-container hidden">
<div class="settings-grid doctor-only">
<div class="section-card">
<h2>Clinical Profile</h2>
<div class="input-group">
<label>Full Name</label>
<input type="text" value="Dr. Sharma">
</div>
<div class="input-group">
<label>Specialization</label>
<input type="text" value="Cardiologist">
</div>
</div>
<div class="section-card">
<h2>Zen Scribe Preferences</h2>
<div class="input-group">
<label>Default Scribe Language</label>
<select id="scribeLangPref">
<option value="en-US">English (US)</option>
<option value="hi-IN">Hindi</option>
<option value="te-IN">Telugu</option>
</select>
</div>
<div class="input-group">
<label>Auto-Generate Clinical Summary</label>
<select>
<option>Enabled</option>
<option>Disabled</option>
</select>
</div>
</div>
</div>
<div class="settings-grid admin-only hidden">
<div class="section-card">
<h2>Hospital Configuration</h2>
<div class="input-group">
<label>Consultation Fee (₹)</label>
<input type="number" value="500">
</div>
</div>
</div>
<div style="margin-top: 2rem;">
<button class="btn-primary" onclick="alert('Settings saved!')">Save Preferences</button>
</div>
</div>
<div id="doctor-zen-section" class="hidden">
<div class="zen-layout-3col">
<!-- Left: Full-Height Queue (15%) -->
<aside class="zen-pipeline full-height" id="zenPipeline">
<div class="pipeline-header">
<h3>Queue <small>(Ctrl+Q)</small></h3>
<span class="badge">4 Waiting</span>
</div>
<div class="pipeline-list">
<div class="pipeline-item next" onclick="switchPatientContext('Anjali Singh', '#013', 'High Fever')">
<div class="p-token">#013</div>
<div class="p-info">
<strong>Anjali Singh</strong>
<span class="triage-pill urgent">High Fever</span>
</div>
</div>
<div class="pipeline-item" onclick="switchPatientContext('Suresh Kumar', '#014', 'Back Pain')">
<div class="p-token">#014</div>
<div class="p-info">
<strong>Suresh Kumar</strong>
<span class="triage-pill">Back Pain</span>
</div>
</div>
</div>
</aside>
<!-- Center: Core Workspace (60%) -->
<main class="zen-workspace-soap">
<div class="patient-banner-inner">
<div class="patient-identity-row">
<h1>Rahul Verma <small>(28y, M)</small></h1>
<span class="allergy-tag urgent-alert">⚠️ ALLERGY: PEANUTS</span>
</div>
<div class="action-center">
<select id="scribeLang" class="lang-select">
<option value="en-US">English</option>
<option value="te-IN">తెలుగు</option>
</select>
<button id="zenScribeBtn" class="btn-zen scribe pulse-active" onclick="toggleZenScribe()">🔴 Start Recording</button>
<button class="btn-zen history" onclick="openHistory()">📂 History</button>
</div>
</div>
<div id="scribeStatus" class="scribe-status-bar hidden">
<span class="pulse-dot"></span> <span id="scribeStatusText">AI Scribe Recording... (Ctrl+Shift+S to Pause)</span>
</div>
<div class="soap-container">
<div class="soap-field">
<label for="soap-s">Subjective</label>
<textarea id="soap-s" class="zen-textarea-small" placeholder="Patient reports..." tabindex="1"></textarea>
</div>
<div class="soap-field">
<div class="field-header">
<label for="soap-o">Objective</label>
<button class="btn-small btn-sync" onclick="syncVitals()" tabindex="-1">⬇️ Sync Vitals</button>
</div>
<textarea id="soap-o" class="zen-textarea-small" placeholder="Observations, vitals, exam findings..." tabindex="2"></textarea>
</div>
<div class="soap-field">
<label for="soap-a">Assessment</label>
<textarea id="soap-a" class="zen-textarea-small" placeholder="Diagnosis, reasoning..." tabindex="3"></textarea>
</div>
<div class="soap-field">
<label for="soap-p">Plan</label>
<textarea id="soap-p" class="zen-textarea-small" placeholder="Treatment, Rx, follow-up..." tabindex="4"></textarea>
</div>
</div>
<div id="aiSummaryCard" class="summary-card hidden">
<div class="card-header">✨ AI Clinical Summary</div>
<div id="summaryText" class="summary-content"></div>
<div class="summary-actions">
<button class="btn-small secondary" onclick="shareSummary()">📤 Send</button>
<button class="btn-small secondary" onclick="printSummary()">🖨️ Print</button>
</div>
</div>
</main>
<!-- Right: Clinical Context & AI Insights (25%) -->
<aside class="zen-sidebar-right">
<div class="insight-card">
<div class="card-header">🩺 Vitals Widget</div>
<div class="vitals-grid">
<div class="vital-item">
<span class="label">Temp</span>
<span class="value" id="vital-temp">98.6°F 🟢</span>
</div>
<div class="vital-item warning">
<span class="label">BP</span>
<span class="value" id="vital-bp">140/90 🔴</span>
</div>
<div class="vital-item">
<span class="label">SpO2</span>
<span class="value" id="vital-spo2">98% 🟢</span>
</div>
</div>
</div>
<div class="ai-nudge-box">
<div class="card-header">✨ AI Suggestions</div>
<p id="aiNudgeText">Listening for diagnosis...</p>
<div class="suggested-tags">
<span>ICD-10: B34.9 (Viral)</span>
<span>Rx: Paracetamol</span>
</div>
</div>
</aside>
</div>
</div>
<div id="overview-section" class="hidden">
<section class="stats-row">
<div class="stat-card">
<span>In Queue</span>
<h3>12 Patients</h3>
<small class="text-accent">↑ 4 since last hour</small>
</div>
<div class="stat-card quota-card">
<span>Current Slot (10:00-10:30)</span>
<div class="quota-bars">
<div class="quota-item closed">
<small>Online: 3/3 (CLOSED)</small>
<div class="bar"><div class="fill" style="width: 100%; background: var(--text-muted);"></div></div>
</div>
<div class="quota-item">
<small>Walk-in: 4/5</small>
<div class="bar"><div class="fill" style="width: 80%;"></div></div>
</div>
</div>
</div>
<div class="stat-card">
<span>Avg. Wait Time</span>
<h3>18 Mins</h3>
<small class="text-muted">Target: 15 Mins</small>
</div>
</section>
<section class="queue-section" id="queue-section">
<div class="section-card">
<div class="card-header">
<h2>Live Queue</h2>
<div class="filters">
<span class="badge">All</span>
<span class="badge muted">Appointments</span>
<span class="badge muted">Walk-ins</span>
</div>
</div>
<table class="queue-table">
<thead>
<tr>
<th>Token</th>
<th>Patient Name</th>
<th>Source</th>
<th>Lang</th>
<th>Triage AI</th>
<th>Status</th>
<th>Arrival</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr class="active-row">
<td>#012</td>
<td><strong>Rahul Verma</strong></td>
<td><span class="source-tag online">Online</span></td>
<td><span class="lang-tag">HI</span></td>
<td><span class="triage-pill urgent">High Fever / Cough</span></td>
<td><span class="status-pill in-room">In Room</span></td>
<td>09:15 AM</td>
<td><button class="btn-small">Prescribe</button></td>
</tr>
<tr>
<td>#013</td>
<td><strong>Anjali Singh</strong></td>
<td><span class="source-tag walkin">Walk-in</span></td>
<td><span class="lang-tag">TE</span></td>
<td><span class="triage-pill moderate">General Checkup</span></td>
<td><span class="status-pill pending-pay">Unpaid (â¹500)</span></td>
<td>09:30 AM</td>
<td><button class="btn-small secondary">Collect Pay</button></td>
</tr>
<tr>
<td>#014</td>
<td><strong>Suresh Kumar</strong></td>
<td><span class="source-tag online">Online</span></td>
<td><span class="lang-tag">EN</span></td>
<td><span class="triage-pill routine">Back Pain</span></td>
<td><span class="status-pill waiting">Paid (Waiting)</span></td>
<td>09:45 AM</td>
<td><button class="btn-small secondary">Notify</button></td>
</tr>
</tbody>
</table>
</div>
<div class="side-panel">
<div class="section-card ai-insights">
<h3>✨ AI Insights</h3>
<p>Predicted peak time: <strong>11:30 AM</strong>. Suggesting 5-min break for staff now.</p>
<div class="insight-item">
<small>No-show Alert</small>
<p>Token #015 (Vikram) hasn't replied to the 10-min reminder.</p>
</div>
</div>
</div>
</section>
</div>
<div id="patients-section" class="hidden">
<section class="section-card">
<div class="card-header">
<h2>Patient Records</h2>
<button class="btn-primary">+ Add New Patient</button>
</div>
<table class="queue-table">
<thead>
<tr>
<th>Patient ID</th>
<th>Name</th>
<th>WhatsApp</th>
<th>Last Visit</th>
<th>Visits</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>CF-1001</td>
<td><strong>Rahul Verma</strong></td>
<td>+91 98765 43210</td>
<td>12 May 2026</td>
<td>5</td>
<td><button class="btn-small secondary">View History</button></td>
</tr>
</tbody>
</table>
</section>
</div>
<div id="pharmacy-section" class="hidden">
<section class="section-card">
<div class="card-header">
<h2>💊 Pharmacy Inventory & Sales</h2>
<div class="header-actions">
<button class="btn-secondary">Expiry Alerts (2)</button>
<button class="btn-primary">+ Add Stock</button>
</div>
</div>
<div class="stats-row">
<div class="stat-card"><span>Total Inventory Value</span><h3>â¹4,25,000</h3></div>
<div class="stat-card"><span>Daily Sales (GST)</span><h3>â¹12,450</h3></div>
</div>
<table class="queue-table">
<thead>
<tr>
<th>ID</th>
<th>Medicine</th>
<th>Batch</th>
<th>Expiry</th>
<th>Stock</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr><td>M01</td><td><strong>Paracetamol 500mg</strong></td><td>B2201</td><td>Dec 2026</td><td>120</td><td>â¹5</td><td><button class="btn-small">Edit</button></td></tr>
<tr><td>M03</td><td><strong>Cough Syrup</strong></td><td>S881</td><td><span class="text-accent">Apr 2026</span></td><td>4</td><td>â¹85</td><td><button class="btn-small secondary">Restock</button></td></tr>
</tbody>
</table>
</section>
</div>
<div id="lab-section" class="hidden">
<section class="section-card">
<div class="card-header">
<h2>🔬 Laboratory Orders</h2>
<span class="badge">4 New Orders</span>
</div>
<table class="queue-table">
<thead>
<tr>
<th>Order ID</th>
<th>Patient</th>
<th>Test Name</th>
<th>Priority</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr><td>LAB-101</td><td><strong>Rahul Verma</strong></td><td>CBC (Complete Blood Count)</td><td><span class="triage-pill urgent">High</span></td><td><span class="status-pill waiting">Sample Awaited</span></td><td><button class="btn-small">Collect Sample</button></td></tr>
</tbody>
</table>
</section>
<!-- AI Lab Watcher Widget -->
<section class="section-card" style="margin-top: 20px;">
<div class="card-header">
<h2>🤖 AI Lab Anomaly Watcher</h2>
<span id="labWatcherStatusBadge" class="badge">Offline</span>
</div>
<div class="insights-box" style="margin-top: 15px;">
<p>The AI Watcher runs continuously in the background using Temporal to monitor patient lab results for dangerous drug interactions or baseline anomalies.</p>
<div style="margin-top: 15px;">
<input type="text" id="labPatientId" placeholder="Patient ID (e.g. PAT-123)" class="form-input" style="width: 200px; display: inline-block;">
<input type="text" id="labBaseline" placeholder="Mock Baseline (e.g. Patient is on Warfarin)" class="form-input" style="width: 300px; display: inline-block; margin-left: 10px;">
<button id="startWatcherBtn" class="btn-primary" style="margin-left: 10px;">Start Watcher</button>
</div>
<div id="labResultInputSection" class="hidden" style="margin-top: 20px; border-top: 1px solid #ddd; padding-top: 15px;">
<p><strong>Submit New Lab Result</strong></p>
<input type="text" id="newLabResult" placeholder="e.g. High INR 6.5" class="form-input" style="width: 400px; display: inline-block;">
<button id="submitLabBtn" class="btn-primary" style="margin-left: 10px;">Send to AI Watcher</button>
</div>
<div id="aiAlertsContainer" style="margin-top: 20px;">
<!-- AI Alerts will be dynamically rendered here -->
</div>
</div>
</section>
</div>
<div id="consultationModal" class="modal rx-modal">
<div class="modal-content rx-modal-content">
<header class="modal-header">
<div class="modal-header-text">
<h2>Digital Prescription</h2>
<p class="modal-subtitle">Diagnosis, medicines, lab orders, and patient handoff</p>
</div>
<button type="button" class="close-modal" aria-label="Close prescription">&times;</button>
</header>
<div class="modal-body">
<div class="rx-voice-bar" style="flex-direction: column; align-items: stretch; gap: 1rem;">
<div style="display: flex; gap: 1rem; align-items: center;">
<button type="button" class="btn btn-secondary rx-record-btn" id="startRecording">
<span aria-hidden="true">🎤</span> Record consultation
</button>
<div id="recordingStatus" class="rx-recording-status hidden">
<span class="pulse"></span> Recording in progress…
</div>
</div>
<div style="display: flex; flex-direction: column; gap: 0.5rem; background: var(--bg-secondary); padding: 1rem; border-radius: 8px;">
<label for="aiDictationInput" style="font-weight: 600; font-size: 0.85rem; color: var(--text-primary);">AI Scribe Dictation Input</label>
<textarea id="aiDictationInput" class="rx-textarea" rows="3" placeholder="Type raw dictation here or use voice typing..."></textarea>
<button type="button" class="btn btn-primary" id="submitAiScribeBtn" style="align-self: flex-start;">✨ Generate Clinical Note</button>
<div id="aiScribeStatus" class="hidden" style="font-size: 0.85rem; color: var(--accent-primary); margin-top: 0.25rem;">
<span class="pulse-dot"></span> <span id="aiScribeStatusText">AI Scribe is analyzing...</span>
</div>
</div>
<div id="aiInsights" class="rx-ai-draft hidden">
<h4>AI insights (draft)</h4>
<p id="insightText"></p>
</div>
</div>
<div class="rx-panels">
<div class="rx-form-panel">
<div class="rx-field">
<label class="rx-label" for="rxDiagnosis">Diagnosis</label>
<input type="text" id="rxDiagnosis" class="rx-input" placeholder="e.g. Viral fever, acute pharyngitis">
</div>
<div class="rx-field">
<label class="rx-label">Medicines &amp; dosages</label>
<div class="rx-table-head med-head" aria-hidden="true">
<span>Medicine</span>
<span>Dosage</span>
<span>Duration</span>
</div>
<div class="medicine-list" id="medicineList">
<div class="med-row">
<input type="text" placeholder="Medicine name" class="rx-input med-name">
<input type="text" placeholder="1-0-1" class="rx-input med-dosage">
<input type="text" placeholder="5 days" class="rx-input med-duration">
</div>
</div>
<button type="button" class="rx-add-btn" id="addMed">+ Add medicine</button>
</div>
<div class="rx-field">
<label class="rx-label">Lab tests</label>
<div id="labTestList">
<div class="lab-row">
<input type="text" placeholder="Test name (e.g. CBC, lipid profile)" class="rx-input lab-test-name">
</div>
</div>
<button type="button" class="rx-add-btn" id="addLabTest">+ Add lab test</button>
</div>
</div>
<aside class="rx-sidebar">
<section class="rx-sidebar-block">
<h3 class="rx-sidebar-title">Patient history</h3>
<ul class="rx-history-list">
<li><strong>12 May 2026</strong> — Chronic gastritis. Rx: Pantoprazole.</li>
<li><strong>05 Apr 2026</strong> — Lab: HbA1c 7.2% (high)</li>
</ul>
</section>
<section class="rx-sidebar-block">
<h3 class="rx-sidebar-title">Quick health tips</h3>
<div class="rx-tips-grid">
<button type="button" class="rx-tip-btn" onclick="shareTip('diabetes')">🥗 Diabetes diet</button>
<button type="button" class="rx-tip-btn" onclick="shareTip('hypertension')">🧘 BP control</button>
<button type="button" class="rx-tip-btn" onclick="shareTip('viral')">💧 Hydration</button>
<button type="button" class="rx-tip-btn" onclick="printTips()">🖨️ Print tips</button>
</div>
</section>
<section class="rx-sidebar-block">
<label class="rx-label" for="deptNote">Note to departments</label>
<textarea id="deptNote" class="rx-textarea" placeholder="Instructions for pharmacy or lab…" rows="3"></textarea>
</section>
</aside>
</div>
</div>
<footer class="modal-footer">
<button type="button" class="btn btn-secondary" id="cancelRx">Cancel</button>
<button type="button" class="btn btn-primary rx-send-btn" id="sendRx">Send to WhatsApp</button>
</footer>
</div>
</div>
</main>
<script src="dashboard.js?v=26"></script>
</body>
</html>