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

4
cpone-dashboard/templates/dashboard/partials/arrivals.html
View File

@@ -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>

8
cpone-dashboard/templates/dashboard/partials/kpi.html
View File

@@ -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">

260
cpone-dashboard/templates/dashboard/partials/patients.html
View File

@@ -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}}

6
cpone-dashboard/templates/dashboard/partials/stations.html
View File

@@ -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>