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

62
cpone-dashboard/templates/progress/index.html
View File

@@ -17,7 +17,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>
@@ -71,13 +71,23 @@
</section>
<section class="card p-4">
<form id="progress-filter-form" method="get" action="{{b "/progress"}}" class="grid gap-3 md:grid-cols-3">
<div class="md:col-span-2">
<form id="progress-filter-form" method="get" action="{{b "/progress"}}" 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="status" class="mb-2 block text-sm font-medium text-slate-600">Status</label>
<select id="status" name="status"
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">
@@ -88,7 +98,7 @@
<option value="not_published" {{if eq .Status "not_published"}}selected{{end}}>Not Published</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>
@@ -122,8 +132,8 @@
<th class="px-4 py-3 font-medium">Name</th>
<th class="px-4 py-3 font-medium">NIP</th>
<th class="px-4 py-3 font-medium">Posisi</th>
<th class="px-4 py-3 font-medium">Tests</th>
<th class="px-4 py-3 font-medium">Resume Status</th>
<th class="px-4 py-3 font-medium">Validated</th>
<th class="px-4 py-3 font-medium">Published</th>
</tr>
</thead>
@@ -133,6 +143,9 @@
<td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
<td class="px-4 py-3 num text-slate-500">{{.NIP}}</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="px-4 py-3">
{{if .ResumeStatus}}
<span class="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600">{{.ResumeStatus}}</span>
@@ -140,13 +153,6 @@
<span class="text-xs text-slate-400">—</span>
{{end}}
</td>
<td class="px-4 py-3">
{{if eq .Validated "Y"}}
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Y</span>
{{else}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">N</span>
{{end}}
</td>
<td class="px-4 py-3">
{{if eq .Published "Y"}}
<span class="rounded-full border border-brand-400/40 bg-brand-50 px-2 py-1 text-xs font-medium text-brand-500">Y</span>
@@ -167,17 +173,13 @@
<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}}
</div>
{{if .ResumeStatus}}
<span class="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600">{{.ResumeStatus}}</span>
{{end}}
</div>
<div class="mt-2 flex gap-2">
{{if eq .Validated "Y"}}
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Validated</span>
{{else}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">Not Validated</span>
{{end}}
{{if eq .Published "Y"}}
<span class="rounded-full border border-brand-400/40 bg-brand-50 px-2 py-1 text-xs font-medium text-brand-500">Published</span>
{{else}}
@@ -190,7 +192,7 @@
<div id="progress-load-more" class="px-4 pb-4">
{{if .HasMore}}
<div
hx-get='{{b "/progress/list"}}?search={{.Search}}&status={{.Status}}&page={{.NextPage}}'
hx-get='{{b "/progress/list"}}?search={{.Search}}&status={{.Status}}&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">
@@ -236,6 +238,9 @@
<td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
<td class="px-4 py-3 num text-slate-500">{{.NIP}}</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="px-4 py-3">
{{if .ResumeStatus}}
<span class="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600">{{.ResumeStatus}}</span>
@@ -243,13 +248,6 @@
<span class="text-xs text-slate-400">—</span>
{{end}}
</td>
<td class="px-4 py-3">
{{if eq .Validated "Y"}}
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Y</span>
{{else}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">N</span>
{{end}}
</td>
<td class="px-4 py-3">
{{if eq .Published "Y"}}
<span class="rounded-full border border-brand-400/40 bg-brand-50 px-2 py-1 text-xs font-medium text-brand-500">Y</span>
@@ -261,24 +259,20 @@
{{end}}
</tbody>
<div id="progress-mobile-rows" hx-swap-oob="beforeend">
<div id="progress-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}}
</div>
{{if .ResumeStatus}}
<span class="rounded-full border border-slate-200 bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600">{{.ResumeStatus}}</span>
{{end}}
</div>
<div class="mt-2 flex gap-2">
{{if eq .Validated "Y"}}
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Validated</span>
{{else}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">Not Validated</span>
{{end}}
{{if eq .Published "Y"}}
<span class="rounded-full border border-brand-400/40 bg-brand-50 px-2 py-1 text-xs font-medium text-brand-500">Published</span>
{{else}}
@@ -292,7 +286,7 @@
<div id="progress-load-more" hx-swap-oob="outerHTML">
{{if .HasMore}}
<div
hx-get='{{b "/progress/list"}}?search={{.Search}}&status={{.Status}}&page={{.NextPage}}'
hx-get='{{b "/progress/list"}}?search={{.Search}}&status={{.Status}}&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">