Improve mobile UI and add infinite scroll

cpone-dashboard/templates/result/index.html

@@ -25,14 +25,14 @@
 
 {{/* Section 2: Summary cards */}}
 <section class="grid gap-4 sm:grid-cols-2">
-  <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">
-    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Has PDF</p>
-    <p class="num mt-2 text-3xl font-semibold text-brand-500">{{.Summary.HasPDF}}</p>
+  <article class="card border-l-4 border-l-brand-500 p-4">
+    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Sudah Ada Report Hasil</p>
+    <p class="num mt-3 text-3xl font-semibold text-brand-500">{{.Summary.HasPDF}}</p>
     <p class="mt-1 text-xs text-slate-400">Laporan hasil sudah tersedia</p>
   </article>
 </section>
@@ -69,7 +69,7 @@
       <h2 class="text-base font-semibold text-slate-700">Patient Result List</h2>
       <p class="text-xs text-slate-400">Data dari published_mcu_dashboard_sync</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>
 
   {{if .FilteredRows}}
@@ -84,7 +84,7 @@
           <th class="px-4 py-3 font-medium">Action</th>
         </tr>
       </thead>
-      <tbody class="divide-y divide-slate-100">
+      <tbody id="result-desktop-rows" class="divide-y divide-slate-100">
         {{range .FilteredRows}}
         <tr class="hover:bg-slate-50">
           <td class="num px-4 py-3 text-slate-500">{{.NIP}}</td>
@@ -109,7 +109,7 @@
     </table>
   </div>
 
-  <div class="grid gap-3 p-4 md:hidden">
+  <div id="result-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">
@@ -130,6 +130,19 @@
     </article>
     {{end}}
   </div>
+  <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-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 untuk project ini.
@@ -196,3 +209,64 @@ document.addEventListener('keydown', function(e) {
 });
 </script>
 {{end}}
+
+{{define "result-list-chunk"}}
+<tbody id="result-desktop-rows" hx-swap-oob="beforeend">
+  {{range .FilteredRows}}
+  <tr class="hover:bg-slate-50">
+    <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="num px-4 py-3 text-slate-500">
+      {{if .ReportDate}}{{.ReportDate | fmtDate}}{{else}}<span class="text-slate-300">—</span>{{end}}
+    </td>
+    <td class="px-4 py-3">
+      {{if .FileUrl}}
+      <button onclick="openPDFModal('{{$.PDFBaseURL}}{{.FileUrl}}', '{{.Name}}')"
+         class="inline-flex items-center gap-1.5 rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-600">
+        View PDF
+      </button>
+      {{else}}
+      <span class="text-xs text-slate-300">—</span>
+      {{end}}
+    </td>
+  </tr>
+  {{end}}
+</tbody>
+
+<div id="result-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>
+        {{if .ReportDate}}<p class="mt-0.5 num text-xs text-slate-400">{{.ReportDate | fmtDate}}</p>{{end}}
+      </div>
+      {{if .FileUrl}}
+      <button onclick="openPDFModal('{{$.PDFBaseURL}}{{.FileUrl}}', '{{.Name}}')"
+         class="shrink-0 rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-600">
+        View PDF
+      </button>
+      {{else}}
+      <span class="text-xs text-slate-300">No PDF</span>
+      {{end}}
+    </div>
+  </article>
+  {{end}}
+</div>
+
+<div id="result-load-more" hx-swap-oob="outerHTML">
+  {{if .HasMore}}
+  <div
+    hx-get='{{b "/result/list"}}?search={{.Search}}&filter={{.Filter}}&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}}