printflow/problem.php at main · pasmin401/printflow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<?php
require_once 'includes/auth.php';
requireLogin();
require_once 'includes/nav.php';

$user = getCurrentUser();
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laporan Problem — CSM Printing</title>
    <link rel="stylesheet" href="assets/css/app.css">
    <style>
        /* (semua style sama seperti sebelumnya, tidak perlu diubah) */
        .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .field { display: flex; flex-direction: column; gap: 6px; }
        .field.span-3 { grid-column: span 3; }
        .field label { font-size: 13px; font-weight: 600; color: var(--text); }
        .field .req { color: var(--red); }
        .field input, .field select, .field textarea { padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--surface); }
        .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
        .form-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: 12px; justify-content: flex-end; }
        .severity-badge { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
        .severity-high { background: #fee2e2; color: #b91c1c; }
        .severity-medium { background: #ffedd5; color: #c2410c; }
        .severity-low { background: #dcfce7; color: #15803d; }
        .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; }
        .toast { background: white; border-left: 4px solid; border-radius: 10px; padding: 12px 18px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }
        .toast.success { border-left-color: #22c55e; color: #166534; }
        .toast.error { border-left-color: #ef4444; color: #b91c1c; }
        .empty-state { text-align: center; padding: 40px; color: var(--text-muted); }
        .action-btn { background: transparent; border: 1px solid var(--red); color: var(--red); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
        .action-btn:hover { background: var(--red); color: white; }
        @media (max-width: 800px) { .form-grid { grid-template-columns: 1fr 1fr; } .field.span-3 { grid-column: span 2; } }
        @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } .field.span-3 { grid-column: span 1; } }
    </style>
</head>
<body>
<?php renderNav('problem'); ?>

<div class="page-content">
    <div class="page-header">
        <div class="page-header-title">
            <h1>⚠️ Laporan Problem</h1>
            <p>Catat masalah produksi dan tindakan perbaikan</p>
        </div>
        <button onclick="window.location.reload()" class="btn btn-secondary" style="background:var(--bg);">🔄 Refresh</button>
    </div>

    <div id="toastContainer" class="toast-container"></div>

    <!-- Form Card -->
    <div class="card">
        <div class="card-header"><h2>Input Problem Baru</h2></div>
        <div class="card-body">
            <form id="problemForm">
                <div class="form-grid">
                    <div class="field"><label>Tanggal <span class="req">*</span></label><input type="date" name="tanggal" id="tanggal" required></div>
                    <div class="field"><label>Nomor SPK</label><input type="text" name="nomor_spk" id="nomor_spk" placeholder="cth: 009020"></div>
                    <div class="field"><label>Mesin</label><select name="mesin" id="mesin"><option value="">- Pilih -</option><option value="428">428</option><option value="SM52">SM52</option><option value="SOR-S">SOR-S</option><option value="Lainnya">Lainnya</option></select></div>
                    <div class="field"><label>Jenis Problem <span class="req">*</span></label><select name="jenis_problem" id="jenis_problem" required><option value="">- Pilih -</option><option value="Misregister">Misregister</option><option value="Warna Tidak Sesuai">Warna Tidak Sesuai</option><option value="Kertas Macet">Kertas Macet</option><option value="Double Sheet">Double Sheet</option><option value="Smearing">Smearing</option><option value="Ghosting">Ghosting</option><option value="Mesin Rusak">Mesin Rusak</option><option value="Lainnya">Lainnya</option></select></div>
                    <div class="field"><label>Tingkat <span class="req">*</span></label><select name="severity" id="severity" required><option value="">- Pilih -</option><option value="high">Tinggi</option><option value="medium">Sedang</option><option value="low">Rendah</option></select></div>
                    <div class="field"><label>Dilaporkan Oleh</label><input type="text" name="dilaporkan_oleh" id="dilaporkan_oleh" placeholder="Nama operator"></div>
                    <div class="field span-3"><label>Deskripsi Problem <span class="req">*</span></label><textarea name="deskripsi" id="deskripsi" rows="3" placeholder="Jelaskan problem yang terjadi..." required></textarea></div>
                    <div class="field span-3"><label>Tindakan yang Diambil</label><textarea name="tindakan" id="tindakan" rows="2" placeholder="Tindakan perbaikan..."></textarea></div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary" id="submitBtn">💾 Simpan Problem</button>
                    <button type="button" class="btn btn-secondary" onclick="resetForm()" style="background:var(--bg);">✕ Reset</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Table Card -->
    <div class="card">
        <div class="card-header"><h2>Daftar Laporan Problem</h2></div>
        <div class="table-wrap">
            <table style="width:100%;">
                <thead><tr><th>#</th><th>Tanggal</th><th>Nomor SPK</th><th>Mesin</th><th>Jenis Problem</th><th>Tingkat</th><th>Deskripsi</th><th>Tindakan</th><th>Pelapor</th><th>Aksi</th></tr></thead>
                <tbody id="problemBody"><tr><td colspan="10" class="loading">⏳ Memuat data...</td></tr></tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.getElementById('tanggal').value = new Date().toISOString().slice(0,10);

// Submit form - menggunakan spk_api.php dengan action problem_save
document.getElementById('problemForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const fd = new FormData(e.target);
    fd.append('action', 'problem_save');

    const btn = document.getElementById('submitBtn');
    btn.disabled = true;
    btn.textContent = '⏳ Menyimpan...';

    try {
        const res = await fetch('api/spk_api.php', { method: 'POST', body: fd });
        const data = await res.json();
        showToast(data.message, data.success ? 'success' : 'error');
        if (data.success) {
            resetForm();
            loadProblems();
        }
    } catch (err) {
        showToast('Gagal koneksi ke server', 'error');
    } finally {
        btn.disabled = false;
        btn.textContent = '💾 Simpan Problem';
    }
});

// Load data - menggunakan action problem_list
async function loadProblems() {
    document.getElementById('problemBody').innerHTML = '<tr><td colspan="10" class="loading">⏳ Memuat...</td></tr>';
    try {
        const res = await fetch('api/spk_api.php?action=problem_list');
        const data = await res.json();
        if (!data.success) throw new Error(data.message);
        renderTable(data.data);
    } catch (err) {
        document.getElementById('problemBody').innerHTML = `<tr><td colspan="10" class="empty">❌ Gagal memuat data: ${err.message}</td></tr>`;
    }
}

function renderTable(problems) {
    const tbody = document.getElementById('problemBody');
    if (!problems.length) {
        tbody.innerHTML = '<tr><td colspan="10" class="empty">📭 Belum ada laporan problem</td></tr>';
        return;
    }
    const severityLabel = { high: 'Tinggi', medium: 'Sedang', low: 'Rendah' };
    tbody.innerHTML = problems.map((p, idx) => `
        <tr>
            <td>${idx+1}</td>
            <td>${formatDate(p.tanggal)}</td>
            <td>${p.nomor_spk || '-'}</td>
            <td>${p.mesin || '-'}</td>
            <td><strong>${escapeHtml(p.jenis_problem)}</strong></td>
            <td><span class="severity-badge severity-${p.severity}">${severityLabel[p.severity]}</span></td>
            <td>${escapeHtml(p.deskripsi)}</td>
            <td>${escapeHtml(p.tindakan) || '-'}</td>
            <td>${escapeHtml(p.dilaporkan_oleh) || '-'}</td>
            <td><button class="action-btn" onclick="deleteProblem(${p.id})">🗑️ Hapus</button></td>
        </tr>
    `).join('');
}

// Delete - menggunakan action problem_delete
async function deleteProblem(id) {
    if (!confirm('Hapus laporan problem ini?')) return;
    const fd = new FormData();
    fd.append('action', 'problem_delete');
    fd.append('id', id);
    try {
        const res = await fetch('api/spk_api.php', { method: 'POST', body: fd });
        const data = await res.json();
        showToast(data.message, data.success ? 'success' : 'error');
        if (data.success) loadProblems();
    } catch (err) {
        showToast('Gagal menghapus', 'error');
    }
}

function resetForm() {
    document.getElementById('problemForm').reset();
    document.getElementById('tanggal').value = new Date().toISOString().slice(0,10);
}

function formatDate(str) {
    if (!str) return '-';
    return new Date(str).toLocaleDateString('id-ID', { day:'2-digit', month:'short', year:'numeric' });
}

function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/[&<>]/g, function(m) {
        if (m === '&') return '&amp;';
        if (m === '<') return '&lt;';
        if (m === '>') return '&gt;';
        return m;
    });
}

function showToast(msg, type) {
    const c = document.getElementById('toastContainer');
    const t = document.createElement('div');
    t.className = `toast ${type}`;
    t.innerHTML = `<span>${type === 'success' ? '✅' : '❌'}</span> ${msg}`;
    c.appendChild(t);
    setTimeout(() => t.remove(), 4000);
}

loadProblems();
</script>
</body>
</html>