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

Improve mobile UI and add infinite scroll

Browse Source
This commit is contained in:
sas.fajri
2026-05-04 10:44:38 +07:00
parent b07f04217e
commit 7c378f78bf
17 changed files with 729 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,19 +23,19 @@
</section>
<section class="grid gap-4 sm:grid-cols-3">
<article class="card p-5">
<article class="card border-l-4 border-l-brand-300 p-4">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Total Patients</p>
<p class="num mt-2 text-3xl font-semibold text-slate-900">{{.Summary.Total}}</p>
<p class="num mt-3 text-3xl font-semibold text-slate-900">{{.Summary.Total}}</p>
<p class="mt-1 text-xs text-slate-400">Peserta dalam project ini</p>
</article>
<article class="card p-5">
<article class="card border-l-4 border-l-emerald-500 p-4">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Validated</p>
<p class="num mt-2 text-3xl font-semibold text-emerald-600">{{.Summary.Validated}}</p>
<p class="num mt-3 text-3xl font-semibold text-emerald-600">{{.Summary.Validated}}</p>
<p class="mt-1 text-xs text-slate-400">Resume sudah divalidasi dokter</p>
</article>
<article class="card p-5">
<article class="card border-l-4 border-l-brand-500 p-4">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Published</p>
<p class="num mt-2 text-3xl font-semibold text-brand-500">{{.Summary.Published}}</p>
<p class="num mt-3 text-3xl font-semibold text-brand-500">{{.Summary.Published}}</p>
<p class="mt-1 text-xs text-slate-400">Hasil sudah diupload</p>
</article>
</section>
@@ -102,7 +102,7 @@
<h2 class="text-base font-semibold text-slate-700">Patient Resume List</h2>
<p class="text-xs text-slate-400">Data dari mcu_patient_resume_status</p>
</div>
<span class="text-xs font-medium text-slate-400">{{len .FilteredRows}} ditampilkan</span>
<span class="text-xs font-medium text-slate-400">{{.VisibleCount}} / {{.TotalFiltered}} ditampilkan</span>
</div>
<div class="border-b border-slate-100 px-5 py-3">
@@ -127,7 +127,7 @@
<th class="px-4 py-3 font-medium">Published</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tbody id="progress-desktop-rows" class="divide-y divide-slate-100">
{{range .FilteredRows}}
<tr class="hover:bg-slate-50">
<td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
@@ -160,7 +160,7 @@
</table>
</div>
<div class="grid gap-3 p-4 md:hidden">
<div id="progress-mobile-rows" class="grid gap-3 p-4 md:hidden">
{{range .FilteredRows}}
<article class="rounded-xl border border-slate-200 p-3">
<div class="flex items-start justify-between gap-3">
@@ -187,6 +187,19 @@
</article>
{{end}}
</div>
<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-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">
Memuat data berikutnya...
</div>
{{else}}
<div class="text-center text-xs text-slate-400">Semua data sudah ditampilkan</div>
{{end}}
</div>
{{else}}
<div class="px-5 py-10 text-center text-sm text-slate-400">
Belum ada data resume untuk project ini.
@@ -215,3 +228,78 @@
})();
</script>
{{end}}
{{define "progress-list-chunk"}}
<tbody id="progress-desktop-rows" hx-swap-oob="beforeend">
{{range .FilteredRows}}
<tr class="hover:bg-slate-50">
<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">
{{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>
{{else}}
<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>
{{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>
</tr>
{{end}}
</tbody>
<div id="progress-mobile-rows" hx-swap-oob="beforeend">
{{range .FilteredRows}}
<article class="rounded-xl border border-slate-200 p-3">
<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>
</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}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-500">Not Published</span>
{{end}}
</div>
</article>
{{end}}
</div>
<div id="progress-load-more" hx-swap-oob="outerHTML">
{{if .HasMore}}
<div
hx-get='{{b "/progress/list"}}?search={{.Search}}&status={{.Status}}&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">
Memuat data berikutnya...
</div>
{{else}}
<div class="text-center text-xs text-slate-400">Semua data sudah ditampilkan</div>
{{end}}
</div>
{{end}}