Initial commit

cpone-dashboard/templates/dashboard/partials/stations.html

@@ -0,0 +1,53 @@
+{{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>
+  {{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
+  </span>
+  {{end}}
+</div>
+{{if .Rows}}
+<div class="p-3">
+  <table class="min-w-full text-sm">
+    <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="px-3 py-2 text-right">Sudah</th>
+        <th class="px-3 py-2 text-right">Belum</th>
+        <th class="px-3 py-2 text-right">Total</th>
+        <th class="px-3 py-2 w-40">Progress</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-slate-50">
+      {{range .Rows}}
+      <tr class="hover:bg-slate-50 transition-colors">
+        <td class="px-3 py-2.5 font-medium text-slate-700">
+          {{.Station | stationShort}}
+        </td>
+        <td class="num px-3 py-2.5 text-right font-semibold text-slate-900">{{.Processed}}</td>
+        <td class="num px-3 py-2.5 text-right text-amber-600">{{.Pending}}</td>
+        <td class="num px-3 py-2.5 text-right text-slate-400">{{.Total}}</td>
+        <td class="px-3 py-2.5">
+          <div class="flex items-center gap-2">
+            <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
+              <div class="h-full rounded-full transition-all"
+                style="width: {{printf "%.1f" .Pct}}%; background: {{if ge .Pct 90.0}}#10b981{{else if ge .Pct 60.0}}#3b50a0{{else}}#f59e0b{{end}}">
+              </div>
+            </div>
+            <span class="num text-xs font-semibold {{if ge .Pct 90.0}}text-emerald-600{{else if ge .Pct 60.0}}text-brand-600{{else}}text-amber-600{{end}}">
+              {{printf "%.0f%%" .Pct}}
+            </span>
+          </div>
+        </td>
+      </tr>
+      {{end}}
+    </tbody>
+  </table>
+</div>
+{{else}}
+<div class="px-5 py-8 text-center text-sm text-slate-400">
+  Belum ada data station pada tanggal ini.
+</div>
+{{end}}
+{{end}}