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

2
cpone-dashboard/templates/abnormal/index.html
View File

@@ -18,7 +18,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>

363
cpone-dashboard/templates/arrival/index.html
View File

@@ -18,20 +18,21 @@
</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 "/arrival"}}" class="flex flex-wrap items-center gap-2">
<input type="hidden" name="search" value="{{.Search}}"/>
<input type="hidden" name="dept" value="{{.Department}}"/>
<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"
onchange="this.form.submit()"
class="num rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm text-slate-700 focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-200">
{{range .AvailableDates}}
<option value="{{.}}" {{if eq . $.Date}}selected{{end}}>{{. | fmtDate}}</option>
{{end}}
</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>
@@ -74,26 +75,44 @@
</article>
</section>
<section class="card p-5">
<div class="mb-3">
<p class="text-sm font-semibold text-slate-700">Per Paket Completion</p>
<p class="text-xs text-slate-400">Total pasien per paket vs sudah menyelesaikan semua station</p>
</div>
<div id="paket-distribution-chart" class="h-72 w-full"></div>
</section>
<section class="card p-4">
<form id="arrival-filter-form" method="get" action="{{b "/arrival"}}" class="grid gap-3 md:grid-cols-3">
<form id="arrival-filter-form" method="get" action="{{b "/arrival"}}" class="flex flex-wrap items-end gap-2">
<input type="hidden" name="date" value="{{.Date}}"/>
<div class="md:col-span-2">
<label for="search" class="mb-2 block text-sm font-medium text-slate-600">Search Participant</label>
<div class="min-w-[160px] flex-1">
<label for="search" class="mb-1 block text-xs font-medium text-slate-500">Search</label>
<input id="search" name="search" value="{{.Search}}" type="text" placeholder="Name or 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"/>
class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200"/>
</div>
<div>
<label for="dept" class="mb-2 block text-sm font-medium text-slate-600">Department</label>
<div class="min-w-[160px] flex-1">
<label for="paket" class="mb-1 block text-xs font-medium text-slate-500">Paket</label>
<select id="paket" name="paket"
class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
<option value="" {{if eq .Paket ""}}selected{{end}}>All Paket</option>
{{range .PaketOptions}}
<option value="{{.Code}}" {{if eq .Code $.Paket}}selected{{end}}>{{.Name}}</option>
{{end}}
</select>
</div>
<div class="min-w-[140px] flex-1">
<label for="dept" class="mb-1 block text-xs font-medium text-slate-500">Department</label>
<select id="dept" name="dept"
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">
class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-200">
<option value="" {{if eq .Department ""}}selected{{end}}>All Departments</option>
{{range .DepartmentOptions}}
<option value="{{.}}" {{if eq . $.Department}}selected{{end}}>{{.}}</option>
{{end}}
</select>
</div>
<div class="md:col-span-3 flex justify-end">
<button type="submit" class="rounded-xl bg-brand-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-600">
<div class="shrink-0">
<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>
</div>
@@ -109,15 +128,8 @@
<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">
<div class="flex flex-wrap items-center gap-2 text-xs">
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 font-medium text-slate-600">Not Performed Yet</span>
<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 font-medium text-amber-700">In Progress</span>
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 font-medium text-emerald-700">Performed</span>
</div>
</div>
{{if .FilteredRows}}
{{if .FilteredRows}}
<div class="hidden overflow-x-auto md:block">
<table class="min-w-full text-sm">
<thead class="bg-slate-50 text-left text-slate-500">
@@ -126,6 +138,7 @@
<th class="px-4 py-3 font-medium">Employee ID</th>
<th class="px-4 py-3 font-medium">Name</th>
<th class="px-4 py-3 font-medium">Department</th>
<th class="px-4 py-3 font-medium">Tests</th>
<th class="px-4 py-3 font-medium">Status</th>
</tr>
</thead>
@@ -136,21 +149,30 @@
<td class="px-4 py-3 num">{{.NIP}}</td>
<td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
<td class="px-4 py-3 text-slate-500">{{.Department}}</td>
<td class="px-4 py-3 text-slate-500 text-xs max-w-[160px]">
{{if .Pemeriksaan}}<span title="{{.Pemeriksaan}}" class="line-clamp-2">{{.Pemeriksaan}}</span>{{else}}-{{end}}
</td>
<td class="px-4 py-3">
{{if .Stations}}
<div class="flex flex-wrap gap-1.5">
{{range .Stations}}
{{if eq .Tone "success"}}
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Name}}</span>
{{else if eq .Tone "warning"}}
<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Name}}</span>
{{else if eq .Tone "danger"}}
<span class="rounded-full border border-rose-200 bg-rose-50 px-2 py-1 text-xs font-medium text-rose-700">{{.Name}}</span>
{{else}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Name}}</span>
{{end}}
{{end}}
</div>
{{if not .InTime}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Not Check-In Yet</span>
{{else if .Stations}}
<details class="group">
<summary class="list-none cursor-pointer">
<div class="flex flex-wrap gap-1.5 items-center">
{{if gt .DoneCount 0}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Done ({{.DoneCount}})</span>{{end}}
{{if gt .ProgressCount 0}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">In Progress ({{.ProgressCount}})</span>{{end}}
{{if gt .PendingCount 0}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Pending ({{.PendingCount}})</span>{{end}}
<svg class="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</div>
</summary>
<div class="mt-2 flex flex-wrap gap-1.5">
{{range .Stations}}
{{if eq .Tone "success"}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Name}}</span>
{{else if eq .Tone "warning"}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Name}}</span>
{{else}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Name}}</span>{{end}}
{{end}}
</div>
</details>
{{else}}
{{if eq .StatusTone "success"}}
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Status}}</span>
@@ -172,61 +194,48 @@
<article class="rounded-xl border border-slate-200 p-3">
<p class="font-semibold text-slate-700">{{.Name}}</p>
<p class="mt-1 text-xs text-slate-400">{{if .InTime}}{{.InTime}}{{else}}-{{end}} • {{.NIP}} • {{.Department}}</p>
<div class="mt-3 flex flex-col gap-1.5">
{{if .Stations}}
{{range .Stations}}
{{if eq .Tone "success"}}
<span class="flex w-full items-center gap-2 border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
</svg>
<span class="truncate">{{.Name}}</span>
</span>
{{else if eq .Tone "warning"}}
<span class="flex w-full items-center gap-2 border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
<span class="truncate">{{.Name}}</span>
</span>
{{else if eq .Tone "danger"}}
<span class="flex w-full items-center gap-2 border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-medium text-rose-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
<span class="truncate">{{.Name}}</span>
</span>
{{else}}
<span class="flex w-full items-center gap-2 border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-medium text-slate-600">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
<span class="truncate">{{.Name}}</span>
</span>
{{end}}
{{end}}
{{if .Pemeriksaan}}<p class="mt-1 text-xs text-slate-500 line-clamp-1">{{.Pemeriksaan}}</p>{{end}}
<div class="mt-3">
{{if not .InTime}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Not Check-In Yet</span>
{{else if .Stations}}
<details class="group">
<summary class="list-none cursor-pointer">
<div class="flex flex-wrap gap-1.5 items-center">
{{if gt .DoneCount 0}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Done ({{.DoneCount}})</span>{{end}}
{{if gt .ProgressCount 0}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">In Progress ({{.ProgressCount}})</span>{{end}}
{{if gt .PendingCount 0}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Pending ({{.PendingCount}})</span>{{end}}
<svg class="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</div>
</summary>
<div class="mt-2 flex flex-col gap-1.5">
{{range .Stations}}
{{if eq .Tone "success"}}
<span class="flex w-full items-center gap-2 border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
<span class="truncate">{{.Name}}</span>
</span>
{{else if eq .Tone "warning"}}
<span class="flex w-full items-center gap-2 border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="truncate">{{.Name}}</span>
</span>
{{else}}
<span class="flex w-full items-center gap-2 border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-medium text-slate-600">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="truncate">{{.Name}}</span>
</span>
{{end}}
{{end}}
</div>
</details>
{{else}}
{{if eq .StatusTone "success"}}
<span class="flex w-full items-center gap-2 border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
</svg>
<span class="truncate">{{.Status}}</span>
</span>
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Status}}</span>
{{else if eq .StatusTone "warning"}}
<span class="flex w-full items-center gap-2 border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
<span class="truncate">{{.Status}}</span>
</span>
<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Status}}</span>
{{else}}
<span class="flex w-full items-center gap-2 border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-medium text-slate-600">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
<span class="truncate">{{.Status}}</span>
</span>
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Status}}</span>
{{end}}
{{end}}
</div>
@@ -236,7 +245,7 @@
<div id="arrival-load-more" class="px-4 pb-4">
{{if .HasMore}}
<div
hx-get='{{b "/arrival/list"}}?date={{.Date}}&search={{.Search}}&dept={{.Department}}&page={{.NextPage}}'
hx-get='{{b "/arrival/list"}}?date={{.Date}}&search={{.Search}}&paket={{.Paket}}&dept={{.Department}}&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">
@@ -274,6 +283,7 @@
const overviewData = {{.OverviewJSON}};
const stationData = {{.DepartmentJSON}};
const paketData = {{.PaketChartJSON}};
const deptColors = ['#f59e0b', '#8b5cf6', '#f97316', '#06b6d4', '#ec4899', '#84cc16', '#14b8a6'];
const overviewEl = document.getElementById('arrival-overview-chart');
@@ -307,7 +317,7 @@
show: !isMobile,
type: 'scroll',
orient: 'vertical',
left: '58%',
left: '68%',
right: 0,
top: 'middle',
textStyle: { color: '#64748b', fontSize: 11 },
@@ -321,7 +331,7 @@
name: 'Check-in Summary',
type: 'pie',
radius: ['28%', '45%'],
center: isMobile ? ['50%', '50%'] : ['38%', '48%'],
center: isMobile ? ['50%', '50%'] : ['30%', '48%'],
label: { show: false },
labelLine: { show: false },
data: [
@@ -333,7 +343,7 @@
name: 'Dept Detail',
type: 'pie',
radius: ['55%', '72%'],
center: isMobile ? ['50%', '50%'] : ['38%', '48%'],
center: isMobile ? ['50%', '50%'] : ['30%', '48%'],
label: { show: false },
labelLine: { show: false },
data: outerData
@@ -370,6 +380,63 @@
});
window.addEventListener('resize', () => stationChart.resize());
}
const paketEl = document.getElementById('paket-distribution-chart');
if (paketEl && paketData && typeof echarts !== 'undefined') {
const paketChart = echarts.init(paketEl);
var paketLabels = (paketData.labels || []).slice().reverse();
var paketDone = (paketData.done || []).slice().reverse();
var paketRemaining = (paketData.remaining || []).slice().reverse();
paketChart.setOption({
color: ['#10b981', '#cbd5e1'],
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: function (params) {
var done = 0;
var remaining = 0;
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName === 'Completed') done = params[i].value || 0;
if (params[i].seriesName === 'Not Completed') remaining = params[i].value || 0;
}
var total = done + remaining;
return params[0].name + '<br/>Total: ' + total + '<br/>Completed: ' + done + '<br/>Not Completed: ' + remaining;
}
},
legend: {
bottom: 0,
textStyle: { color: '#64748b', fontSize: 11 }
},
grid: { left: 10, right: 20, top: 10, bottom: 32, containLabel: true },
xAxis: {
type: 'value',
axisLabel: { color: '#64748b' }
},
yAxis: {
type: 'category',
axisLabel: { color: '#64748b' },
data: paketLabels
},
series: [
{
name: 'Completed',
type: 'bar',
stack: 'total',
barWidth: 18,
data: paketDone
},
{
name: 'Not Completed',
type: 'bar',
stack: 'total',
barWidth: 18,
data: paketRemaining,
itemStyle: { borderRadius: [0, 6, 6, 0] }
}
]
});
window.addEventListener('resize', () => paketChart.resize());
}
})();
</script>
{{end}}
@@ -382,21 +449,30 @@
<td class="px-4 py-3 num">{{.NIP}}</td>
<td class="px-4 py-3 font-medium text-slate-700">{{.Name}}</td>
<td class="px-4 py-3 text-slate-500">{{.Department}}</td>
<td class="px-4 py-3 text-slate-500 text-xs max-w-[160px]">
{{if .Pemeriksaan}}<span title="{{.Pemeriksaan}}" class="line-clamp-2">{{.Pemeriksaan}}</span>{{else}}-{{end}}
</td>
<td class="px-4 py-3">
{{if .Stations}}
<div class="flex flex-wrap gap-1.5">
{{range .Stations}}
{{if eq .Tone "success"}}
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Name}}</span>
{{else if eq .Tone "warning"}}
<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Name}}</span>
{{else if eq .Tone "danger"}}
<span class="rounded-full border border-rose-200 bg-rose-50 px-2 py-1 text-xs font-medium text-rose-700">{{.Name}}</span>
{{else}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Name}}</span>
{{end}}
{{end}}
</div>
{{if not .InTime}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Not Check-In Yet</span>
{{else if .Stations}}
<details class="group">
<summary class="list-none cursor-pointer">
<div class="flex flex-wrap gap-1.5 items-center">
{{if gt .DoneCount 0}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Done ({{.DoneCount}})</span>{{end}}
{{if gt .ProgressCount 0}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">In Progress ({{.ProgressCount}})</span>{{end}}
{{if gt .PendingCount 0}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Pending ({{.PendingCount}})</span>{{end}}
<svg class="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</div>
</summary>
<div class="mt-2 flex flex-wrap gap-1.5">
{{range .Stations}}
{{if eq .Tone "success"}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Name}}</span>
{{else if eq .Tone "warning"}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Name}}</span>
{{else}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Name}}</span>{{end}}
{{end}}
</div>
</details>
{{else}}
{{if eq .StatusTone "success"}}
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Status}}</span>
@@ -411,52 +487,53 @@
{{end}}
</tbody>
<div id="arrival-mobile-rows" hx-swap-oob="beforeend">
<div id="arrival-mobile-rows" hx-swap-oob="beforeend" 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">
<p class="font-semibold text-slate-700">{{.Name}}</p>
<p class="mt-1 text-xs text-slate-400">{{if .InTime}}{{.InTime}}{{else}}-{{end}} • {{.NIP}} • {{.Department}}</p>
<div class="mt-3 flex flex-col gap-1.5">
{{if .Stations}}
{{range .Stations}}
{{if eq .Tone "success"}}
<span class="flex w-full items-center gap-2 border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
<span class="truncate">{{.Name}}</span>
</span>
{{else if eq .Tone "warning"}}
<span class="flex w-full items-center gap-2 border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="truncate">{{.Name}}</span>
</span>
{{else if eq .Tone "danger"}}
<span class="flex w-full items-center gap-2 border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-medium text-rose-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="truncate">{{.Name}}</span>
</span>
{{else}}
<span class="flex w-full items-center gap-2 border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-medium text-slate-600">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="truncate">{{.Name}}</span>
</span>
{{end}}
{{end}}
{{if .Pemeriksaan}}<p class="mt-1 text-xs text-slate-500 line-clamp-1">{{.Pemeriksaan}}</p>{{end}}
<div class="mt-3">
{{if not .InTime}}
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Not Check-In Yet</span>
{{else if .Stations}}
<details class="group">
<summary class="list-none cursor-pointer">
<div class="flex flex-wrap gap-1.5 items-center">
{{if gt .DoneCount 0}}<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">Done ({{.DoneCount}})</span>{{end}}
{{if gt .ProgressCount 0}}<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">In Progress ({{.ProgressCount}})</span>{{end}}
{{if gt .PendingCount 0}}<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">Pending ({{.PendingCount}})</span>{{end}}
<svg class="h-3 w-3 shrink-0 text-slate-400 transition-transform group-open:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</div>
</summary>
<div class="mt-2 flex flex-col gap-1.5">
{{range .Stations}}
{{if eq .Tone "success"}}
<span class="flex w-full items-center gap-2 border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
<span class="truncate">{{.Name}}</span>
</span>
{{else if eq .Tone "warning"}}
<span class="flex w-full items-center gap-2 border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="truncate">{{.Name}}</span>
</span>
{{else}}
<span class="flex w-full items-center gap-2 border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-medium text-slate-600">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="truncate">{{.Name}}</span>
</span>
{{end}}
{{end}}
</div>
</details>
{{else}}
{{if eq .StatusTone "success"}}
<span class="flex w-full items-center gap-2 border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
<span class="truncate">{{.Status}}</span>
</span>
<span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700">{{.Status}}</span>
{{else if eq .StatusTone "warning"}}
<span class="flex w-full items-center gap-2 border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-medium text-amber-700">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="truncate">{{.Status}}</span>
</span>
<span class="rounded-full border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700">{{.Status}}</span>
{{else}}
<span class="flex w-full items-center gap-2 border border-slate-200 bg-slate-100 px-3 py-2 text-xs font-medium text-slate-600">
<svg class="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
<span class="truncate">{{.Status}}</span>
</span>
<span class="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Status}}</span>
{{end}}
{{end}}
</div>
@@ -467,7 +544,7 @@
<div id="arrival-load-more" hx-swap-oob="outerHTML">
{{if .HasMore}}
<div
hx-get='{{b "/arrival/list"}}?date={{.Date}}&search={{.Search}}&dept={{.Department}}&page={{.NextPage}}'
hx-get='{{b "/arrival/list"}}?date={{.Date}}&search={{.Search}}&paket={{.Paket}}&dept={{.Department}}&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">

42
cpone-dashboard/templates/dashboard/index.html
View File

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

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>

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

37
cpone-dashboard/templates/result/index.html
View File

@@ -18,7 +18,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>
@@ -39,13 +39,23 @@
{{/* Section 3: Filter form */}}
<section class="card p-4">
<form method="get" action="{{b "/result"}}" class="grid gap-3 md:grid-cols-3">
<div class="md:col-span-2">
<form method="get" action="{{b "/result"}}" 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="filter" class="mb-2 block text-sm font-medium text-slate-600">Status PDF</label>
<select id="filter" name="filter"
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">
@@ -54,7 +64,7 @@
<option value="no_pdf" {{if eq .Filter "no_pdf"}}selected{{end}}>No PDF</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>
@@ -80,6 +90,7 @@
<th class="px-4 py-3 font-medium">Employee ID</th>
<th class="px-4 py-3 font-medium">Patient</th>
<th class="px-4 py-3 font-medium">Department</th>
<th class="px-4 py-3 font-medium">Tests</th>
<th class="px-4 py-3 font-medium">Report Date</th>
<th class="px-4 py-3 font-medium">Action</th>
</tr>
@@ -90,6 +101,9 @@
<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="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="num px-4 py-3 text-slate-500">
{{if .ReportDate}}{{.ReportDate | fmtDate}}{{else}}<span class="text-slate-300">—</span>{{end}}
</td>
@@ -116,6 +130,7 @@
<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}}
{{if .ReportDate}}<p class="mt-0.5 num text-xs text-slate-400">{{.ReportDate | fmtDate}}</p>{{end}}
</div>
{{if .FileUrl}}
@@ -133,7 +148,7 @@
<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-get='{{b "/result/list"}}?search={{.Search}}&filter={{.Filter}}&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">
@@ -217,6 +232,9 @@ document.addEventListener('keydown', function(e) {
<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="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="num px-4 py-3 text-slate-500">
{{if .ReportDate}}{{.ReportDate | fmtDate}}{{else}}<span class="text-slate-300">—</span>{{end}}
</td>
@@ -234,13 +252,14 @@ document.addEventListener('keydown', function(e) {
{{end}}
</tbody>
<div id="result-mobile-rows" hx-swap-oob="beforeend">
<div id="result-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}}
{{if .ReportDate}}<p class="mt-0.5 num text-xs text-slate-400">{{.ReportDate | fmtDate}}</p>{{end}}
</div>
{{if .FileUrl}}
@@ -259,7 +278,7 @@ document.addEventListener('keydown', function(e) {
<div id="result-load-more" hx-swap-oob="outerHTML">
{{if .HasMore}}
<div
hx-get='{{b "/result/list"}}?search={{.Search}}&filter={{.Filter}}&page={{.NextPage}}'
hx-get='{{b "/result/list"}}?search={{.Search}}&filter={{.Filter}}&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">