{"id":85,"date":"2026-03-31T05:11:57","date_gmt":"2026-03-31T05:11:57","guid":{"rendered":"https:\/\/ph-portal.zyneventures.com\/?page_id=85"},"modified":"2026-03-31T05:12:21","modified_gmt":"2026-03-31T05:12:21","slug":"department","status":"publish","type":"page","link":"https:\/\/ph-portal.zyneventures.com\/index.php\/department\/","title":{"rendered":"Department"},"content":{"rendered":"<style>.kadence-column85_80c99a-78 > .kt-inside-inner-col,.kadence-column85_80c99a-78 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column85_80c99a-78 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column85_80c99a-78 > .kt-inside-inner-col{flex-direction:column;}.kadence-column85_80c99a-78 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column85_80c99a-78 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column85_80c99a-78{position:relative;}@media all and (max-width: 1024px){.kadence-column85_80c99a-78 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column85_80c99a-78 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column85_80c99a-78\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-id85_07e215-fe > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id85_07e215-fe > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id85_07e215-fe > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id85_07e215-fe > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id85_07e215-fe > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id85_07e215-fe > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id85_07e215-fe alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column85_3c7d1a-77 > .kt-inside-inner-col,.kadence-column85_3c7d1a-77 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column85_3c7d1a-77 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column85_3c7d1a-77 > .kt-inside-inner-col{flex-direction:column;}.kadence-column85_3c7d1a-77 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column85_3c7d1a-77 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column85_3c7d1a-77{position:relative;}@media all and (max-width: 1024px){.kadence-column85_3c7d1a-77 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column85_3c7d1a-77 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column85_3c7d1a-77\"><div class=\"kt-inside-inner-col\">\n<style>\n        :root {\n            --primary-blue: #0180FF;            \n            --hover-blue: #3499FF;\n            --text-dark: #212529;\n            --text-muted: #8D8C9C;\n            --border-color: #EFEFEF;\n            --success-green: #1E8E3E;\n            --error-red: #D93025;\n        }\n\n        body { \n            margin: 0; \n            font-family: 'Sora', sans-serif; \n            color: var(--text-dark); \n            background-color: #fff;\n            box-sizing: border-box;\n        }\n        \n        \/* Header Section *\/\n        .header-container { \n            display: flex; \n            justify-content: space-between; \n            align-items: center; \n            margin-bottom: 32px;\n            flex-wrap: wrap;\n            gap: 16px;\n        }\n        .title-group { \n            display: flex; \n            align-items: center; \n            gap: 10px; \n        }\n        .title-group h2 { \n            margin: 0; \n            font-size: 21px; \n            font-weight: 500; \n            text-transform: uppercase; \n            letter-spacing: 0.5px; \n        }\n        .count { \n            color: var(--text-muted); \n            font-size: 16px; \n            font-weight: 400; \n        }\n        \n        .action-group { \n            display: flex; \n            gap: 10px; \n            align-items: center; \n            flex-wrap: wrap;\n        }\n\n        \/* Search Bar *\/\n        .search-wrapper { \n            background: #F1F3F4; \n            border-radius: 6px; \n            padding: 9px 14px; \n            display: flex; \n            align-items: center; \n            width: 260px; \n            gap: 10px;\n        }\n        .search-icon { \n            width: 16px; \n            height: 16px; \n            color: #8D8C9C; \n            flex-shrink: 0;\n        }\n        .search-wrapper input { \n            border: none; \n            background: transparent; \n            outline: none; \n            width: 100%; \n            font-size: 12px; \n            font-family: 'Sora'; \n            color: #212529;\n        }\n        .search-wrapper input::placeholder { color: #8D8C9C; }\n\n        \/* Filter Button \u2014 exact match to Teams.html *\/\n        .btn-filter {\n            background: transparent;\n            border: 1px solid #F1F3F4;\n            border-radius: 6px;\n            width: 38px;\n            height: 38px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            padding: 0;\n            flex-shrink: 0;\n            transition: background 0.2s;\n        }\n        .btn-filter:hover { background: transparent; }\n        .btn-filter svg { color: #5f6368; }\n        .filter-wrapper { position: relative; }\n\n        .btn { \n            padding: 9px 16px; \n            border-radius: 6px; \n            font-size: 12px; \n            font-weight: 400; \n            cursor: pointer; \n            border: none; \n            transition: 0.2s; \n            display: flex; \n            align-items: center; \n            justify-content: center;\n            gap: 4px;\n            white-space: nowrap;\n            font-family: 'Sora', sans-serif;\n        }\n        .btn-primary { background: var(--primary-blue); color: white; }\n        .btn-primary:hover { background: #3499FF; }\n        .btn-outline { background: #F1F3F4; color: #5f6368; border: none; }\n\n        \/* Grid *\/\n        .dept-grid { \n            display: grid; \n            grid-template-columns: repeat(3, 1fr); \n            gap: 20px; \n            margin-top: 20px; \n        }\n\n        @media (max-width: 1100px) {\n            .dept-grid { grid-template-columns: repeat(2, 1fr); }\n        }\n        @media (max-width: 700px) {\n            .dept-grid { grid-template-columns: 1fr; }\n            body { padding: 20px 16px; }\n            .search-wrapper { width: 180px; }\n        }\n\n        .dept-card { \n            border: 1px solid var(--border-color); \n            border-radius: 12px; \n            padding: 20px 24px 22px; \n            background: #fff;\n            transition: box-shadow 0.3s;\n        }\n        .dept-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }\n        \n        .card-header { \n            display: flex; \n            justify-content: space-between; \n            align-items: center; \n            margin-bottom: 18px; \n        }\n\n        .dept-identity {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }\n\n        .dept-logo-box {\n            width: 42px;\n            height: 42px;\n            border-radius: 8px;\n            overflow: hidden;\n            background: #F9FAFB;\n            flex-shrink: 0;\n        }\n        .dept-logo-box img { width: 100%; height: 100%; object-fit: cover; }\n\n        .card-title { \n            font-weight: 500; \n            font-size: 18px; \n            color: var(--text-dark); \n        }\n        \n        .badge-container { display: flex; align-items: center; gap: 8px; }\n        \n        .status-badge { \n            padding: 3px 10px; \n            border-radius: 20px; \n            font-size: 12px; \n            font-weight: 400; \n            display: flex; \n            align-items: center; \n            gap: 5px; \n            height: 22px;\n            white-space: nowrap;\n        }\n        .status-active { background: #E6F4EA; color: var(--success-green); }\n        .status-active::before { content: '\u25cf'; font-size: 7px; }\n        .status-inactive { background: #FCE8E6; color: var(--error-red); }\n        .status-inactive::before { content: '\u25cf'; font-size: 7px; }\n        \n        \/* Card stats \u2014 3 columns in one row *\/\n        .card-stats { \n            display: grid; \n            grid-template-columns: auto 1fr auto;\n            gap: 0 0;\n            align-items: start;\n            padding-top: 16px;\n        }\n\n        .stat-col {\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n        }\n        .stat-col:nth-child(2) {\n            padding: 0 12px;\n            margin: 0 12px;\n        }\n\n        .info-label { \n            color: var(--text-muted); \n            font-size: 12px; \n            font-weight: 400;\n        }\n        .info-value { \n            font-size: 12px; \n            font-weight: 400; \n            color: #212529; \n        }\n        .info-link { \n            color: var(--primary-blue); \n            font-weight: 400;\n            cursor: pointer; \n        }\n\n        \/* Dropdown Menu *\/\n        .menu-container { position: relative; display: flex; align-items: center; }\n        .menu-dots { \n            cursor: pointer; \n            color: #555; \n            font-size: 20px; \n            line-height: 1; \n            padding: 2px 4px; \n            border-radius: 4px;\n        }\n        .menu-dots:hover { background: #f1f3f4; }\n        .dropdown-content { \n            display: none; \n            position: absolute; \n            right: 0; \n            top: 26px; \n            background: white; \n            min-width: 120px; \n            box-shadow: 0 8px 20px rgba(0,0,0,0.12); \n            z-index: 100; \n            border-radius: 8px; \n            border: 1px solid #eee; \n            overflow: hidden;\n        }\n        .dropdown-content.show { display: block; }\n        .dropdown-item { \n            padding: 11px 16px; \n            font-size: 12px; \n            cursor: pointer; \n            color: #444; \n            font-family: 'Sora', sans-serif; \n        }\n        .dropdown-item:hover { background-color: #f8f9fa; color: var(--primary-blue); }\n        .dropdown-item.delete { color: var(--error-red); }\n        .dropdown-item.delete:hover { background-color: #fff5f5; color: var(--error-red); }\n\n        \/* Modal *\/\n        .modal-overlay { \n            display: none; \n            position: fixed; \n            top: 0; \n            left: 0; \n            width: 100%; \n            height: 100%; \n            background: rgba(0,0,0,0.45); \n            z-index: 1000; \n            justify-content: center; \n            align-items: center; \n        }\n        .modal-content { \n            background: white; \n            padding: 40px 44px; \n            border-radius: 14px; \n            width: 520px;\n            max-width: 95vw;\n            box-shadow: 0 20px 50px rgba(0,0,0,0.18); \n        }\n        .modal-content h3 { margin: 0 0 28px 0; font-size: 26px; font-weight: 600; }\n        \n        .form-group { margin-bottom: 22px; }\n        .form-group label { \n            display: block; \n            font-size: 12px; \n            font-weight: 400; \n            margin-bottom: 10px; \n            color: #212529;\n        }\n        .form-group label span { color: var(--error-red); }\n\n        \/* File upload styled to match screenshot *\/\n        .file-upload-wrapper {\n            border: 1px solid #E0E0E0;\n            border-radius: 8px;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            background: #fff;\n        }\n        .file-upload-wrapper label.choose-btn {\n            background: #e9ecef;\n            border: none;\n            border-right: 1px solid #E0E0E0;\n            padding: 12px 18px;\n            font-size: 12px;\n            font-weight: 500;\n            cursor: pointer;\n            margin: 0;\n            color: #212529;\n            white-space: nowrap;\n            display: block;\n        }\n        .file-upload-wrapper label.choose-btn:hover { background: #dee2e6; }\n        .file-upload-wrapper input[type=\"file\"] { display: none; }\n        .file-name-display {\n            padding: 12px 14px;\n            font-size: 12px;\n            color: #888;\n            font-family: 'Sora', sans-serif;\n        }\n\n        .form-control { \n            width: 100%; \n            padding: 13px 14px; \n            border: 1px solid #E0E0E0; \n            border-radius: 8px; \n            box-sizing: border-box; \n            font-family: 'Sora'; \n            font-size: 12px; \n            color: #212529;\n            outline: none;\n        }\n        .form-control:focus { border-color: var(--primary-blue); }\n\n        \/* Custom dropdown for owner *\/\n        .custom-select-wrapper {\n            position: relative;\n        }\n        .custom-select-wrapper select {\n            appearance: none;\n            -webkit-appearance: none;\n        }\n        .custom-select-wrapper::after {\n            display: none;\n        }\n\n        .toggle-row { \n            display: flex; \n            justify-content: space-between; \n            align-items: center; \n            margin-top: 10px; \n        }\n        .toggle-row label:first-child {\n            font-size: 12px;\n            font-weight: 500;\n            color: #212529;\n        }\n        .toggle-row label:first-child span { color: var(--error-red); }\n\n        .switch { position: relative; display: inline-block; width: 46px; height: 24px; }\n        .switch input { opacity: 0; width: 0; height: 0; }\n        .slider { \n            position: absolute; \n            cursor: pointer; \n            top: 0; \n            left: 0; \n            right: 0; \n            bottom: 0; \n            background-color: #ccc; \n            transition: .4s; \n            border-radius: 34px; \n        }\n        .slider:before { \n            position: absolute; \n            content: \"\"; \n            height: 18px; \n            width: 18px; \n            left: 3px; \n            bottom: 3px; \n            background-color: white; \n            transition: .4s; \n            border-radius: 50%; \n        }\n        input:checked + .slider { background-color: var(--primary-blue); }\n        input:checked + .slider:before { transform: translateX(22px); }\n\n        \/* Modal footer \u2014 Close left, Save right *\/\n        .modal-footer {\n            display: flex;\n            justify-content: flex-end;\n            align-items: center;\n            gap: 16px;\n            margin-top: 36px;\n        }\n        .btn-close-modal {\n            background: transparent;\n            border: none;\n            font-family: 'Sora', sans-serif;\n            font-size: 12px;\n            font-weight: 400;\n            color: #444;\n            cursor: pointer;\n            padding: 10px 18px;\n            border-radius: 6px;\n        }\n        .btn-close-modal:hover { background: transparent; color: #212529; }\n        .btn-save {\n            background: var(--primary-blue);\n            color: white;\n            border: none;\n            font-family: 'Sora', sans-serif;\n            font-size: 12px;\n            font-weight: 400;\n            padding: 11px 44px;\n            border-radius: 6px;\n            cursor: pointer;\n        }\n        .btn-save:hover { background: #3499FF; }\n\n        \/* Pagination *\/\n        .pagination-footer { \n            margin-top: 44px; \n            display: flex; \n            justify-content: space-between; \n            align-items: center; \n            color: var(--text-muted); \n            font-size: 12px; \n        }\n        @media (max-width: 700px) {\n            .pagination-footer {\n                flex-direction: column-reverse;\n                align-items: flex-start;\n                gap: 12px;\n            }\n            #entryInfo {\n                width: 100%;\n            }\n        }\n        .pagination-controls { display: flex; align-items: center; gap: 6px; }\n        .page-num { \n            cursor: pointer; \n            width: 34px; \n            height: 34px; \n            display: flex; \n            align-items: center; \n            justify-content: center; \n            border-radius: 50%; \n            font-weight: 400;\n            font-size: 12px;\n            color: var(--text-dark);\n        }\n        .page-num:hover:not(.active) { background: #f1f3f4; }\n        .page-num.active { background: var(--primary-blue); color: white; }\n        .nav-btn { \n            cursor: pointer; \n            color: var(--text-dark); \n            font-weight: 400; \n            font-size: 12px;\n            padding: 6px 4px;\n        }\n        .nav-btn:hover { color: var(--primary-blue); }\n        .nav-btn.disabled { color: #ccc; pointer-events: none; }\n\n        \/* Toast notification *\/\n        .toast {\n            position: fixed;\n            bottom: 24px;\n            right: 24px;\n            background: #333;\n            color: white;\n            padding: 12px 20px;\n            border-radius: 8px;\n            font-size: 12px;\n            z-index: 9999;\n            display: none;\n            box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n        }\n        .toast.show { display: block; }\n        .toast.success { background: #1E8E3E; }\n        .toast.error { background: #D93025; }\n    <\/style>\n\n\n<div class=\"header-container\">\n    <div class=\"title-group\">\n        <h2>Departments<\/h2>\n        <span class=\"count\" id=\"deptCount\">(0)<\/span>\n    <\/div>\n    <div class=\"action-group\">\n        <div class=\"search-wrapper\">\n            <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\n            <\/svg>\n            <input type=\"text\" id=\"searchInput\" placeholder=\"Search Department...\" oninput=\"handleSearch()\">\n        <\/div>\n        <!-- Filter Button \u2014 exact match to Teams.html -->\n        <div class=\"filter-wrapper\">\n            <button class=\"btn-filter\" title=\"Filter\">\n                <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"\/>\n                    <line x1=\"7\" y1=\"12\" x2=\"17\" y2=\"12\"\/>\n                    <line x1=\"10\" y1=\"18\" x2=\"14\" y2=\"18\"\/>\n                <\/svg>\n            <\/button>\n        <\/div>\n        <button class=\"btn btn-primary\" onclick=\"openModal('add')\">+ Add New Department<\/button>\n        <button class=\"btn btn-primary\" onclick=\"downloadCSV()\">Download CSV<\/button>\n    <\/div>\n<\/div>\n\n<div class=\"dept-grid\" id=\"deptContainer\"><\/div>\n\n<div class=\"pagination-footer\">\n    <div class=\"pagination-controls\">\n        <span id=\"prevBtn\" class=\"nav-btn\">\u00ab Previous<\/span>\n        <div id=\"pageNumbers\" style=\"display:flex; gap:4px;\"><\/div>\n        <span id=\"nextBtn\" class=\"nav-btn\">Next \u00bb<\/span>\n    <\/div>\n    <div id=\"entryInfo\">Showing 0 to 0 of 0 entries<\/div>\n<\/div>\n\n<!-- Modal -->\n<div class=\"modal-overlay\" id=\"deptModal\">\n    <div class=\"modal-content\">\n        <h3 id=\"modalTitle\">New Department<\/h3>\n        <form id=\"deptForm\" onsubmit=\"handleFormSubmit(event)\">\n            <input type=\"hidden\" id=\"editDeptId\">\n\n            <!-- Upload Logo -->\n            <div class=\"form-group\">\n                <label>Upload department logo <span>*<\/span><\/label>\n                <div class=\"file-upload-wrapper\">\n                    <label class=\"choose-btn\" for=\"deptLogo\">Choose File<\/label>\n                    <input type=\"file\" id=\"deptLogo\" accept=\"image\/*\" onchange=\"updateFileName(this)\">\n                    <span class=\"file-name-display\" id=\"fileNameDisplay\">No file chosen<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Department Name <span>*<\/span><\/label>\n                <input type=\"text\" id=\"deptName\" class=\"form-control\" placeholder=\"Enter Department Name\" required>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label>Department Owner <span>*<\/span><\/label>\n                <div class=\"custom-select-wrapper\">\n                    <select id=\"deptOwner\" class=\"form-control\" required>\n                        <option value=\"\" disabled selected>Select Department Owner<\/option>\n                        <option value=\"1\">Super Ahmed<\/option>\n                        <option value=\"115\">Yasir Hussain<\/option>\n                        <option value=\"22\">Shamsa Ahmed<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n\n            <div class=\"toggle-row\">\n                <label>Department Active <span>*<\/span><\/label>\n                <label class=\"switch\">\n                    <input type=\"checkbox\" id=\"deptActive\" checked>\n                    <span class=\"slider\"><\/span>\n                <\/label>\n            <\/div>\n\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn-close-modal\" onclick=\"closeModal()\">Close<\/button>\n                <button type=\"submit\" id=\"saveBtn\" class=\"btn-save\">Save<\/button>\n            <\/div>\n        <\/form>\n    <\/div>\n<\/div>\n\n<!-- Toast -->\n<div class=\"toast\" id=\"toast\"><\/div>\n\n<script>\n    const BASE_URL = 'https:\/\/api-ph-portal.zyneventures.com\/api\/v1';\n    const ENDPOINTS = {\n        ALL: `${BASE_URL}\/department\/all`,\n        ADD: `${BASE_URL}\/department\/add`,\n        DETAIL: `${BASE_URL}\/department\/detail`,\n        UPDATE: `${BASE_URL}\/department\/update`,\n        DELETE: `${BASE_URL}\/department\/delete`\n    };\n\n    let allDepts = [];\n    let paginationData = { page: 1, limit: 10, total: 0, pages: 0 };\n\n    const getHeaders = () => ({\n        'Content-Type': 'application\/json',\n        'Authorization': `Bearer ${localStorage.getItem(\"TOKEN\")}`\n    });\n\n    function showToast(msg, type = '') {\n        const t = document.getElementById('toast');\n        t.textContent = msg;\n        t.className = `toast show ${type}`;\n        setTimeout(() => { t.className = 'toast'; }, 3000);\n    }\n\n    function updateFileName(input) {\n        const display = document.getElementById('fileNameDisplay');\n        display.textContent = input.files.length ? input.files[0].name : 'No file chosen';\n    }\n\n    async function fetchDepartments(page = 1) {\n        try {\n            const res = await fetch(\n                `${ENDPOINTS.ALL}?page=${page}`, \n                { headers: getHeaders() }\n            );\n            const result = await res.json();\n            if (result.code === 200) {\n                allDepts = result.data.data;\n                paginationData = {\n                    page: result.data.current_page,\n                    limit: result.data.per_page,\n                    total: result.data.total,\n                    pages: result.data.last_page\n                };\n                renderDepartments();\n                renderPagination();\n            }\n        } catch (err) { console.error(\"Fetch Error:\", err); }\n    }\n\n    function renderDepartments(filtered = null) {\n        const container = document.getElementById('deptContainer');\n        const list = filtered || allDepts;\n        document.getElementById('deptCount').textContent = `(${paginationData.total})`;\n        \n        const start = paginationData.total === 0 ? 0 : ((paginationData.page - 1) * paginationData.limit) + 1;\n        const end = Math.min(paginationData.page * paginationData.limit, paginationData.total);\n        document.getElementById('entryInfo').textContent = `Showing ${start} to ${end} of ${paginationData.total} entries`;\n\n        container.innerHTML = '';\n        list.forEach(dept => {\n            const isActive = dept.is_active;\n            const card = document.createElement('div');\n            card.className = 'dept-card';\n            card.setAttribute('data-id', dept.id);\n            card.innerHTML = `\n                <div class=\"card-header\">\n                    <div class=\"dept-identity\">\n                        <div class=\"dept-logo-box\">\n                            <img decoding=\"async\" src=\"${dept.logo || 'https:\/\/ui-avatars.com\/api\/?name=' + encodeURIComponent(dept.name) + '&#038;background=F1F3F4&#038;color=555&#038;size=42'}\" alt=\"logo\">\n                        <\/div>\n                        <span class=\"card-title\">${dept.name}<\/span>\n                    <\/div>\n                    <div class=\"badge-container\">\n                        <span class=\"status-badge ${isActive ? 'status-active' : 'status-inactive'}\">\n                            ${isActive ? 'Active' : 'Inactive'}\n                        <\/span>\n                        <div class=\"menu-container\">\n                            <span class=\"menu-dots\" onclick=\"toggleMenu(event, ${dept.id})\">\u22ee<\/span>\n                            <div class=\"dropdown-content\" id=\"dropdown-${dept.id}\">\n                                <div class=\"dropdown-item\" onclick=\"openModal('edit', ${dept.id})\">Edit<\/div>\n                                <div class=\"dropdown-item delete\" onclick=\"deleteDepartment(${dept.id})\">Delete<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"card-stats\">\n                    <div class=\"stat-col\">\n                        <div class=\"info-label\">Dept ID<\/div>\n                        <div class=\"info-value\">${dept.id}<\/div>\n                    <\/div>\n                    <div class=\"stat-col\">\n                        <div class=\"info-label\">Dept Owner<\/div>\n                        <div class=\"info-value\">${dept.owner ? dept.owner.name : 'N\/A'}<\/div>\n                    <\/div>\n                    <div class=\"stat-col\" style=\"text-align:right;\">\n                        <div class=\"info-label\">No. of members<\/div>\n                        <div class=\"info-value info-link\">${dept.users_count || 0}<\/div>\n                    <\/div>\n                <\/div>`;\n            container.appendChild(card);\n        });\n    }\n\n    async function openModal(mode, id = null) {\n        const modal = document.getElementById('deptModal');\n        document.getElementById('deptForm').reset();\n        document.getElementById('fileNameDisplay').textContent = 'No file chosen';\n        \n        if (mode === 'edit') {\n            document.getElementById('modalTitle').textContent = 'Update Department';\n            try {\n                const res = await fetch(ENDPOINTS.DETAIL, { \n                    method: 'POST', \n                    headers: getHeaders(), \n                    body: JSON.stringify({ id }) \n                });\n                const result = await res.json();\n                const data = result.data;\n                document.getElementById('editDeptId').value = data.id;\n                document.getElementById('deptName').value = data.name;\n                document.getElementById('deptOwner').value = data.owner_id;\n                document.getElementById('deptActive').checked = data.is_active;\n            } catch (err) { console.error(err); }\n        } else {\n            document.getElementById('modalTitle').textContent = 'New Department';\n            document.getElementById('editDeptId').value = '';\n        }\n        modal.style.display = 'flex';\n        document.querySelectorAll('.dropdown-content').forEach(d => d.classList.remove('show'));\n    }\n\n    function closeModal() { \n        document.getElementById('deptModal').style.display = 'none'; \n    }\n\n    \/\/ Close modal when clicking backdrop\n    document.getElementById('deptModal').addEventListener('click', function(e) {\n        if (e.target === this) closeModal();\n    });\n\n    async function handleFormSubmit(e) {\n        e.preventDefault();\n        const id = document.getElementById('editDeptId').value;\n        const payload = {\n            name: document.getElementById('deptName').value,\n            owner_id: document.getElementById('deptOwner').value,\n            is_active: document.getElementById('deptActive').checked\n        };\n        const url = id ? ENDPOINTS.UPDATE : ENDPOINTS.ADD;\n        if (id) payload.id = parseInt(id);\n\n        try {\n            const res = await fetch(url, {\n                method: 'POST', \n                headers: getHeaders(), \n                body: JSON.stringify(payload)\n            });\n            const result = await res.json();\n            if (result.code === 200) { \n                closeModal();\n                showToast(id ? 'Department updated successfully' : 'Department added successfully', 'success');\n                fetchDepartments(paginationData.page); \n            } else {\n                showToast(result.message || 'Something went wrong', 'error');\n            }\n        } catch (err) { \n            console.error(err); \n            showToast('Request failed', 'error');\n        }\n    }\n\n    async function deleteDepartment(id) {\n        if (!confirm('Are you sure you want to delete this department?')) return;\n        try {\n            const res = await fetch(ENDPOINTS.DELETE, {\n                method: 'POST',\n                headers: getHeaders(),\n                body: JSON.stringify({ id })\n            });\n            const result = await res.json();\n            if (result.code === 200) {\n                showToast('Department deleted successfully', 'success');\n                \/\/ If on a page with only 1 item, go back a page\n                const newPage = allDepts.length === 1 && paginationData.page > 1 \n                    ? paginationData.page - 1 \n                    : paginationData.page;\n                fetchDepartments(newPage);\n            } else {\n                showToast(result.message || 'Delete failed', 'error');\n            }\n        } catch (err) {\n            console.error(err);\n            showToast('Delete request failed', 'error');\n        }\n    }\n\n    function downloadCSV() {\n        if (!allDepts.length) { showToast('No data to download', 'error'); return; }\n        const headers = ['Dept ID', 'Department Name', 'Dept Owner', 'No. of Members', 'Status'];\n        const rows = allDepts.map(d => [\n            d.id,\n            `\"${(d.name || '').replace(\/\"\/g, '\"\"')}\"`,\n            `\"${(d.owner ? d.owner.name : 'N\/A').replace(\/\"\/g, '\"\"')}\"`,\n            d.users_count || 0,\n            d.is_active ? 'Active' : 'Inactive'\n        ]);\n        const csvContent = [headers.join(','), ...rows.map(r => r.join(','))].join('\\n');\n        const blob = new Blob([csvContent], { type: 'text\/csv;charset=utf-8;' });\n        const url = URL.createObjectURL(blob);\n        const a = document.createElement('a');\n        a.href = url;\n        a.download = 'departments.csv';\n        a.click();\n        URL.revokeObjectURL(url);\n        showToast('CSV downloaded', 'success');\n    }\n\n    function renderPagination() {\n        const container = document.getElementById('pageNumbers');\n        container.innerHTML = '';\n        \n        const prevBtn = document.getElementById('prevBtn');\n        const nextBtn = document.getElementById('nextBtn');\n        \n        prevBtn.onclick = () => { \n            if (paginationData.page > 1) \n            fetchDepartments(paginationData.page - 1); };\n        prevBtn.className = paginationData.page === 1 ? 'nav-btn disabled' : 'nav-btn';\n\n        for (let i = 1; i <= paginationData.pages; i++) {\n            const span = document.createElement('span');\n            span.className = i === paginationData.page ? 'page-num active' : 'page-num';\n            span.textContent = i;\n            span.onclick = () => fetchDepartments(i);\n            container.appendChild(span);\n        }\n\n        nextBtn.onclick = () => { \n            if (paginationData.page < paginationData.pages) \n            fetchDepartments(paginationData.page + 1); };\n        nextBtn.className = paginationData.page >= paginationData.pages ? 'nav-btn disabled' : 'nav-btn';\n    }\n\n    function handleSearch() {\n        const q = document.getElementById('searchInput').value.toLowerCase();\n        const filtered = allDepts.filter(d => d.name.toLowerCase().includes(q));\n        renderDepartments(filtered);\n    }\n\n    function toggleMenu(e, id) {\n        e.stopPropagation();\n        const isOpen = document.getElementById(`dropdown-${id}`).classList.contains('show');\n        document.querySelectorAll('.dropdown-content').forEach(d => d.classList.remove('show'));\n        if (!isOpen) document.getElementById(`dropdown-${id}`).classList.add('show');\n    }\n\n    window.onclick = () => \n        document.querySelectorAll('.dropdown-content').forEach(d => d.classList.remove('show'));\n\n    fetchDepartments();\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Departments (0) + Add New Department Download CSV \u00ab Previous Next \u00bb Showing 0 to 0 of 0 entries New Department Upload department logo * Choose File No file chosen Department Name * Department Owner * Select Department OwnerSuper AhmedYasir HussainShamsa Ahmed Department Active * Close Save<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-85","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/comments?post=85"}],"version-history":[{"count":2,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/85\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/85\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/media?parent=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}