Administrative Organizational Structure - SKS DigiTech<\/title>\r\n \r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n 50: '#eff6ff',\r\n 100: '#dbeafe',\r\n 200: '#bfdbfe',\r\n 500: '#1e6be7',\r\n 600: '#1452cc',\r\n 700: '#0f3fa8',\r\n 800: '#0c2e78',\r\n 900: '#092154',\r\n }\r\n },\r\n boxShadow: {\r\n 'card': '0 4px 20px -2px rgba(15, 23, 42, 0.06)',\r\n 'node': '0 10px 30px -5px rgba(20, 82, 204, 0.12)',\r\n 'drawer': '-10px 0 40px -10px rgba(15, 23, 42, 0.25)',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n .bg-grid {\r\n background-image: radial-gradient(rgba(148, 163, 184, 0.25) 1px, transparent 1px);\r\n background-size: 24px 24px;\r\n }\r\n \r\n \/* Org Chart Tree Connector Lines *\/\r\n .tree-line-down {\r\n width: 2px;\r\n height: 28px;\r\n background-color: #cbd5e1;\r\n margin: 0 auto;\r\n }\r\n .tree-fork-bar {\r\n height: 2px;\r\n background-color: #cbd5e1;\r\n }\r\n .tree-branch-line {\r\n width: 2px;\r\n height: 24px;\r\n background-color: #cbd5e1;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Print styling *\/\r\n @media print {\r\n body {\r\n background-color: #ffffff !important;\r\n padding: 0 !important;\r\n }\r\n .no-print {\r\n display: none !important;\r\n }\r\n .print-shadow-none {\r\n box-shadow: none !important;\r\n border: 1px solid #e2e8f0 !important;\r\n }\r\n }\r\n\r\n \/* Smooth transition for slide drawer *\/\r\n .drawer-transition {\r\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body class=\"bg-slate-50 text-slate-800 antialiased min-h-screen py-8 px-4 sm:px-6 lg:px-8 selection:bg-brand-100 selection:text-brand-900\">\r\n\r\n \r\n <div class=\"max-w-7xl mx-auto space-y-8\">\r\n\r\n <div class=\"relative overflow-hidden rounded-3xl bg-white border border-slate-200\/90 p-6 sm:p-10 shadow-card bg-grid\">\r\n <div class=\"absolute -top-24 -right-24 w-80 h-80 bg-brand-200\/35 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n <div class=\"absolute -bottom-24 -left-24 w-72 h-72 bg-blue-100\/50 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n\r\n <div class=\"relative z-10 flex flex-col lg:flex-row lg:items-center justify-between gap-6\">\r\n <div>\r\n <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-50 border border-brand-200 text-brand-700 text-xs font-bold uppercase tracking-wider mb-3\">\r\n <i class=\"fa-solid fa-sitemap text-brand-600\"><\/i>\r\n Internal Governance & Hierarchy\r\n <\/div>\r\n <h1 class=\"text-2xl sm:text-3xl lg:text-4xl font-extrabold text-slate-900 tracking-tight\">\r\n Administrative Organizational Structure\r\n <\/h1>\r\n <p class=\"text-slate-500 text-sm sm:text-base mt-2 max-w-2xl leading-relaxed\">\r\n Operational hierarchy and reporting matrix for <strong>SKS DigiTech<\/strong>\u2014directing educational web portal engineering, online virtual learning delivery, and pedagogical multimedia development.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-wrap items-center gap-3 shrink-0 no-print\">\r\n <button onclick=\"window.print()\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-white border border-slate-200 text-slate-700 text-xs font-bold hover:bg-slate-100 hover:text-slate-900 transition shadow-sm\">\r\n <i class=\"fa-solid fa-print\"><\/i>\r\n <span>Print Chart<\/span>\r\n <\/button>\r\n \r\n <button onclick=\"copyOfficialEmail()\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-brand-50 border border-brand-200 text-brand-700 text-xs font-bold hover:bg-brand-100 transition shadow-sm\">\r\n <i class=\"fa-regular fa-envelope\"><\/i>\r\n <span id=\"copyTextState\">sksdigitech@gmail.com<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mt-6 pt-6 border-t border-slate-100\">\r\n <div class=\"bg-slate-50 rounded-xl p-3 border border-slate-200\/60\">\r\n <span class=\"block text-[11px] font-semibold text-slate-400 uppercase tracking-wide\">Governance Tier<\/span>\r\n <span class=\"text-base font-bold text-slate-800\">Executive Council<\/span>\r\n <\/div>\r\n <div class=\"bg-slate-50 rounded-xl p-3 border border-slate-200\/60\">\r\n <span class=\"block text-[11px] font-semibold text-slate-400 uppercase tracking-wide\">Core Departments<\/span>\r\n <span class=\"text-base font-bold text-slate-800\">4 Operational Units<\/span>\r\n <\/div>\r\n <div class=\"bg-slate-50 rounded-xl p-3 border border-slate-200\/60\">\r\n <span class=\"block text-[11px] font-semibold text-slate-400 uppercase tracking-wide\">Domain Focus<\/span>\r\n <span class=\"text-base font-bold text-slate-800\">Education Technology<\/span>\r\n <\/div>\r\n <div class=\"bg-slate-50 rounded-xl p-3 border border-slate-200\/60\">\r\n <span class=\"block text-[11px] font-semibold text-slate-400 uppercase tracking-wide\">Official Communication<\/span>\r\n <span class=\"text-xs font-mono font-bold text-brand-600 truncate block\">sksdigitech@gmail.com<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"no-print bg-white rounded-2xl p-4 border border-slate-200 shadow-sm flex flex-col md:flex-row items-center justify-between gap-4\">\r\n \r\n \r\n <div class=\"flex items-center p-1 bg-slate-100 rounded-xl w-full md:w-auto\">\r\n <button id=\"btnTreeView\" onclick=\"switchView('tree')\" class=\"flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 bg-white text-brand-700 shadow-sm\">\r\n <i class=\"fa-solid fa-diagram-project\"><\/i>\r\n <span>Tree Hierarchy View<\/span>\r\n <\/button>\r\n <button id=\"btnGridView\" onclick=\"switchView('grid')\" class=\"flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 text-slate-600 hover:text-slate-900\">\r\n <i class=\"fa-solid fa-table-cells-large\"><\/i>\r\n <span>Department Grid Breakdown<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row items-center gap-3 w-full md:w-auto\">\r\n <div class=\"relative w-full sm:w-64\">\r\n <i class=\"fa-solid fa-magnifying-glass absolute left-3 top-1\/2 -translate-y-1\/2 text-slate-400 text-xs\"><\/i>\r\n <input \r\n type=\"text\" \r\n id=\"roleSearchInput\" \r\n oninput=\"handleSearch()\"\r\n placeholder=\"Search role or function...\" \r\n class=\"w-full pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:bg-white transition\"\r\n \/>\r\n <\/div>\r\n\r\n <select \r\n id=\"deptFilterSelect\" \r\n onchange=\"handleFilter()\"\r\n class=\"w-full sm:w-auto px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 focus:outline-none focus:ring-2 focus:ring-brand-500 cursor-pointer\"\r\n >\r\n <option value=\"all\">All Departments<\/option>\r\n <option value=\"exec\">Executive Leadership<\/option>\r\n <option value=\"web\">Web Development & IT<\/option>\r\n <option value=\"edu\">Online Education & Academics<\/option>\r\n <option value=\"media\">Multimedia & Content<\/option>\r\n <option value=\"ops\">Admin & Operations<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"treeViewContainer\" class=\"block space-y-6\">\r\n <div class=\"overflow-x-auto pb-8\">\r\n <div class=\"min-w-[980px] p-4 flex flex-col items-center\">\r\n \r\n \r\n <div class=\"flex flex-col items-center\">\r\n <div \r\n onclick=\"openRoleDetail('exec_1')\"\r\n class=\"group cursor-pointer bg-gradient-to-br from-slate-900 via-slate-800 to-brand-950 text-white rounded-2xl p-5 border-2 border-brand-500\/50 shadow-node hover:border-brand-400 transition-all duration-200 transform hover:-translate-y-1 w-80 text-center relative\"\r\n >\r\n <span class=\"inline-block px-2.5 py-0.5 rounded-full bg-brand-500\/20 text-brand-300 text-[10px] font-bold tracking-wider uppercase mb-2 border border-brand-400\/30\">\r\n Top Executive Body\r\n <\/span>\r\n <div class=\"flex items-center justify-center gap-3 mb-2\">\r\n <div class=\"w-10 h-10 rounded-xl bg-brand-600 flex items-center justify-center font-black text-base shadow-md\">\r\n <i class=\"fa-solid fa-crown text-amber-300\"><\/i>\r\n <\/div>\r\n <div class=\"text-left\">\r\n <h3 class=\"font-extrabold text-base leading-snug\">Managing Director \/ CEO<\/h3>\r\n <span class=\"text-xs text-brand-200 block\">Strategic Planning & Institutional Relations<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-300 mt-2 border-t border-slate-700 pt-2 text-left\">\r\n Directs institutional alliances, digital curriculum vision, and overall business operations.\r\n <\/p>\r\n <div class=\"mt-2.5 flex items-center justify-between text-[10px] text-slate-400\">\r\n <span>Direct Reports: 4 Dept Heads<\/span>\r\n <span class=\"text-brand-400 font-semibold group-hover:underline flex items-center gap-1\">\r\n View Dossier <i class=\"fa-solid fa-chevron-right text-[9px]\"><\/i>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"tree-line-down\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-[88%] relative mb-6\">\r\n <div class=\"tree-fork-bar w-full\"><\/div>\r\n \r\n <div class=\"flex justify-between -mt-[1px] px-8\">\r\n <div class=\"tree-branch-line\"><\/div>\r\n <div class=\"tree-branch-line\"><\/div>\r\n <div class=\"tree-branch-line\"><\/div>\r\n <div class=\"tree-branch-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-4 gap-5 w-full\">\r\n \r\n \r\n <div class=\"flex flex-col items-center space-y-4\">\r\n \r\n <div \r\n onclick=\"openRoleDetail('head_web')\"\r\n class=\"w-full bg-white rounded-2xl p-4 border-2 border-blue-500\/60 shadow-card hover:border-blue-600 transition cursor-pointer group\"\r\n >\r\n <div class=\"flex items-center gap-2.5 mb-2\">\r\n <div class=\"w-8 h-8 rounded-lg bg-blue-100 text-blue-700 flex items-center justify-center text-sm font-bold shrink-0\">\r\n <i class=\"fa-solid fa-globe\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[10px] font-bold uppercase tracking-wider text-blue-600 block\">Department Head<\/span>\r\n <h4 class=\"font-bold text-xs text-slate-900 leading-tight\">Head of Web Dev & IT<\/h4>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-500 line-clamp-2\">\r\n Website engineering, CMS portals for colleges & continuous system upkeep.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-0.5 h-4 bg-slate-300\"><\/div>\r\n\r\n \r\n <div class=\"w-full space-y-2.5\">\r\n <div onclick=\"openRoleDetail('web_1')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-blue-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Frontend \/ Backend Devs<\/span>\r\n <i class=\"fa-solid fa-code text-blue-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Portal Architecture & APIs<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('web_2')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-blue-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">UI\/UX Web Designer<\/span>\r\n <i class=\"fa-solid fa-palette text-blue-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Academic Web Interfaces<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('web_3')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-blue-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Maintenance Engineer<\/span>\r\n <i class=\"fa-solid fa-wrench text-blue-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Uptime & Routine Updates<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col items-center space-y-4\">\r\n \r\n <div \r\n onclick=\"openRoleDetail('head_edu')\"\r\n class=\"w-full bg-white rounded-2xl p-4 border-2 border-cyan-500\/60 shadow-card hover:border-cyan-600 transition cursor-pointer group\"\r\n >\r\n <div class=\"flex items-center gap-2.5 mb-2\">\r\n <div class=\"w-8 h-8 rounded-lg bg-cyan-100 text-cyan-700 flex items-center justify-center text-sm font-bold shrink-0\">\r\n <i class=\"fa-solid fa-laptop-code\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[10px] font-bold uppercase tracking-wider text-cyan-600 block\">Department Head<\/span>\r\n <h4 class=\"font-bold text-xs text-slate-900 leading-tight\">Head of Online Education<\/h4>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-500 line-clamp-2\">\r\n Course syllabus design, interactive live classrooms, and LMS coordination.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-0.5 h-4 bg-slate-300\"><\/div>\r\n\r\n \r\n <div class=\"w-full space-y-2.5\">\r\n <div onclick=\"openRoleDetail('edu_1')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-cyan-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">E-Learning Coordinator<\/span>\r\n <i class=\"fa-solid fa-graduation-cap text-cyan-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Session Calendars & Batches<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('edu_2')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-cyan-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Subject Matter Experts (SME)<\/span>\r\n <i class=\"fa-solid fa-chalkboard-user text-cyan-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Computer Course Instructors<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('edu_3')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-cyan-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Virtual Class Tech Support<\/span>\r\n <i class=\"fa-solid fa-headset text-cyan-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Student Connectivity & Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col items-center space-y-4\">\r\n \r\n <div \r\n onclick=\"openRoleDetail('head_media')\"\r\n class=\"w-full bg-white rounded-2xl p-4 border-2 border-indigo-500\/60 shadow-card hover:border-indigo-600 transition cursor-pointer group\"\r\n >\r\n <div class=\"flex items-center gap-2.5 mb-2\">\r\n <div class=\"w-8 h-8 rounded-lg bg-indigo-100 text-indigo-700 flex items-center justify-center text-sm font-bold shrink-0\">\r\n <i class=\"fa-solid fa-photo-film\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[10px] font-bold uppercase tracking-wider text-indigo-600 block\">Department Head<\/span>\r\n <h4 class=\"font-bold text-xs text-slate-900 leading-tight\">Head of Multimedia<\/h4>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-500 line-clamp-2\">\r\n Digital presentation decks, audio-visual assets, and lecture visuals.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-0.5 h-4 bg-slate-300\"><\/div>\r\n\r\n \r\n <div class=\"w-full space-y-2.5\">\r\n <div onclick=\"openRoleDetail('media_1')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-indigo-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Presentation Designer<\/span>\r\n <i class=\"fa-solid fa-sliders text-indigo-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Seminar & Academic Slides<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('media_2')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-indigo-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Video & Audio Editor<\/span>\r\n <i class=\"fa-solid fa-film text-indigo-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Recorded Class Post-Production<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('media_3')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-indigo-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Media Content Specialist<\/span>\r\n <i class=\"fa-solid fa-layer-group text-indigo-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Infographics & Visual Aids<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col items-center space-y-4\">\r\n \r\n <div \r\n onclick=\"openRoleDetail('head_ops')\"\r\n class=\"w-full bg-white rounded-2xl p-4 border-2 border-emerald-500\/60 shadow-card hover:border-emerald-600 transition cursor-pointer group\"\r\n >\r\n <div class=\"flex items-center gap-2.5 mb-2\">\r\n <div class=\"w-8 h-8 rounded-lg bg-emerald-100 text-emerald-700 flex items-center justify-center text-sm font-bold shrink-0\">\r\n <i class=\"fa-solid fa-building-columns\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[10px] font-bold uppercase tracking-wider text-emerald-600 block\">Department Head<\/span>\r\n <h4 class=\"font-bold text-xs text-slate-900 leading-tight\">Head of Admin & Ops<\/h4>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-500 line-clamp-2\">\r\n Client onboarding, institutional correspondence, and regulatory compliance.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-0.5 h-4 bg-slate-300\"><\/div>\r\n\r\n \r\n <div class=\"w-full space-y-2.5\">\r\n <div onclick=\"openRoleDetail('ops_1')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-emerald-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Client Relations Executive<\/span>\r\n <i class=\"fa-solid fa-briefcase text-emerald-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">School & Institute Liaison<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('ops_2')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-emerald-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Helpdesk Support Officer<\/span>\r\n <i class=\"fa-solid fa-headset text-emerald-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Public Inquiries & Email Desk<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('ops_3')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-emerald-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Quality & Compliance Officer<\/span>\r\n <i class=\"fa-solid fa-shield-halved text-emerald-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Audit & Standards Adherence<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-center text-xs text-slate-400\">\r\n <i class=\"fa-solid fa-circle-info mr-1 text-brand-500\"><\/i> Click any role card above to inspect reporting duties, educational mandates, and key deliverables.\r\n <\/p>\r\n <\/div>\r\n\r\n <div id=\"gridViewContainer\" class=\"hidden space-y-8\">\r\n <div id=\"gridCardsWrapper\" class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-3xl p-6 sm:p-8 border border-slate-200\/90 shadow-card space-y-6\">\r\n <div class=\"border-b border-slate-100 pb-4\">\r\n <span class=\"text-xs font-bold text-brand-600 uppercase tracking-wider\">Operational Coordination<\/span>\r\n <h3 class=\"text-xl font-bold text-slate-900 mt-0.5\">Cross-Functional Delivery Workflow<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-500 mt-1\">\r\n How administrative branches collaborate to deliver education-oriented technology deliverables.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-5\">\r\n <div class=\"bg-slate-50 rounded-2xl p-5 border border-slate-200\/70\">\r\n <div class=\"w-8 h-8 rounded-lg bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-xs mb-3\">\r\n 01\r\n <\/div>\r\n <h4 class=\"font-bold text-sm text-slate-800 mb-1\">Institutional Portal Deployment<\/h4>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">\r\n Admin team engages institute stakeholders → Web team provisions custom responsive CMS → Maintenance engineer ensures continuous server updates.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-slate-50 rounded-2xl p-5 border border-slate-200\/70\">\r\n <div class=\"w-8 h-8 rounded-lg bg-cyan-100 text-cyan-700 flex items-center justify-center font-bold text-xs mb-3\">\r\n 02\r\n <\/div>\r\n <h4 class=\"font-bold text-sm text-slate-800 mb-1\">Virtual Courses & Classes<\/h4>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">\r\n Academics lead finalizes course syllabus → Tech specialists configure live streams & LMS → Instructors deliver live computer skill classes.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-slate-50 rounded-2xl p-5 border border-slate-200\/70\">\r\n <div class=\"w-8 h-8 rounded-lg bg-indigo-100 text-indigo-700 flex items-center justify-center font-bold text-xs mb-3\">\r\n 03\r\n <\/div>\r\n <h4 class=\"font-bold text-sm text-slate-800 mb-1\">Educational Presentation Decks<\/h4>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">\r\n Subject Matter Experts compile raw syllabus notes → Multimedia designers create animated pedagogical slides → Final asset delivery for faculty seminars.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"rounded-2xl bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-white p-6 border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-xl bg-white\/10 flex items-center justify-center text-brand-300 text-lg shrink-0\">\r\n <i class=\"fa-solid fa-envelope\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[11px] text-slate-300 uppercase tracking-wider block font-semibold\">Official Inquiries & Administrative Desk<\/span>\r\n <span class=\"text-sm sm:text-base font-bold text-brand-200 font-mono\">sksdigitech@gmail.com<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-center gap-2\">\r\n <a href=\"mailto:sksdigitech@gmail.com\" class=\"px-4 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-xs font-bold transition shadow-sm\">\r\n Compose Message\r\n <\/a>\r\n <button onclick=\"copyOfficialEmail()\" class=\"px-4 py-2 rounded-xl bg-white\/10 hover:bg-white\/20 text-white text-xs font-bold border border-white\/20 transition\">\r\n Copy Email\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div id=\"drawerBackdrop\" onclick=\"closeRoleDetail()\" class=\"fixed inset-0 bg-slate-900\/50 backdrop-blur-sm z-40 hidden opacity-0 transition-opacity duration-300\"><\/div>\r\n\r\n <div id=\"roleDrawer\" class=\"fixed top-0 right-0 h-full w-full sm:w-[480px] bg-white z-50 shadow-drawer transform translate-x-full drawer-transition flex flex-col overflow-hidden\">\r\n \r\n \r\n <div class=\"p-6 border-b border-slate-100 flex items-center justify-between bg-slate-50\/70\">\r\n <div class=\"flex items-center gap-3\">\r\n <div id=\"drawerIconBox\" class=\"w-10 h-10 rounded-xl bg-brand-50 text-brand-600 flex items-center justify-center text-lg font-bold\">\r\n <i class=\"fa-solid fa-user-tie\"><\/i>\r\n <\/div>\r\n <div>\r\n <span id=\"drawerDeptTag\" class=\"text-[10px] font-extrabold uppercase tracking-wider text-brand-600 block\">\r\n Executive Body\r\n <\/span>\r\n <h3 id=\"drawerRoleTitle\" class=\"text-base font-bold text-slate-900\">\r\n Role Details\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"closeRoleDetail()\" class=\"w-8 h-8 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-200\/60 flex items-center justify-center transition\">\r\n <i class=\"fa-solid fa-xmark text-sm\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-6 overflow-y-auto flex-1 space-y-6 text-sm\">\r\n \r\n \r\n <div>\r\n <h4 class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-2\">Core Mandate<\/h4>\r\n <p id=\"drawerSummary\" class=\"text-slate-700 leading-relaxed bg-slate-50 p-3.5 rounded-xl border border-slate-200\/70 text-xs\">\r\n Role summary description will appear here.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h4 class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-2\">Key Responsibilities<\/h4>\r\n <ul id=\"drawerResponsibilities\" class=\"space-y-2 text-xs text-slate-600\">\r\n \r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-2 gap-3 pt-2\">\r\n <div class=\"bg-slate-50 p-3 rounded-xl border border-slate-200\/60\">\r\n <span class=\"text-[10px] font-bold uppercase text-slate-400 block\">Reports Directly To<\/span>\r\n <span id=\"drawerReportsTo\" class=\"font-bold text-slate-800 text-xs mt-0.5 block\">Executive Leadership<\/span>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-3 rounded-xl border border-slate-200\/60\">\r\n <span class=\"text-[10px] font-bold uppercase text-slate-400 block\">Scope of Oversight<\/span>\r\n <span id=\"drawerTeamScope\" class=\"font-bold text-slate-800 text-xs mt-0.5 block\">Cross-functional<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h4 class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-2\">SKS DigiTech Deliverable Alignment<\/h4>\r\n <div id=\"drawerDeliverables\" class=\"space-y-2\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-4 border-t border-slate-100 bg-slate-50 flex items-center justify-between gap-3\">\r\n <span class=\"text-[11px] text-slate-500\">Official Profile Reference<\/span>\r\n <button onclick=\"closeRoleDetail()\" class=\"px-4 py-2 bg-slate-900 text-white rounded-xl text-xs font-bold hover:bg-slate-800 transition\">\r\n Close Window\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"toastAlert\" class=\"fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300 pointer-events-none\">\r\n <div class=\"bg-slate-900 text-white px-5 py-3 rounded-2xl shadow-2xl border border-slate-700 flex items-center gap-3 text-xs font-semibold\">\r\n <i class=\"fa-solid fa-circle-check text-emerald-400 text-base\"><\/i>\r\n <span id=\"toastAlertMsg\">Email copied to clipboard!<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Complete Role Data Repository\r\n const rolesData = {\r\n 'exec_1': {\r\n title: 'Managing Director \/ Founder & CEO',\r\n dept: 'Executive Leadership',\r\n deptKey: 'exec',\r\n icon: 'fa-crown',\r\n colorClass: 'text-amber-500 bg-amber-50',\r\n reportsTo: 'Board \/ Public Filings Authority',\r\n scope: 'Organization-wide Strategy & All Branches',\r\n summary: 'Directs strategic planning, corporate compliance, client agreements with schools\/institutes, and overarching quality standards for all computer consultancy and educational modules.',\r\n responsibilities: [\r\n 'Formulates long-range technological roadmap and e-learning curriculum standards.',\r\n 'Negotiates institutional agreements with educational academies and colleges.',\r\n 'Supervises the four core operational department heads.',\r\n 'Maintains regulatory adherence as detailed in company filings.'\r\n ],\r\n deliverables: [\r\n 'Strategic institutional expansion plans.',\r\n 'Annual technology and curriculum roadmaps.'\r\n ]\r\n },\r\n 'head_web': {\r\n title: 'Head of Web Development & IT Solutions',\r\n dept: 'Web Development & IT',\r\n deptKey: 'web',\r\n icon: 'fa-globe',\r\n colorClass: 'text-blue-600 bg-blue-50',\r\n reportsTo: 'Managing Director & CEO',\r\n scope: 'Frontend, Backend, UI\/UX & Infrastructure',\r\n summary: 'Oversees end-to-end website engineering, responsive institutional design standards, and maintenance contracts for schools, colleges, and educational institutes.',\r\n responsibilities: [\r\n 'Directs technical architecture for institute web portals and learning CMS systems.',\r\n 'Enforces security standards, SSL configurations, and backup routines.',\r\n 'Coordinates routine maintenance schedules and emergency resolution protocols.',\r\n 'Reviews custom portal modules (e.g., student admission forms, result checkers).'\r\n ],\r\n deliverables: [\r\n 'Institutional website deployments.',\r\n 'High uptime SLAs and continuous site maintenance schedules.'\r\n ]\r\n },\r\n 'web_1': {\r\n title: 'Frontend & Backend Web Developers',\r\n dept: 'Web Development & IT',\r\n deptKey: 'web',\r\n icon: 'fa-code',\r\n colorClass: 'text-blue-600 bg-blue-50',\r\n reportsTo: 'Head of Web Development & IT',\r\n scope: 'Application Code & Database Engineering',\r\n summary: 'Codes responsive educational websites, database-backed administrative forms, event galleries, and course catalog pages.',\r\n responsibilities: [\r\n 'Builds dynamic, mobile-friendly institutional pages using clean code.',\r\n 'Connects academic forms to database endpoints and secure email dispatchers.',\r\n 'Executes cross-browser and speed optimization tests.'\r\n ],\r\n deliverables: ['Tested source code, bug fixes, and feature releases.']\r\n },\r\n 'web_2': {\r\n title: 'UI\/UX & Graphic Web Designer',\r\n dept: 'Web Development & IT',\r\n deptKey: 'web',\r\n icon: 'fa-palette',\r\n colorClass: 'text-blue-600 bg-blue-50',\r\n reportsTo: 'Head of Web Development & IT',\r\n scope: 'Interface Aesthetics & User Experience',\r\n summary: 'Creates intuitive layouts, wireframes, and prototypes for educational portals ensuring clean typography, readability, and effortless student navigation.',\r\n responsibilities: [\r\n 'Designs responsive website layouts adapted for students, parents, and faculty.',\r\n 'Constructs brand color palettes and typography hierarchies for partner schools.'\r\n ],\r\n deliverables: ['Figma\/mockup design systems and exportable visual assets.']\r\n },\r\n 'web_3': {\r\n title: 'Server & Maintenance Engineer',\r\n dept: 'Web Development & IT',\r\n deptKey: 'web',\r\n icon: 'fa-wrench',\r\n colorClass: 'text-blue-600 bg-blue-50',\r\n reportsTo: 'Head of Web Development & IT',\r\n scope: 'Server Upkeep, Security & Cloud Hosting',\r\n summary: 'Guarantees reliable website uptime, applies security patches, handles domain configurations, and performs scheduled content backups.',\r\n responsibilities: [\r\n 'Performs periodic content updates requested by institutional clients.',\r\n 'Monitors website load times, SSL validity, and hosting configurations.'\r\n ],\r\n deliverables: ['Routine maintenance logs and automated daily backups.']\r\n },\r\n 'head_edu': {\r\n title: 'Head of Online Education & Academics',\r\n dept: 'Online Education & Academics',\r\n deptKey: 'edu',\r\n icon: 'fa-laptop-code',\r\n colorClass: 'text-cyan-600 bg-cyan-50',\r\n reportsTo: 'Managing Director & CEO',\r\n scope: 'Curriculum, Instructors & Virtual Classrooms',\r\n summary: 'Governs academic quality across online classes, computer training programs, virtual teacher assignments, and learning milestone evaluations.',\r\n responsibilities: [\r\n 'Designs modern computer curricula covering fundamentals, office tech, and coding.',\r\n 'Assesses instructor pedagogical standards and student completion metrics.',\r\n 'Coordinates virtual classroom infrastructure and scheduling matrices.'\r\n ],\r\n deliverables: [\r\n 'Course completion certifications and structured curriculum plans.'\r\n ]\r\n },\r\n 'edu_1': {\r\n title: 'E-Learning & Batch Coordinator',\r\n dept: 'Online Education & Academics',\r\n deptKey: 'edu',\r\n icon: 'fa-graduation-cap',\r\n colorClass: 'text-cyan-600 bg-cyan-50',\r\n reportsTo: 'Head of Online Education',\r\n scope: 'Class Scheduling & Student Onboarding',\r\n summary: 'Manages student cohort rosters, sends class meeting links, monitors attendance, and organizes live course schedules.',\r\n responsibilities: [\r\n 'Coordinates timetable schedules across varied computer course batches.',\r\n 'Collects student feedback and addresses timetable adjustments.'\r\n ],\r\n deliverables: ['Student batch attendance logs and course calendar schedules.']\r\n },\r\n 'edu_2': {\r\n title: 'Subject Matter Experts (SME) \/ Instructors',\r\n dept: 'Online Education & Academics',\r\n deptKey: 'edu',\r\n icon: 'fa-chalkboard-user',\r\n colorClass: 'text-cyan-600 bg-cyan-50',\r\n reportsTo: 'Head of Online Education',\r\n scope: 'Course Delivery & Practical Sessions',\r\n summary: 'Conducts interactive live lectures and hands-on computer workshops tailored for diverse skill levels.',\r\n responsibilities: [\r\n 'Leads live interactive video sessions covering software and computer concepts.',\r\n 'Creates homework exercises, quizzes, and code assessments.'\r\n ],\r\n deliverables: ['Live class sessions and assessed learner evaluations.']\r\n },\r\n 'edu_3': {\r\n title: 'Virtual Classroom Tech Support',\r\n dept: 'Online Education & Academics',\r\n deptKey: 'edu',\r\n icon: 'fa-headset',\r\n colorClass: 'text-cyan-600 bg-cyan-50',\r\n reportsTo: 'Head of Online Education',\r\n scope: 'Live Stream Diagnostics & Screen-share Help',\r\n summary: 'Supports students and teachers during live online classes with microphone, video stream, and screen sharing troubleshooting.',\r\n responsibilities: [\r\n 'Assists attendees encountering login or virtual classroom audio glitches.',\r\n 'Archives session recordings for on-demand student review.'\r\n ],\r\n deliverables: ['Zero-interruption classroom uptime and session recordings.']\r\n },\r\n 'head_media': {\r\n title: 'Head of Multimedia & Creative Design',\r\n dept: 'Multimedia & Creative Design',\r\n deptKey: 'media',\r\n icon: 'fa-photo-film',\r\n colorClass: 'text-indigo-600 bg-indigo-50',\r\n reportsTo: 'Managing Director & CEO',\r\n scope: 'Presentations, Video Assets & Visual Aids',\r\n summary: 'Directs the creation of bespoke multimedia presentations for educational seminars, lectures, academic conferences, and digital courses.',\r\n responsibilities: [\r\n 'Oversees high-impact deck design and animation standards.',\r\n 'Ensures instructional graphics facilitate conceptual understanding.',\r\n 'Directs audio-visual post-production for educational course packages.'\r\n ],\r\n deliverables: [\r\n 'Institutional presentation decks and branded lecture assets.'\r\n ]\r\n },\r\n 'media_1': {\r\n title: 'Educational Presentation Designers',\r\n dept: 'Multimedia & Creative Design',\r\n deptKey: 'media',\r\n icon: 'fa-sliders',\r\n colorClass: 'text-indigo-600 bg-indigo-50',\r\n reportsTo: 'Head of Multimedia',\r\n scope: 'Keynotes, PowerPoint & Interactive Decks',\r\n summary: 'Translates dense academic lectures into visually structured, animated presentation slides.',\r\n responsibilities: [\r\n 'Formats custom seminar decks for school administrators and professors.',\r\n 'Integrates interactive flowcharts, diagrams, and illustrative callouts.'\r\n ],\r\n deliverables: ['Interactive slide files (.pptx, web-slides, PDF lecture notes).']\r\n },\r\n 'media_2': {\r\n title: 'Video & Audio Production Editor',\r\n dept: 'Multimedia & Creative Design',\r\n deptKey: 'media',\r\n icon: 'fa-film',\r\n colorClass: 'text-indigo-600 bg-indigo-50',\r\n reportsTo: 'Head of Multimedia',\r\n scope: 'Lesson Video Production & Audio Mastering',\r\n summary: 'Edits recorded virtual classes, balances lecture audio, and embeds lower thirds and animated titles.',\r\n responsibilities: [\r\n 'Produces clean digital course videos for archival and online portals.',\r\n 'Eliminates background noise and improves microphone speech clarity.'\r\n ],\r\n deliverables: ['Optimized, chapter-marked video lessons.']\r\n },\r\n 'media_3': {\r\n title: 'Instructional Media & Graphic Specialist',\r\n dept: 'Multimedia & Creative Design',\r\n deptKey: 'media',\r\n icon: 'fa-layer-group',\r\n colorClass: 'text-indigo-600 bg-indigo-50',\r\n reportsTo: 'Head of Multimedia',\r\n scope: 'Illustrations, Vector Graphics & Handouts',\r\n summary: 'Creates digital infographics, certificates, and student workbooks that complement digital training sessions.',\r\n responsibilities: [\r\n 'Designs downloadable student revision infographics and cheat-sheets.',\r\n 'Prepares verifiable digital certificates of completion.'\r\n ],\r\n deliverables: ['Print-ready PDFs and web-optimized educational infographics.']\r\n },\r\n 'head_ops': {\r\n title: 'Head of Administration & Operations',\r\n dept: 'Admin & Operations',\r\n deptKey: 'ops',\r\n icon: 'fa-building-columns',\r\n colorClass: 'text-emerald-600 bg-emerald-50',\r\n reportsTo: 'Managing Director & CEO',\r\n scope: 'Client Relations, Helpdesk & Legal Compliance',\r\n summary: 'Administers client institutional contracts, public inquiry dispatching, client onboarding, and corporate governance.',\r\n responsibilities: [\r\n 'Oversees public communication channels including sksdigitech@gmail.com.',\r\n 'Directs prompt response metrics for educational client requests.',\r\n 'Ensures service agreements match public regulatory records.'\r\n ],\r\n deliverables: [\r\n 'Monthly client SLA reviews and institutional contract archives.'\r\n ]\r\n },\r\n 'ops_1': {\r\n title: 'Institutional Client Relations Executive',\r\n dept: 'Admin & Operations',\r\n deptKey: 'ops',\r\n icon: 'fa-briefcase',\r\n colorClass: 'text-emerald-600 bg-emerald-50',\r\n reportsTo: 'Head of Admin & Operations',\r\n scope: 'Client Accounts & Requirement Scoping',\r\n summary: 'Acts as the direct point of contact for school principals, academy directors, and institutional partners.',\r\n responsibilities: [\r\n 'Gathers institute website requirements and course module requests.',\r\n 'Coordinates review meetings between clients and technical teams.'\r\n ],\r\n deliverables: ['Scoping briefs and client onboarding agreements.']\r\n },\r\n 'ops_2': {\r\n title: 'Helpdesk & Public Inquiry Specialist',\r\n dept: 'Admin & Operations',\r\n deptKey: 'ops',\r\n icon: 'fa-headset',\r\n colorClass: 'text-emerald-600 bg-emerald-50',\r\n reportsTo: 'Head of Admin & Operations',\r\n scope: 'Email Communications & Ticketing',\r\n summary: 'Monitors the official email desk (sksdigitech@gmail.com), routes incoming inquiries, and responds to public filings requests.',\r\n responsibilities: [\r\n 'Triages incoming queries regarding website updates or online courses.',\r\n 'Follows up with clients to confirm ticket resolution satisfaction.'\r\n ],\r\n deliverables: ['Helpdesk turnaround logs and inquiry distribution records.']\r\n },\r\n 'ops_3': {\r\n title: 'Quality Assurance & Standards Officer',\r\n dept: 'Admin & Operations',\r\n deptKey: 'ops',\r\n icon: 'fa-shield-halved',\r\n colorClass: 'text-emerald-600 bg-emerald-50',\r\n reportsTo: 'Head of Admin & Operations',\r\n scope: 'Audit, Security Standards & Verification',\r\n summary: 'Conducts routine quality checks on website delivery, multimedia asset clarity, and online teaching feedback.',\r\n responsibilities: [\r\n 'Audits deliverables against academic and client contract criteria.',\r\n 'Reviews privacy standards for student data on institutional sites.'\r\n ],\r\n deliverables: ['Quarterly quality compliance reports.']\r\n }\r\n };\r\n\r\n function switchView(view) {\r\n const treeView = document.getElementById('treeViewContainer');\r\n const gridView = document.getElementById('gridViewContainer');\r\n const btnTree = document.getElementById('btnTreeView');\r\n const btnGrid = document.getElementById('btnGridView');\r\n\r\n if (view === 'tree') {\r\n treeView.classList.remove('hidden');\r\n gridView.classList.add('hidden');\r\n btnTree.className = 'flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 bg-white text-brand-700 shadow-sm';\r\n btnGrid.className = 'flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 text-slate-600 hover:text-slate-900';\r\n } else {\r\n treeView.classList.add('hidden');\r\n gridView.classList.remove('hidden');\r\n btnGrid.className = 'flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 bg-white text-brand-700 shadow-sm';\r\n btnTree.className = 'flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 text-slate-600 hover:text-slate-900';\r\n renderGrid();\r\n }\r\n }\r\n\r\n \/\/ Render Department Grid Breakdown\r\n function renderGrid() {\r\n const wrapper = document.getElementById('gridCardsWrapper');\r\n if (!wrapper) return;\r\n \r\n const query = (document.getElementById('roleSearchInput')?.value || '').toLowerCase();\r\n const filter = document.getElementById('deptFilterSelect')?.value || 'all';\r\n\r\n \/\/ Group roles by department\r\n const departments = [\r\n { key: 'exec', name: 'Executive Leadership', border: 'border-brand-500', bg: 'bg-brand-50\/50' },\r\n { key: 'web', name: 'Web Development & IT Solutions', border: 'border-blue-500', bg: 'bg-blue-50\/50' },\r\n { key: 'edu', name: 'Online Education & Academics', border: 'border-cyan-500', bg: 'bg-cyan-50\/50' },\r\n { key: 'media', name: 'Multimedia & Creative Design', border: 'border-indigo-500', bg: 'bg-indigo-50\/50' },\r\n { key: 'ops', name: 'Administration & Client Support', border: 'border-emerald-500', bg: 'bg-emerald-50\/50' }\r\n ];\r\n\r\n let html = '';\r\n\r\n departments.forEach(dept => {\r\n if (filter !== 'all' && filter !== dept.key) return;\r\n\r\n \/\/ Filter roles in this department matching query\r\n const deptRoles = Object.entries(rolesData).filter(([id, data]) => {\r\n if (data.deptKey !== dept.key) return false;\r\n if (!query) return true;\r\n return data.title.toLowerCase().includes(query) || \r\n data.summary.toLowerCase().includes(query) ||\r\n data.dept.toLowerCase().includes(query);\r\n });\r\n\r\n if (deptRoles.length === 0) return;\r\n\r\n html += `\r\n <div class=\"bg-white rounded-2xl border ${dept.border} p-6 shadow-sm flex flex-col justify-between\">\r\n <div>\r\n <div class=\"flex items-center justify-between pb-3 border-b border-slate-100 mb-4\">\r\n <div>\r\n <span class=\"text-[10px] font-bold uppercase tracking-wider text-slate-400\">Department Unit<\/span>\r\n <h3 class=\"text-base font-bold text-slate-900\">${dept.name}<\/h3>\r\n <\/div>\r\n <span class=\"px-2.5 py-1 rounded-full bg-slate-100 text-slate-700 text-xs font-semibold\">\r\n ${deptRoles.length} ${deptRoles.length === 1 ? 'Role' : 'Roles'}\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"space-y-3\">\r\n ${deptRoles.map(([id, role]) => `\r\n <div onclick=\"openRoleDetail('${id}')\" class=\"p-3 rounded-xl border border-slate-200\/80 hover:border-brand-300 hover:bg-slate-50 transition cursor-pointer flex items-start justify-between gap-3 group\">\r\n <div class=\"flex items-start gap-3\">\r\n <div class=\"w-8 h-8 rounded-lg ${role.colorClass} flex items-center justify-center text-xs shrink-0 mt-0.5\">\r\n <i class=\"fa-solid ${role.icon}\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-xs text-slate-900 group-hover:text-brand-600 transition\">${role.title}<\/h4>\r\n <p class=\"text-[11px] text-slate-500 line-clamp-2 mt-0.5\">${role.summary}<\/p>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fa-solid fa-chevron-right text-slate-300 group-hover:text-brand-500 text-xs shrink-0 mt-1.5 transition\"><\/i>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-5 pt-3 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-400\">\r\n <span>SKS DigiTech Hierarchy<\/span>\r\n <button onclick=\"openRoleDetail('${deptRoles[0][0]}')\" class=\"text-brand-600 font-bold hover:underline\">\r\n Inspect Lead Role →\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n\r\n if (!html) {\r\n html = `\r\n <div class=\"col-span-2 p-12 text-center bg-white rounded-2xl border border-slate-200 text-slate-400\">\r\n <i class=\"fa-solid fa-folder-open text-3xl mb-2 text-slate-300\"><\/i>\r\n <p class=\"text-sm font-semibold\">No roles found matching your search filter.<\/p>\r\n <button onclick=\"resetFilters()\" class=\"mt-3 px-4 py-2 rounded-xl bg-slate-100 text-slate-700 text-xs font-bold hover:bg-slate-200 transition\">\r\n Reset Filters\r\n <\/button>\r\n <\/div>\r\n `;\r\n }\r\n\r\n wrapper.innerHTML = html;\r\n }\r\n\r\n function handleSearch() {\r\n const query = document.getElementById('roleSearchInput').value.trim();\r\n if (query && document.getElementById('gridViewContainer').classList.contains('hidden')) {\r\n switchView('grid');\r\n } else {\r\n renderGrid();\r\n }\r\n }\r\n\r\n function handleFilter() {\r\n const filter = document.getElementById('deptFilterSelect').value;\r\n if (filter !== 'all' && document.getElementById('gridViewContainer').classList.contains('hidden')) {\r\n switchView('grid');\r\n } else {\r\n renderGrid();\r\n }\r\n }\r\n\r\n function resetFilters() {\r\n document.getElementById('roleSearchInput').value = '';\r\n document.getElementById('deptFilterSelect').value = 'all';\r\n renderGrid();\r\n }\r\n\r\n function openRoleDetail(roleId) {\r\n const role = rolesData[roleId];\r\n if (!role) return;\r\n\r\n document.getElementById('drawerRoleTitle').textContent = role.title;\r\n document.getElementById('drawerDeptTag').textContent = role.dept;\r\n document.getElementById('drawerSummary').textContent = role.summary;\r\n document.getElementById('drawerReportsTo').textContent = role.reportsTo;\r\n document.getElementById('drawerTeamScope').textContent = role.scope;\r\n\r\n \/\/ Icon & color\r\n const iconBox = document.getElementById('drawerIconBox');\r\n iconBox.className = `w-10 h-10 rounded-xl flex items-center justify-center text-lg font-bold ${role.colorClass}`;\r\n iconBox.innerHTML = `<i class=\"fa-solid ${role.icon}\"><\/i>`;\r\n\r\n \/\/ Responsibilities list\r\n const respContainer = document.getElementById('drawerResponsibilities');\r\n respContainer.innerHTML = role.responsibilities.map(resp => `\r\n <li class=\"flex items-start gap-2\">\r\n <i class=\"fa-solid fa-check text-brand-600 text-xs mt-1 shrink-0\"><\/i>\r\n <span>${resp}<\/span>\r\n <\/li>\r\n `).join('');\r\n\r\n \/\/ Deliverables list\r\n const delivContainer = document.getElementById('drawerDeliverables');\r\n delivContainer.innerHTML = role.deliverables.map(item => `\r\n <div class=\"flex items-center gap-2 text-xs bg-slate-50 p-2.5 rounded-lg border border-slate-200\/70 text-slate-700\">\r\n <i class=\"fa-solid fa-cube text-slate-400 text-xs\"><\/i>\r\n <span>${item}<\/span>\r\n <\/div>\r\n `).join('');\r\n\r\n \/\/ Show drawer\r\n const backdrop = document.getElementById('drawerBackdrop');\r\n const drawer = document.getElementById('roleDrawer');\r\n backdrop.classList.remove('hidden');\r\n setTimeout(() => {\r\n backdrop.classList.add('opacity-100');\r\n drawer.classList.remove('translate-x-full');\r\n }, 10);\r\n }\r\n\r\n function closeRoleDetail() {\r\n const backdrop = document.getElementById('drawerBackdrop');\r\n const drawer = document.getElementById('roleDrawer');\r\n drawer.classList.add('translate-x-full');\r\n backdrop.classList.remove('opacity-100');\r\n setTimeout(() => {\r\n backdrop.classList.add('hidden');\r\n }, 300);\r\n }\r\n\r\n function copyOfficialEmail() {\r\n const email = 'sksdigitech@gmail.com';\r\n const tempInput = document.createElement('input');\r\n tempInput.value = email;\r\n document.body.appendChild(tempInput);\r\n tempInput.select();\r\n\r\n try {\r\n document.execCommand('copy');\r\n showToast('Copied: ' + email);\r\n const stateEl = document.getElementById('copyTextState');\r\n if (stateEl) {\r\n stateEl.textContent = 'Copied to Clipboard!';\r\n setTimeout(() => {\r\n stateEl.textContent = email;\r\n }, 2500);\r\n }\r\n } catch (e) {\r\n showToast('Email: ' + email);\r\n }\r\n document.body.removeChild(tempInput);\r\n }\r\n\r\n function showToast(msg) {\r\n const toast = document.getElementById('toastAlert');\r\n const msgEl = document.getElementById('toastAlertMsg');\r\n if (toast && msgEl) {\r\n msgEl.textContent = msg;\r\n toast.classList.remove('translate-y-20', 'opacity-0');\r\n toast.classList.add('translate-y-0', 'opacity-100');\r\n setTimeout(() => {\r\n toast.classList.remove('translate-y-0', 'opacity-100');\r\n toast.classList.add('translate-y-20', 'opacity-0');\r\n }, 2800);\r\n }\r\n }\r\n\r\n \/\/ Keyboard support: Escape closes the drawer\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') closeRoleDetail();\r\n });\r\n\r\n \/\/ Initialize default state\r\n window.addEventListener('DOMContentLoaded', () => {\r\n renderGrid();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Administrative Organizational Structure – SKS DigiTech Internal Governance & Hierarchy Administrative Organizational Structure Operational hierarchy and reporting matrix for SKS DigiTech\u2014directing educational web portal engineering, online virtual learning delivery, and pedagogical multimedia development. Print Chart sksdigitech@gmail.com Governance Tier Executive Council Core Departments 4 Operational Units Domain Focus Education Technology Official Communication sksdigitech@gmail.com Tree Hierarchy View […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"disabled","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-252","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/pages\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":3,"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/pages\/252\/revisions"}],"predecessor-version":[{"id":10434,"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/pages\/252\/revisions\/10434"}],"wp:attachment":[{"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/media?parent=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Administrative Organizational Structure - SKS DigiTech<\/title>\r\n \r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['\"Plus Jakarta Sans\"', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n 50: '#eff6ff',\r\n 100: '#dbeafe',\r\n 200: '#bfdbfe',\r\n 500: '#1e6be7',\r\n 600: '#1452cc',\r\n 700: '#0f3fa8',\r\n 800: '#0c2e78',\r\n 900: '#092154',\r\n }\r\n },\r\n boxShadow: {\r\n 'card': '0 4px 20px -2px rgba(15, 23, 42, 0.06)',\r\n 'node': '0 10px 30px -5px rgba(20, 82, 204, 0.12)',\r\n 'drawer': '-10px 0 40px -10px rgba(15, 23, 42, 0.25)',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n .bg-grid {\r\n background-image: radial-gradient(rgba(148, 163, 184, 0.25) 1px, transparent 1px);\r\n background-size: 24px 24px;\r\n }\r\n \r\n \/* Org Chart Tree Connector Lines *\/\r\n .tree-line-down {\r\n width: 2px;\r\n height: 28px;\r\n background-color: #cbd5e1;\r\n margin: 0 auto;\r\n }\r\n .tree-fork-bar {\r\n height: 2px;\r\n background-color: #cbd5e1;\r\n }\r\n .tree-branch-line {\r\n width: 2px;\r\n height: 24px;\r\n background-color: #cbd5e1;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Print styling *\/\r\n @media print {\r\n body {\r\n background-color: #ffffff !important;\r\n padding: 0 !important;\r\n }\r\n .no-print {\r\n display: none !important;\r\n }\r\n .print-shadow-none {\r\n box-shadow: none !important;\r\n border: 1px solid #e2e8f0 !important;\r\n }\r\n }\r\n\r\n \/* Smooth transition for slide drawer *\/\r\n .drawer-transition {\r\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body class=\"bg-slate-50 text-slate-800 antialiased min-h-screen py-8 px-4 sm:px-6 lg:px-8 selection:bg-brand-100 selection:text-brand-900\">\r\n\r\n \r\n <div class=\"max-w-7xl mx-auto space-y-8\">\r\n\r\n <div class=\"relative overflow-hidden rounded-3xl bg-white border border-slate-200\/90 p-6 sm:p-10 shadow-card bg-grid\">\r\n <div class=\"absolute -top-24 -right-24 w-80 h-80 bg-brand-200\/35 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n <div class=\"absolute -bottom-24 -left-24 w-72 h-72 bg-blue-100\/50 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n\r\n <div class=\"relative z-10 flex flex-col lg:flex-row lg:items-center justify-between gap-6\">\r\n <div>\r\n <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-50 border border-brand-200 text-brand-700 text-xs font-bold uppercase tracking-wider mb-3\">\r\n <i class=\"fa-solid fa-sitemap text-brand-600\"><\/i>\r\n Internal Governance & Hierarchy\r\n <\/div>\r\n <h1 class=\"text-2xl sm:text-3xl lg:text-4xl font-extrabold text-slate-900 tracking-tight\">\r\n Administrative Organizational Structure\r\n <\/h1>\r\n <p class=\"text-slate-500 text-sm sm:text-base mt-2 max-w-2xl leading-relaxed\">\r\n Operational hierarchy and reporting matrix for <strong>SKS DigiTech<\/strong>\u2014directing educational web portal engineering, online virtual learning delivery, and pedagogical multimedia development.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-wrap items-center gap-3 shrink-0 no-print\">\r\n <button onclick=\"window.print()\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-white border border-slate-200 text-slate-700 text-xs font-bold hover:bg-slate-100 hover:text-slate-900 transition shadow-sm\">\r\n <i class=\"fa-solid fa-print\"><\/i>\r\n <span>Print Chart<\/span>\r\n <\/button>\r\n \r\n <button onclick=\"copyOfficialEmail()\" class=\"inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-brand-50 border border-brand-200 text-brand-700 text-xs font-bold hover:bg-brand-100 transition shadow-sm\">\r\n <i class=\"fa-regular fa-envelope\"><\/i>\r\n <span id=\"copyTextState\">sksdigitech@gmail.com<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mt-6 pt-6 border-t border-slate-100\">\r\n <div class=\"bg-slate-50 rounded-xl p-3 border border-slate-200\/60\">\r\n <span class=\"block text-[11px] font-semibold text-slate-400 uppercase tracking-wide\">Governance Tier<\/span>\r\n <span class=\"text-base font-bold text-slate-800\">Executive Council<\/span>\r\n <\/div>\r\n <div class=\"bg-slate-50 rounded-xl p-3 border border-slate-200\/60\">\r\n <span class=\"block text-[11px] font-semibold text-slate-400 uppercase tracking-wide\">Core Departments<\/span>\r\n <span class=\"text-base font-bold text-slate-800\">4 Operational Units<\/span>\r\n <\/div>\r\n <div class=\"bg-slate-50 rounded-xl p-3 border border-slate-200\/60\">\r\n <span class=\"block text-[11px] font-semibold text-slate-400 uppercase tracking-wide\">Domain Focus<\/span>\r\n <span class=\"text-base font-bold text-slate-800\">Education Technology<\/span>\r\n <\/div>\r\n <div class=\"bg-slate-50 rounded-xl p-3 border border-slate-200\/60\">\r\n <span class=\"block text-[11px] font-semibold text-slate-400 uppercase tracking-wide\">Official Communication<\/span>\r\n <span class=\"text-xs font-mono font-bold text-brand-600 truncate block\">sksdigitech@gmail.com<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"no-print bg-white rounded-2xl p-4 border border-slate-200 shadow-sm flex flex-col md:flex-row items-center justify-between gap-4\">\r\n \r\n \r\n <div class=\"flex items-center p-1 bg-slate-100 rounded-xl w-full md:w-auto\">\r\n <button id=\"btnTreeView\" onclick=\"switchView('tree')\" class=\"flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 bg-white text-brand-700 shadow-sm\">\r\n <i class=\"fa-solid fa-diagram-project\"><\/i>\r\n <span>Tree Hierarchy View<\/span>\r\n <\/button>\r\n <button id=\"btnGridView\" onclick=\"switchView('grid')\" class=\"flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 text-slate-600 hover:text-slate-900\">\r\n <i class=\"fa-solid fa-table-cells-large\"><\/i>\r\n <span>Department Grid Breakdown<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row items-center gap-3 w-full md:w-auto\">\r\n <div class=\"relative w-full sm:w-64\">\r\n <i class=\"fa-solid fa-magnifying-glass absolute left-3 top-1\/2 -translate-y-1\/2 text-slate-400 text-xs\"><\/i>\r\n <input \r\n type=\"text\" \r\n id=\"roleSearchInput\" \r\n oninput=\"handleSearch()\"\r\n placeholder=\"Search role or function...\" \r\n class=\"w-full pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:bg-white transition\"\r\n \/>\r\n <\/div>\r\n\r\n <select \r\n id=\"deptFilterSelect\" \r\n onchange=\"handleFilter()\"\r\n class=\"w-full sm:w-auto px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-semibold text-slate-700 focus:outline-none focus:ring-2 focus:ring-brand-500 cursor-pointer\"\r\n >\r\n <option value=\"all\">All Departments<\/option>\r\n <option value=\"exec\">Executive Leadership<\/option>\r\n <option value=\"web\">Web Development & IT<\/option>\r\n <option value=\"edu\">Online Education & Academics<\/option>\r\n <option value=\"media\">Multimedia & Content<\/option>\r\n <option value=\"ops\">Admin & Operations<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"treeViewContainer\" class=\"block space-y-6\">\r\n <div class=\"overflow-x-auto pb-8\">\r\n <div class=\"min-w-[980px] p-4 flex flex-col items-center\">\r\n \r\n \r\n <div class=\"flex flex-col items-center\">\r\n <div \r\n onclick=\"openRoleDetail('exec_1')\"\r\n class=\"group cursor-pointer bg-gradient-to-br from-slate-900 via-slate-800 to-brand-950 text-white rounded-2xl p-5 border-2 border-brand-500\/50 shadow-node hover:border-brand-400 transition-all duration-200 transform hover:-translate-y-1 w-80 text-center relative\"\r\n >\r\n <span class=\"inline-block px-2.5 py-0.5 rounded-full bg-brand-500\/20 text-brand-300 text-[10px] font-bold tracking-wider uppercase mb-2 border border-brand-400\/30\">\r\n Top Executive Body\r\n <\/span>\r\n <div class=\"flex items-center justify-center gap-3 mb-2\">\r\n <div class=\"w-10 h-10 rounded-xl bg-brand-600 flex items-center justify-center font-black text-base shadow-md\">\r\n <i class=\"fa-solid fa-crown text-amber-300\"><\/i>\r\n <\/div>\r\n <div class=\"text-left\">\r\n <h3 class=\"font-extrabold text-base leading-snug\">Managing Director \/ CEO<\/h3>\r\n <span class=\"text-xs text-brand-200 block\">Strategic Planning & Institutional Relations<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-300 mt-2 border-t border-slate-700 pt-2 text-left\">\r\n Directs institutional alliances, digital curriculum vision, and overall business operations.\r\n <\/p>\r\n <div class=\"mt-2.5 flex items-center justify-between text-[10px] text-slate-400\">\r\n <span>Direct Reports: 4 Dept Heads<\/span>\r\n <span class=\"text-brand-400 font-semibold group-hover:underline flex items-center gap-1\">\r\n View Dossier <i class=\"fa-solid fa-chevron-right text-[9px]\"><\/i>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"tree-line-down\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-[88%] relative mb-6\">\r\n <div class=\"tree-fork-bar w-full\"><\/div>\r\n \r\n <div class=\"flex justify-between -mt-[1px] px-8\">\r\n <div class=\"tree-branch-line\"><\/div>\r\n <div class=\"tree-branch-line\"><\/div>\r\n <div class=\"tree-branch-line\"><\/div>\r\n <div class=\"tree-branch-line\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-4 gap-5 w-full\">\r\n \r\n \r\n <div class=\"flex flex-col items-center space-y-4\">\r\n \r\n <div \r\n onclick=\"openRoleDetail('head_web')\"\r\n class=\"w-full bg-white rounded-2xl p-4 border-2 border-blue-500\/60 shadow-card hover:border-blue-600 transition cursor-pointer group\"\r\n >\r\n <div class=\"flex items-center gap-2.5 mb-2\">\r\n <div class=\"w-8 h-8 rounded-lg bg-blue-100 text-blue-700 flex items-center justify-center text-sm font-bold shrink-0\">\r\n <i class=\"fa-solid fa-globe\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[10px] font-bold uppercase tracking-wider text-blue-600 block\">Department Head<\/span>\r\n <h4 class=\"font-bold text-xs text-slate-900 leading-tight\">Head of Web Dev & IT<\/h4>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-500 line-clamp-2\">\r\n Website engineering, CMS portals for colleges & continuous system upkeep.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-0.5 h-4 bg-slate-300\"><\/div>\r\n\r\n \r\n <div class=\"w-full space-y-2.5\">\r\n <div onclick=\"openRoleDetail('web_1')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-blue-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Frontend \/ Backend Devs<\/span>\r\n <i class=\"fa-solid fa-code text-blue-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Portal Architecture & APIs<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('web_2')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-blue-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">UI\/UX Web Designer<\/span>\r\n <i class=\"fa-solid fa-palette text-blue-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Academic Web Interfaces<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('web_3')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-blue-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Maintenance Engineer<\/span>\r\n <i class=\"fa-solid fa-wrench text-blue-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Uptime & Routine Updates<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col items-center space-y-4\">\r\n \r\n <div \r\n onclick=\"openRoleDetail('head_edu')\"\r\n class=\"w-full bg-white rounded-2xl p-4 border-2 border-cyan-500\/60 shadow-card hover:border-cyan-600 transition cursor-pointer group\"\r\n >\r\n <div class=\"flex items-center gap-2.5 mb-2\">\r\n <div class=\"w-8 h-8 rounded-lg bg-cyan-100 text-cyan-700 flex items-center justify-center text-sm font-bold shrink-0\">\r\n <i class=\"fa-solid fa-laptop-code\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[10px] font-bold uppercase tracking-wider text-cyan-600 block\">Department Head<\/span>\r\n <h4 class=\"font-bold text-xs text-slate-900 leading-tight\">Head of Online Education<\/h4>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-500 line-clamp-2\">\r\n Course syllabus design, interactive live classrooms, and LMS coordination.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-0.5 h-4 bg-slate-300\"><\/div>\r\n\r\n \r\n <div class=\"w-full space-y-2.5\">\r\n <div onclick=\"openRoleDetail('edu_1')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-cyan-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">E-Learning Coordinator<\/span>\r\n <i class=\"fa-solid fa-graduation-cap text-cyan-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Session Calendars & Batches<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('edu_2')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-cyan-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Subject Matter Experts (SME)<\/span>\r\n <i class=\"fa-solid fa-chalkboard-user text-cyan-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Computer Course Instructors<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('edu_3')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-cyan-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Virtual Class Tech Support<\/span>\r\n <i class=\"fa-solid fa-headset text-cyan-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Student Connectivity & Video<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col items-center space-y-4\">\r\n \r\n <div \r\n onclick=\"openRoleDetail('head_media')\"\r\n class=\"w-full bg-white rounded-2xl p-4 border-2 border-indigo-500\/60 shadow-card hover:border-indigo-600 transition cursor-pointer group\"\r\n >\r\n <div class=\"flex items-center gap-2.5 mb-2\">\r\n <div class=\"w-8 h-8 rounded-lg bg-indigo-100 text-indigo-700 flex items-center justify-center text-sm font-bold shrink-0\">\r\n <i class=\"fa-solid fa-photo-film\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[10px] font-bold uppercase tracking-wider text-indigo-600 block\">Department Head<\/span>\r\n <h4 class=\"font-bold text-xs text-slate-900 leading-tight\">Head of Multimedia<\/h4>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-500 line-clamp-2\">\r\n Digital presentation decks, audio-visual assets, and lecture visuals.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-0.5 h-4 bg-slate-300\"><\/div>\r\n\r\n \r\n <div class=\"w-full space-y-2.5\">\r\n <div onclick=\"openRoleDetail('media_1')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-indigo-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Presentation Designer<\/span>\r\n <i class=\"fa-solid fa-sliders text-indigo-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Seminar & Academic Slides<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('media_2')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-indigo-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Video & Audio Editor<\/span>\r\n <i class=\"fa-solid fa-film text-indigo-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Recorded Class Post-Production<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('media_3')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-indigo-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Media Content Specialist<\/span>\r\n <i class=\"fa-solid fa-layer-group text-indigo-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Infographics & Visual Aids<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col items-center space-y-4\">\r\n \r\n <div \r\n onclick=\"openRoleDetail('head_ops')\"\r\n class=\"w-full bg-white rounded-2xl p-4 border-2 border-emerald-500\/60 shadow-card hover:border-emerald-600 transition cursor-pointer group\"\r\n >\r\n <div class=\"flex items-center gap-2.5 mb-2\">\r\n <div class=\"w-8 h-8 rounded-lg bg-emerald-100 text-emerald-700 flex items-center justify-center text-sm font-bold shrink-0\">\r\n <i class=\"fa-solid fa-building-columns\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[10px] font-bold uppercase tracking-wider text-emerald-600 block\">Department Head<\/span>\r\n <h4 class=\"font-bold text-xs text-slate-900 leading-tight\">Head of Admin & Ops<\/h4>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-[11px] text-slate-500 line-clamp-2\">\r\n Client onboarding, institutional correspondence, and regulatory compliance.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-0.5 h-4 bg-slate-300\"><\/div>\r\n\r\n \r\n <div class=\"w-full space-y-2.5\">\r\n <div onclick=\"openRoleDetail('ops_1')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-emerald-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Client Relations Executive<\/span>\r\n <i class=\"fa-solid fa-briefcase text-emerald-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">School & Institute Liaison<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('ops_2')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-emerald-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Helpdesk Support Officer<\/span>\r\n <i class=\"fa-solid fa-headset text-emerald-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Public Inquiries & Email Desk<\/span>\r\n <\/div>\r\n\r\n <div onclick=\"openRoleDetail('ops_3')\" class=\"bg-white p-3 rounded-xl border border-slate-200 hover:border-emerald-300 transition cursor-pointer shadow-sm hover:shadow text-left\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"font-semibold text-xs text-slate-800\">Quality & Compliance Officer<\/span>\r\n <i class=\"fa-solid fa-shield-halved text-emerald-500 text-[10px]\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] text-slate-500 block mt-0.5\">Audit & Standards Adherence<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-center text-xs text-slate-400\">\r\n <i class=\"fa-solid fa-circle-info mr-1 text-brand-500\"><\/i> Click any role card above to inspect reporting duties, educational mandates, and key deliverables.\r\n <\/p>\r\n <\/div>\r\n\r\n <div id=\"gridViewContainer\" class=\"hidden space-y-8\">\r\n <div id=\"gridCardsWrapper\" class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-3xl p-6 sm:p-8 border border-slate-200\/90 shadow-card space-y-6\">\r\n <div class=\"border-b border-slate-100 pb-4\">\r\n <span class=\"text-xs font-bold text-brand-600 uppercase tracking-wider\">Operational Coordination<\/span>\r\n <h3 class=\"text-xl font-bold text-slate-900 mt-0.5\">Cross-Functional Delivery Workflow<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-500 mt-1\">\r\n How administrative branches collaborate to deliver education-oriented technology deliverables.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-5\">\r\n <div class=\"bg-slate-50 rounded-2xl p-5 border border-slate-200\/70\">\r\n <div class=\"w-8 h-8 rounded-lg bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-xs mb-3\">\r\n 01\r\n <\/div>\r\n <h4 class=\"font-bold text-sm text-slate-800 mb-1\">Institutional Portal Deployment<\/h4>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">\r\n Admin team engages institute stakeholders → Web team provisions custom responsive CMS → Maintenance engineer ensures continuous server updates.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-slate-50 rounded-2xl p-5 border border-slate-200\/70\">\r\n <div class=\"w-8 h-8 rounded-lg bg-cyan-100 text-cyan-700 flex items-center justify-center font-bold text-xs mb-3\">\r\n 02\r\n <\/div>\r\n <h4 class=\"font-bold text-sm text-slate-800 mb-1\">Virtual Courses & Classes<\/h4>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">\r\n Academics lead finalizes course syllabus → Tech specialists configure live streams & LMS → Instructors deliver live computer skill classes.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bg-slate-50 rounded-2xl p-5 border border-slate-200\/70\">\r\n <div class=\"w-8 h-8 rounded-lg bg-indigo-100 text-indigo-700 flex items-center justify-center font-bold text-xs mb-3\">\r\n 03\r\n <\/div>\r\n <h4 class=\"font-bold text-sm text-slate-800 mb-1\">Educational Presentation Decks<\/h4>\r\n <p class=\"text-xs text-slate-600 leading-relaxed\">\r\n Subject Matter Experts compile raw syllabus notes → Multimedia designers create animated pedagogical slides → Final asset delivery for faculty seminars.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"rounded-2xl bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-white p-6 border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-xl bg-white\/10 flex items-center justify-center text-brand-300 text-lg shrink-0\">\r\n <i class=\"fa-solid fa-envelope\"><\/i>\r\n <\/div>\r\n <div>\r\n <span class=\"text-[11px] text-slate-300 uppercase tracking-wider block font-semibold\">Official Inquiries & Administrative Desk<\/span>\r\n <span class=\"text-sm sm:text-base font-bold text-brand-200 font-mono\">sksdigitech@gmail.com<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-center gap-2\">\r\n <a href=\"mailto:sksdigitech@gmail.com\" class=\"px-4 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-xs font-bold transition shadow-sm\">\r\n Compose Message\r\n <\/a>\r\n <button onclick=\"copyOfficialEmail()\" class=\"px-4 py-2 rounded-xl bg-white\/10 hover:bg-white\/20 text-white text-xs font-bold border border-white\/20 transition\">\r\n Copy Email\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div id=\"drawerBackdrop\" onclick=\"closeRoleDetail()\" class=\"fixed inset-0 bg-slate-900\/50 backdrop-blur-sm z-40 hidden opacity-0 transition-opacity duration-300\"><\/div>\r\n\r\n <div id=\"roleDrawer\" class=\"fixed top-0 right-0 h-full w-full sm:w-[480px] bg-white z-50 shadow-drawer transform translate-x-full drawer-transition flex flex-col overflow-hidden\">\r\n \r\n \r\n <div class=\"p-6 border-b border-slate-100 flex items-center justify-between bg-slate-50\/70\">\r\n <div class=\"flex items-center gap-3\">\r\n <div id=\"drawerIconBox\" class=\"w-10 h-10 rounded-xl bg-brand-50 text-brand-600 flex items-center justify-center text-lg font-bold\">\r\n <i class=\"fa-solid fa-user-tie\"><\/i>\r\n <\/div>\r\n <div>\r\n <span id=\"drawerDeptTag\" class=\"text-[10px] font-extrabold uppercase tracking-wider text-brand-600 block\">\r\n Executive Body\r\n <\/span>\r\n <h3 id=\"drawerRoleTitle\" class=\"text-base font-bold text-slate-900\">\r\n Role Details\r\n <\/h3>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"closeRoleDetail()\" class=\"w-8 h-8 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-200\/60 flex items-center justify-center transition\">\r\n <i class=\"fa-solid fa-xmark text-sm\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-6 overflow-y-auto flex-1 space-y-6 text-sm\">\r\n \r\n \r\n <div>\r\n <h4 class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-2\">Core Mandate<\/h4>\r\n <p id=\"drawerSummary\" class=\"text-slate-700 leading-relaxed bg-slate-50 p-3.5 rounded-xl border border-slate-200\/70 text-xs\">\r\n Role summary description will appear here.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h4 class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-2\">Key Responsibilities<\/h4>\r\n <ul id=\"drawerResponsibilities\" class=\"space-y-2 text-xs text-slate-600\">\r\n \r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-2 gap-3 pt-2\">\r\n <div class=\"bg-slate-50 p-3 rounded-xl border border-slate-200\/60\">\r\n <span class=\"text-[10px] font-bold uppercase text-slate-400 block\">Reports Directly To<\/span>\r\n <span id=\"drawerReportsTo\" class=\"font-bold text-slate-800 text-xs mt-0.5 block\">Executive Leadership<\/span>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-3 rounded-xl border border-slate-200\/60\">\r\n <span class=\"text-[10px] font-bold uppercase text-slate-400 block\">Scope of Oversight<\/span>\r\n <span id=\"drawerTeamScope\" class=\"font-bold text-slate-800 text-xs mt-0.5 block\">Cross-functional<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h4 class=\"text-xs font-bold text-slate-400 uppercase tracking-wider mb-2\">SKS DigiTech Deliverable Alignment<\/h4>\r\n <div id=\"drawerDeliverables\" class=\"space-y-2\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-4 border-t border-slate-100 bg-slate-50 flex items-center justify-between gap-3\">\r\n <span class=\"text-[11px] text-slate-500\">Official Profile Reference<\/span>\r\n <button onclick=\"closeRoleDetail()\" class=\"px-4 py-2 bg-slate-900 text-white rounded-xl text-xs font-bold hover:bg-slate-800 transition\">\r\n Close Window\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"toastAlert\" class=\"fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300 pointer-events-none\">\r\n <div class=\"bg-slate-900 text-white px-5 py-3 rounded-2xl shadow-2xl border border-slate-700 flex items-center gap-3 text-xs font-semibold\">\r\n <i class=\"fa-solid fa-circle-check text-emerald-400 text-base\"><\/i>\r\n <span id=\"toastAlertMsg\">Email copied to clipboard!<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Complete Role Data Repository\r\n const rolesData = {\r\n 'exec_1': {\r\n title: 'Managing Director \/ Founder & CEO',\r\n dept: 'Executive Leadership',\r\n deptKey: 'exec',\r\n icon: 'fa-crown',\r\n colorClass: 'text-amber-500 bg-amber-50',\r\n reportsTo: 'Board \/ Public Filings Authority',\r\n scope: 'Organization-wide Strategy & All Branches',\r\n summary: 'Directs strategic planning, corporate compliance, client agreements with schools\/institutes, and overarching quality standards for all computer consultancy and educational modules.',\r\n responsibilities: [\r\n 'Formulates long-range technological roadmap and e-learning curriculum standards.',\r\n 'Negotiates institutional agreements with educational academies and colleges.',\r\n 'Supervises the four core operational department heads.',\r\n 'Maintains regulatory adherence as detailed in company filings.'\r\n ],\r\n deliverables: [\r\n 'Strategic institutional expansion plans.',\r\n 'Annual technology and curriculum roadmaps.'\r\n ]\r\n },\r\n 'head_web': {\r\n title: 'Head of Web Development & IT Solutions',\r\n dept: 'Web Development & IT',\r\n deptKey: 'web',\r\n icon: 'fa-globe',\r\n colorClass: 'text-blue-600 bg-blue-50',\r\n reportsTo: 'Managing Director & CEO',\r\n scope: 'Frontend, Backend, UI\/UX & Infrastructure',\r\n summary: 'Oversees end-to-end website engineering, responsive institutional design standards, and maintenance contracts for schools, colleges, and educational institutes.',\r\n responsibilities: [\r\n 'Directs technical architecture for institute web portals and learning CMS systems.',\r\n 'Enforces security standards, SSL configurations, and backup routines.',\r\n 'Coordinates routine maintenance schedules and emergency resolution protocols.',\r\n 'Reviews custom portal modules (e.g., student admission forms, result checkers).'\r\n ],\r\n deliverables: [\r\n 'Institutional website deployments.',\r\n 'High uptime SLAs and continuous site maintenance schedules.'\r\n ]\r\n },\r\n 'web_1': {\r\n title: 'Frontend & Backend Web Developers',\r\n dept: 'Web Development & IT',\r\n deptKey: 'web',\r\n icon: 'fa-code',\r\n colorClass: 'text-blue-600 bg-blue-50',\r\n reportsTo: 'Head of Web Development & IT',\r\n scope: 'Application Code & Database Engineering',\r\n summary: 'Codes responsive educational websites, database-backed administrative forms, event galleries, and course catalog pages.',\r\n responsibilities: [\r\n 'Builds dynamic, mobile-friendly institutional pages using clean code.',\r\n 'Connects academic forms to database endpoints and secure email dispatchers.',\r\n 'Executes cross-browser and speed optimization tests.'\r\n ],\r\n deliverables: ['Tested source code, bug fixes, and feature releases.']\r\n },\r\n 'web_2': {\r\n title: 'UI\/UX & Graphic Web Designer',\r\n dept: 'Web Development & IT',\r\n deptKey: 'web',\r\n icon: 'fa-palette',\r\n colorClass: 'text-blue-600 bg-blue-50',\r\n reportsTo: 'Head of Web Development & IT',\r\n scope: 'Interface Aesthetics & User Experience',\r\n summary: 'Creates intuitive layouts, wireframes, and prototypes for educational portals ensuring clean typography, readability, and effortless student navigation.',\r\n responsibilities: [\r\n 'Designs responsive website layouts adapted for students, parents, and faculty.',\r\n 'Constructs brand color palettes and typography hierarchies for partner schools.'\r\n ],\r\n deliverables: ['Figma\/mockup design systems and exportable visual assets.']\r\n },\r\n 'web_3': {\r\n title: 'Server & Maintenance Engineer',\r\n dept: 'Web Development & IT',\r\n deptKey: 'web',\r\n icon: 'fa-wrench',\r\n colorClass: 'text-blue-600 bg-blue-50',\r\n reportsTo: 'Head of Web Development & IT',\r\n scope: 'Server Upkeep, Security & Cloud Hosting',\r\n summary: 'Guarantees reliable website uptime, applies security patches, handles domain configurations, and performs scheduled content backups.',\r\n responsibilities: [\r\n 'Performs periodic content updates requested by institutional clients.',\r\n 'Monitors website load times, SSL validity, and hosting configurations.'\r\n ],\r\n deliverables: ['Routine maintenance logs and automated daily backups.']\r\n },\r\n 'head_edu': {\r\n title: 'Head of Online Education & Academics',\r\n dept: 'Online Education & Academics',\r\n deptKey: 'edu',\r\n icon: 'fa-laptop-code',\r\n colorClass: 'text-cyan-600 bg-cyan-50',\r\n reportsTo: 'Managing Director & CEO',\r\n scope: 'Curriculum, Instructors & Virtual Classrooms',\r\n summary: 'Governs academic quality across online classes, computer training programs, virtual teacher assignments, and learning milestone evaluations.',\r\n responsibilities: [\r\n 'Designs modern computer curricula covering fundamentals, office tech, and coding.',\r\n 'Assesses instructor pedagogical standards and student completion metrics.',\r\n 'Coordinates virtual classroom infrastructure and scheduling matrices.'\r\n ],\r\n deliverables: [\r\n 'Course completion certifications and structured curriculum plans.'\r\n ]\r\n },\r\n 'edu_1': {\r\n title: 'E-Learning & Batch Coordinator',\r\n dept: 'Online Education & Academics',\r\n deptKey: 'edu',\r\n icon: 'fa-graduation-cap',\r\n colorClass: 'text-cyan-600 bg-cyan-50',\r\n reportsTo: 'Head of Online Education',\r\n scope: 'Class Scheduling & Student Onboarding',\r\n summary: 'Manages student cohort rosters, sends class meeting links, monitors attendance, and organizes live course schedules.',\r\n responsibilities: [\r\n 'Coordinates timetable schedules across varied computer course batches.',\r\n 'Collects student feedback and addresses timetable adjustments.'\r\n ],\r\n deliverables: ['Student batch attendance logs and course calendar schedules.']\r\n },\r\n 'edu_2': {\r\n title: 'Subject Matter Experts (SME) \/ Instructors',\r\n dept: 'Online Education & Academics',\r\n deptKey: 'edu',\r\n icon: 'fa-chalkboard-user',\r\n colorClass: 'text-cyan-600 bg-cyan-50',\r\n reportsTo: 'Head of Online Education',\r\n scope: 'Course Delivery & Practical Sessions',\r\n summary: 'Conducts interactive live lectures and hands-on computer workshops tailored for diverse skill levels.',\r\n responsibilities: [\r\n 'Leads live interactive video sessions covering software and computer concepts.',\r\n 'Creates homework exercises, quizzes, and code assessments.'\r\n ],\r\n deliverables: ['Live class sessions and assessed learner evaluations.']\r\n },\r\n 'edu_3': {\r\n title: 'Virtual Classroom Tech Support',\r\n dept: 'Online Education & Academics',\r\n deptKey: 'edu',\r\n icon: 'fa-headset',\r\n colorClass: 'text-cyan-600 bg-cyan-50',\r\n reportsTo: 'Head of Online Education',\r\n scope: 'Live Stream Diagnostics & Screen-share Help',\r\n summary: 'Supports students and teachers during live online classes with microphone, video stream, and screen sharing troubleshooting.',\r\n responsibilities: [\r\n 'Assists attendees encountering login or virtual classroom audio glitches.',\r\n 'Archives session recordings for on-demand student review.'\r\n ],\r\n deliverables: ['Zero-interruption classroom uptime and session recordings.']\r\n },\r\n 'head_media': {\r\n title: 'Head of Multimedia & Creative Design',\r\n dept: 'Multimedia & Creative Design',\r\n deptKey: 'media',\r\n icon: 'fa-photo-film',\r\n colorClass: 'text-indigo-600 bg-indigo-50',\r\n reportsTo: 'Managing Director & CEO',\r\n scope: 'Presentations, Video Assets & Visual Aids',\r\n summary: 'Directs the creation of bespoke multimedia presentations for educational seminars, lectures, academic conferences, and digital courses.',\r\n responsibilities: [\r\n 'Oversees high-impact deck design and animation standards.',\r\n 'Ensures instructional graphics facilitate conceptual understanding.',\r\n 'Directs audio-visual post-production for educational course packages.'\r\n ],\r\n deliverables: [\r\n 'Institutional presentation decks and branded lecture assets.'\r\n ]\r\n },\r\n 'media_1': {\r\n title: 'Educational Presentation Designers',\r\n dept: 'Multimedia & Creative Design',\r\n deptKey: 'media',\r\n icon: 'fa-sliders',\r\n colorClass: 'text-indigo-600 bg-indigo-50',\r\n reportsTo: 'Head of Multimedia',\r\n scope: 'Keynotes, PowerPoint & Interactive Decks',\r\n summary: 'Translates dense academic lectures into visually structured, animated presentation slides.',\r\n responsibilities: [\r\n 'Formats custom seminar decks for school administrators and professors.',\r\n 'Integrates interactive flowcharts, diagrams, and illustrative callouts.'\r\n ],\r\n deliverables: ['Interactive slide files (.pptx, web-slides, PDF lecture notes).']\r\n },\r\n 'media_2': {\r\n title: 'Video & Audio Production Editor',\r\n dept: 'Multimedia & Creative Design',\r\n deptKey: 'media',\r\n icon: 'fa-film',\r\n colorClass: 'text-indigo-600 bg-indigo-50',\r\n reportsTo: 'Head of Multimedia',\r\n scope: 'Lesson Video Production & Audio Mastering',\r\n summary: 'Edits recorded virtual classes, balances lecture audio, and embeds lower thirds and animated titles.',\r\n responsibilities: [\r\n 'Produces clean digital course videos for archival and online portals.',\r\n 'Eliminates background noise and improves microphone speech clarity.'\r\n ],\r\n deliverables: ['Optimized, chapter-marked video lessons.']\r\n },\r\n 'media_3': {\r\n title: 'Instructional Media & Graphic Specialist',\r\n dept: 'Multimedia & Creative Design',\r\n deptKey: 'media',\r\n icon: 'fa-layer-group',\r\n colorClass: 'text-indigo-600 bg-indigo-50',\r\n reportsTo: 'Head of Multimedia',\r\n scope: 'Illustrations, Vector Graphics & Handouts',\r\n summary: 'Creates digital infographics, certificates, and student workbooks that complement digital training sessions.',\r\n responsibilities: [\r\n 'Designs downloadable student revision infographics and cheat-sheets.',\r\n 'Prepares verifiable digital certificates of completion.'\r\n ],\r\n deliverables: ['Print-ready PDFs and web-optimized educational infographics.']\r\n },\r\n 'head_ops': {\r\n title: 'Head of Administration & Operations',\r\n dept: 'Admin & Operations',\r\n deptKey: 'ops',\r\n icon: 'fa-building-columns',\r\n colorClass: 'text-emerald-600 bg-emerald-50',\r\n reportsTo: 'Managing Director & CEO',\r\n scope: 'Client Relations, Helpdesk & Legal Compliance',\r\n summary: 'Administers client institutional contracts, public inquiry dispatching, client onboarding, and corporate governance.',\r\n responsibilities: [\r\n 'Oversees public communication channels including sksdigitech@gmail.com.',\r\n 'Directs prompt response metrics for educational client requests.',\r\n 'Ensures service agreements match public regulatory records.'\r\n ],\r\n deliverables: [\r\n 'Monthly client SLA reviews and institutional contract archives.'\r\n ]\r\n },\r\n 'ops_1': {\r\n title: 'Institutional Client Relations Executive',\r\n dept: 'Admin & Operations',\r\n deptKey: 'ops',\r\n icon: 'fa-briefcase',\r\n colorClass: 'text-emerald-600 bg-emerald-50',\r\n reportsTo: 'Head of Admin & Operations',\r\n scope: 'Client Accounts & Requirement Scoping',\r\n summary: 'Acts as the direct point of contact for school principals, academy directors, and institutional partners.',\r\n responsibilities: [\r\n 'Gathers institute website requirements and course module requests.',\r\n 'Coordinates review meetings between clients and technical teams.'\r\n ],\r\n deliverables: ['Scoping briefs and client onboarding agreements.']\r\n },\r\n 'ops_2': {\r\n title: 'Helpdesk & Public Inquiry Specialist',\r\n dept: 'Admin & Operations',\r\n deptKey: 'ops',\r\n icon: 'fa-headset',\r\n colorClass: 'text-emerald-600 bg-emerald-50',\r\n reportsTo: 'Head of Admin & Operations',\r\n scope: 'Email Communications & Ticketing',\r\n summary: 'Monitors the official email desk (sksdigitech@gmail.com), routes incoming inquiries, and responds to public filings requests.',\r\n responsibilities: [\r\n 'Triages incoming queries regarding website updates or online courses.',\r\n 'Follows up with clients to confirm ticket resolution satisfaction.'\r\n ],\r\n deliverables: ['Helpdesk turnaround logs and inquiry distribution records.']\r\n },\r\n 'ops_3': {\r\n title: 'Quality Assurance & Standards Officer',\r\n dept: 'Admin & Operations',\r\n deptKey: 'ops',\r\n icon: 'fa-shield-halved',\r\n colorClass: 'text-emerald-600 bg-emerald-50',\r\n reportsTo: 'Head of Admin & Operations',\r\n scope: 'Audit, Security Standards & Verification',\r\n summary: 'Conducts routine quality checks on website delivery, multimedia asset clarity, and online teaching feedback.',\r\n responsibilities: [\r\n 'Audits deliverables against academic and client contract criteria.',\r\n 'Reviews privacy standards for student data on institutional sites.'\r\n ],\r\n deliverables: ['Quarterly quality compliance reports.']\r\n }\r\n };\r\n\r\n function switchView(view) {\r\n const treeView = document.getElementById('treeViewContainer');\r\n const gridView = document.getElementById('gridViewContainer');\r\n const btnTree = document.getElementById('btnTreeView');\r\n const btnGrid = document.getElementById('btnGridView');\r\n\r\n if (view === 'tree') {\r\n treeView.classList.remove('hidden');\r\n gridView.classList.add('hidden');\r\n btnTree.className = 'flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 bg-white text-brand-700 shadow-sm';\r\n btnGrid.className = 'flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 text-slate-600 hover:text-slate-900';\r\n } else {\r\n treeView.classList.add('hidden');\r\n gridView.classList.remove('hidden');\r\n btnGrid.className = 'flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 bg-white text-brand-700 shadow-sm';\r\n btnTree.className = 'flex-1 md:flex-initial flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition duration-150 text-slate-600 hover:text-slate-900';\r\n renderGrid();\r\n }\r\n }\r\n\r\n \/\/ Render Department Grid Breakdown\r\n function renderGrid() {\r\n const wrapper = document.getElementById('gridCardsWrapper');\r\n if (!wrapper) return;\r\n \r\n const query = (document.getElementById('roleSearchInput')?.value || '').toLowerCase();\r\n const filter = document.getElementById('deptFilterSelect')?.value || 'all';\r\n\r\n \/\/ Group roles by department\r\n const departments = [\r\n { key: 'exec', name: 'Executive Leadership', border: 'border-brand-500', bg: 'bg-brand-50\/50' },\r\n { key: 'web', name: 'Web Development & IT Solutions', border: 'border-blue-500', bg: 'bg-blue-50\/50' },\r\n { key: 'edu', name: 'Online Education & Academics', border: 'border-cyan-500', bg: 'bg-cyan-50\/50' },\r\n { key: 'media', name: 'Multimedia & Creative Design', border: 'border-indigo-500', bg: 'bg-indigo-50\/50' },\r\n { key: 'ops', name: 'Administration & Client Support', border: 'border-emerald-500', bg: 'bg-emerald-50\/50' }\r\n ];\r\n\r\n let html = '';\r\n\r\n departments.forEach(dept => {\r\n if (filter !== 'all' && filter !== dept.key) return;\r\n\r\n \/\/ Filter roles in this department matching query\r\n const deptRoles = Object.entries(rolesData).filter(([id, data]) => {\r\n if (data.deptKey !== dept.key) return false;\r\n if (!query) return true;\r\n return data.title.toLowerCase().includes(query) || \r\n data.summary.toLowerCase().includes(query) ||\r\n data.dept.toLowerCase().includes(query);\r\n });\r\n\r\n if (deptRoles.length === 0) return;\r\n\r\n html += `\r\n <div class=\"bg-white rounded-2xl border ${dept.border} p-6 shadow-sm flex flex-col justify-between\">\r\n <div>\r\n <div class=\"flex items-center justify-between pb-3 border-b border-slate-100 mb-4\">\r\n <div>\r\n <span class=\"text-[10px] font-bold uppercase tracking-wider text-slate-400\">Department Unit<\/span>\r\n <h3 class=\"text-base font-bold text-slate-900\">${dept.name}<\/h3>\r\n <\/div>\r\n <span class=\"px-2.5 py-1 rounded-full bg-slate-100 text-slate-700 text-xs font-semibold\">\r\n ${deptRoles.length} ${deptRoles.length === 1 ? 'Role' : 'Roles'}\r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"space-y-3\">\r\n ${deptRoles.map(([id, role]) => `\r\n <div onclick=\"openRoleDetail('${id}')\" class=\"p-3 rounded-xl border border-slate-200\/80 hover:border-brand-300 hover:bg-slate-50 transition cursor-pointer flex items-start justify-between gap-3 group\">\r\n <div class=\"flex items-start gap-3\">\r\n <div class=\"w-8 h-8 rounded-lg ${role.colorClass} flex items-center justify-center text-xs shrink-0 mt-0.5\">\r\n <i class=\"fa-solid ${role.icon}\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-xs text-slate-900 group-hover:text-brand-600 transition\">${role.title}<\/h4>\r\n <p class=\"text-[11px] text-slate-500 line-clamp-2 mt-0.5\">${role.summary}<\/p>\r\n <\/div>\r\n <\/div>\r\n <i class=\"fa-solid fa-chevron-right text-slate-300 group-hover:text-brand-500 text-xs shrink-0 mt-1.5 transition\"><\/i>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mt-5 pt-3 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-400\">\r\n <span>SKS DigiTech Hierarchy<\/span>\r\n <button onclick=\"openRoleDetail('${deptRoles[0][0]}')\" class=\"text-brand-600 font-bold hover:underline\">\r\n Inspect Lead Role →\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n\r\n if (!html) {\r\n html = `\r\n <div class=\"col-span-2 p-12 text-center bg-white rounded-2xl border border-slate-200 text-slate-400\">\r\n <i class=\"fa-solid fa-folder-open text-3xl mb-2 text-slate-300\"><\/i>\r\n <p class=\"text-sm font-semibold\">No roles found matching your search filter.<\/p>\r\n <button onclick=\"resetFilters()\" class=\"mt-3 px-4 py-2 rounded-xl bg-slate-100 text-slate-700 text-xs font-bold hover:bg-slate-200 transition\">\r\n Reset Filters\r\n <\/button>\r\n <\/div>\r\n `;\r\n }\r\n\r\n wrapper.innerHTML = html;\r\n }\r\n\r\n function handleSearch() {\r\n const query = document.getElementById('roleSearchInput').value.trim();\r\n if (query && document.getElementById('gridViewContainer').classList.contains('hidden')) {\r\n switchView('grid');\r\n } else {\r\n renderGrid();\r\n }\r\n }\r\n\r\n function handleFilter() {\r\n const filter = document.getElementById('deptFilterSelect').value;\r\n if (filter !== 'all' && document.getElementById('gridViewContainer').classList.contains('hidden')) {\r\n switchView('grid');\r\n } else {\r\n renderGrid();\r\n }\r\n }\r\n\r\n function resetFilters() {\r\n document.getElementById('roleSearchInput').value = '';\r\n document.getElementById('deptFilterSelect').value = 'all';\r\n renderGrid();\r\n }\r\n\r\n function openRoleDetail(roleId) {\r\n const role = rolesData[roleId];\r\n if (!role) return;\r\n\r\n document.getElementById('drawerRoleTitle').textContent = role.title;\r\n document.getElementById('drawerDeptTag').textContent = role.dept;\r\n document.getElementById('drawerSummary').textContent = role.summary;\r\n document.getElementById('drawerReportsTo').textContent = role.reportsTo;\r\n document.getElementById('drawerTeamScope').textContent = role.scope;\r\n\r\n \/\/ Icon & color\r\n const iconBox = document.getElementById('drawerIconBox');\r\n iconBox.className = `w-10 h-10 rounded-xl flex items-center justify-center text-lg font-bold ${role.colorClass}`;\r\n iconBox.innerHTML = `<i class=\"fa-solid ${role.icon}\"><\/i>`;\r\n\r\n \/\/ Responsibilities list\r\n const respContainer = document.getElementById('drawerResponsibilities');\r\n respContainer.innerHTML = role.responsibilities.map(resp => `\r\n <li class=\"flex items-start gap-2\">\r\n <i class=\"fa-solid fa-check text-brand-600 text-xs mt-1 shrink-0\"><\/i>\r\n <span>${resp}<\/span>\r\n <\/li>\r\n `).join('');\r\n\r\n \/\/ Deliverables list\r\n const delivContainer = document.getElementById('drawerDeliverables');\r\n delivContainer.innerHTML = role.deliverables.map(item => `\r\n <div class=\"flex items-center gap-2 text-xs bg-slate-50 p-2.5 rounded-lg border border-slate-200\/70 text-slate-700\">\r\n <i class=\"fa-solid fa-cube text-slate-400 text-xs\"><\/i>\r\n <span>${item}<\/span>\r\n <\/div>\r\n `).join('');\r\n\r\n \/\/ Show drawer\r\n const backdrop = document.getElementById('drawerBackdrop');\r\n const drawer = document.getElementById('roleDrawer');\r\n backdrop.classList.remove('hidden');\r\n setTimeout(() => {\r\n backdrop.classList.add('opacity-100');\r\n drawer.classList.remove('translate-x-full');\r\n }, 10);\r\n }\r\n\r\n function closeRoleDetail() {\r\n const backdrop = document.getElementById('drawerBackdrop');\r\n const drawer = document.getElementById('roleDrawer');\r\n drawer.classList.add('translate-x-full');\r\n backdrop.classList.remove('opacity-100');\r\n setTimeout(() => {\r\n backdrop.classList.add('hidden');\r\n }, 300);\r\n }\r\n\r\n function copyOfficialEmail() {\r\n const email = 'sksdigitech@gmail.com';\r\n const tempInput = document.createElement('input');\r\n tempInput.value = email;\r\n document.body.appendChild(tempInput);\r\n tempInput.select();\r\n\r\n try {\r\n document.execCommand('copy');\r\n showToast('Copied: ' + email);\r\n const stateEl = document.getElementById('copyTextState');\r\n if (stateEl) {\r\n stateEl.textContent = 'Copied to Clipboard!';\r\n setTimeout(() => {\r\n stateEl.textContent = email;\r\n }, 2500);\r\n }\r\n } catch (e) {\r\n showToast('Email: ' + email);\r\n }\r\n document.body.removeChild(tempInput);\r\n }\r\n\r\n function showToast(msg) {\r\n const toast = document.getElementById('toastAlert');\r\n const msgEl = document.getElementById('toastAlertMsg');\r\n if (toast && msgEl) {\r\n msgEl.textContent = msg;\r\n toast.classList.remove('translate-y-20', 'opacity-0');\r\n toast.classList.add('translate-y-0', 'opacity-100');\r\n setTimeout(() => {\r\n toast.classList.remove('translate-y-0', 'opacity-100');\r\n toast.classList.add('translate-y-20', 'opacity-0');\r\n }, 2800);\r\n }\r\n }\r\n\r\n \/\/ Keyboard support: Escape closes the drawer\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') closeRoleDetail();\r\n });\r\n\r\n \/\/ Initialize default state\r\n window.addEventListener('DOMContentLoaded', () => {\r\n renderGrid();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Administrative Organizational Structure – SKS DigiTech Internal Governance & Hierarchy Administrative Organizational Structure Operational hierarchy and reporting matrix for SKS DigiTech\u2014directing educational web portal engineering, online virtual learning delivery, and pedagogical multimedia development. Print Chart sksdigitech@gmail.com Governance Tier Executive Council Core Departments 4 Operational Units Domain Focus Education Technology Official Communication sksdigitech@gmail.com Tree Hierarchy View […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"disabled","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-252","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/pages\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":3,"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/pages\/252\/revisions"}],"predecessor-version":[{"id":10434,"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/pages\/252\/revisions\/10434"}],"wp:attachment":[{"href":"https:\/\/sksdigitech.in\/index.php\/wp-json\/wp\/v2\/media?parent=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}