ikan Uploader :
Directory : /var/www/new-ppid-app/
Upload File : |
| Current File : /var/www/new-ppid-app/direktori-pembantu.php |
<?php
/**
* Halaman publik: Direktori PPID Pembantu — kartu tiap Unit Perangkat Daerah
* beserta kontak & jumlah dokumen.
*
* Query string: ?q= untuk menyaring nama UPD.
*/
require_once __DIR__ . '/config/config.php';
require_once __DIR__ . '/includes/queries.php';
$keyword = get_param('q');
if ($keyword !== '') {
$stmt = db()->prepare(
'SELECT * FROM upd WHERE nama LIKE :kw1 OR singkatan LIKE :kw2 ORDER BY urutan ASC, nama ASC'
);
$like = '%' . $keyword . '%';
$stmt->execute([':kw1' => $like, ':kw2' => $like]);
$updList = $stmt->fetchAll();
} else {
$updList = get_upd_list();
}
$jumlahUpd = count_dokumen_per_upd();
// Palet aksen bergiliran agar kartu tidak monoton.
$accents = [
['from-sky-500 to-mateng-blue', 'text-mateng-blue', 'bg-blue-50'],
['from-emerald-500 to-mateng-green', 'text-mateng-green', 'bg-green-50'],
['from-amber-400 to-mateng-gold', 'text-mateng-gold', 'bg-amber-50'],
['from-indigo-500 to-mateng-blue', 'text-indigo-600', 'bg-indigo-50'],
];
$pageTitle = 'Direktori PPID Pembantu — ' . APP_NAME_SHORT;
$activeNav = 'layanan';
require __DIR__ . '/partials/head.php';
require __DIR__ . '/partials/navbar.php';
?>
<section class="relative overflow-hidden bg-gradient-to-br from-mateng-blue to-mateng-green text-white py-14">
<?php require __DIR__ . '/partials/sekda-header.php'; ?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<nav class="text-sm text-sky-100 mb-3">
<a href="<?= e(url('index.php')) ?>" class="hover:underline">Beranda</a><span class="mx-2">/</span>
<span>Layanan Informasi</span><span class="mx-2">/</span><span>Direktori PPID Pembantu</span>
</nav>
<h1 class="text-3xl md:text-4xl font-extrabold mb-2">Direktori PPID Pembantu</h1>
<p class="text-sky-50 max-w-2xl">Daftar Pejabat Pengelola Informasi dan Dokumentasi (PPID) Pembantu pada setiap Unit Perangkat Daerah di lingkungan Pemerintah Kabupaten Mamuju Tengah.</p>
</div>
</section>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 w-full">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-8">
<p class="text-sm text-slate-500"><strong><?= count($updList) ?></strong> Unit Perangkat Daerah<?= $keyword !== '' ? ' untuk "<strong>' . e($keyword) . '</strong>"' : '' ?>.</p>
<div class="flex items-center gap-3 w-full sm:w-auto">
<form method="get" class="flex items-center bg-white border border-slate-200 rounded-lg px-3 py-2 focus-within:border-mateng-blue transition-colors flex-grow sm:flex-grow-0 sm:w-72">
<i class="fas fa-search text-slate-400 mr-2"></i>
<input type="text" name="q" value="<?= e($keyword) ?>" placeholder="Cari unit / dinas..." class="bg-transparent outline-none text-sm w-full text-slate-700">
<?php if ($keyword !== ''): ?><a href="<?= e(url('direktori-pembantu.php')) ?>" class="text-slate-400 hover:text-slate-600 ml-2"><i class="fas fa-xmark"></i></a><?php endif; ?>
</form>
<div class="inline-flex items-center bg-white border border-slate-200 rounded-lg p-1 shadow-sm shrink-0">
<button type="button" data-view="grid" class="upd-view-btn px-3 py-1.5 rounded-md text-sm transition-colors" title="Tampilan grid" aria-label="Tampilan grid"><i class="fas fa-grip"></i></button>
<button type="button" data-view="list" class="upd-view-btn px-3 py-1.5 rounded-md text-sm transition-colors" title="Tampilan daftar" aria-label="Tampilan daftar"><i class="fas fa-list-ul"></i></button>
</div>
</div>
</div>
<?php if (empty($updList)): ?>
<div class="text-center py-20 bg-white rounded-2xl border border-slate-100">
<i class="fas fa-building-circle-xmark text-5xl text-slate-300 mb-4"></i>
<p class="text-slate-500 font-medium">Unit Perangkat Daerah tidak ditemukan.</p>
</div>
<?php else: ?>
<style>
#updContainer { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px){ #updContainer:not(.view-list){ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ #updContainer:not(.view-list){ grid-template-columns:repeat(3,1fr); } }
#updContainer.view-list { gap:.6rem; }
#updContainer.view-list .upd-accent { display:none; }
#updContainer.view-list .upd-body { flex-direction:row; align-items:center; gap:1.25rem; padding:1rem 1.25rem; }
#updContainer.view-list .upd-head { margin-bottom:0; flex:1 1 auto; min-width:0; }
#updContainer.view-list .upd-details { display:none; }
#updContainer.view-list .upd-foot { margin-top:0; border-top:0; padding-top:0; width:auto; flex-direction:column; align-items:flex-end; gap:.15rem; flex-shrink:0; }
</style>
<div id="updContainer">
<?php foreach ($updList as $i => $u):
$a = $accents[$i % count($accents)];
$jml = $jumlahUpd[(int) $u['id']] ?? 0;
$inisial = strtoupper(mb_substr($u['singkatan'] ?: $u['nama'], 0, 2)); ?>
<article class="upd-card bg-white border border-slate-100 rounded-2xl shadow-sm hover:shadow-lg transition-all flex flex-col overflow-hidden">
<div class="upd-accent h-1.5 bg-gradient-to-r <?= $a[0] ?>"></div>
<div class="upd-body p-6 flex flex-col flex-grow">
<div class="upd-head flex items-start gap-4 mb-4">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br <?= $a[0] ?> text-white flex items-center justify-center font-extrabold text-lg shadow-md shrink-0"><?= e($inisial) ?></div>
<div class="min-w-0">
<h3 class="font-bold text-slate-900 leading-snug"><?= e($u['nama']) ?></h3>
<?php if ($u['singkatan']): ?><span class="inline-block mt-1 text-xs font-bold <?= $a[1] ?> <?= $a[2] ?> px-2 py-0.5 rounded-full"><?= e($u['singkatan']) ?></span><?php endif; ?>
</div>
</div>
<?php if (!empty($u['deskripsi'])): ?>
<p class="upd-details text-sm text-slate-500 mb-4 leading-relaxed"><?= e(excerpt($u['deskripsi'], 120)) ?></p>
<?php endif; ?>
<ul class="upd-details space-y-2.5 text-sm text-slate-600 mb-5">
<?php if (!empty($u['penanggung_jawab'])): ?>
<li class="flex items-start gap-3"><i class="fas fa-user-tie w-4 text-center text-slate-400 mt-0.5"></i><span><?= e($u['penanggung_jawab']) ?></span></li>
<?php endif; ?>
<?php if (!empty($u['alamat'])): ?>
<li class="flex items-start gap-3"><i class="fas fa-location-dot w-4 text-center text-slate-400 mt-0.5"></i><span><?= e($u['alamat']) ?></span></li>
<?php endif; ?>
<?php if (!empty($u['telepon'])): ?>
<li class="flex items-start gap-3"><i class="fas fa-phone w-4 text-center text-slate-400 mt-0.5"></i><a href="tel:<?= e(preg_replace('/[^0-9+]/', '', $u['telepon'])) ?>" class="hover:text-mateng-blue"><?= e($u['telepon']) ?></a></li>
<?php endif; ?>
<?php if (!empty($u['email'])): ?>
<li class="flex items-start gap-3"><i class="fas fa-envelope w-4 text-center text-slate-400 mt-0.5"></i><a href="mailto:<?= e($u['email']) ?>" class="hover:text-mateng-blue break-all"><?= e($u['email']) ?></a></li>
<?php endif; ?>
<?php if (!empty($u['website'])): ?>
<li class="flex items-start gap-3"><i class="fas fa-globe w-4 text-center text-slate-400 mt-0.5"></i><a href="<?= e($u['website']) ?>" target="_blank" rel="noopener" class="hover:text-mateng-blue break-all"><?= e(preg_replace('#^https?://#', '', $u['website'])) ?></a></li>
<?php endif; ?>
</ul>
<div class="upd-foot mt-auto flex items-center justify-between pt-4 border-t border-slate-100">
<span class="text-xs text-slate-400"><i class="fas fa-folder-open mr-1"></i><?= $jml ?> dokumen</span>
<a href="<?= e(url('ppid-pembantu.php?upd=' . $u['slug'])) ?>" class="inline-flex items-center gap-1.5 text-sm font-semibold <?= $a[1] ?> hover:gap-2.5 transition-all">Lihat Informasi <i class="fas fa-arrow-right text-xs"></i></a>
</div>
</div>
</article>
<?php endforeach; ?>
</div>
<div class="text-center mt-10">
<a href="<?= e(url('ppid-pembantu.php')) ?>" class="inline-flex items-center gap-2 bg-white border border-slate-200 hover:border-mateng-blue text-slate-700 hover:text-mateng-blue px-6 py-3 rounded-xl font-semibold transition-colors shadow-sm">
<i class="fas fa-layer-group"></i> Telusuri Semua Dokumen PPID Pembantu
</a>
</div>
<?php endif; ?>
</main>
<script>
(function () {
var cont = document.getElementById('updContainer');
var btns = document.querySelectorAll('.upd-view-btn');
if (!cont || !btns.length) return;
function apply(view) {
cont.classList.toggle('view-list', view === 'list');
btns.forEach(function (b) {
var on = b.getAttribute('data-view') === view;
b.className = 'upd-view-btn px-3 py-1.5 rounded-md text-sm transition-colors ' + (on ? 'bg-mateng-blue text-white' : 'text-slate-500 hover:text-slate-800');
});
try { localStorage.setItem('ppidUpdView', view); } catch (e) {}
}
var saved = 'grid';
try { saved = localStorage.getItem('ppidUpdView') || 'grid'; } catch (e) {}
apply(saved === 'list' ? 'list' : 'grid');
btns.forEach(function (b) { b.addEventListener('click', function () { apply(b.getAttribute('data-view')); }); });
})();
</script>
<?php require __DIR__ . '/partials/footer.php'; ?>
Kontol Shell Bypass