Update dashboard filters and packet views

2026-05-07 12:04:09 +07:00
parent da419950ce
commit 11f0d0436e
17 changed files with 1008 additions and 342 deletions
--- a/cpone-dashboard/templates/dashboard/index.html
+++ b/cpone-dashboard/templates/dashboard/index.html
@@ -162,7 +162,7 @@
 </style>

 <!-- SSE wrapper — satu koneksi, semua section dapat update otomatis -->
-<div hx-ext="sse" sse-connect="{{b "/dashboard/stream"}}?mode=daily&date={{.DateFrom}}">
+<div hx-ext="sse" sse-connect="{{b "/dashboard/stream"}}?mode=daily&date={{.DateFrom}}&mcu_id={{.McuID}}">

 <!-- Project Banner -->
 <section class="card p-5">
@@ -184,11 +184,11 @@
    </div>
    <div class="flex flex-wrap items-center gap-3">
      <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>
      <form method="get" action="{{b "/dashboard"}}" class="flex flex-wrap items-center gap-2" id="dashboard-filter-form">
        <input type="hidden" name="mode" value="daily"/>
-        <label class="text-xs font-medium text-slate-500">Tanggal Check-in</label>
+        <label class="text-xs font-medium text-slate-500">Check-in Date</label>
        <select name="date"
          id="dashboard-date"
          onchange="this.form.submit()"
@@ -204,7 +204,7 @@
        </select>
        <button type="submit"
          class="rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-600">
-          Lihat
+          View
        </button>
      </form>
    </div>
@@ -277,7 +277,7 @@
    <span class="sse-running-bar" aria-hidden="true"></span>
    <span class="sse-updating-label" aria-hidden="true">Updating...</span>
    <div class="flex items-center justify-between border-b border-slate-100 px-5 py-3">
-      <h2 class="text-sm font-semibold text-slate-700">Station Status</h2>
+      <h2 class="text-sm font-semibold text-slate-700">Station Status (Check In)</h2>
      <span class="flex items-center gap-1.5 text-xs font-medium text-slate-400 animate-pulse">
        <span class="h-1.5 w-1.5 rounded-full bg-slate-300"></span> Connecting...
      </span>
@@ -350,7 +350,7 @@ function fmtDate(s) {
  return d + '/' + m + '/' + y;
 }

-function openPatientsModal() {
+function openPatientsModal(kpiFilter) {
  const params = new URLSearchParams(window.location.search);
  const modal = document.getElementById('patients-modal');
  const body = document.getElementById('patients-modal-body');
@@ -359,6 +359,11 @@ function openPatientsModal() {
  const mode = params.get('mode') || 'daily';
  const date = params.get('date') || '';
  const dateEnd = params.get('date_end') || '';
+  if (kpiFilter) {
+    params.set('kpi_filter', kpiFilter);
+  } else {
+    params.delete('kpi_filter');
+  }

  if (mode === 'daily') {
    subtitle.textContent = date ? 'Tanggal: ' + fmtDate(date) : 'Hari ini';
@@ -375,6 +380,31 @@ function openPatientsModal() {
    .catch(() => { body.innerHTML = '<p class="p-6 text-sm text-red-500">Gagal memuat data.</p>'; });
 }

+window.clearPatientsKpiFilter = function () {
+  const form = document.getElementById('patients-filter-form');
+  const body = document.getElementById('patients-modal-body');
+  if (!form || !body) return;
+
+  const params = new URLSearchParams(window.location.search);
+  const searchInput = form.querySelector('input[name="search"]');
+  const progressSelect = form.querySelector('select[name="progress_status"]');
+  const kpiInput = form.querySelector('input[name="kpi_filter"]');
+
+  const search = searchInput ? searchInput.value.trim() : '';
+  const progressStatus = progressSelect ? progressSelect.value.trim() : '';
+  if (search) params.set('search', search); else params.delete('search');
+  if (progressStatus) params.set('progress_status', progressStatus); else params.delete('progress_status');
+  params.delete('kpi_filter');
+  params.set('page', '1');
+
+  if (kpiInput) kpiInput.value = '';
+  body.innerHTML = '<div class="flex items-center justify-center py-16 text-slate-400"><svg class="h-5 w-5 animate-spin mr-2 text-brand-400" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg>Memuat data...</div>';
+  fetch('{{b "/dashboard/patients"}}?' + params.toString())
+    .then(r => r.text())
+    .then(html => { body.innerHTML = html; })
+    .catch(() => { body.innerHTML = '<p class="p-6 text-sm text-red-500">Gagal memuat data.</p>'; });
+};
+
 (function() {
  const sseTargets = new Set(['sse-kpi', 'sse-stations', 'sse-arrivals']);
  const sseEventTargetMap = {
--- a/cpone-dashboard/templates/dashboard/partials/arrivals.html
+++ b/cpone-dashboard/templates/dashboard/partials/arrivals.html
@@ -7,9 +7,9 @@
      <span class="live-dot h-1.5 w-1.5 rounded-full bg-emerald-500"></span> Live
    </span>
    {{end}}
-    <button onclick="openPatientsModal()"
+    <button onclick="openPatientsModal('invited')"
      class="text-xs font-medium text-brand-500 hover:text-brand-700 transition-colors">
-      Lihat selengkapnya
+      View Details
    </button>
  </div>
 </div>
--- a/cpone-dashboard/templates/dashboard/partials/kpi.html
+++ b/cpone-dashboard/templates/dashboard/partials/kpi.html
@@ -1,6 +1,6 @@
 {{define "kpi"}}
 <!-- Invited Staff -->
-<article class="card border-l-4 border-l-brand-200 p-4">
+<article onclick="openPatientsModal('invited')" class="card border-l-4 border-l-brand-200 p-4 cursor-pointer transition hover:bg-slate-50">
  <div class="flex items-start justify-between">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Invited Staff</p>
    <svg class="h-4 w-4 text-brand-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -12,7 +12,7 @@
 </article>

 <!-- Total Staff -->
-<article class="card border-l-4 border-l-brand-300 p-4">
+<article onclick="openPatientsModal('total_staff')" class="card border-l-4 border-l-brand-300 p-4 cursor-pointer transition hover:bg-slate-50">
  <div class="flex items-start justify-between">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Total Staff</p>
    <svg class="h-4 w-4 text-brand-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -28,7 +28,7 @@
 </article>

 <!-- Checked In -->
-<article class="kpi-card kpi-card-inprogress card border-l-4 border-l-brand-500 p-4" data-kpi-kind="inprogress" data-kpi-value="{{.CheckedIn}}">
+<article onclick="openPatientsModal('inprogress')" class="kpi-card kpi-card-inprogress card border-l-4 border-l-brand-500 p-4 cursor-pointer transition hover:bg-slate-50" data-kpi-kind="inprogress" data-kpi-value="{{.CheckedIn}}">
  <div class="flex items-start justify-between">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">In Progress</p>
    <svg class="h-4 w-4 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -40,7 +40,7 @@
 </article>

 <!-- Checked Out -->
-<article class="kpi-card kpi-card-checkedout card border-l-4 border-l-emerald-500 p-4" data-kpi-kind="checkedout" data-kpi-value="{{.CheckedOut}}">
+<article onclick="openPatientsModal('checkedout')" class="kpi-card kpi-card-checkedout card border-l-4 border-l-emerald-500 p-4 cursor-pointer transition hover:bg-slate-50" data-kpi-kind="checkedout" data-kpi-value="{{.CheckedOut}}">
  <div class="flex items-start justify-between">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Checked Out</p>
    <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
--- a/cpone-dashboard/templates/dashboard/partials/patients.html
+++ b/cpone-dashboard/templates/dashboard/partials/patients.html
@@ -1,80 +1,214 @@
 {{define "patients"}}
+<div class="border-b border-slate-100 px-5 py-3">
+  <form id="patients-filter-form" class="grid gap-2 md:grid-cols-[1fr_220px_auto]">
+    <input type="hidden" name="kpi_filter" value="{{.KpiFilter}}"/>
+    <input type="text" name="search" value="{{.Search}}" placeholder="Search name or preregister ID"
+      class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200"/>
+    <select name="progress_status"
+      class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
+      <option value="" {{if eq .ProgressStatus ""}}selected{{end}}>All Progress</option>
+      <option value="not_yet" {{if eq .ProgressStatus "not_yet"}}selected{{end}}>Not Yet</option>
+      <option value="partial" {{if eq .ProgressStatus "partial"}}selected{{end}}>Progress / Partial</option>
+      <option value="done" {{if eq .ProgressStatus "done"}}selected{{end}}>Done</option>
+    </select>
+    <button type="submit"
+      class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-600">
+      Filter
+    </button>
+  </form>
+  {{if .KpiFilter}}
+  <div class="mt-2 inline-flex items-center gap-2 rounded-md border border-brand-200 bg-brand-50 px-2 py-1 text-xs font-medium text-brand-700">
+    <span>
+      KPI Filter:
+      {{if eq .KpiFilter "invited"}}Invited Staff{{end}}
+      {{if eq .KpiFilter "total_staff"}}Total Staff{{end}}
+      {{if eq .KpiFilter "inprogress"}}In Progress{{end}}
+      {{if eq .KpiFilter "checkedout"}}Checked Out{{end}}
+    </span>
+    <button type="button" id="clear-kpi-filter-btn" onclick="if (window.clearPatientsKpiFilter) window.clearPatientsKpiFilter()" class="inline-flex h-4 w-4 items-center justify-center rounded-sm text-brand-700 hover:bg-brand-100" title="Clear KPI filter">
+      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+    </button>
+  </div>
+  {{end}}
+</div>
+
+<div id="patients-list-wrap">
+  <div id="patients-list" class="divide-y divide-slate-100">
+    {{template "patients-rows-content" .}}
+  </div>
+  <div id="patients-load-more" class="px-5 py-3 text-center text-xs text-slate-400">
+    {{if .HasMore}}Memuat data berikutnya...{{else}}Semua data sudah ditampilkan{{end}}
+  </div>
+</div>
+
+<script>
+(function () {
+  const form = document.getElementById('patients-filter-form');
+  const list = document.getElementById('patients-list');
+  const loadMore = document.getElementById('patients-load-more');
+  if (!form || !list || !loadMore) return;
+
+  let loading = false;
+  let hasMore = {{if .HasMore}}true{{else}}false{{end}};
+  let nextPage = {{.NextPage}};
+
+  function buildParams(page) {
+    const params = new URLSearchParams(window.location.search);
+    const formData = new FormData(form);
+    const search = String(formData.get('search') || '').trim();
+    const progressStatus = String(formData.get('progress_status') || '').trim();
+    const kpiFilter = String(formData.get('kpi_filter') || '').trim();
+    if (search) params.set('search', search); else params.delete('search');
+    if (progressStatus) params.set('progress_status', progressStatus); else params.delete('progress_status');
+    if (kpiFilter) params.set('kpi_filter', kpiFilter); else params.delete('kpi_filter');
+    params.set('page', String(page));
+    params.set('chunk', '1');
+    return params;
+  }
+
+  function fetchPage(page, append) {
+    if (loading) return;
+    loading = true;
+    loadMore.textContent = 'Memuat data berikutnya...';
+    fetch('{{b "/dashboard/patients"}}?' + buildParams(page).toString())
+      .then(function (r) { return r.text(); })
+      .then(function (html) {
+        const tmp = document.createElement('div');
+        tmp.innerHTML = html;
+        const rows = tmp.querySelector('[data-patients-rows]');
+        const meta = tmp.querySelector('[data-patients-meta]');
+        if (!rows || !meta) {
+          throw new Error('invalid chunk');
+        }
+        if (append) {
+          list.insertAdjacentHTML('beforeend', rows.innerHTML);
+        } else {
+          list.innerHTML = rows.innerHTML;
+        }
+        hasMore = meta.getAttribute('data-has-more') === '1';
+        nextPage = parseInt(meta.getAttribute('data-next-page') || '1', 10);
+        loadMore.textContent = hasMore ? 'Scroll ke bawah untuk muat lagi...' : 'Semua data sudah ditampilkan';
+      })
+      .catch(function () {
+        loadMore.textContent = 'Gagal memuat data.';
+      })
+      .finally(function () {
+        loading = false;
+      });
+  }
+
+  form.addEventListener('submit', function (e) {
+    e.preventDefault();
+    hasMore = true;
+    nextPage = 1;
+    fetchPage(1, false);
+  });
+
+  const clearKpiBtn = document.getElementById('clear-kpi-filter-btn');
+  if (clearKpiBtn) {
+    clearKpiBtn.addEventListener('click', function () {
+      const kpiInput = form.querySelector('input[name="kpi_filter"]');
+      if (kpiInput) kpiInput.value = '';
+      hasMore = true;
+      nextPage = 1;
+      fetchPage(1, false);
+    });
+  }
+
+  const observer = new IntersectionObserver(function (entries) {
+    if (!entries[0].isIntersecting || loading || !hasMore) return;
+    fetchPage(nextPage, true);
+  }, { root: document.getElementById('patients-modal-body'), threshold: 0.1 });
+
+  observer.observe(loadMore);
+})();
+</script>
+{{end}}
+
+{{define "patients-rows"}}
+<div data-patients-rows>
+  {{template "patients-rows-content" .}}
+</div>
+<div data-patients-meta data-has-more="{{if .HasMore}}1{{else}}0{{end}}" data-next-page="{{.NextPage}}"></div>
+{{end}}
+
+{{define "patients-rows-content"}}
 {{if not .Patients}}
 <div class="flex flex-col items-center justify-center py-16 text-slate-400">
-  <svg class="mb-3 h-10 w-10 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
-  </svg>
-  <p class="text-sm font-medium">Belum ada data pasien pada tanggal ini.</p>
+  <p class="text-sm font-medium">Belum ada data pasien pada filter ini.</p>
 </div>
 {{else}}
-<div class="divide-y divide-slate-100">
-  {{range .Patients}}
-  {{if and (gt .DoneCount 0) (eq .DoneCount (len .Stations))}}
-  <div class="px-5 py-4 bg-emerald-50/60 transition-colors hover:bg-emerald-50">
-  {{else}}
-  <div class="px-5 py-4 hover:bg-slate-50 transition-colors">
-  {{end}}
-    <!-- Row atas: nama + waktu -->
-    <div class="flex flex-wrap items-center justify-between gap-3">
-      <div class="flex items-center gap-2.5">
-        <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-brand-50 text-xs font-bold text-brand-600">
-          {{.Name | initials}}
-        </div>
-        <div>
-          <p class="font-semibold text-slate-800">{{.Name}}</p>
-          {{if $.IsRange}}<p class="text-xs text-slate-400 num">{{.Date | fmtDate}}</p>{{end}}
-        </div>
+{{range .Patients}}
+{{if and (gt .DoneCount 0) (eq .DoneCount (len .Stations))}}
+<div class="px-5 py-4 bg-emerald-50/60 transition-colors hover:bg-emerald-50">
+{{else}}
+<div class="px-5 py-4 hover:bg-slate-50 transition-colors">
+{{end}}
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div class="flex items-center gap-2.5">
+      <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-brand-50 text-xs font-bold text-brand-600">
+        {{.Name | initials}}
      </div>
-      <div class="flex items-center gap-3 text-xs">
-        <span class="num text-slate-500">
-          Masuk: <span class="font-semibold text-slate-700">{{.InTime}}</span>
-        </span>
-        {{if .HasOut}}
-        <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 font-semibold text-emerald-700 num">
-          <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
-          Keluar: {{.OutTime}}
-        </span>
-        {{else}}
-        <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 font-semibold text-amber-600">
-          <span class="h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse"></span>
-          Dalam proses
-        </span>
-        {{end}}
-        <span class="text-slate-400">
-          <span class="font-semibold text-brand-600">{{.DoneCount}}</span>/{{len .Stations}} station selesai
-        </span>
+      <div>
+        <p class="font-semibold text-slate-800">{{.Name}}</p>
+        {{if $.IsRange}}<p class="text-xs text-slate-400 num">{{.Date | fmtDate}}</p>{{end}}
      </div>
    </div>
-    <!-- Row bawah: station badges -->
-    {{if .Stations}}
-    <div class="mt-2.5 flex flex-wrap gap-1.5 pl-10">
-      {{range .Stations}}
-      {{if .Done}}
-      <span class="inline-flex max-w-full flex-col gap-0.5 rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-800 cursor-default">
-        <span class="inline-flex items-center gap-1">
-          <svg class="h-3 w-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
-          {{.Station}}
-        </span>
-        <span class="num pl-4 text-[10px] font-semibold text-emerald-700/80">
-          Proses: {{if .ProcessAt}}{{.ProcessAt}}{{else}}-{{end}} | Selesai: {{if .DoneAt}}{{.DoneAt}}{{else}}-{{end}}
-        </span>
-      </span>
+    <div class="flex items-center gap-3 text-xs">
+      <span class="num text-slate-500">Check-in: <span class="font-semibold text-slate-700">{{if .InTime}}{{.InTime}}{{else}}-{{end}}</span></span>
+      {{if and .InTime .HasOut}}
+      <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 font-semibold text-emerald-700 num">Check-out: {{.OutTime}}</span>
+      {{else if .InTime}}
+      <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 font-semibold text-amber-600">In Progress</span>
+      {{end}}
+      {{if eq .ProgressStatus "done"}}
+      <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-1 font-semibold text-emerald-700">Done</span>
+      {{else if eq .ProgressStatus "partial"}}
+      <span class="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-1 font-semibold text-amber-700">Progress / Partial</span>
      {{else}}
-      <span class="inline-flex max-w-full flex-col gap-0.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-500 cursor-default">
-        <span class="inline-flex items-center gap-1">
-          <svg class="h-3 w-3 flex-shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-          {{.Station}}
-        </span>
-        <span class="num pl-4 text-[10px] font-semibold text-slate-400">
-          Proses: {{if .ProcessAt}}{{.ProcessAt}}{{else}}-{{end}} | Selesai: {{if .DoneAt}}{{.DoneAt}}{{else}}-{{end}}
-        </span>
-      </span>
-      {{end}}
+      <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-1 font-semibold text-slate-600">Not Yet</span>
      {{end}}
+      <span class="text-slate-400"><span class="font-semibold text-brand-600">{{.DoneCount}}</span>/{{len .Stations}} station selesai</span>
    </div>
+  </div>
+  {{if .Stations}}
+  <div class="mt-2.5 flex flex-wrap gap-2 pl-10">
+    {{range .Stations}}
+    {{if .Done}}
+    <div class="inline-flex max-w-full flex-col border border-emerald-300 bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-800">
+      <span class="inline-flex items-center gap-1">
+        <svg class="h-3 w-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+        {{.Station}}
+      </span>
+      <span class="num text-[10px] font-semibold text-emerald-700/80">
+        Process: {{if .ProcessAt}}{{.ProcessAt}}{{else}}-{{end}} | Done: {{if .DoneAt}}{{.DoneAt}}{{else}}-{{end}}
+      </span>
+    </div>
+    {{else if .Progress}}
+    <div class="inline-flex max-w-full flex-col border border-amber-300 bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-800">
+      <span class="inline-flex items-center gap-1">
+        <svg class="h-3 w-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5"/></svg>
+        {{.Station}}
+      </span>
+      <span class="num text-[10px] font-semibold text-amber-700/80">
+        Process: {{if .ProcessAt}}{{.ProcessAt}}{{else}}-{{end}} | Done: {{if .DoneAt}}{{.DoneAt}}{{else}}-{{end}}
+      </span>
+    </div>
+    {{else}}
+    <div class="inline-flex max-w-full flex-col border border-slate-300 bg-slate-50 px-2.5 py-1 text-xs font-medium text-slate-600">
+      <span class="inline-flex items-center gap-1">
+        <svg class="h-3 w-3 flex-shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        {{.Station}}
+      </span>
+      <span class="num text-[10px] font-semibold text-slate-400">
+        Process: {{if .ProcessAt}}{{.ProcessAt}}{{else}}-{{end}} | Done: {{if .DoneAt}}{{.DoneAt}}{{else}}-{{end}}
+      </span>
+    </div>
+    {{end}}
    {{end}}
  </div>
  {{end}}
 </div>
 {{end}}
 {{end}}
+{{end}}
--- a/cpone-dashboard/templates/dashboard/partials/stations.html
+++ b/cpone-dashboard/templates/dashboard/partials/stations.html
@@ -1,6 +1,6 @@
 {{define "stations"}}
 <div class="flex items-center justify-between border-b border-slate-100 px-5 py-3">
-  <h2 class="text-sm font-semibold text-slate-700">Station Status</h2>
+  <h2 class="text-sm font-semibold text-slate-700">Station Status (Check In)</h2>
  {{if .IsLive}}
  <span class="flex items-center gap-1.5 text-xs font-medium text-emerald-600">
    <span class="live-dot h-1.5 w-1.5 rounded-full bg-emerald-500"></span> Live
@@ -13,8 +13,8 @@
    <thead>
      <tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-400">
        <th class="px-3 py-2">Station</th>
-        <th class="hidden px-3 py-2 text-right sm:table-cell">Sudah</th>
-        <th class="px-3 py-2 text-right">Belum</th>
+        <th class="hidden px-3 py-2 text-right sm:table-cell">Done</th>
+        <th class="px-3 py-2 text-right">Pending</th>
        <th class="px-3 py-2 text-right">Total</th>
        <th class="px-3 py-2 sm:w-40">Progress</th>
      </tr>