This commit is contained in:
Flatlogic Bot 2026-03-06 13:41:26 +00:00
parent fd86c37615
commit 362dcb49bb
3 changed files with 120 additions and 181 deletions

View File

@ -1,196 +1,78 @@
:root { :root {
--bg: #f6f7f9; --bg: #f9fafb;
--surface: #ffffff; --surface: #ffffff;
--surface-muted: #f1f3f6; --surface-muted: #f3f4f6;
--border: #e2e6ea; --border: #e5e7eb;
--text: #0f172a; --text: #111827;
--muted: #6b7280; --muted: #6b7280;
--accent: #111827; --accent: #2563eb;
--accent-soft: #e5e7eb; --accent-soft: #dbeafe;
--success: #0f766e; --success: #059669;
--warning: #b45309; --warning: #d97706;
--info: #1d4ed8; --info: #0284c7;
--danger: #b91c1c; --danger: #dc2626;
--radius-sm: 6px; --radius-sm: 8px;
--radius-md: 10px; --radius-md: 12px;
--radius-lg: 14px; --radius-lg: 16px;
--shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.06); --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
} }
* { * { box-sizing: border-box; }
box-sizing: border-box;
}
body { body {
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Inter", system-ui, -apple-system, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.5;
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
} }
a { a { color: var(--accent); text-decoration: none; transition: all 0.2s; }
color: var(--text); a:hover { opacity: 0.8; }
text-decoration: none;
}
a:hover {
color: #000;
}
.navbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.navbar-brand {
font-weight: 600;
letter-spacing: 0.2px;
}
.nav-link {
color: var(--muted);
font-weight: 500;
}
.nav-link.active,
.nav-link:hover {
color: var(--text);
}
.hero {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow-sm);
}
.card { .card {
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid var(--border); border: 1px solid var(--border);
box-shadow: none; background: var(--surface);
box-shadow: var(--shadow-sm);
overflow: hidden;
} }
.card-header { .card-header {
background: var(--surface); background: #f9fafb;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
font-weight: 600; font-weight: 600;
padding: 1rem;
} }
.card-muted { .card-body { padding: 1.5rem; }
background: var(--surface-muted);
border-radius: var(--radius-md);
padding: 16px;
}
.section-title { .btn {
font-size: 15px; padding: 0.5rem 1rem;
font-weight: 600; border-radius: var(--radius-sm);
letter-spacing: 0.2px;
}
.badge-soft {
border-radius: 999px;
font-weight: 500; font-weight: 500;
padding: 6px 10px;
font-size: 12px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
gap: 6px;
}
.badge-soft.success {
color: var(--success);
border-color: rgba(15, 118, 110, 0.2);
background: rgba(15, 118, 110, 0.08);
}
.badge-soft.warning {
color: var(--warning);
border-color: rgba(180, 83, 9, 0.2);
background: rgba(180, 83, 9, 0.08);
}
.badge-soft.info {
color: var(--info);
border-color: rgba(29, 78, 216, 0.2);
background: rgba(29, 78, 216, 0.08);
}
.badge-soft.danger {
color: var(--danger);
border-color: rgba(185, 28, 28, 0.2);
background: rgba(185, 28, 28, 0.08);
}
.btn-primary {
background: var(--accent);
border-color: var(--accent);
border-radius: var(--radius-sm);
padding: 8px 14px;
font-weight: 600;
}
.btn-outline-secondary {
border-radius: var(--radius-sm);
padding: 8px 14px;
font-weight: 600;
}
.btn-light {
border-radius: var(--radius-sm);
padding: 8px 14px;
}
.form-control,
.form-select {
border-radius: var(--radius-sm);
border-color: var(--border);
font-size: 14px; font-size: 14px;
padding: 8px 10px; transition: all 0.2s;
} }
.table { .btn-primary { background: var(--accent); color: white; border: none; }
font-size: 13px; .btn-primary:hover { background: #1d4ed8; }
}
.table thead th { .btn-outline-primary { border: 1px solid var(--accent); color: var(--accent); }
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
}
.toast { .badge {
border-radius: var(--radius-md); padding: 0.25rem 0.5rem;
box-shadow: var(--shadow-sm); border-radius: 9999px;
} font-size: 0.75rem;
.footer {
color: var(--muted);
font-size: 12px;
padding: 24px 0 40px;
}
.empty-state {
padding: 28px;
border: 1px dashed var(--border);
border-radius: var(--radius-md);
color: var(--muted);
background: var(--surface);
}
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--accent-soft);
color: var(--text);
border-radius: 999px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500; font-weight: 500;
} }
.form-control {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.6rem;
width: 100%;
}

View File

@ -0,0 +1,8 @@
CREATE TABLE IF NOT EXISTS disposisi_surat_masuk (
id INT AUTO_INCREMENT PRIMARY KEY,
surat_masuk_id INT NOT NULL,
tujuan_departemen VARCHAR(100) NOT NULL,
instruksi TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (surat_masuk_id) REFERENCES surat_masuk(id) ON DELETE CASCADE
);

View File

@ -8,50 +8,67 @@ ensure_tables();
$pdo = db(); $pdo = db();
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0; $id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['disposisi_submit'])) {
$tujuan = $_POST['tujuan_departemen'] ?? '';
$instruksi = $_POST['instruksi'] ?? '';
if (!empty($tujuan)) {
$stmt = $pdo->prepare("INSERT INTO disposisi_surat_masuk (surat_masuk_id, tujuan_departemen, instruksi) VALUES (?, ?, ?)");
$stmt->execute([$id, $tujuan, $instruksi]);
}
}
$stmt = $pdo->prepare("SELECT * FROM surat_masuk WHERE id = ?"); $stmt = $pdo->prepare("SELECT * FROM surat_masuk WHERE id = ?");
$stmt->execute([$id]); $stmt->execute([$id]);
$row = $stmt->fetch(); $row = $stmt->fetch();
$disposisi = [];
if ($row) {
$stmtDispo = $pdo->prepare("SELECT * FROM disposisi_surat_masuk WHERE surat_masuk_id = ? ORDER BY created_at DESC");
$stmtDispo->execute([$id]);
$disposisi = $stmtDispo->fetchAll();
}
render_header('Detail Surat Masuk', 'masuk'); render_header('Detail Surat Masuk', 'masuk');
?> ?>
<div class="row g-3"> <div class="row g-4">
<div class="col-lg-8"> <div class="col-lg-8">
<div class="card"> <div class="card border-0 shadow-sm mb-4">
<div class="card-header">Detail Surat Masuk</div> <div class="card-header bg-white py-3 fw-bold">Detail Surat Masuk</div>
<div class="card-body"> <div class="card-body p-4">
<?php if (!$row): ?> <?php if (!$row): ?>
<div class="empty-state">Data surat masuk tidak ditemukan.</div> <div class="empty-state">Data surat masuk tidak ditemukan.</div>
<?php else: ?> <?php else: ?>
<div class="row g-3"> <div class="row g-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="text-muted small">Tanggal Surat</div> <div class="text-muted small">Tanggal Surat</div>
<div class="fw-semibold"><?= h($row['tanggal_surat']) ?></div> <div class="fw-semibold text-dark"><?= h($row['tanggal_surat']) ?></div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="text-muted small">Nomor Surat</div> <div class="text-muted small">Nomor Surat</div>
<div class="fw-semibold"><?= h($row['nomor_surat'] ?? '-') ?></div> <div class="fw-semibold text-dark"><?= h($row['nomor_surat'] ?? '-') ?></div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="text-muted small">Pengirim</div> <div class="text-muted small">Pengirim</div>
<div class="fw-semibold"><?= h($row['pengirim']) ?></div> <div class="fw-semibold text-dark"><?= h($row['pengirim']) ?></div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="text-muted small">Departemen Tujuan</div> <div class="text-muted small">Departemen Tujuan</div>
<div class="fw-semibold"><?= h($row['departemen_tujuan']) ?></div> <div class="fw-semibold text-dark"><?= h($row['departemen_tujuan']) ?></div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="text-muted small">Perihal</div> <div class="text-muted small">Perihal</div>
<div class="fw-semibold"><?= h($row['perihal']) ?></div> <div class="fw-semibold text-dark"><?= h($row['perihal']) ?></div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="text-muted small">Status</div> <div class="text-muted small">Status</div>
<span class="<?= h(status_badge($row['status'], 'masuk')) ?>"><?= h($row['status']) ?></span> <span class="badge bg-light text-dark border"><?= h($row['status']) ?></span>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="text-muted small">Lampiran</div> <div class="text-muted small">Lampiran</div>
<?php if (!empty($row['file_path'])): ?> <?php if (!empty($row['file_path'])): ?>
<a class="fw-semibold" href="/<?= h($row['file_path']) ?>" target="_blank" rel="noopener">Unduh Lampiran</a> <a class="btn btn-sm btn-outline-primary" href="/<?= h($row['file_path']) ?>" target="_blank" rel="noopener">Download File</a>
<?php else: ?> <?php else: ?>
<span class="text-muted">Tidak ada lampiran.</span> <span class="text-muted">Tidak ada lampiran.</span>
<?php endif; ?> <?php endif; ?>
@ -60,16 +77,48 @@ render_header('Detail Surat Masuk', 'masuk');
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </div>
</div>
<div class="col-lg-4"> <div class="card border-0 shadow-sm">
<div class="card"> <div class="card-header bg-white py-3 fw-bold">Riwayat Disposisi</div>
<div class="card-header">Aksi Cepat</div> <div class="card-body p-0">
<div class="card-body"> <ul class="list-group list-group-flush">
<a href="/surat_masuk.php" class="btn btn-light border w-100 mb-2">Kembali ke Daftar</a> <?php if (empty($disposisi)): ?>
<a href="/surat_keluar.php" class="btn btn-outline-secondary w-100">Buat Surat Keluar</a> <li class="list-group-item text-muted p-4">Belum ada disposisi.</li>
<?php else: ?>
<?php foreach ($disposisi as $d): ?>
<li class="list-group-item p-4">
<div class="d-flex justify-content-between mb-1">
<span class="badge bg-primary"><?= h($d['tujuan_departemen']) ?></span>
<small class="text-muted"><?= h($d['created_at']) ?></small>
</div>
<p class="mb-0 text-dark"><?= h($d['instruksi']) ?></p>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4">
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white py-3 fw-bold">Buat Disposisi</div>
<div class="card-body p-4">
<form method="POST">
<div class="mb-3">
<label class="form-label">Tujuan Departemen</label>
<input type="text" name="tujuan_departemen" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Instruksi</label>
<textarea name="instruksi" class="form-control" rows="3" required></textarea>
</div>
<button type="submit" name="disposisi_submit" class="btn btn-primary w-100">Simpan Disposisi</button>
</form>
</div>
</div>
<a href="/surat_masuk.php" class="btn btn-light border w-100">Kembali ke Daftar</a>
</div>
</div> </div>
<?php render_footer(); ?> <?php render_footer(); ?>