feat: add manual & auto batch counting modes, dual-port operator and monitoring dashboards, and historical batch data corrections

templates/operator.html

@@ -0,0 +1,343 @@
+{% extends "base.html" %}
+
+{% block title %}Kontrol Pemuatan Karung{% endblock %}
+
+{% block extra_head %}
+<style>
+    .operator-container {
+        max-width: 600px;
+        margin: 40px auto;
+        padding: 0 16px;
+    }
+
+    .operator-card {
+        background-color: var(--bg-card);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-lg);
+        padding: 32px 24px;
+        box-shadow: var(--shadow-md);
+        text-align: center;
+    }
+
+    .operator-title {
+        font-size: 20px;
+        font-weight: 700;
+        margin-bottom: 8px;
+    }
+
+    .operator-subtitle {
+        font-size: 14px;
+        color: var(--text-secondary);
+        margin-bottom: 24px;
+    }
+
+    .status-badge-box {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 20px;
+        border-radius: 30px;
+        font-size: 15px;
+        font-weight: 600;
+        margin-bottom: 28px;
+    }
+
+    .status-idle {
+        background-color: rgba(142, 142, 147, 0.15);
+        color: var(--text-secondary);
+    }
+
+    .status-active {
+        background-color: rgba(52, 199, 89, 0.15);
+        color: var(--accent-green);
+    }
+
+    .batch-info-box {
+        background-color: var(--bg-base);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-md);
+        padding: 16px;
+        margin-bottom: 32px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+        text-align: left;
+    }
+
+    .info-item .info-label {
+        font-size: 12px;
+        color: var(--text-secondary);
+        font-weight: 500;
+        margin-bottom: 4px;
+    }
+
+    .info-item .info-val {
+        font-size: 16px;
+        font-weight: 700;
+        color: var(--text-primary);
+    }
+
+    .btn-action-large {
+        width: 100%;
+        padding: 20px;
+        font-size: 18px;
+        font-weight: 700;
+        border-radius: var(--radius-md);
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        transition: transform 0.1s ease, filter 0.2s ease;
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+    }
+
+    .btn-action-large:active {
+        transform: scale(0.98);
+    }
+
+    .btn-start {
+        background-color: var(--accent-green);
+        color: #FFFFFF;
+    }
+
+    .btn-start:hover {
+        filter: brightness(1.08);
+    }
+
+    .btn-stop {
+        background-color: var(--accent-red);
+        color: #FFFFFF;
+    }
+
+    .btn-stop:hover {
+        filter: brightness(1.08);
+    }
+
+    .btn-disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    /* Simple Confirmation Modal */
+    .modal-overlay {
+        position: fixed;
+        inset: 0;
+        background-color: rgba(0,0,0,0.5);
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 999;
+        padding: 20px;
+    }
+
+    .modal-box {
+        background-color: var(--bg-card);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-lg);
+        padding: 24px;
+        max-width: 400px;
+        width: 100%;
+        text-align: center;
+        box-shadow: var(--shadow-md);
+    }
+
+    .modal-title {
+        font-size: 18px;
+        font-weight: 700;
+        margin-bottom: 12px;
+    }
+
+    .modal-desc {
+        font-size: 14px;
+        color: var(--text-secondary);
+        margin-bottom: 24px;
+    }
+
+    .modal-actions {
+        display: flex;
+        gap: 12px;
+    }
+
+    .modal-actions .btn {
+        flex: 1;
+        padding: 12px;
+        font-size: 14px;
+        font-weight: 600;
+        border-radius: var(--radius-md);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="operator-container">
+    <div class="operator-card">
+        <h1 class="operator-title"><i class="fa-solid fa-boxes-packing"></i> Kontrol Pemuatan Karung</h1>
+        <p class="operator-subtitle">Tekan tombol saat proses muat truk dimulai dan selesai</p>
+
+        <!-- Status Indicator -->
+        <div id="statusBadge" class="status-badge-box status-idle">
+            <i id="statusIcon" class="fa-solid fa-circle-pause"></i>
+            <span id="statusText">Status: Standby (Tidak Memuat)</span>
+        </div>
+
+        <!-- Info Detail -->
+        <div class="batch-info-box">
+            <div class="info-item">
+                <div class="info-label">Batch Berjalan</div>
+                <div class="info-val" id="opBatchNum">--</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">Waktu Mulai</div>
+                <div class="info-val" id="opStartTime">--:--:--</div>
+            </div>
+        </div>
+
+        <!-- Action Button -->
+        <div id="actionContainer">
+            <button id="btnStartBatch" class="btn-action-large btn-start" onclick="confirmStartBatch()">
+                <i class="fa-solid fa-play"></i> MULAI BATCH BARU
+            </button>
+            <button id="btnStopBatch" class="btn-action-large btn-stop" style="display: none;" onclick="confirmStopBatch()">
+                <i class="fa-solid fa-square"></i> SELESAI / AKHIRI BATCH
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Modal Konfirmasi Start -->
+<div id="modalStart" class="modal-overlay">
+    <div class="modal-box">
+        <h3 class="modal-title"><i class="fa-solid fa-play" style="color: var(--accent-green);"></i> Mulai Batch Baru?</h3>
+        <p class="modal-desc">Pastikan truk sudah siap di posisi pemuatan karung.</p>
+        <div class="modal-actions">
+            <button class="btn btn-secondary" onclick="closeModal('modalStart')">Batal</button>
+            <button class="btn btn-primary" style="background-color: var(--accent-green);" onclick="executeStartBatch()">Ya, Mulai</button>
+        </div>
+    </div>
+</div>
+
+<!-- Modal Konfirmasi Stop -->
+<div id="modalStop" class="modal-overlay">
+    <div class="modal-box">
+        <h3 class="modal-title"><i class="fa-solid fa-square" style="color: var(--accent-red);"></i> Selesai Batch?</h3>
+        <p class="modal-desc">Pemuatan untuk batch ini akan ditutup dan data akan disimpan.</p>
+        <div class="modal-actions">
+            <button class="btn btn-secondary" onclick="closeModal('modalStop')">Batal</button>
+            <button class="btn btn-primary" style="background-color: var(--accent-red);" onclick="executeStopBatch()">Ya, Selesai</button>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    let isBatchActive = false;
+
+    function closeModal(id) {
+        document.getElementById(id).style.display = 'none';
+    }
+
+    function confirmStartBatch() {
+        document.getElementById('modalStart').style.display = 'flex';
+    }
+
+    function confirmStopBatch() {
+        document.getElementById('modalStop').style.display = 'flex';
+    }
+
+    async function executeStartBatch() {
+        closeModal('modalStart');
+        const btn = document.getElementById('btnStartBatch');
+        btn.classList.add('btn-disabled');
+        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Memulai...';
+        
+        try {
+            const res = await fetch('/api/batch/start', { method: 'POST' });
+            const data = await res.json();
+            if (data.success) {
+                await pollStatus();
+            } else {
+                alert('Gagal memulai batch: ' + (data.error || 'Terjadi kesalahan'));
+            }
+        } catch (e) {
+            alert('Gagal terhubung ke server');
+        } finally {
+            btn.classList.remove('btn-disabled');
+            btn.innerHTML = '<i class="fa-solid fa-play"></i> MULAI BATCH BARU';
+        }
+    }
+
+    async function executeStopBatch() {
+        closeModal('modalStop');
+        const btn = document.getElementById('btnStopBatch');
+        btn.classList.add('btn-disabled');
+        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Mengakhiri...';
+        
+        try {
+            const res = await fetch('/api/batch/stop', { method: 'POST' });
+            const data = await res.json();
+            if (data.success) {
+                await pollStatus();
+            } else {
+                alert('Gagal mengakhiri batch: ' + (data.error || 'Terjadi kesalahan'));
+            }
+        } catch (e) {
+            alert('Gagal terhubung ke server');
+        } finally {
+            btn.classList.remove('btn-disabled');
+            btn.innerHTML = '<i class="fa-solid fa-square"></i> SELESAI / AKHIRI BATCH';
+        }
+    }
+
+    async function pollStatus() {
+        try {
+            const res = await fetch('/api/current-batch');
+            const data = await res.json();
+            
+            const badge = document.getElementById('statusBadge');
+            const icon = document.getElementById('statusIcon');
+            const text = document.getElementById('statusText');
+            const batchNum = document.getElementById('opBatchNum');
+            const startTime = document.getElementById('opStartTime');
+            const btnStart = document.getElementById('btnStartBatch');
+            const btnStop = document.getElementById('btnStopBatch');
+            
+            if (data.success && data.batch_number) {
+                isBatchActive = true;
+                badge.className = 'status-badge-box status-active';
+                icon.className = 'fa-solid fa-circle-play';
+                text.textContent = 'Status: Sedang Memuat (Batch #' + data.batch_number + ')';
+                
+                batchNum.textContent = '#' + data.batch_number;
+                if (data.start_time) {
+                    const st = new Date(data.start_time);
+                    startTime.textContent = st.toLocaleTimeString('id-ID', { hour12: false });
+                } else {
+                    startTime.textContent = '--:--:--';
+                }
+                
+                btnStart.style.display = 'none';
+                btnStop.style.display = 'flex';
+            } else {
+                isBatchActive = false;
+                badge.className = 'status-badge-box status-idle';
+                icon.className = 'fa-solid fa-circle-pause';
+                text.textContent = 'Status: Standby (Siap Memuat)';
+                
+                batchNum.textContent = '--';
+                startTime.textContent = '--:--:--';
+                
+                btnStart.style.display = 'flex';
+                btnStop.style.display = 'none';
+            }
+        } catch (e) {
+            console.error('Poll error:', e);
+        }
+    }
+
+    setInterval(pollStatus, 2000);
+    pollStatus();
+</script>
+{% endblock %}