{"id":1101,"date":"2017-10-26T15:49:37","date_gmt":"2017-10-26T08:49:37","guid":{"rendered":"http:\/\/arpus.acehprov.go.id\/?page_id=1101"},"modified":"2026-08-04T17:23:05","modified_gmt":"2026-08-04T10:23:05","slug":"struktur-ppid","status":"publish","type":"page","link":"https:\/\/arpus.acehprov.go.id\/?page_id=1101","title":{"rendered":"Struktur PPID"},"content":{"rendered":"\n<div id=\"modern-org-chart-container\"><\/div>\n\n<script>\nconst dataPejabat = {\n    judul: \"SUSUNAN TIM SEKRETARIAT PPID PEMBANTU<br>DINAS PERPUSTAKAAN DAN KEARSIPAN ACEH<br>TAHUN 2026\",\n    \n    pengarah: {\n        jabatan: \"PENGARAH\",\n        nama: \"Dr. Syaridin, S.Pd, M.Pd\",\n        nip: \"NIP 19701231 199512 1 033\",\n        pangkat: \"Pembina Utama Madya, IV\/d\"\n    },\n    \n    penanggungJawab: {\n        jabatan: \"PENANGGUNG JAWAB\",\n        nama: \"Zulkifli, S.Pd., M.Pd\",\n        nip: \"NIP 19700210 199801 1 001\",\n        pangkat: \"Pembina Tingkat I, IV\/b\"\n    },\n    \n    ketua: {\n        jabatan: \"KETUA TIM\",\n            nama: \"Ichsan Pratama, S.STP, M.Si\",\n            nip: \"NIP 19860618 200602 1 001\",\n            pangkat: \"Penata Tingkat I, III\/d\"\n    },\n    \n    wakilKetua: {\n        jabatan: \"WAKIL KETUA TIM\",\n        nama: \"Jonni Satria, ST, M. Si\",\n        nip: \"NIP 19850101 200604 1 005\",\n        pangkat: \"\"\n    },\n    \n    koordinator: [\n        {\n            jabatan: \"PENGELOLA INFORMASI\",\n            nama: \"Hendra Julian, ST\",\n            nip: \"NIP 19880702 202321 1 017\",\n            pangkat: \"\"\n        },\n        {\n            jabatan: \"PELAYANAN INFORMASI\",\n            nama: \"John Kenedy\",\n            nip: \"NIP 19820927 202521 1 026\",\n            pangkat: \"\"\n        },\n        {\n            jabatan: \"DOKUMENTASI \/ ARSIP\",\n            nama: \"Arief Munandar\",\n            nip: \"NIP 19980828 202521 1 133\",\n            pangkat: \"\"\n        },\n        {\n            jabatan: \"PENGADUAN & SENGKETA\",\n            nama: \"Hendra Mirza, SE\",\n            nip: \"NIP 19820416 202521 1 140\",\n            pangkat: \"\"\n        }\n    ]\n};\n\n\/\/ =========================================================================\n\nfunction createCard(data) {\n    return `\n        <div class=\"org-card\">\n            <div class=\"org-card-header\">${data.jabatan}<\/div>\n            <div class=\"org-card-body\">\n                <div class=\"org-name\">${data.nama}<\/div>\n                <div class=\"org-detail\">${data.nip}<\/div>\n                <div class=\"org-detail\">${data.pangkat}<\/div>\n            <\/div>\n        <\/div>\n    `;\n}\n\nfunction createKoorCard(data) {\n    return `\n        <div class=\"org-koor-wrapper\">\n            <div class=\"org-card\">\n                <div class=\"org-card-header\">${data.jabatan}<\/div>\n                <div class=\"org-card-body\">\n                    <div class=\"org-name\">${data.nama}<\/div>\n                    <div class=\"org-detail\">${data.nip}<\/div>\n                    <div class=\"org-detail\">${data.pangkat}<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    `;\n}\n\nconst htmlContent = `\n    <div class=\"org-wrapper\">\n        <h2 class=\"org-title\">${dataPejabat.judul}<\/h2>\n        \n        <div class=\"org-level\">\n            ${createCard(dataPejabat.pengarah)}\n        <\/div>\n        \n        <div class=\"org-connector-vertical\"><\/div>\n        \n        <div class=\"org-level\">\n            ${createCard(dataPejabat.penanggungJawab)}\n        <\/div>\n        \n        <div class=\"org-connector-vertical\"><\/div>\n        \n        <div class=\"org-level\">\n            ${createCard(dataPejabat.ketua)}\n        <\/div>\n        \n        <div class=\"org-connector-vertical\"><\/div>\n        \n        <div class=\"org-level\">\n            ${createCard(dataPejabat.wakilKetua)}\n        <\/div>\n        \n        <div class=\"org-connector-vertical\" style=\"height: 20px;\"><\/div>\n        \n        <div class=\"org-grid-4\">\n            ${dataPejabat.koordinator.map(k => createKoorCard(k)).join('')}\n        <\/div>\n    <\/div>\n`;\n\ndocument.getElementById('modern-org-chart-container').innerHTML = htmlContent;\n<\/script>\n\n<style>\n.org-wrapper {\n    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n    text-align: center;\n    background: #f8fafc;\n    padding: 30px 15px;\n    border-radius: 12px;\n    box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);\n    overflow-x: auto; \/* Mencegah terpotong di layar HP *\/\n}\n\n.org-title {\n    font-size: 16px;\n    font-weight: 700;\n    text-align: center;\n    color: #1e293b;\n    margin-bottom: 30px;\n    line-height: 1.5;\n}\n\n.org-level {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n\/* Desain Kartu *\/\n.org-card {\n    background: #ffffff;\n    border-radius: 8px;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.05);\n    border: 1px solid #e2e8f0;\n    width: 260px;\n    overflow: hidden;\n    position: relative;\n    z-index: 2;\n}\n\n.org-card-header {\n    background: #3b82f6;\n    color: white;\n    padding: 10px 15px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.org-card-body {\n    padding: 15px;\n    color: #475569;\n}\n\n.org-name {\n    font-size: 14px;\n    font-weight: 700;\n    color: #0f172a;\n    margin-bottom: 6px;\n}\n\n.org-detail {\n    font-size: 12px;\n    line-height: 1.4;\n}\n\n\/* Garis penghubung *\/\n.org-connector-vertical {\n    width: 2px;\n    height: 30px;\n    background-color: #94a3b8;\n    margin: 0 auto;\n}\n\n\/* Grid bawah untuk 4 koordinator *\/\n.org-grid-4 {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 20px;\n    position: relative;\n    margin-top: 0;\n}\n\n\/* Garis horizontal pembagi untuk grid bawah *\/\n.org-grid-4::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 11.75%;\n    right: 11.75%;\n    height: 2px;\n    background-color: #94a3b8;\n    z-index: 1;\n}\n\n.org-koor-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    padding-top: 20px; \n    background-image: linear-gradient(#94a3b8, #94a3b8);\n    background-size: 2px 20px;\n    background-position: top center;\n    background-repeat: no-repeat;\n}\n\n\n.org-koor-wrapper .org-card {\n    width: 100%;\n    min-width: 200px;\n}\n\n\/* Responsif untuk tablet dan HP *\/\n@media (max-width: 992px) {\n    .org-grid-4 {\n        grid-template-columns: repeat(2, 1fr);\n        gap: 30px 20px;\n    }\n    .org-grid-4::before {\n        display: none;\n    }\n    .org-koor-wrapper::before {\n        display: none;\n    }\n    .org-koor-wrapper {\n        padding-top: 0;\n    }\n}\n\n@media (max-width: 576px) {\n    .org-grid-4 {\n        grid-template-columns: 1fr;\n    }\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":10,"featured_media":0,"parent":1098,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1101","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P7EXk0-hL","_links":{"self":[{"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/pages\/1101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1101"}],"version-history":[{"count":23,"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/pages\/1101\/revisions"}],"predecessor-version":[{"id":6084,"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/pages\/1101\/revisions\/6084"}],"up":[{"embeddable":true,"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=\/wp\/v2\/pages\/1098"}],"wp:attachment":[{"href":"https:\/\/arpus.acehprov.go.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}