amantahiliani/FHIR-Sandbox
1
0
Fork 0
mirror of https://github.com/AmanTahiliani/FHIR-Sandbox.git synced 2026-08-08 04:06:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

UI Upgrades

Browse Source
This commit is contained in:
Aman Tahiliani
2026-02-20 23:59:46 -05:00
parent 2171991dc8
commit c25b6e0c80
15 changed files with 2494 additions and 892 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
app/templates/patients.html
View File

@@ -1,71 +1,79 @@
{{template "base.html" .}}
{{define "nav"}}
<a href="/dashboard" class="nav-link">Dashboard</a>
<form action="/logout" method="POST" style="display:inline">
<button class="btn btn-danger" type="submit">Logout</button>
</form>
<div class="flex items-center gap-4">
<a href="/dashboard" class="nav-link">Dashboard</a>
<a href="/" class="nav-link">Home</a>
<form action="/logout" method="POST" class="flex items-center">
<button class="btn btn-danger btn-sm" type="submit">Logout</button>
</form>
</div>
{{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 class="page-header">
<div class="flex flex-col">
<h1 class="page-title">Patient Directory</h1>
<p class="page-subtitle">Showing all patients synced from <strong class="text-main font-medium">{{.Session.EHRURL}}</strong></p>
</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">
<div class="panel p-0 overflow-hidden">
<div class="directory-toolbar">
<div class="search-wrapper w-full max-w-[500px]">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="search-icon"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<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);"
class="input-base search-input"
placeholder="Search by name, MRN, or FHIR ID..."
onkeyup="filterPatients()">
</div>
<div class="badge badge-neutral text-xs font-semibold uppercase tracking-wider px-3 py-1">
{{len .Patients}} Patients
</div>
</div>
{{if .Patients}}
<div class="table-container">
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Date of Birth</th>
<th>Patient Name</th>
<th>MRN</th>
<th>DOB (Age)</th>
<th>Gender</th>
<th>FHIR ID</th>
<th class="text-right">Actions</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;">
<tr class="patient-row"
data-name="{{.FirstName}} {{.LastName}}"
data-fhir-id="{{.FHIRID}}"
data-mrn="{{.MRN}}">
<td>
<div class="flex items-center gap-3">
<div class="avatar avatar-sm">
{{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 class="flex flex-col">
<span class="font-semibold text-main">{{.LastName}}, {{.FirstName}} {{.MiddleName}}</span>
<span class="text-xs text-muted">FHIR ID: {{.FHIRID}}</span>
</div>
</div>
</td>
<td>{{formatDate .DOB}}</td>
<td><span class="mrn-badge">{{orDash .MRN}}</span></td>
<td>
<div class="flex flex-col">
<span>{{formatDate .DOB}}</span>
<span class="text-xs text-muted">{{calculateAge .DOB}} years old</span>
</div>
</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
<td class="text-right align-middle">
<a href="/dashboard?patient_id={{.FHIRID}}" class="btn btn-primary btn-sm btn-icon">
View Chart
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
</a>
</td>
</tr>
@@ -74,8 +82,12 @@
</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 class="empty-state flex flex-col items-center justify-center py-16">
<div class="text-faint mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3 class="text-lg font-semibold text-main mb-2">No Patients Found</h3>
<p class="text-sm text-muted">Try syncing a patient from the EHR or check your connection.</p>
</div>
{{end}}
</div>
@@ -92,8 +104,9 @@ function filterPatients() {
for (var i = 0; i < rows.length; i++) {
var name = rows[i].getAttribute("data-name").toLowerCase();
var fhirId = rows[i].getAttribute("data-fhir-id").toLowerCase();
var mrn = (rows[i].getAttribute("data-mrn") || "").toLowerCase();
if (name.includes(filter) || fhirId.includes(filter)) {
if (name.includes(filter) || fhirId.includes(filter) || mrn.includes(filter)) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";