feat: implement minimalist Zen Clinical View for doctors

dashboard.css

@@ -484,7 +484,158 @@
     font-weight: 600;
 }
 
-/* --- RESPONSIVE DESIGN --- */
+/* --- ZEN DOCTOR VIEW --- */
+.zen-layout {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 2rem;
+    height: calc(100vh - 120px);
+}
+
+.zen-pipeline {
+    background: white;
+    border-radius: 20px;
+    padding: 1.5rem;
+    border: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+}
+
+.pipeline-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.pipeline-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.pipeline-item {
+    padding: 1rem;
+    border-radius: 12px;
+    border: 1px solid #F1F5F9;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: #F8FAFC;
+}
+
+.pipeline-item.next {
+    border-color: var(--secondary);
+    background: #F0F9FF;
+    border-left: 4px solid var(--secondary);
+}
+
+.p-token {
+    font-weight: 700;
+    color: var(--primary);
+    background: white;
+    padding: 0.4rem 0.6rem;
+    border-radius: 8px;
+    font-size: 0.8rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.zen-workspace {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.workspace-header {
+    background: white;
+    padding: 2rem;
+    border-radius: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: var(--shadow);
+}
+
+.status-indicator {
+    display: inline-block;
+    background: #DCFCE7;
+    color: #166534;
+    padding: 0.25rem 0.75rem;
+    border-radius: 99px;
+    font-size: 0.7rem;
+    font-weight: 800;
+    margin-bottom: 0.5rem;
+    letter-spacing: 0.05em;
+}
+
+.current-patient h1 {
+    font-size: 2.2rem;
+    color: var(--primary);
+}
+
+.current-patient h1 small {
+    font-size: 1.2rem;
+    color: var(--text-muted);
+    font-weight: 400;
+}
+
+.patient-meta {
+    margin-top: 0.5rem;
+    color: var(--text-muted);
+    font-size: 0.95rem;
+}
+
+.visit-timer {
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: 700;
+    color: #EF4444;
+}
+
+.zen-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2rem;
+    flex: 1;
+}
+
+.clinical-notes-card {
+    background: white;
+    border-radius: 24px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    display: flex;
+    flex-direction: column;
+}
+
+.zen-textarea {
+    flex: 1;
+    border: none;
+    resize: none;
+    font-size: 1.1rem;
+    color: var(--text-main);
+    line-height: 1.8;
+    margin-top: 1rem;
+    outline: none;
+    background: #FAFAFA;
+    padding: 1.5rem;
+    border-radius: 12px;
+}
+
+.quick-links {
+    background: white;
+    border-radius: 24px;
+    padding: 2rem;
+    border: 1px solid var(--border);
+}
+
+.quick-links button {
+    width: 100%;
+    margin-bottom: 0.75rem;
+    text-align: left;
+    padding: 1rem;
+    justify-content: flex-start;
+}
+
 
 /* Tablet Breakpoint (1024px) */
 @media (max-width: 1024px) {

dashboard.html

@@ -51,6 +51,64 @@
             </div>
         </header>
 
+        <!-- DOCTOR ZEN VIEW (Clinical Focus) -->
+        <div id="doctor-zen-section" class="hidden">
+            <div class="zen-layout">
+                <!-- Left: The Pipeline -->
+                <aside class="zen-pipeline">
+                    <div class="pipeline-header">
+                        <h3>Up Next</h3>
+                        <span class="badge">4 Waiting</span>
+                    </div>
+                    <div class="pipeline-list">
+                        <div class="pipeline-item next">
+                            <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">
+                            <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: The Workspace -->
+                <main class="zen-workspace">
+                    <header class="workspace-header">
+                        <div class="current-patient">
+                            <span class="status-indicator">NOW SEEING</span>
+                            <h1>Rahul Verma <small>(28y, Male)</small></h1>
+                            <div class="patient-meta">
+                                <span>#012</span> • <span>Viral Fever Triage</span> • <span class="visit-timer">08:45</span>
+                            </div>
+                        </div>
+                        <div class="workspace-actions">
+                            <button class="btn-secondary" onclick="openHistory()">📂 History</button>
+                            <button class="btn-primary" onclick="openConsultation()">✍️ Start Consultation</button>
+                        </div>
+                    </header>
+
+                    <div class="zen-grid">
+                        <div class="clinical-notes-card">
+                            <div class="card-header">Consultation Notes</div>
+                            <textarea placeholder="Start typing or use Voice AI..." class="zen-textarea"></textarea>
+                        </div>
+                        <div class="quick-links">
+                            <div class="card-header">Quick References</div>
+                            <button class="btn-small secondary">Diabetes Guidelines</button>
+                            <button class="btn-small secondary">Drug Interaction Checker</button>
+                        </div>
+                    </div>
+                </main>
+            </div>
+        </div>
+
         <div id="overview-section">
             <section class="stats-row">
                 <div class="stat-card">

dashboard.js

@@ -150,52 +150,6 @@ startRecordBtn.onclick = () => {
         
         // Auto-fill diagnosis if empty
         if (!document.getElementById("rxDiagnosis").value) {
-            document.getElementById("rxDiagnosis").value = "Viral Infection";
-        }
-    }, 3000);
-};
-
-// Section Switching Logic
-window.showSection = (sectionId) => {
-    // Hide all sections
-    const sections = ['overview-section', 'patients-section', 'pharmacy-section', 'lab-section'];
-    sections.forEach(id => {
-        const el = document.getElementById(id);
-        if (el) el.classList.add('hidden');
-    });
-    
-    // Show target section
-    if (sectionId === 'overview') {
-        document.getElementById('overview-section').classList.remove('hidden');
-    } else if (sectionId === 'queue') {
-        document.getElementById('overview-section').classList.remove('hidden');
-        document.getElementById('queue-section').scrollIntoView({ behavior: 'smooth' });
-    } else if (sectionId === 'patients') {
-        document.getElementById('patients-section').classList.remove('hidden');
-    } else if (sectionId === 'pharmacy') {
-        document.getElementById('pharmacy-section').classList.remove('hidden');
-    } else if (sectionId === 'lab') {
-        document.getElementById('lab-section').classList.remove('hidden');
-    }
-
-    // Update active state in nav
-    document.querySelectorAll('.side-nav a').forEach(link => {
-        link.classList.remove('active');
-        if (link.innerText.toLowerCase().includes(sectionId)) {
-            link.classList.add('active');
-        }
-    });
-
-    // Auto-hide sidebar on mobile after clicking
-    if (window.innerWidth <= 768) {
-        document.getElementById('sidebar').style.display = 'none';
-    }
-};
-
-window.toggleSidebar = () => {
-    const sidebar = document.getElementById('sidebar');
-    if (sidebar.style.display === 'flex') {
-        sidebar.style.display = 'none';
     } else {
         sidebar.style.display = 'flex';
         sidebar.style.position = 'fixed';
@@ -219,11 +173,11 @@ document.addEventListener("DOMContentLoaded", () => {
 
     if (userRole === 'DOCTOR') {
         document.querySelectorAll('.side-nav a').forEach(link => {
-            if (link.innerText.includes('Billing') || link.innerText.includes('Staff')) {
+            if (link.innerText.includes('Billing') || link.innerText.includes('Staff') || link.innerText.includes('Overview')) {
                 link.style.display = 'none';
             }
         });
-        showSection('queue');
+        showSection('zen'); // Primary view for doctors
     } else if (userRole === 'RECEPTIONIST') {
         document.querySelectorAll('.side-nav a').forEach(link => {
             if (link.innerText.includes('Lab') || link.innerText.includes('Staff')) {