From aeb594a0d4142a49931f262296d932a12aa364cf Mon Sep 17 00:00:00 2001
From: Mas Budi Kusuma <admin@masbudi.my.id>
Date: Tue, 15 Sep 2026 23:17:18 +0700
Subject: [PATCH] feat(admin): integrasi tooltip panduan dan shortcut navigasi
 langsung ke menu CPT

---
 inc/admin-menu.php | 126 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 104 insertions(+), 22 deletions(-)

diff --git a/inc/admin-menu.php b/inc/admin-menu.php
index 1b6e8c2..e38d58f 100644
--- a/inc/admin-menu.php
+++ b/inc/admin-menu.php
@@ -159,15 +159,58 @@ function edukarsa_settings_page_html() {
     <style>
         .edukarsa-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; }
         .edukarsa-admin-layout { display: grid; grid-template-columns: 1fr 320px; gap: 25px; align-items: start; }
-        .edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; overflow: hidden; }
-        .edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; }
+        .edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; overflow: visible; }
+        .edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; border-radius: 10px 10px 0 0; }
         .edukarsa-card-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; }
         .edukarsa-card-body { padding: 24px; }
         
         .switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; }
-        .switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 15px; }
-        .switch-label { font-weight: 600; font-size: 13px; color: #334155; }
-        .edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; }
+        .switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 15px; }
+        .switch-label-wrap { display: flex; flex-direction: column; gap: 5px; }
+        .switch-label { font-weight: 700; font-size: 13px; color: #334155; display: inline-flex; align-items: center; gap: 6px; }
+        
+        /* Shortcut Badge Link */
+        .cpt-shortcut-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #0b4a8e; text-decoration: none; background: #e0f2fe; padding: 2px 9px; border-radius: 12px; width: fit-content; transition: all 0.2s ease; border: 1px solid #bae6fd; }
+        .cpt-shortcut-link:hover { background: #0b4a8e; color: #ffffff !important; border-color: #0b4a8e; }
+        
+        /* Tooltip Native CSS */
+        .tooltip-hint { position: relative; cursor: help; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #94a3b8; color: #fff; font-size: 10px; font-weight: 800; }
+        .tooltip-hint:hover { background: #0b4a8e; }
+        .tooltip-hint .tooltip-text {
+            visibility: hidden;
+            opacity: 0;
+            position: absolute;
+            bottom: 140%;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #0f172a;
+            color: #ffffff;
+            text-align: left;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 11px;
+            font-weight: 500;
+            line-height: 1.45;
+            white-space: normal;
+            width: 220px;
+            z-index: 1000;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+            transition: opacity 0.2s ease, visibility 0.2s ease;
+            pointer-events: none;
+        }
+        .tooltip-hint .tooltip-text::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: #0f172a transparent transparent transparent;
+        }
+        .tooltip-hint:hover .tooltip-text { visibility: visible; opacity: 1; }
+
+        .edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; flex-shrink: 0; }
         .edukarsa-switch input { opacity: 0; width: 0; height: 0; }
         .slider-round { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .25s; border-radius: 22px; }
         .slider-round:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .25s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
@@ -231,14 +274,26 @@ function edukarsa_settings_page_html() {
 
                             <div class="switch-row-inline" style="margin-top: 20px;">
                                 <div class="switch-row">
-                                    <span class="switch-label">Tampilkan Slider Atas</span>
+                                    <div class="switch-label-wrap">
+                                        <div class="switch-label">
+                                            <span>Tampilkan Slider Atas</span>
+                                            <span class="tooltip-hint">?<span class="tooltip-text">Gambar & URL link banner dikelola pada modul 🌟 Slider Banner.</span></span>
+                                        </div>
+                                        <a href="<?php echo admin_url('edit.php?post_type=slider'); ?>" class="cpt-shortcut-link">Kelola Slider ↗</a>
+                                    </div>
                                     <label class="edukarsa-switch">
                                         <input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?>>
                                         <span class="slider-round"></span>
                                     </label>
                                 </div>
                                 <div class="switch-row">
-                                    <span class="switch-label">Tampilkan 3 Kotak Statistik</span>
+                                    <div class="switch-label-wrap">
+                                        <div class="switch-label">
+                                            <span>Tampilkan 3 Kotak Statistik</span>
+                                            <span class="tooltip-hint">?<span class="tooltip-text">Konfigurasi teks, angka capaian, dan ikon diatur langsung pada form di bawah.</span></span>
+                                        </div>
+                                        <span style="font-size: 11px; color: #64748b;">Form Pengaturan Bawah ↓</span>
+                                    </div>
                                     <label class="edukarsa-switch">
                                         <input type="checkbox" class="section-toggle" data-target="#stats-settings-box" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?>>
                                         <span class="slider-round"></span>
@@ -317,34 +372,59 @@ function edukarsa_settings_page_html() {
                         </div>
                     </div>
 
-                    <!-- 3. Program, Milestone & Keunggulan -->
+                    <!-- 3. Program, Milestone & Keunggulan (DENGAN TOOLTIP & SHORTCUT) -->
                     <div class="edukarsa-card">
                         <div class="edukarsa-card-header">
                             <h2>⭐ 3. Program, Milestones, & Keunggulan</h2>
                         </div>
                         <div class="edukarsa-card-body">
                             <div class="switch-row-inline">
+                                
+                                <!-- Milestone Switch & Shortcut -->
                                 <div class="switch-row">
-                                    <span class="switch-label">Tampilkan 4 Milestone</span>
+                                    <div class="switch-label-wrap">
+                                        <div class="switch-label">
+                                            <span>Tampilkan 4 Milestone</span>
+                                            <span class="tooltip-hint">?<span class="tooltip-text">Data angka prestasi & capaian diisi melalui menu 🏆 Milestone di sidebar admin.</span></span>
+                                        </div>
+                                        <a href="<?php echo admin_url('edit.php?post_type=milestone'); ?>" class="cpt-shortcut-link">Kelola Milestone ↗</a>
+                                    </div>
                                     <label class="edukarsa-switch">
                                         <input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?>>
                                         <span class="slider-round"></span>
                                     </label>
                                 </div>
+
+                                <!-- Program Switch & Shortcut -->
                                 <div class="switch-row">
-                                    <span class="switch-label">Tampilkan Program (3 Grid)</span>
+                                    <div class="switch-label-wrap">
+                                        <div class="switch-label">
+                                            <span>Tampilkan Program (3 Grid)</span>
+                                            <span class="tooltip-hint">?<span class="tooltip-text">Daftar jurusan & program kurikulum dikelola melalui menu 📚 Program Kami di sidebar admin.</span></span>
+                                        </div>
+                                        <a href="<?php echo admin_url('edit.php?post_type=program'); ?>" class="cpt-shortcut-link">Kelola Program ↗</a>
+                                    </div>
                                     <label class="edukarsa-switch">
                                         <input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?>>
                                         <span class="slider-round"></span>
                                     </label>
                                 </div>
+
+                                <!-- Keunggulan Switch & Shortcut -->
                                 <div class="switch-row">
-                                    <span class="switch-label">Tampilkan Keunggulan (9 Grid)</span>
+                                    <div class="switch-label-wrap">
+                                        <div class="switch-label">
+                                            <span>Tampilkan Keunggulan (9 Grid)</span>
+                                            <span class="tooltip-hint">?<span class="tooltip-text">9 butir keunggulan institusi dikelola melalui menu ⭐ Keunggulan di sidebar admin.</span></span>
+                                        </div>
+                                        <a href="<?php echo admin_url('edit.php?post_type=keunggulan'); ?>" class="cpt-shortcut-link">Kelola Keunggulan ↗</a>
+                                    </div>
                                     <label class="edukarsa-switch">
                                         <input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?>>
                                         <span class="slider-round"></span>
                                     </label>
                                 </div>
+
                             </div>
 
                             <div class="form-grid-2" style="margin-top: 15px;">
@@ -429,14 +509,23 @@ function edukarsa_settings_page_html() {
                         <div class="edukarsa-card-body">
                             <div class="switch-row-inline">
                                 <div class="switch-row">
-                                    <span class="switch-label">Tampilkan CTA Banner</span>
+                                    <div class="switch-label-wrap">
+                                        <span class="switch-label">Tampilkan CTA Banner</span>
+                                        <span style="font-size: 11px; color: #64748b;">Pengaturan Khusus PPDB</span>
+                                    </div>
                                     <label class="edukarsa-switch">
                                         <input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>>
                                         <span class="slider-round"></span>
                                     </label>
                                 </div>
                                 <div class="switch-row">
-                                    <span class="switch-label">Tampilkan Berita Kampus</span>
+                                    <div class="switch-label-wrap">
+                                        <div class="switch-label">
+                                            <span>Tampilkan Berita Kampus</span>
+                                            <span class="tooltip-hint">?<span class="tooltip-text">Berita otomatis diambil dari menu 'Pos' bawaan WordPress.</span></span>
+                                        </div>
+                                        <a href="<?php echo admin_url('edit.php'); ?>" class="cpt-shortcut-link">Kelola Berita ↗</a>
+                                    </div>
                                     <label class="edukarsa-switch">
                                         <input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?>>
                                         <span class="slider-round"></span>
@@ -478,14 +567,12 @@ function edukarsa_settings_page_html() {
                         </div>
                     </div>
 
-                    <!-- 6. FOOTER LENGKAP & FLEKSIBEL (UPGRADED) -->
+                    <!-- 6. Footer & Kontak -->
                     <div class="edukarsa-card">
                         <div class="edukarsa-card-header">
                             <h2>📞 6. Pengaturan Footer & Media Sosial Lengkap</h2>
                         </div>
                         <div class="edukarsa-card-body">
-                            
-                            <!-- Identitas Footer -->
                             <div class="form-grid-2">
                                 <div class="form-field-group">
                                     <label>Logo Footer (Opsional, kosongkan jika pakai logo header)</label>
@@ -502,7 +589,7 @@ function edukarsa_settings_page_html() {
 
                             <div class="form-field-group">
                                 <label>Deskripsi Singkat Kampus / Visi Ringkas (Kolom 1)</label>
-                                <textarea name="edukarsa_footer_desc" rows="3" placeholder="Deskripsi singkat mengenai institusi..."><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak lulusan berkarakter, inovatif, dan berdaya saing global.')); ?></textarea>
+                                <textarea name="edukarsa_footer_desc" rows="3" placeholder="Deskripsi singkat mengenai institusi..."><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak generasi berkarakter cerdas, kompetitif, dan berintegritas.')); ?></textarea>
                             </div>
 
                             <div class="form-field-group">
@@ -528,7 +615,6 @@ function edukarsa_settings_page_html() {
 
                             <h4 style="margin: 25px 0 12px; font-size:14px; color:#0b4a8e; border-bottom:1px solid #e2e8f0; padding-bottom:8px;">Jaringan Media Sosial Resmi</h4>
                             
-                            <!-- FB -->
                             <div class="switch-row">
                                 <span class="switch-label">Facebook</span>
                                 <div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -540,7 +626,6 @@ function edukarsa_settings_page_html() {
                                 </div>
                             </div>
 
-                            <!-- IG -->
                             <div class="switch-row">
                                 <span class="switch-label">Instagram</span>
                                 <div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -552,7 +637,6 @@ function edukarsa_settings_page_html() {
                                 </div>
                             </div>
 
-                            <!-- YT -->
                             <div class="switch-row">
                                 <span class="switch-label">YouTube</span>
                                 <div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -564,7 +648,6 @@ function edukarsa_settings_page_html() {
                                 </div>
                             </div>
 
-                            <!-- TikTok -->
                             <div class="switch-row">
                                 <span class="switch-label">TikTok</span>
                                 <div style="display:flex; align-items:center; gap:12px; width:70%;">
@@ -576,7 +659,6 @@ function edukarsa_settings_page_html() {
                                 </div>
                             </div>
 
-                            <!-- X / Twitter -->
                             <div class="switch-row">
                                 <span class="switch-label">X (Twitter)</span>
                                 <div style="display:flex; align-items:center; gap:12px; width:70%;">