feat: consolidate medications into table, add patient/doctor/date header

templates/dashboard.html

@@ -115,8 +115,48 @@
                 <span class="material-symbols-outlined text-sm">download</span>
             </button>
         </div>
-        
-        <div id="medications-container" class="space-y-6"></div>
+        <div class="mb-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm flex items-center gap-4">
+                <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary"><span class="material-symbols-outlined">person</span></div>
+                <div>
+                    <p class="text-[10px] uppercase tracking-wider font-bold text-slate-400">Patient Name</p>
+                    <p id="patient-name-display" class="font-semibold text-slate-900 dark:text-white">N/A</p>
+                </div>
+            </div>
+            <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm flex items-center gap-4">
+                <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary"><span class="material-symbols-outlined">medical_services</span></div>
+                <div>
+                    <p class="text-[10px] uppercase tracking-wider font-bold text-slate-400">Doctor Name</p>
+                    <p id="doctor-name-display" class="font-semibold text-slate-900 dark:text-white">N/A</p>
+                </div>
+            </div>
+            <div class="p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm flex items-center gap-4">
+                <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary"><span class="material-symbols-outlined">calendar_today</span></div>
+                <div>
+                    <p class="text-[10px] uppercase tracking-wider font-bold text-slate-400">Date</p>
+                    <p id="date-display" class="font-semibold text-slate-900 dark:text-white">N/A</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
+            <div class="overflow-x-auto">
+                <table class="w-full text-left border-collapse">
+                    <thead>
+                        <tr class="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-800">
+                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 whitespace-nowrap">Medicine Name</th>
+                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 whitespace-nowrap">Composition</th>
+                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 whitespace-nowrap">Dosage</th>
+                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 whitespace-nowrap">Frequency</th>
+                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 whitespace-nowrap">Duration</th>
+                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Note</th>
+                        </tr>
+                    </thead>
+                    <tbody id="medications-table-body" class="divide-y divide-slate-100 dark:divide-slate-800/60">
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </section>
 
     <section id="recent-activity" class="mt-16">
@@ -147,85 +187,20 @@
     </section>
 </main>
 
-<template id="medication-card-template">
-    <div class="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 overflow-hidden shadow-sm hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
-        <div class="border-b border-slate-200 dark:border-slate-800 px-8 py-6">
-            <div class="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
-                <div class="flex items-start gap-4">
-                    <div class="med-badge flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-lg font-black text-primary"></div>
-                    <div>
-                        <div class="flex items-center gap-2 flex-wrap mb-2">
-                            <span class="med-source bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 text-[10px] font-semibold px-2.5 py-1 rounded-full uppercase tracking-[0.08em]"></span>
-                            <span class="med-type bg-primary/10 text-primary text-[10px] font-semibold px-2.5 py-1 rounded-full uppercase tracking-[0.08em]"></span>
-                        </div>
-                        <h4 class="med-name text-2xl font-bold text-slate-900 dark:text-white"></h4>
-                        <p class="med-desc mt-2 text-slate-500 text-sm"></p>
-                    </div>
-                </div>
-                <a href="#" class="med-details-link bg-slate-50 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors text-slate-700 dark:text-slate-200 px-4 py-2 rounded-xl text-sm font-semibold border border-slate-200 dark:border-slate-700">
-                    Open Analysis
-                </a>
-            </div>
-        </div>
-        <div class="flex flex-col gap-6 p-8">
-            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-4">
-                <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/60 border border-slate-100 dark:border-slate-800">
-                    <p class="text-[10px] uppercase font-semibold text-slate-400 mb-1 tracking-[0.08em]">Dosage</p>
-                    <p class="med-dosage text-sm font-bold text-slate-800 dark:text-slate-200"></p>
-                </div>
-                <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/60 border border-slate-100 dark:border-slate-800">
-                    <p class="text-[10px] uppercase font-semibold text-slate-400 mb-1 tracking-[0.08em]">Frequency</p>
-                    <p class="med-frequency text-sm font-bold text-slate-800 dark:text-slate-200"></p>
-                </div>
-                <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/60 border border-slate-100 dark:border-slate-800">
-                    <p class="text-[10px] uppercase font-semibold text-slate-400 mb-1 tracking-[0.08em]">Duration</p>
-                    <p class="med-duration text-sm font-bold text-slate-800 dark:text-slate-200"></p>
-                </div>
-                <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/60 border border-slate-100 dark:border-slate-800">
-                    <p class="text-[10px] uppercase font-semibold text-slate-400 mb-1 tracking-[0.08em]">Therapeutic Class</p>
-                    <p class="med-therapeutic text-sm font-bold text-slate-800 dark:text-slate-200"></p>
-                </div>
-                <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800/60 border border-slate-100 dark:border-slate-800">
-                    <p class="text-[10px] uppercase font-semibold text-slate-400 mb-1 tracking-[0.08em]">Pack / Manufacturer</p>
-                    <p class="med-pack text-sm font-bold text-slate-800 dark:text-slate-200"></p>
-                </div>
-            </div>
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                <section class="med-composition-wrap rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/30 p-5">
-                    <p class="text-[10px] uppercase font-semibold text-slate-400 tracking-[0.08em]">Composition</p>
-                    <p class="med-composition mt-3 text-sm leading-6 text-slate-700 dark:text-slate-300"></p>
-                </section>
-                <section class="med-classes-wrap rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/30 p-5">
-                    <p class="text-[10px] uppercase font-semibold text-slate-400 tracking-[0.08em]">Reference Classes</p>
-                    <div class="mt-3 space-y-2 text-sm text-slate-700 dark:text-slate-300">
-                        <p><span class="font-semibold text-slate-900 dark:text-white">Chemical:</span> <span class="med-chemical"></span></p>
-                        <p><span class="font-semibold text-slate-900 dark:text-white">Action:</span> <span class="med-action"></span></p>
-                    </div>
-                </section>
-                <section class="med-substitutes-wrap rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/30 p-5">
-                    <div class="flex items-center justify-between gap-3">
-                        <p class="text-[10px] uppercase font-semibold text-slate-400 tracking-[0.08em]">Substitutes</p>
-                        <span class="med-substitutes-count text-xs font-bold text-slate-500"></span>
-                    </div>
-                    <div class="med-substitutes mt-3 flex flex-wrap gap-2"></div>
-                </section>
-                <section class="med-uses-wrap rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/30 p-5">
-                    <p class="text-[10px] uppercase font-semibold text-slate-400 tracking-[0.08em]">Common Uses</p>
-                    <div class="med-uses mt-3 flex flex-wrap gap-2"></div>
-                </section>
-            </div>
-            <div class="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] gap-4">
-                <div class="p-5 rounded-2xl bg-primary/5 border border-primary/10">
-                    <p class="text-xs font-semibold text-primary uppercase tracking-[0.08em] mb-2">Medication Note</p>
-                    <p class="med-insight text-sm text-slate-700 dark:text-slate-300 leading-relaxed"></p>
-                </div>
-                <div class="med-effects-wrap p-5 rounded-2xl bg-slate-50 dark:bg-slate-800/30 border border-slate-200 dark:border-slate-800">
-                    <p class="text-[10px] uppercase font-semibold text-slate-400 tracking-[0.08em]">Side Effects Snapshot</p>
-                    <div class="med-effects mt-3 flex flex-wrap gap-2"></div>
-                </div>
-            </div>
-        </div>
-    </div>
+<template id="medication-row-template">
+    <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/20 transition-colors">
+        <td class="px-6 py-4 align-top">
+            <div class="font-bold text-slate-900 dark:text-white med-name text-sm"></div>
+            <div class="text-xs text-slate-500 mt-1 med-type uppercase tracking-wide font-semibold"></div>
+        </td>
+        <td class="px-6 py-4 align-top text-sm text-slate-600 dark:text-slate-300 med-composition"></td>
+        <td class="px-6 py-4 align-top whitespace-nowrap">
+            <span class="inline-flex items-center px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold med-dosage"></span>
+        </td>
+        <td class="px-6 py-4 align-top text-sm font-medium text-slate-800 dark:text-slate-200 med-frequency"></td>
+        <td class="px-6 py-4 align-top text-sm font-medium text-slate-800 dark:text-slate-200 med-duration whitespace-nowrap"></td>
+        <td class="px-6 py-4 align-top text-xs text-slate-500 leading-relaxed med-insight"></td>
+    </tr>
 </template>
 
 <footer class="mt-20 border-t border-slate-200 dark:border-slate-800 py-10 bg-white dark:bg-slate-950">
@@ -252,8 +227,8 @@
     const pdfPreviewLabel = document.getElementById('pdf-preview-label');
     const processingOverlay = document.getElementById('processing-overlay');
     const resultsArea = document.getElementById('results-area');
-    const medicationsContainer = document.getElementById('medications-container');
-    const template = document.getElementById('medication-card-template');
+    const medicationsContainer = document.getElementById('medications-table-body');
+    const template = document.getElementById('medication-row-template');
     let lastAnalysis = null;
 
     const pdfPlaceholderSvg = `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
@@ -358,30 +333,21 @@
             medicationsContainer.innerHTML = '';
             
             if (data.medications && data.medications.length > 0) {
+                if (document.getElementById('patient-name-display')) document.getElementById('patient-name-display').textContent = data.patient_name || 'N/A';
+                if (document.getElementById('doctor-name-display')) document.getElementById('doctor-name-display').textContent = data.doctor_name || 'N/A';
+                if (document.getElementById('date-display')) document.getElementById('date-display').textContent = data.date || 'N/A';
+
                 data.medications.forEach(med => {
                     const clone = template.content.cloneNode(true);
+                    const qs = (sel) => clone.querySelector(sel);
                     
-                    clone.querySelector('.med-name').textContent = med.name || 'Unknown';
-                    clone.querySelector('.med-desc').textContent = med.category || 'General Medication';
-                    clone.querySelector('.med-dosage').textContent = med.dosage || 'N/A';
-                    clone.querySelector('.med-frequency').textContent = med.frequency || 'N/A';
-                    clone.querySelector('.med-duration').textContent = med.duration || 'N/A';
-                    clone.querySelector('.med-insight').textContent = med.insight || 'Follow doctor\'s instructions carefully.';
-                    clone.querySelector('.med-type').textContent = med.type || 'MEDICATION';
-                    clone.querySelector('.med-source').textContent = med.source || 'OCR only';
-                    clone.querySelector('.med-therapeutic').textContent = med.therapeutic_class || med.category || 'Not available';
-                    clone.querySelector('.med-pack').textContent = formatPackAndManufacturer(med);
-                    setText(clone.querySelector('.med-composition'), med.composition);
-                    setText(clone.querySelector('.med-chemical'), med.chemical_class);
-                    setText(clone.querySelector('.med-action'), med.action_class);
-                    renderChips(clone.querySelector('.med-substitutes'), safeList(med.substitutes).slice(0, 6), 'No mapped substitutes');
-                    renderChips(clone.querySelector('.med-uses'), safeList(med.uses), 'No mapped uses');
-                    renderChips(clone.querySelector('.med-effects'), safeList(med.side_effects).slice(0, 6), 'No side-effect snapshot');
-                    const substitutes = safeList(med.substitutes);
-                    clone.querySelector('.med-substitutes-count').textContent = substitutes.length ? `${substitutes.length} mapped` : 'None mapped';
-                    const badgeText = (med.name || 'M').slice(0, 2).toUpperCase();
-                    clone.querySelector('.med-badge').textContent = badgeText;
-                    clone.querySelector('.med-details-link').href = data.analysis_id ? `/details/${data.analysis_id}` : '/history';
+                    if (qs('.med-name')) qs('.med-name').textContent = med.name || 'Unknown';
+                    if (qs('.med-type')) qs('.med-type').textContent = med.type || 'MEDICATION';
+                    if (qs('.med-composition')) setText(qs('.med-composition'), med.composition);
+                    if (qs('.med-dosage')) qs('.med-dosage').textContent = med.dosage || 'N/A';
+                    if (qs('.med-frequency')) qs('.med-frequency').textContent = med.frequency || 'N/A';
+                    if (qs('.med-duration')) qs('.med-duration').textContent = med.duration || 'N/A';
+                    if (qs('.med-insight')) qs('.med-insight').textContent = med.insight || 'Follow doctor\'s instructions carefully.';
 
                     medicationsContainer.appendChild(clone);
                 });