feat: add manual & auto batch counting modes, dual-port operator and monitoring dashboards, and historical batch data corrections
This commit is contained in:
ervanfahriaw committed
commit
0235a0f597
53 files changed
+14127
No files matched your search
@@ -0,0 +1,417 @@
|
||||
{% 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 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>Start Time</th>
|
||||
<th>End Time</th>
|
||||
<th>Duration (Min)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="batchesTableBody">
|
||||
<tr>
|
||||
<td colspan="5" 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="5" 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('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="5" 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>${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="5" 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 %}
|
||||
Reference in new issue
Block a user