425 lines
13 KiB
HTML
425 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Batch History & Reports - Karung.AI{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<style>
|
|
.history-layout {
|
|
display: grid;
|
|
grid-template-columns: 320px 1fr;
|
|
gap: 28px;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.history-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Sidebar Dates List */
|
|
.sidebar-dates {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.dates-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.dates-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
max-height: 550px;
|
|
overflow-y: auto;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.date-row {
|
|
background-color: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
padding: 12px 16px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: var(--transition);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.date-row:hover {
|
|
border-color: var(--accent-blue);
|
|
background-color: rgba(0, 113, 227, 0.02);
|
|
}
|
|
|
|
.date-row.active {
|
|
border-color: var(--accent-blue);
|
|
background-color: rgba(0, 113, 227, 0.08);
|
|
color: var(--accent-blue);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.date-val {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.date-badge {
|
|
font-size: 12px;
|
|
background-color: var(--bg-base);
|
|
color: var(--text-secondary);
|
|
padding: 2px 8px;
|
|
border-radius: 99px;
|
|
font-weight: 600;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.date-row.active .date-badge {
|
|
background-color: var(--accent-blue);
|
|
color: #FFFFFF;
|
|
border-color: var(--accent-blue);
|
|
}
|
|
|
|
/* Right Main Panel: Date Details */
|
|
.details-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.details-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.details-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.stat-mini-card {
|
|
background-color: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-top: 4px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Table styles */
|
|
.table-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-lg);
|
|
background-color: var(--bg-card);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
}
|
|
|
|
th {
|
|
background-color: var(--bg-base);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
padding: 12px 18px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
td {
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
tr:hover td {
|
|
background-color: rgba(0, 0, 0, 0.01);
|
|
}
|
|
|
|
[data-theme="dark"] tr:hover td {
|
|
background-color: rgba(255, 255, 255, 0.01);
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.no-data i {
|
|
font-size: 32px;
|
|
margin-bottom: 12px;
|
|
display: block;
|
|
color: var(--text-secondary);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="history-layout">
|
|
<!-- Left Column: Dates List -->
|
|
<div class="sidebar-dates">
|
|
<div class="dates-header">
|
|
<span>Recorded Dates</span>
|
|
<i class="fa-solid fa-calendar-days"></i>
|
|
</div>
|
|
|
|
<div class="dates-list" id="datesList">
|
|
<div class="no-data" style="padding: 20px;">
|
|
<i class="fa-solid fa-circle-notch fa-spin"></i>
|
|
<p style="font-size: 12px;">Loading dates...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="/api/export-daily-csv?days=30" class="btn btn-secondary" style="width: 100%; justify-content: center;">
|
|
<i class="fa-solid fa-file-excel"></i> Export All (30 Days)
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Right Column: Date Details Table -->
|
|
<div class="details-panel">
|
|
<div class="details-header">
|
|
<h2 class="details-title" id="selectedDateTitle">Select a Date</h2>
|
|
<a href="#" id="exportDayBtn" class="btn btn-primary" style="display: none;">
|
|
<i class="fa-solid fa-file-excel"></i> Export Day Excel
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Metric summaries for selected date -->
|
|
<div class="stats-row" id="dateStatsRow" style="display: none;">
|
|
<div class="stat-mini-card">
|
|
<div class="stat-label">Total Sacks</div>
|
|
<div class="stat-number" id="statTotalCount">0</div>
|
|
</div>
|
|
<div class="stat-mini-card">
|
|
<div class="stat-label">Total Boxes</div>
|
|
<div class="stat-number" id="statTotalBoxes">0</div>
|
|
</div>
|
|
<div class="stat-mini-card">
|
|
<div class="stat-label">Total Batches</div>
|
|
<div class="stat-number" id="statTotalBatches">0</div>
|
|
</div>
|
|
<div class="stat-mini-card">
|
|
<div class="stat-label">Avg Sacks / Batch</div>
|
|
<div class="stat-number" id="statAvgSacks">0</div>
|
|
</div>
|
|
<div class="stat-mini-card">
|
|
<div class="stat-label">Avg Duration</div>
|
|
<div class="stat-number" id="statAvgDuration">0 min</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Batches table -->
|
|
<div class="table-container">
|
|
<table id="batchesTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Batch #</th>
|
|
<th>Sacks Counted</th>
|
|
<th>Boxes Counted</th>
|
|
<th>Start Time</th>
|
|
<th>End Time</th>
|
|
<th>Duration (Min)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="batchesTableBody">
|
|
<tr>
|
|
<td colspan="6" class="no-data">
|
|
<i class="fa-solid fa-arrow-left"></i>
|
|
Silakan pilih tanggal dari daftar sebelah kiri untuk memuat detail batch.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
let availableDates = [];
|
|
let selectedDate = null;
|
|
|
|
async function loadDates() {
|
|
try {
|
|
const res = await fetch('/api/available-dates');
|
|
const data = await res.json();
|
|
|
|
const listEl = document.getElementById('datesList');
|
|
listEl.innerHTML = '';
|
|
|
|
if (data.length === 0) {
|
|
listEl.innerHTML = `
|
|
<div class="no-data" style="padding: 20px;">
|
|
<i class="fa-solid fa-folder-open"></i>
|
|
<p style="font-size: 12px;">No records found yet.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
availableDates = data;
|
|
|
|
data.forEach((item, idx) => {
|
|
const row = document.createElement('a');
|
|
row.href = '#';
|
|
row.className = 'date-row';
|
|
row.onclick = (e) => {
|
|
e.preventDefault();
|
|
selectDate(item.date, row);
|
|
};
|
|
|
|
row.innerHTML = `
|
|
<span class="date-val">${item.date}</span>
|
|
<span class="date-badge">${item.total_count} bags</span>
|
|
`;
|
|
|
|
listEl.appendChild(row);
|
|
|
|
// Pilih tanggal pertama secara default
|
|
if (idx === 0) {
|
|
selectDate(item.date, row);
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.error('Failed to load dates list:', err);
|
|
}
|
|
}
|
|
|
|
async function selectDate(date, element) {
|
|
selectedDate = date;
|
|
|
|
// Update active class in sidebar list
|
|
document.querySelectorAll('.date-row').forEach(row => {
|
|
row.classList.remove('active');
|
|
});
|
|
if (element) {
|
|
element.classList.add('active');
|
|
}
|
|
|
|
// Show details
|
|
document.getElementById('selectedDateTitle').textContent = `Summary details for ${date}`;
|
|
|
|
const exportBtn = document.getElementById('exportDayBtn');
|
|
exportBtn.href = `/api/export-day-csv/${date}`;
|
|
exportBtn.style.display = 'inline-flex';
|
|
|
|
const tableBody = document.getElementById('batchesTableBody');
|
|
tableBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="6" class="no-data">
|
|
<i class="fa-solid fa-circle-notch fa-spin"></i>
|
|
Memuat data batch untuk tanggal ${date}...
|
|
</td>
|
|
</tr>
|
|
`;
|
|
|
|
try {
|
|
const res = await fetch(`/api/day-detail/${date}`);
|
|
const data = await res.json();
|
|
|
|
tableBody.innerHTML = '';
|
|
|
|
// Show stats row
|
|
document.getElementById('dateStatsRow').style.display = 'grid';
|
|
document.getElementById('statTotalCount').textContent = (data.total_count || 0).toLocaleString();
|
|
document.getElementById('statTotalBoxes').textContent = (data.total_boxes || 0).toLocaleString();
|
|
document.getElementById('statTotalBatches').textContent = data.total_batches || 0;
|
|
|
|
const avgSacks = data.total_batches > 0 ? (data.total_count / data.total_batches).toFixed(1) : '0';
|
|
document.getElementById('statAvgSacks').textContent = avgSacks;
|
|
document.getElementById('statAvgDuration').textContent = `${data.avg_duration_minutes || 0} min`;
|
|
|
|
if (!data.batches || data.batches.length === 0) {
|
|
tableBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="6" class="no-data">
|
|
<i class="fa-solid fa-inbox"></i>
|
|
Tidak ada batch tercatat pada tanggal ${date}.
|
|
</td>
|
|
</tr>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
data.batches.forEach(b => {
|
|
const tr = document.createElement('tr');
|
|
|
|
const startStr = b.start_time ? new Date(b.start_time).toLocaleTimeString('en-US', { hour12: false }) : '--:--:--';
|
|
const endStr = b.end_time ? new Date(b.end_time).toLocaleTimeString('en-US', { hour12: false }) : '--:--:--';
|
|
|
|
tr.innerHTML = `
|
|
<td style="font-weight: 600; color: var(--accent-blue);">Batch #${b.batch_number}</td>
|
|
<td style="font-weight: 500;">${b.count.toLocaleString()}</td>
|
|
<td style="font-weight: 500;">${(b.box_loading || 0).toLocaleString()}</td>
|
|
<td>${startStr}</td>
|
|
<td>${endStr}</td>
|
|
<td>${b.duration_minutes || 0} min</td>
|
|
`;
|
|
tableBody.appendChild(tr);
|
|
});
|
|
|
|
} catch (err) {
|
|
console.error('Failed to load date details:', err);
|
|
tableBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="6" class="no-data" style="color: var(--accent-red);">
|
|
<i class="fa-solid fa-circle-exclamation"></i>
|
|
Gagal memuat detail data: ${err.message}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', loadDates);
|
|
</script>
|
|
{% endblock %}
|