UI/UX enhancements

app/templates/patients.html

@@ -1,12 +1,87 @@
 {{template "base.html" .}}
 
 {{define "nav"}}
-  <a href="/dashboard">Dashboard</a>
+  <a href="/dashboard" class="nav-link">Dashboard</a>
   <form action="/logout" method="POST" style="display:inline">
-    <button class="btn btn-danger" type="submit" style="padding:6px 12px;font-size:.875rem;">Logout</button>
+    <button class="btn btn-danger" type="submit">Logout</button>
   </form>
 {{end}}
 
+{{define "content"}}
+
+<div class="flex items-center justify-between mb-4">
+  <h1 class="text-2xl font-bold">Patient Directory</h1>
+  <div class="text-sm text-muted">
+    EHR: <code class="code-block inline-block">{{.Session.EHRURL}}</code>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Synced Patients <span class="badge badge-neutral ml-2">{{len .Patients}}</span></h3>
+    <div class="card-subtitle mt-2">
+      Patients synced from the EHR during this or previous sessions.
+    </div>
+  </div>
+
+  <div class="mb-4">
+    <div class="relative">
+      <input type="text" id="patientSearch" 
+        placeholder="Search by name or FHIR ID..." 
+        class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        style="width: 100%; padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius);"
+        onkeyup="filterPatients()">
+    </div>
+  </div>
+
+  {{if .Patients}}
+  <div class="table-container">
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Date of Birth</th>
+          <th>Gender</th>
+          <th>FHIR ID</th>
+          <th class="text-right">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{range .Patients}}
+        <tr class="patient-row" data-name="{{.FirstName}} {{.LastName}}" data-fhir-id="{{.FHIRID}}">
+          <td class="font-medium">
+            <div class="flex items-center gap-2">
+              <div class="avatar avatar-patient" style="width: 32px; height: 32px; font-size: 0.875rem;">
+                {{if .FirstName}}{{slice .FirstName 0 1}}{{end}}{{if .LastName}}{{slice .LastName 0 1}}{{end}}
+              </div>
+              <div>
+                {{if .FirstName}}{{.FirstName}} {{end}}
+                {{if .LastName}}{{.LastName}}{{end}}
+              </div>
+            </div>
+          </td>
+          <td>{{formatDate .DOB}}</td>
+          <td>{{titleCase .Gender}}</td>
+          <td class="text-muted font-mono text-xs">{{.FHIRID}}</td>
+          <td class="text-right">
+            <a href="/dashboard?patient_id={{.FHIRID}}" class="btn btn-primary btn-sm" style="padding: 4px 12px; font-size: 0.75rem;">
+              View Dashboard
+            </a>
+          </td>
+        </tr>
+        {{end}}
+      </tbody>
+    </table>
+  </div>
+  {{else}}
+  <div class="text-center py-12 text-muted bg-gray-50 rounded-lg">
+    <p>No patients have been synced yet.</p>
+  </div>
+  {{end}}
+</div>
+
+{{end}}
+
 {{define "scripts"}}
 <script>
 function filterPatients() {
@@ -27,59 +102,3 @@ function filterPatients() {
 }
 </script>
 {{end}}
-{{define "content"}}
-
-<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
-  <h1 style="margin:0;">All Patients</h1>
-  <div class="text-muted" style="font-size:.9rem;">
-    EHR: <strong>{{.Session.EHRURL}}</strong>
-  </div>
-</div>
-
-<div class="card">
-  <div class="card-title">Synced Patients ({{len .Patients}})</div>
-  <p class="text-muted" style="margin-bottom:20px;">The following patients have been synced from the EHR during this or previous sessions.</p>
-
-  {{if .Patients}}
-  <div style="margin-bottom:16px;">
-    <input type="text" id="patientSearch" placeholder="Search by name or FHIR ID..."
-      style="padding:8px 12px;border:1px solid #ddd;border-radius:4px;width:100%;font-size:.9rem;"
-      onkeyup="filterPatients()">
-  </div>
-  <table class="fhir-table">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Date of Birth</th>
-        <th>Gender</th>
-        <th>FHIR ID</th>
-        <th style="text-align:right;">Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      {{range .Patients}}
-      <tr class="patient-row" data-name="{{.FirstName}} {{.LastName}}" data-fhir-id="{{.FHIRID}}">
-        <td style="font-weight:600;">
-          {{if .FirstName}}{{.FirstName}} {{end}}
-          {{if .LastName}}{{.LastName}}{{end}}
-        </td>
-        <td>{{formatDate .DOB}}</td>
-        <td>{{titleCase .Gender}}</td>
-        <td class="text-muted">{{.FHIRID}}</td>
-        <td style="text-align:right;">
-          <a href="/dashboard?patient_id={{.FHIRID}}" class="btn btn-primary" style="padding:4px 10px;font-size:.75rem;text-decoration:none;">
-            View Dashboard
-          </a>
-        </td>
-      </tr>
-      {{end}}
-    </tbody>
-  </table>
-  {{else}}
-  <div style="text-align:center;padding:40px 0;">
-    <p class="text-muted">No patients have been synced yet.</p>
-  </div>
-  {{end}}
-</div>
-
-{{end}}