Initial commit
This commit is contained in:
sas.fajri
119
cpone-dashboard/templates/projects/index.html
Normal file
119
cpone-dashboard/templates/projects/index.html
Normal file
@@ -0,0 +1,119 @@
|
||||
{{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}}
|
||||
Reference in New Issue
Block a user