003
This commit is contained in:
Flatlogic Bot
parent
fd86c37615
commit
362dcb49bb
@ -1,196 +1,78 @@
|
||||
:root {
|
||||
--bg: #f6f7f9;
|
||||
--bg: #f9fafb;
|
||||
--surface: #ffffff;
|
||||
--surface-muted: #f1f3f6;
|
||||
--border: #e2e6ea;
|
||||
--text: #0f172a;
|
||||
--surface-muted: #f3f4f6;
|
||||
--border: #e5e7eb;
|
||||
--text: #111827;
|
||||
--muted: #6b7280;
|
||||
--accent: #111827;
|
||||
--accent-soft: #e5e7eb;
|
||||
--success: #0f766e;
|
||||
--warning: #b45309;
|
||||
--info: #1d4ed8;
|
||||
--danger: #b91c1c;
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
--shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.06);
|
||||
--accent: #2563eb;
|
||||
--accent-soft: #dbeafe;
|
||||
--success: #059669;
|
||||
--warning: #d97706;
|
||||
--info: #0284c7;
|
||||
--danger: #dc2626;
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--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 {
|
||||
background: var(--bg);
|
||||
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;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text);
|
||||
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);
|
||||
}
|
||||
a { color: var(--accent); text-decoration: none; transition: all 0.2s; }
|
||||
a:hover { opacity: 0.8; }
|
||||
|
||||
.card {
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: none;
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: var(--surface);
|
||||
background: #f9fafb;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 600;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-muted {
|
||||
background: var(--surface-muted);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px;
|
||||
}
|
||||
.card-body { padding: 1.5rem; }
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.badge-soft {
|
||||
border-radius: 999px;
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
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;
|
||||
padding: 8px 10px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 13px;
|
||||
}
|
||||
.btn-primary { background: var(--accent); color: white; border: none; }
|
||||
.btn-primary:hover { background: #1d4ed8; }
|
||||
|
||||
.table thead th {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.btn-outline-primary { border: 1px solid var(--accent); color: var(--accent); }
|
||||
|
||||
.toast {
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.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;
|
||||
.badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.6rem;
|
||||
width: 100%;
|
||||
}
|
||||
8
db/migrations/20260306_003_disposisi_surat_masuk.sql
Normal file
8
db/migrations/20260306_003_disposisi_surat_masuk.sql
Normal 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
|
||||
);
|
||||
@ -8,50 +8,67 @@ ensure_tables();
|
||||
$pdo = db();
|
||||
|
||||
$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->execute([$id]);
|
||||
$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');
|
||||
?>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-header">Detail Surat Masuk</div>
|
||||
<div class="card-body">
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white py-3 fw-bold">Detail Surat Masuk</div>
|
||||
<div class="card-body p-4">
|
||||
<?php if (!$row): ?>
|
||||
<div class="empty-state">Data surat masuk tidak ditemukan.</div>
|
||||
<?php else: ?>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<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 class="col-md-6">
|
||||
<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 class="col-md-6">
|
||||
<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 class="col-md-6">
|
||||
<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 class="col-12">
|
||||
<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 class="col-md-6">
|
||||
<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 class="col-md-6">
|
||||
<div class="text-muted small">Lampiran</div>
|
||||
<?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: ?>
|
||||
<span class="text-muted">Tidak ada lampiran.</span>
|
||||
<?php endif; ?>
|
||||
@ -60,16 +77,48 @@ render_header('Detail Surat Masuk', 'masuk');
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">Aksi Cepat</div>
|
||||
<div class="card-body">
|
||||
<a href="/surat_masuk.php" class="btn btn-light border w-100 mb-2">Kembali ke Daftar</a>
|
||||
<a href="/surat_keluar.php" class="btn btn-outline-secondary w-100">Buat Surat Keluar</a>
|
||||
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white py-3 fw-bold">Riwayat Disposisi</div>
|
||||
<div class="card-body p-0">
|
||||
<ul class="list-group list-group-flush">
|
||||
<?php if (empty($disposisi)): ?>
|
||||
<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 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>
|
||||
|
||||
<?php render_footer(); ?>
|
||||
<?php render_footer(); ?>
|
||||
Loading…
x
Reference in New Issue
Block a user