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

Initial commit

Browse Source
This commit is contained in:
sas.fajri
2026-04-30 14:27:01 +07:00
commit e29e943c27
70 changed files with 8909 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
cpone-dashboard/templates/arrival/index.html Normal file
View File

@@ -0,0 +1,287 @@
{{define "title"}}Arrival Tracking — CpOne{{end}}
{{define "header-title"}}Arrival Tracking{{end}}
{{define "content"}}
{{$proj := .CurrentProject}}
<section class="card p-5">
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-brand-500">Ongoing Project</p>
<h2 class="mt-1 text-lg font-semibold text-slate-900">
{{if $proj.Label}}{{$proj.Label}}{{else}}MCU #{{$proj.McuID}}{{end}}
</h2>
<p class="mt-0.5 text-sm text-slate-500">
{{$proj.Number}} &bull; {{$proj.CorporateName}} &bull;
<span class="num">{{$proj.StartDate | fmtDate}}</span> &ndash; <span class="num">{{$proj.EndDate | fmtDate}}</span>
</p>
</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
</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>
<select name="date"
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
</button>
</form>
</div>
</div>
</section>
<section class="grid gap-4 sm:grid-cols-3">
<article class="card p-5">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Checked In</p>
<p class="num mt-2 text-3xl font-semibold text-slate-900">{{.Summary.CheckedIn}}</p>
<p class="mt-1 text-xs text-slate-400">Sudah check-in pada tanggal ini</p>
</article>
<article class="card p-5">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Not Check-in Yet</p>
<p class="num mt-2 text-3xl font-semibold text-slate-900">{{.Summary.Pending}}</p>
<p class="mt-1 text-xs text-slate-400">Belum masuk ke area MCU</p>
</article>
<article class="card p-5">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Total Schedule</p>
<p class="num mt-2 text-3xl font-semibold text-slate-900">{{.Summary.Total}}</p>
<p class="mt-1 text-xs text-slate-400">Peserta yang dijadwalkan hari ini</p>
</article>
</section>
<section class="grid gap-5 xl:grid-cols-2">
<article class="card p-5">
<div class="mb-3">
<p class="text-sm font-semibold text-slate-700">Check-in Overview</p>
<p class="text-xs text-slate-400">Inner ring: checked-in summary, outer ring: distribution by department / posisi</p>
</div>
<div id="arrival-overview-chart" class="h-72 w-full"></div>
</article>
<article class="card p-5">
<div class="mb-3">
<p class="text-sm font-semibold text-slate-700">Per Station Distribution</p>
<p class="text-xs text-slate-400">Current observed station loads</p>
</div>
<div id="station-distribution-chart" class="h-64 w-full"></div>
</article>
</section>
<section class="card p-4">
<form method="get" action="{{b "/arrival"}}" class="grid gap-3 md:grid-cols-3">
<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>
<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"/>
</div>
<div>
<label for="dept" class="mb-2 block text-sm font-medium text-slate-600">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">
<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">
Filter
</button>
</div>
</form>
</section>
<section class="card overflow-hidden">
<div class="flex items-center justify-between border-b border-slate-100 px-5 py-3">
<div>
<h2 class="text-base font-semibold text-slate-700">Live Arrival List</h2>
<p class="text-xs text-slate-400">Tanggal: {{.Date | fmtDate}}</p>
</div>
<span class="text-xs font-medium text-slate-400">{{len .FilteredRows}} 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}}
<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">
<tr>
<th class="px-4 py-3 font-medium">Time</th>
<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">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
{{range .FilteredRows}}
<tr class="hover:bg-slate-50">
<td class="px-4 py-3 num">{{if .InTime}}{{.InTime}}{{else}}-{{end}}</td>
<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">
{{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>
{{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>
{{else if eq .StatusTone "warning"}}
<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="rounded-full border border-slate-200 bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600">{{.Status}}</span>
{{end}}
{{end}}
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
<div class="grid gap-3 p-4 md:hidden">
{{range .FilteredRows}}
<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-2 flex flex-wrap gap-1.5">
{{if .Stations}}
{{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}}
{{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>
{{else if eq .StatusTone "warning"}}
<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="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>
</article>
{{end}}
</div>
{{else}}
<div class="px-5 py-10 text-center text-sm text-slate-400">
Belum ada data arrival pada tanggal ini.
</div>
{{end}}
</section>
<script>
(function() {
const overviewData = {{.OverviewJSON}};
const stationData = {{.DepartmentJSON}};
const deptColors = ['#f59e0b', '#8b5cf6', '#f97316', '#06b6d4', '#ec4899', '#84cc16', '#14b8a6'];
const overviewEl = document.getElementById('arrival-overview-chart');
if (overviewEl && overviewData && typeof echarts !== 'undefined') {
const overviewChart = echarts.init(overviewEl);
const outerData = (overviewData.depts || []).map(function(d) {
return { value: d.value, name: d.name };
});
overviewChart.setOption({
color: ['#3b50a0', '#cbd5e1'].concat(deptColors),
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
legend: {
type: 'scroll',
orient: 'vertical',
right: 0,
top: 'middle',
textStyle: { color: '#64748b', fontSize: 11 },
selectedMode: false,
pageIconColor: '#3b50a0',
pageTextStyle: { color: '#64748b' }
},
series: [
{
name: 'Check-in Summary',
type: 'pie',
radius: ['28%', '45%'],
center: ['38%', '48%'],
label: { color: '#334155', formatter: '{b}' },
data: [
{ value: overviewData.checkedIn || 0, name: 'Checked In' },
{ value: overviewData.pending || 0, name: 'Not Check-in Yet' }
]
},
{
name: 'Dept Detail',
type: 'pie',
radius: ['55%', '72%'],
center: ['38%', '48%'],
label: { show: false },
labelLine: { show: false },
data: outerData
}
]
});
window.addEventListener('resize', () => overviewChart.resize());
}
const stationEl = document.getElementById('station-distribution-chart');
if (stationEl && stationData && typeof echarts !== 'undefined') {
const stationChart = echarts.init(stationEl);
var revLabels = (stationData.labels || []).slice().reverse();
var revCounts = (stationData.counts || []).slice().reverse();
stationChart.setOption({
color: ['#3b50a0'],
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
grid: { left: 10, right: 20, top: 10, bottom: 10, containLabel: true },
xAxis: { type: 'value', axisLabel: { color: '#64748b' } },
yAxis: {
type: 'category',
axisLabel: { color: '#64748b' },
data: revLabels
},
series: [
{
name: 'Patients',
type: 'bar',
barWidth: 18,
data: revCounts,
itemStyle: { borderRadius: [0, 6, 6, 0] }
}
]
});
window.addEventListener('resize', () => stationChart.resize());
}
})();
</script>
{{end}}