711 lines
33 KiB
Plaintext
711 lines
33 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>🐔 Ayam Counter Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
* { font-family: 'Inter', sans-serif; }
|
|
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.glass-dark {
|
|
background: rgba(17, 24, 39, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.gradient-bg-warm {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
}
|
|
|
|
.gradient-bg-success {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
}
|
|
|
|
.gradient-bg-gold {
|
|
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|
}
|
|
|
|
.card-hover {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.6s ease-out forwards;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slideUp 0.5s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.stagger-1 { animation-delay: 0.1s; }
|
|
.stagger-2 { animation-delay: 0.2s; }
|
|
.stagger-3 { animation-delay: 0.3s; }
|
|
.stagger-4 { animation-delay: 0.4s; }
|
|
.stagger-5 { animation-delay: 0.5s; }
|
|
|
|
.pulse-dot {
|
|
animation: pulse-dot 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.table-row {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.table-row:hover {
|
|
background-color: rgba(99, 102, 241, 0.05);
|
|
}
|
|
|
|
.batch-badge {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.count-badge {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #c7c7c7;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #a0a0a0;
|
|
}
|
|
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
|
|
.modal-overlay {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<!-- Header -->
|
|
<header class="gradient-bg text-white shadow-lg">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="bg-white/20 p-3 rounded-2xl backdrop-blur-sm">
|
|
<i class="fas fa-drumstick-bite text-3xl"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-2xl font-bold tracking-tight">Ayam Counter Dashboard</h1>
|
|
<p class="text-white/80 text-sm mt-1">Real-time batch counting analytics</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="bg-white/10 px-4 py-2 rounded-xl backdrop-blur-sm">
|
|
<span class="text-xs text-white/70 uppercase tracking-wider">Counting Day</span>
|
|
<p class="font-semibold" id="current-date">--</p>
|
|
</div>
|
|
<div class="bg-white/10 px-4 py-2 rounded-xl backdrop-blur-sm flex items-center space-x-2">
|
|
<div class="w-2 h-2 bg-green-400 rounded-full pulse-dot"></div>
|
|
<span class="text-sm font-medium">Live</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Summary Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<!-- Today's Count -->
|
|
<div class="glass rounded-2xl p-6 card-hover animate-slide-up stagger-1">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-3 rounded-xl gradient-bg text-white">
|
|
<i class="fas fa-calendar-day text-xl"></i>
|
|
</div>
|
|
<span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-full">Today</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-gray-900" id="today-count">--</h3>
|
|
<p class="text-sm text-gray-500 mt-1">Total Ayam Potong</p>
|
|
<div class="mt-3 flex items-center text-sm">
|
|
<span class="text-gray-400" id="today-batches">-- batches</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Yesterday -->
|
|
<div class="glass rounded-2xl p-6 card-hover animate-slide-up stagger-2">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-3 rounded-xl gradient-bg-warm text-white">
|
|
<i class="fas fa-history text-xl"></i>
|
|
</div>
|
|
<span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-full">Yesterday</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-gray-900" id="yesterday-count">--</h3>
|
|
<p class="text-sm text-gray-500 mt-1">Total Ayam Potong</p>
|
|
<div class="mt-3 flex items-center text-sm">
|
|
<span class="text-gray-400" id="yesterday-batches">-- batches</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Average -->
|
|
<div class="glass rounded-2xl p-6 card-hover animate-slide-up stagger-3">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-3 rounded-xl gradient-bg-success text-white">
|
|
<i class="fas fa-chart-line text-xl"></i>
|
|
</div>
|
|
<span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-full">Average</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-gray-900" id="avg-count">--</h3>
|
|
<p class="text-sm text-gray-500 mt-1">Per Day</p>
|
|
<div class="mt-3 flex items-center text-sm">
|
|
<span class="text-gray-400" id="total-days">-- days recorded</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Best Day -->
|
|
<div class="glass rounded-2xl p-6 card-hover animate-slide-up stagger-4">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-3 rounded-xl gradient-bg-gold text-white">
|
|
<i class="fas fa-trophy text-xl"></i>
|
|
</div>
|
|
<span class="text-xs font-medium text-gray-500 bg-gray-100 px-2 py-1 rounded-full">Best Day</span>
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-gray-900" id="best-count">--</h3>
|
|
<p class="text-sm text-gray-500 mt-1" id="best-date">--</p>
|
|
<div class="mt-3 flex items-center text-sm">
|
|
<span class="text-amber-500 font-medium"><i class="fas fa-star mr-1"></i>Record</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
|
<!-- Main Chart -->
|
|
<div class="lg:col-span-2 glass rounded-2xl p-6 animate-slide-up stagger-3">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-gray-900">Daily Trends</h2>
|
|
<p class="text-sm text-gray-500">Object count over time</p>
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<button onclick="loadChartData(7)" class="px-3 py-1 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors chart-filter active" data-days="7">7D</button>
|
|
<button onclick="loadChartData(14)" class="px-3 py-1 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors chart-filter" data-days="14">14D</button>
|
|
<button onclick="loadChartData(30)" class="px-3 py-1 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors chart-filter" data-days="30">30D</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="mainChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Panel -->
|
|
<div class="glass rounded-2xl p-6 animate-slide-up stagger-4">
|
|
<h2 class="text-lg font-bold text-gray-900 mb-4">Quick Stats</h2>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center text-white">
|
|
<i class="fas fa-layer-group"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900">Grand Total</p>
|
|
<p class="text-xs text-gray-500">All time</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-xl font-bold text-gray-900" id="grand-total">--</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-10 h-10 rounded-lg gradient-bg-warm flex items-center justify-center text-white">
|
|
<i class="fas fa-cubes"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900">Total Batches</p>
|
|
<p class="text-xs text-gray-500">All time</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-xl font-bold text-gray-900" id="grand-batches">--</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-10 h-10 rounded-lg gradient-bg-success flex items-center justify-center text-white">
|
|
<i class="fas fa-percentage"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900">Avg per Batch</p>
|
|
<p class="text-xs text-gray-500">Overall average</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-xl font-bold text-gray-900" id="avg-per-batch">--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 pt-6 border-t border-gray-200">
|
|
<h3 class="text-sm font-semibold text-gray-700 mb-3">Recent Activity</h3>
|
|
<div id="recent-batches" class="space-y-3 max-h-48 overflow-y-auto">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Daily Detail Table -->
|
|
<div class="glass rounded-2xl p-6 animate-slide-up stagger-5">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-gray-900">Daily Records</h2>
|
|
<p class="text-sm text-gray-500">Click on a row to view batch details</p>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<input type="date" id="date-filter" class="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
|
<button onclick="filterByDate()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700 transition-colors">
|
|
<i class="fas fa-filter mr-1"></i>Filter
|
|
</button>
|
|
<button onclick="loadAllDates()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="text-left text-xs font-semibold text-gray-500 uppercase tracking-wider border-b border-gray-200">
|
|
<th class="pb-3 pl-4">Date</th>
|
|
<th class="pb-3">Total Count</th>
|
|
<th class="pb-3">Batches</th>
|
|
<th class="pb-3">Avg/Batch</th>
|
|
<th class="pb-3">Status</th>
|
|
<th class="pb-3 pr-4">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="daily-table-body">
|
|
<!-- Populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Detail Modal -->
|
|
<div id="detail-modal" class="fixed inset-0 z-50 hidden">
|
|
<div class="modal-overlay absolute inset-0" onclick="closeModal()"></div>
|
|
<div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
|
|
<div class="glass-dark rounded-2xl p-6 w-full max-w-3xl pointer-events-auto transform transition-all scale-95 opacity-0" id="modal-content">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-white" id="modal-title">Batch Details</h2>
|
|
<p class="text-gray-400 text-sm mt-1" id="modal-subtitle">--</p>
|
|
</div>
|
|
<button onclick="closeModal()" class="text-gray-400 hover:text-white transition-colors">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-4 mb-6">
|
|
<div class="bg-white/5 rounded-xl p-4 text-center">
|
|
<p class="text-2xl font-bold text-white" id="modal-total">--</p>
|
|
<p class="text-xs text-gray-400 mt-1">Total Count</p>
|
|
</div>
|
|
<div class="bg-white/5 rounded-xl p-4 text-center">
|
|
<p class="text-2xl font-bold text-white" id="modal-batches">--</p>
|
|
<p class="text-xs text-gray-400 mt-1">Total Batches</p>
|
|
</div>
|
|
<div class="bg-white/5 rounded-xl p-4 text-center">
|
|
<p class="text-2xl font-bold text-white" id="modal-avg">--</p>
|
|
<p class="text-xs text-gray-400 mt-1">Avg Duration (min)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto max-h-96 overflow-y-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="text-left text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-700">
|
|
<th class="pb-3 pl-2">Batch #</th>
|
|
<th class="pb-3">Count</th>
|
|
<th class="pb-3">Start</th>
|
|
<th class="pb-3">End</th>
|
|
<th class="pb-3">Duration</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="modal-table-body" class="text-gray-300">
|
|
<!-- Populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let mainChart = null;
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadSummary();
|
|
loadChartData(7);
|
|
loadRecentBatches();
|
|
loadAllDates();
|
|
|
|
// Update every 30 seconds
|
|
setInterval(() => {
|
|
loadSummary();
|
|
loadRecentBatches();
|
|
}, 30000);
|
|
});
|
|
|
|
async function loadSummary() {
|
|
try {
|
|
const res = await fetch('/api/summary');
|
|
const data = await res.json();
|
|
|
|
document.getElementById('current-date').textContent = data.today.date;
|
|
document.getElementById('today-count').textContent = data.today.total_count.toLocaleString();
|
|
document.getElementById('today-batches').textContent = `${data.today.total_batches} batches`;
|
|
|
|
document.getElementById('yesterday-count').textContent = data.yesterday.total_count.toLocaleString();
|
|
document.getElementById('yesterday-batches').textContent = `${data.yesterday.total_batches} batches`;
|
|
|
|
document.getElementById('avg-count').textContent = Number(data.average_per_day).toLocaleString();
|
|
document.getElementById('total-days').textContent = `${data.all_time.total_days} days recorded`;
|
|
|
|
document.getElementById('best-count').textContent = data.best_day.count.toLocaleString();
|
|
document.getElementById('best-date').textContent = data.best_day.date || '--';
|
|
|
|
document.getElementById('grand-total').textContent = data.all_time.grand_total.toLocaleString();
|
|
document.getElementById('grand-batches').textContent = data.all_time.grand_batches.toLocaleString();
|
|
|
|
const avgBatch = data.all_time.grand_batches > 0
|
|
? (data.all_time.grand_total / data.all_time.grand_batches).toFixed(1)
|
|
: 0;
|
|
document.getElementById('avg-per-batch').textContent = avgBatch;
|
|
|
|
} catch (err) {
|
|
console.error('Failed to load summary:', err);
|
|
}
|
|
}
|
|
|
|
async function loadChartData(days) {
|
|
// Update active button
|
|
document.querySelectorAll('.chart-filter').forEach(btn => {
|
|
btn.classList.remove('bg-indigo-600', 'text-white');
|
|
btn.classList.add('bg-gray-100', 'text-gray-700');
|
|
if (parseInt(btn.dataset.days) === days) {
|
|
btn.classList.remove('bg-gray-100', 'text-gray-700');
|
|
btn.classList.add('bg-indigo-600', 'text-white');
|
|
}
|
|
});
|
|
|
|
try {
|
|
const res = await fetch(`/api/daily-data?days=${days}`);
|
|
const data = await res.json();
|
|
|
|
const labels = data.map(d => {
|
|
const date = new Date(d.date);
|
|
return date.toLocaleDateString('id-ID', { weekday: 'short', day: 'numeric', month: 'short' });
|
|
});
|
|
const counts = data.map(d => d.total_count);
|
|
const batches = data.map(d => d.total_batches);
|
|
|
|
if (mainChart) {
|
|
mainChart.destroy();
|
|
}
|
|
|
|
const ctx = document.getElementById('mainChart').getContext('2d');
|
|
mainChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: 'Total Count',
|
|
data: counts,
|
|
backgroundColor: 'rgba(102, 126, 234, 0.8)',
|
|
borderColor: 'rgba(102, 126, 234, 1)',
|
|
borderWidth: 2,
|
|
borderRadius: 8,
|
|
yAxisID: 'y'
|
|
},
|
|
{
|
|
label: 'Batches',
|
|
data: batches,
|
|
type: 'line',
|
|
borderColor: 'rgba(245, 87, 108, 1)',
|
|
backgroundColor: 'rgba(245, 87, 108, 0.1)',
|
|
borderWidth: 3,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: 'rgba(245, 87, 108, 1)',
|
|
tension: 0.4,
|
|
yAxisID: 'y1'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
padding: 20,
|
|
font: { size: 12 }
|
|
}
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(17, 24, 39, 0.9)',
|
|
padding: 12,
|
|
cornerRadius: 8,
|
|
titleFont: { size: 13 },
|
|
bodyFont: { size: 12 }
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: { font: { size: 11 } }
|
|
},
|
|
y: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
grid: { color: 'rgba(0,0,0,0.05)' },
|
|
title: { display: true, text: 'Count' }
|
|
},
|
|
y1: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'right',
|
|
grid: { display: false },
|
|
title: { display: true, text: 'Batches' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.error('Failed to load chart:', err);
|
|
}
|
|
}
|
|
|
|
async function loadRecentBatches() {
|
|
try {
|
|
const res = await fetch('/api/recent-batches?limit=5');
|
|
const batches = await res.json();
|
|
|
|
const container = document.getElementById('recent-batches');
|
|
container.innerHTML = batches.map(b => `
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl text-sm">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-8 h-8 rounded-lg batch-badge flex items-center justify-center text-white text-xs font-bold">
|
|
#${b.batch_number}
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-gray-900">${b.date}</p>
|
|
<p class="text-xs text-gray-500">${formatTime(b.start_time)} - ${formatTime(b.end_time)}</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-gray-900">${b.count}</p>
|
|
<p class="text-xs text-gray-500">${b.duration_minutes} min</p>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
} catch (err) {
|
|
console.error('Failed to load recent batches:', err);
|
|
}
|
|
}
|
|
|
|
async function loadAllDates() {
|
|
try {
|
|
const res = await fetch('/api/available-dates');
|
|
const dates = await res.json();
|
|
renderDailyTable(dates);
|
|
} catch (err) {
|
|
console.error('Failed to load dates:', err);
|
|
}
|
|
}
|
|
|
|
function renderDailyTable(dates) {
|
|
const tbody = document.getElementById('daily-table-body');
|
|
|
|
if (dates.length === 0) {
|
|
tbody.innerHTML = `
|
|
<tr>
|
|
<td colspan="6" class="py-8 text-center text-gray-500">
|
|
<i class="fas fa-inbox text-4xl mb-2 text-gray-300"></i>
|
|
<p>No data available</p>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = dates.map(d => {
|
|
const isToday = d.date === document.getElementById('current-date').textContent;
|
|
const avgPerBatch = d.total_batches > 0 ? (d.total_count / d.total_batches).toFixed(1) : 0;
|
|
|
|
return `
|
|
<tr class="table-row border-b border-gray-100 cursor-pointer" onclick="showDayDetail('${d.date}')">
|
|
<td class="py-4 pl-4">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-10 h-10 rounded-xl ${isToday ? 'gradient-bg' : 'bg-gray-100'} flex items-center justify-center ${isToday ? 'text-white' : 'text-gray-600'}">
|
|
<i class="fas fa-calendar"></i>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-gray-900">${d.date}</p>
|
|
${isToday ? '<span class="text-xs text-indigo-600 font-medium">Today</span>' : ''}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-4">
|
|
<span class="text-lg font-bold text-gray-900">${d.total_count.toLocaleString()}</span>
|
|
</td>
|
|
<td class="py-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
|
|
${d.total_batches} batch${d.total_batches !== 1 ? 'es' : ''}
|
|
</span>
|
|
</td>
|
|
<td class="py-4 text-gray-600">${avgPerBatch}</td>
|
|
<td class="py-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${isToday ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}">
|
|
${isToday ? '<span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5 pulse-dot"></span>Active' : 'Completed'}
|
|
</span>
|
|
</td>
|
|
<td class="py-4 pr-4">
|
|
<button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
|
|
<i class="fas fa-eye mr-1"></i>View
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
async function showDayDetail(date) {
|
|
try {
|
|
const res = await fetch(`/api/day-detail/${date}`);
|
|
const data = await res.json();
|
|
|
|
document.getElementById('modal-title').textContent = `Batch Details - ${date}`;
|
|
document.getElementById('modal-subtitle').textContent = `${data.total_batches} batches, ${data.total_count} total objects`;
|
|
document.getElementById('modal-total').textContent = data.total_count.toLocaleString();
|
|
document.getElementById('modal-batches').textContent = data.total_batches;
|
|
document.getElementById('modal-avg').textContent = data.avg_duration_minutes;
|
|
|
|
const tbody = document.getElementById('modal-table-body');
|
|
tbody.innerHTML = data.batches.map(b => `
|
|
<tr class="border-b border-gray-700/50 hover:bg-white/5 transition-colors">
|
|
<td class="py-3 pl-2">
|
|
<span class="inline-flex items-center justify-center w-8 h-8 rounded-lg batch-badge text-white text-xs font-bold">
|
|
${b.batch_number}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 font-medium text-white">${b.count}</td>
|
|
<td class="py-3 text-gray-400">${formatTime(b.start_time)}</td>
|
|
<td class="py-3 text-gray-400">${formatTime(b.end_time)}</td>
|
|
<td class="py-3 text-gray-400">${b.duration_minutes} min</td>
|
|
</tr>
|
|
`).join('');
|
|
|
|
const modal = document.getElementById('detail-modal');
|
|
const content = document.getElementById('modal-content');
|
|
modal.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
content.classList.remove('scale-95', 'opacity-0');
|
|
content.classList.add('scale-100', 'opacity-100');
|
|
}, 10);
|
|
|
|
} catch (err) {
|
|
console.error('Failed to load day detail:', err);
|
|
}
|
|
}
|
|
|
|
function closeModal() {
|
|
const modal = document.getElementById('detail-modal');
|
|
const content = document.getElementById('modal-content');
|
|
content.classList.remove('scale-100', 'opacity-100');
|
|
content.classList.add('scale-95', 'opacity-0');
|
|
setTimeout(() => {
|
|
modal.classList.add('hidden');
|
|
}, 200);
|
|
}
|
|
|
|
function filterByDate() {
|
|
const date = document.getElementById('date-filter').value;
|
|
if (!date) return;
|
|
|
|
// Filter the table to show only this date
|
|
fetch('/api/available-dates')
|
|
.then(r => r.json())
|
|
.then(dates => {
|
|
const filtered = dates.filter(d => d.date === date);
|
|
renderDailyTable(filtered);
|
|
});
|
|
}
|
|
|
|
function formatTime(isoString) {
|
|
if (!isoString) return '--';
|
|
const date = new Date(isoString);
|
|
return date.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
// Close modal on Escape key
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') closeModal();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|