fajri/cpone_dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update dashboard filters and packet views

Browse Source
This commit is contained in:
sas.fajri
2026-05-07 12:04:09 +07:00
parent da419950ce
commit 11f0d0436e
17 changed files with 1008 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
cpone-dashboard/templates/result/index.html
View File

@@ -18,7 +18,7 @@
</p>
</div>
<a href="{{b "/projects"}}" class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:border-brand-400 hover:text-brand-600">
Ganti project
Change Project
</a>
</div>
</section>
@@ -39,13 +39,23 @@
{{/* Section 3: Filter form */}}
<section class="card p-4">
<form method="get" action="{{b "/result"}}" class="grid gap-3 md:grid-cols-3">
<div class="md:col-span-2">
<form method="get" action="{{b "/result"}}" class="flex flex-wrap items-end gap-3">
<div class="min-w-[240px] flex-[2_1_420px]">
<label for="search" class="mb-2 block text-sm font-medium text-slate-600">Search Patient</label>
<input id="search" name="search" value="{{.Search}}" type="text" placeholder="Nama atau Employee ID"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200"/>
</div>
<div>
<div class="min-w-[180px] flex-1">
<label for="packet" class="mb-2 block text-sm font-medium text-slate-600">Packet</label>
<select id="packet" name="packet"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
<option value="" {{if eq .Packet ""}}selected{{end}}>All Packets</option>
{{range .PacketOptions}}
<option value="{{.Code}}" {{if eq .Code $.Packet}}selected{{end}}>{{.Name}}</option>
{{end}}
</select>
</div>
<div class="min-w-[180px] flex-1">
<label for="filter" class="mb-2 block text-sm font-medium text-slate-600">Status PDF</label>
<select id="filter" name="filter"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
@@ -54,7 +64,7 @@
<option value="no_pdf" {{if eq .Filter "no_pdf"}}selected{{end}}>No PDF</option>
</select>
</div>
<div class="md:col-span-3 flex justify-end">
<div class="shrink-0">
<button type="submit" class="rounded-xl bg-brand-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-600">
Filter
</button>
@@ -80,6 +90,7 @@
<th class="px-4 py-3 font-medium">Employee ID</th>
<th class="px-4 py-3 font-medium">Patient</th>
<th class="px-4 py-3 font-medium">Department</th>
<th class="px-4 py-3 font-medium">Tests</th>
<th class="px-4 py-3 font-medium">Report Date</th>
<th class="px-4 py-3 font-medium">Action</th>
</tr>
@@ -90,6 +101,9 @@
<td class="num px-4 py-3 text-slate-500">{{.NIP}}</td>
<td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
<td class="px-4 py-3 text-slate-500">{{.Posisi}}</td>
<td class="px-4 py-3 text-slate-500 text-xs max-w-[200px]">
{{if .Tests}}<span title="{{.Tests}}" class="line-clamp-2">{{.Tests}}</span>{{else}}-{{end}}
</td>
<td class="num px-4 py-3 text-slate-500">
{{if .ReportDate}}{{.ReportDate | fmtDate}}{{else}}<span class="text-slate-300">—</span>{{end}}
</td>
@@ -116,6 +130,7 @@
<div>
<p class="font-semibold text-slate-700">{{.Name}}</p>
<p class="mt-0.5 text-xs text-slate-400">{{.NIP}} &bull; {{.Posisi}}</p>
{{if .Tests}}<p class="mt-1 text-xs text-slate-500 line-clamp-1">{{.Tests}}</p>{{end}}
{{if .ReportDate}}<p class="mt-0.5 num text-xs text-slate-400">{{.ReportDate | fmtDate}}</p>{{end}}
</div>
{{if .FileUrl}}
@@ -133,7 +148,7 @@
<div id="result-load-more" class="px-4 pb-4">
{{if .HasMore}}
<div
hx-get='{{b "/result/list"}}?search={{.Search}}&filter={{.Filter}}&page={{.NextPage}}'
hx-get='{{b "/result/list"}}?search={{.Search}}&filter={{.Filter}}&packet={{.Packet}}&page={{.NextPage}}'
hx-trigger="revealed"
hx-swap="outerHTML"
class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-center text-xs font-medium text-slate-500">
@@ -217,6 +232,9 @@ document.addEventListener('keydown', function(e) {
<td class="num px-4 py-3 text-slate-500">{{.NIP}}</td>
<td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
<td class="px-4 py-3 text-slate-500">{{.Posisi}}</td>
<td class="px-4 py-3 text-slate-500 text-xs max-w-[200px]">
{{if .Tests}}<span title="{{.Tests}}" class="line-clamp-2">{{.Tests}}</span>{{else}}-{{end}}
</td>
<td class="num px-4 py-3 text-slate-500">
{{if .ReportDate}}{{.ReportDate | fmtDate}}{{else}}<span class="text-slate-300">—</span>{{end}}
</td>
@@ -234,13 +252,14 @@ document.addEventListener('keydown', function(e) {
{{end}}
</tbody>
<div id="result-mobile-rows" hx-swap-oob="beforeend">
<div id="result-mobile-rows" hx-swap-oob="beforeend" class="md:hidden" style="display:contents">
{{range .FilteredRows}}
<article class="rounded-xl border border-slate-200 p-3">
<article class="rounded-xl border border-slate-200 p-3 md:hidden">
<div class="flex items-start justify-between gap-3">
<div>
<p class="font-semibold text-slate-700">{{.Name}}</p>
<p class="mt-0.5 text-xs text-slate-400">{{.NIP}} &bull; {{.Posisi}}</p>
{{if .Tests}}<p class="mt-1 text-xs text-slate-500 line-clamp-1">{{.Tests}}</p>{{end}}
{{if .ReportDate}}<p class="mt-0.5 num text-xs text-slate-400">{{.ReportDate | fmtDate}}</p>{{end}}
</div>
{{if .FileUrl}}
@@ -259,7 +278,7 @@ document.addEventListener('keydown', function(e) {
<div id="result-load-more" hx-swap-oob="outerHTML">
{{if .HasMore}}
<div
hx-get='{{b "/result/list"}}?search={{.Search}}&filter={{.Filter}}&page={{.NextPage}}'
hx-get='{{b "/result/list"}}?search={{.Search}}&filter={{.Filter}}&packet={{.Packet}}&page={{.NextPage}}'
hx-trigger="revealed"
hx-swap="outerHTML"
class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-center text-xs font-medium text-slate-500">