120 lines
5.1 KiB
HTML
120 lines
5.1 KiB
HTML
{{define "projects"}}
|
||
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Pilih Project — CpOne Dashboard</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] },
|
||
colors: {
|
||
brand: {
|
||
50: '#eef0fb',
|
||
100: '#dde2f7',
|
||
200: '#bbc5ef',
|
||
300: '#8f9fe4',
|
||
400: '#6677d6',
|
||
500: '#3b50a0',
|
||
600: '#2d3d7a',
|
||
700: '#212d5a',
|
||
800: '#161e3c',
|
||
900: '#0b0f1e',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</head>
|
||
<body class="min-h-screen bg-slate-100 font-sans text-slate-800">
|
||
|
||
<!-- Header -->
|
||
<header class="bg-brand-500 text-white">
|
||
<div class="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
|
||
<a href="{{b "/projects"}}" class="shrink-0 rounded-lg bg-white px-3 py-1.5">
|
||
<img src="{{b "/static/img/logo.png"}}" alt="Logo" class="h-8 w-auto">
|
||
</a>
|
||
<div class="flex items-center gap-2 text-sm">
|
||
<span class="rounded-full bg-white/15 px-3 py-1 text-xs font-semibold tracking-wide">{{.Username}}</span>
|
||
<a href="{{b "/logout"}}" class="rounded-lg px-3 py-1.5 font-medium opacity-75 transition hover:bg-white/15 hover:opacity-100">Logout</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||
|
||
<div class="mb-6">
|
||
<h1 class="text-xl font-semibold text-slate-800">Pilih Project</h1>
|
||
<p class="mt-1 text-sm text-slate-500">Pilih salah satu project MCU untuk mulai monitoring.</p>
|
||
</div>
|
||
|
||
{{if .CurrentProject}}
|
||
<div class="mb-6 rounded-2xl border border-brand-100 bg-brand-50 px-4 py-3 text-sm text-brand-700">
|
||
Project aktif saat ini:
|
||
<span class="font-semibold">{{if .CurrentProject.Label}}{{.CurrentProject.Label}}{{else}}MCU #{{.CurrentProject.McuID}}{{end}}</span>
|
||
<span class="text-brand-500">•</span>
|
||
<a href="{{b "/dashboard"}}" class="font-semibold underline decoration-brand-200 underline-offset-2">Buka dashboard</a>
|
||
</div>
|
||
{{end}}
|
||
|
||
{{if not .Projects}}
|
||
<div class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-300 bg-white py-16 text-center">
|
||
<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="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776"/>
|
||
</svg>
|
||
<p class="text-sm font-medium text-slate-500">Belum ada project yang di-assign</p>
|
||
<p class="mt-1 text-xs text-slate-400">Hubungi administrator untuk mendapatkan akses.</p>
|
||
</div>
|
||
{{else}}
|
||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||
{{range .Projects}}
|
||
<a href="{{b "/projects/select"}}?mcu_id={{.McuID}}"
|
||
class="group flex flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-brand-400 hover:shadow-md">
|
||
|
||
<!-- Company + badge -->
|
||
<div class="flex items-start justify-between gap-2">
|
||
<div>
|
||
<p class="text-xs font-semibold uppercase tracking-widest text-brand-400">{{.Number}}</p>
|
||
<p class="mt-0.5 font-semibold leading-snug text-slate-800">{{.CorporateName}}</p>
|
||
</div>
|
||
<span class="shrink-0 rounded-full bg-brand-50 px-2.5 py-0.5 text-xs font-semibold text-brand-600">
|
||
MCU #{{.McuID}}
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Label -->
|
||
{{if .Label}}
|
||
<p class="mt-2 text-sm text-slate-500">{{.Label}}</p>
|
||
{{end}}
|
||
|
||
<!-- Footer info -->
|
||
<div class="mt-4 flex items-center justify-between border-t border-slate-100 pt-3 text-xs text-slate-400">
|
||
<span>{{.StartDate}}{{if .EndDate}} – {{.EndDate}}{{end}}</span>
|
||
<span class="font-medium text-slate-500">{{.TotalParticipant}} peserta</span>
|
||
</div>
|
||
|
||
<!-- Hover cta -->
|
||
<div class="mt-3 flex items-center gap-1 text-xs font-semibold text-brand-500 opacity-0 transition group-hover:opacity-100">
|
||
Buka Dashboard
|
||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
|
||
</svg>
|
||
</div>
|
||
|
||
</a>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
|
||
</main>
|
||
</body>
|
||
</html>
|
||
{{end}}
|