{"id":9250,"date":"2026-06-06T22:29:08","date_gmt":"2026-06-06T15:29:08","guid":{"rendered":"https:\/\/beqicharity.com\/?page_id=9250"},"modified":"2026-06-08T13:02:35","modified_gmt":"2026-06-08T06:02:35","slug":"report","status":"publish","type":"page","link":"https:\/\/beqicharity.com\/ar\/report\/","title":{"rendered":"\u0627\u0644\u062a\u0642\u0627\u0631\u064a\u0631"},"content":{"rendered":"\r\n    <style>\r\n\r\n        :root {\r\n\r\n            --beqi-bg-wrapper: #f8fafc;\r\n\r\n            --beqi-bg-card: #ffffff;\r\n\r\n            --beqi-border-card: #e2e8f0;\r\n\r\n            --beqi-text-primary: #0f172a;\r\n\r\n            --beqi-text-secondary: #475569;\r\n\r\n            --beqi-accent-blue: #0ea5e9;\r\n\r\n            --beqi-accent-emerald: #10b981;\r\n\r\n            --beqi-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n\r\n            --beqi-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n\r\n            --beqi-glow-active: none;\r\n\r\n            --beqi-tab-bg: #e2e8f0;\r\n\r\n            --beqi-grid-line: rgba(0,0,0,0.05);\r\n\r\n        }\r\n\r\n        .beqi-dark-mode {\r\n\r\n            --beqi-bg-wrapper: #0b1120;\r\n\r\n            --beqi-bg-card: #131c2f;\r\n\r\n            --beqi-border-card: #1e293b;\r\n\r\n            --beqi-text-primary: #f8fafc;\r\n\r\n            --beqi-text-secondary: #94a3b8;\r\n\r\n            --beqi-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);\r\n\r\n            --beqi-shadow-hover: 0 0 20px rgba(14, 165, 233, 0.2);\r\n\r\n            --beqi-glow-active: 0 0 15px rgba(14, 165, 233, 0.3);\r\n\r\n            --beqi-glow-emerald: 0 0 15px rgba(16, 185, 129, 0.3);\r\n\r\n            --beqi-tab-bg: #0f172a;\r\n\r\n            --beqi-grid-line: rgba(255,255,255,0.05);\r\n\r\n        }\r\n\r\n        .fin-dashboard-outer {\r\n\r\n            width: 100vw;\r\n\r\n            position: relative;\r\n\r\n            left: 50%;\r\n\r\n            right: 50%;\r\n\r\n            margin-left: -50vw;\r\n\r\n            margin-right: -50vw;\r\n\r\n            background-color: var(--beqi-bg-wrapper);\r\n\r\n            padding: 40px 20px 60px 20px;\r\n\r\n            box-sizing: border-box;\r\n\r\n            transition: background-color 0.4s ease;\r\n\r\n        }\r\n\r\n        .fin-dashboard-inner {\r\n\r\n            max-width: 1100px;\r\n\r\n            margin: 0 auto;\r\n\r\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n\r\n            color: var(--beqi-text-primary);\r\n\r\n        }\r\n\r\n        .fin-action-bar {\r\n\r\n            display: flex;\r\n\r\n            justify-content: space-between;\r\n\r\n            align-items: center;\r\n\r\n            margin-bottom: 20px;\r\n\r\n            flex-wrap: wrap;\r\n\r\n            gap: 15px;\r\n\r\n        }\r\n\r\n        .fin-back-btn {\r\n\r\n            background-color: var(--beqi-bg-card) !important;\r\n\r\n            border: 1px solid var(--beqi-border-card) !important;\r\n\r\n            color: var(--beqi-text-primary) !important;\r\n\r\n            padding: 10px 20px;\r\n\r\n            border-radius: 12px;\r\n\r\n            font-size: 13px;\r\n\r\n            font-weight: 600;\r\n\r\n            text-decoration: none !important;\r\n\r\n            display: inline-flex;\r\n\r\n            align-items: center;\r\n\r\n            gap: 8px;\r\n\r\n            box-shadow: var(--beqi-shadow-card);\r\n\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n        }\r\n\r\n        .fin-back-btn:hover {\r\n\r\n            border-color: var(--beqi-accent-blue) !important;\r\n\r\n            box-shadow: var(--beqi-glow-active);\r\n\r\n            transform: translateX(-4px);\r\n\r\n        }\r\n\r\n        .fin-back-btn svg { stroke: var(--beqi-text-primary) !important; transition: stroke 0.3s ease; }\r\n\r\n        .fin-back-btn:hover svg { stroke: var(--beqi-accent-blue) !important; }\r\n\r\n        .fin-settings-group { display: flex; gap: 10px; }\r\n\r\n        .fin-setting-btn {\r\n\r\n            background-color: var(--beqi-tab-bg) !important;\r\n\r\n            border: 1px solid var(--beqi-border-card) !important;\r\n\r\n            color: var(--beqi-text-primary) !important;\r\n\r\n            padding: 8px 16px;\r\n\r\n            border-radius: 8px;\r\n\r\n            cursor: pointer;\r\n\r\n            font-size: 12px;\r\n\r\n            font-weight: 700;\r\n\r\n            display: flex;\r\n\r\n            align-items: center;\r\n\r\n            gap: 6px;\r\n\r\n            box-shadow: var(--beqi-shadow-card);\r\n\r\n            transition: all 0.3s ease;\r\n\r\n        }\r\n\r\n        .fin-setting-btn:hover { border-color: var(--beqi-accent-blue) !important; box-shadow: var(--beqi-glow-active); }\r\n\r\n        .fin-setting-btn svg { stroke: var(--beqi-text-primary) !important; }\r\n\r\n        .fin-top-bar {\r\n\r\n            background-color: var(--beqi-bg-card);\r\n\r\n            border: 1px solid var(--beqi-border-card);\r\n\r\n            border-radius: 16px;\r\n\r\n            padding: 24px;\r\n\r\n            display: flex;\r\n\r\n            flex-direction: column;\r\n\r\n            align-items: center;\r\n\r\n            justify-content: center;\r\n\r\n            box-shadow: var(--beqi-shadow-card);\r\n\r\n            margin-bottom: 30px;\r\n\r\n            text-align: center;\r\n\r\n            transition: all 0.4s ease;\r\n\r\n        }\r\n\r\n        .beqi-dark-mode .fin-top-bar {\r\n\r\n            box-shadow: 0 0 25px rgba(14, 165, 233, 0.1);\r\n\r\n            border: 1px solid rgba(14, 165, 233, 0.3);\r\n\r\n        }\r\n\r\n        .fin-logo { height: 60px; margin-bottom: 12px; object-fit: contain; transition: all 0.4s ease; }\r\n\r\n        .fin-logo-light { display: block; }\r\n\r\n        .fin-logo-dark { display: none; }\r\n\r\n        .beqi-dark-mode .fin-logo-light { display: none; }\r\n\r\n        .beqi-dark-mode .fin-logo-dark { display: block; filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.5)); }\r\n\r\n        .fin-top-bar h3 { margin: 0; color: var(--beqi-text-primary) !important; font-weight: 800; font-size: 22px; letter-spacing: -0.5px; }\r\n\r\n        .fin-top-bar p { color: var(--beqi-text-secondary) !important; margin-top: 4px; font-size: 14px; margin-bottom: 0; }\r\n\r\n        .fin-section-title {\r\n\r\n            font-size: 15px;\r\n\r\n            font-weight: 700;\r\n\r\n            color: var(--beqi-text-secondary) !important;\r\n\r\n            margin-bottom: 16px;\r\n\r\n            margin-top: 35px;\r\n\r\n            display: flex;\r\n\r\n            align-items: center;\r\n\r\n            gap: 10px;\r\n\r\n        }\r\n\r\n        .fin-section-title::before {\r\n\r\n            content: '';\r\n\r\n            display: block;\r\n\r\n            width: 4px;\r\n\r\n            height: 18px;\r\n\r\n            background: var(--beqi-accent-blue);\r\n\r\n            border-radius: 4px;\r\n\r\n            box-shadow: var(--beqi-glow-active);\r\n\r\n        }\r\n\r\n        .fin-kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }\r\n\r\n        .fin-card {\r\n\r\n            background-color: var(--beqi-bg-card);\r\n\r\n            border: 1px solid var(--beqi-border-card);\r\n\r\n            box-shadow: var(--beqi-shadow-card);\r\n\r\n            border-radius: 16px;\r\n\r\n            padding: 24px;\r\n\r\n            transition: all 0.3s ease;\r\n\r\n            position: relative;\r\n\r\n        }\r\n\r\n        .fin-card:hover { transform: translateY(-4px); box-shadow: var(--beqi-shadow-hover); border-color: rgba(14, 165, 233, 0.5); }\r\n\r\n        .beqi-dark-mode .fin-card:hover { box-shadow: var(--beqi-glow-active); }\r\n\r\n        .beqi-dark-mode .fin-card.emerald-card:hover { border-color: rgba(16, 185, 129, 0.5); box-shadow: var(--beqi-glow-emerald); }\r\n\r\n        .fin-kpi-title { font-size: 12px; color: var(--beqi-text-secondary) !important; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; font-weight: 700; }\r\n\r\n        .fin-kpi-value { font-size: 24px; font-weight: 800; color: var(--beqi-text-primary) !important; }\r\n\r\n        .fin-kpi-sub { font-size: 11px; color: var(--beqi-text-secondary) !important; margin-top: 6px; }\r\n\r\n        \/* === TABS: SCROLLABLE HORIZONTAL === *\/\r\n\r\n        .fin-tabs-container {\r\n\r\n            display: flex;\r\n\r\n            margin: 10px 0 24px 0;\r\n\r\n            width: 100%;\r\n\r\n            overflow: hidden;\r\n\r\n            position: relative;\r\n\r\n        }\r\n\r\n        \/* Fade gradient edges untuk efek scroll yg bagus *\/\r\n\r\n        .fin-tabs-container::after {\r\n\r\n            content: '';\r\n\r\n            position: absolute;\r\n\r\n            right: 0;\r\n\r\n            top: 0;\r\n\r\n            bottom: 0;\r\n\r\n            width: 40px;\r\n\r\n            background: linear-gradient(to right, transparent, var(--beqi-bg-wrapper));\r\n\r\n            pointer-events: none;\r\n\r\n            opacity: 0;\r\n\r\n            transition: opacity 0.3s ease;\r\n\r\n            z-index: 1;\r\n\r\n        }\r\n\r\n        .fin-tabs-container.can-scroll::after { opacity: 1; }\r\n\r\n\r\n\r\n        .fin-tabs-scroll {\r\n\r\n            display: flex;\r\n\r\n            overflow-x: auto;\r\n\r\n            -webkit-overflow-scrolling: touch;\r\n\r\n            scrollbar-width: none; \/* Firefox *\/\r\n\r\n            -ms-overflow-style: none; \/* IE *\/\r\n\r\n            padding-bottom: 2px;\r\n\r\n        }\r\n\r\n        .fin-tabs-scroll::-webkit-scrollbar { display: none; } \/* Chrome\/Safari *\/\r\n\r\n\r\n\r\n        .fin-tabs {\r\n\r\n            background-color: var(--beqi-tab-bg);\r\n\r\n            border: 1px solid var(--beqi-border-card);\r\n\r\n            padding: 4px;\r\n\r\n            border-radius: 12px;\r\n\r\n            display: inline-flex;\r\n\r\n            gap: 4px;\r\n\r\n            flex-wrap: nowrap; \/* Tidak pernah wrap \u2014 selalu 1 baris *\/\r\n\r\n            white-space: nowrap;\r\n\r\n            flex-shrink: 0;\r\n\r\n        }\r\n\r\n        .fin-tab-btn {\r\n\r\n            background: transparent !important;\r\n\r\n            border: none !important;\r\n\r\n            padding: 8px 20px;\r\n\r\n            border-radius: 8px;\r\n\r\n            font-weight: 600;\r\n\r\n            font-size: 13px;\r\n\r\n            color: var(--beqi-text-secondary) !important;\r\n\r\n            cursor: pointer;\r\n\r\n            transition: all 0.3s ease;\r\n\r\n            white-space: nowrap;\r\n\r\n            flex-shrink: 0;\r\n\r\n        }\r\n\r\n        .fin-tab-btn:hover { color: var(--beqi-text-primary) !important; }\r\n\r\n        .fin-tab-btn.active {\r\n\r\n            background-color: var(--beqi-accent-blue) !important;\r\n\r\n            color: #ffffff !important;\r\n\r\n            box-shadow: var(--beqi-glow-active);\r\n\r\n        }\r\n\r\n        .fin-charts-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }\r\n\r\n        .fin-chart-container {\r\n\r\n            flex: 2;\r\n\r\n            min-width: 300px;\r\n\r\n            background-color: var(--beqi-bg-card);\r\n\r\n            border: 1px solid var(--beqi-border-card);\r\n\r\n            border-radius: 16px;\r\n\r\n            padding: 24px;\r\n\r\n            box-shadow: var(--beqi-shadow-card);\r\n\r\n            height: 450px;\r\n\r\n            transition: all 0.4s ease;\r\n\r\n            box-sizing: border-box;\r\n\r\n            position: relative;\r\n\r\n        }\r\n\r\n        .fin-chart-container.pie { flex: 1; min-width: 280px; }\r\n\r\n\r\n\r\n        \/* Tablet *\/\r\n\r\n        @media (max-width: 768px) {\r\n\r\n            .fin-dashboard-outer { padding: 30px 15px; }\r\n\r\n            .fin-charts-row { flex-direction: column; gap: 16px; }\r\n\r\n            \/* Chart utama (bar\/line): tinggi cukup agar tidak bantet *\/\r\n\r\n            .fin-chart-container { width: 100%; height: 340px !important; min-width: unset; }\r\n\r\n            \/* Chart pie\/polar *\/\r\n\r\n            .fin-chart-container.pie { height: 300px !important; min-width: unset; }\r\n\r\n            .fin-top-bar { padding: 20px 15px; }\r\n\r\n            .fin-action-bar { margin-bottom: 15px; }\r\n\r\n            .fin-tab-btn { padding: 8px 16px; font-size: 12px; }\r\n\r\n            \/* KPI row tetap 2 kolom di mobile *\/\r\n\r\n            .fin-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }\r\n\r\n            .fin-card { padding: 15px; }\r\n\r\n            .fin-kpi-value { font-size: 16px !important; }\r\n\r\n            .fin-kpi-title { font-size: 10px !important; }\r\n\r\n        }\r\n\r\n        \/* HP kecil (< 430px) *\/\r\n\r\n        @media (max-width: 430px) {\r\n\r\n            .fin-action-bar { flex-direction: column; align-items: center; gap: 15px; }\r\n\r\n            .fin-settings-group { justify-content: center; width: 100%; }\r\n\r\n            .fin-chart-container { height: 300px !important; }\r\n\r\n            .fin-chart-container.pie { height: 280px !important; }\r\n\r\n            .fin-kpi-value { font-size: 14px !important; }\r\n\r\n            .fin-kpi-title { font-size: 9px !important; }\r\n\r\n        }\r\n\r\n        \/* TOP CAMPAIGN CARD *\/\r\n\r\n        .fin-top-campaign-card {\r\n\r\n            background-color: var(--beqi-bg-card);\r\n\r\n            border: 1px solid var(--beqi-border-card);\r\n\r\n            border-radius: 16px;\r\n\r\n            padding: 20px;\r\n\r\n            box-shadow: var(--beqi-shadow-card);\r\n\r\n            transition: all 0.3s ease;\r\n\r\n        }\r\n\r\n        .fin-top-campaign-card:hover { box-shadow: var(--beqi-shadow-hover); }\r\n\r\n        .fin-tc-header {\r\n\r\n            display: flex;\r\n\r\n            align-items: center;\r\n\r\n            justify-content: space-between;\r\n\r\n            margin-bottom: 14px;\r\n\r\n            flex-wrap: wrap;\r\n\r\n            gap: 10px;\r\n\r\n        }\r\n\r\n        .fin-tc-title {\r\n\r\n            font-size: 13px;\r\n\r\n            font-weight: 700;\r\n\r\n            color: var(--beqi-text-secondary) !important;\r\n\r\n            text-transform: uppercase;\r\n\r\n            letter-spacing: 0.5px;\r\n\r\n        }\r\n\r\n        \/* Mini tabs inside card *\/\r\n\r\n        .fin-mini-tabs {\r\n\r\n            display: flex;\r\n\r\n            background-color: var(--beqi-tab-bg);\r\n\r\n            border: 1px solid var(--beqi-border-card);\r\n\r\n            border-radius: 8px;\r\n\r\n            padding: 3px;\r\n\r\n            gap: 3px;\r\n\r\n        }\r\n\r\n        .fin-mini-tab {\r\n\r\n            background: transparent !important;\r\n\r\n            border: none !important;\r\n\r\n            padding: 5px 12px;\r\n\r\n            border-radius: 6px;\r\n\r\n            font-size: 11px;\r\n\r\n            font-weight: 700;\r\n\r\n            color: var(--beqi-text-secondary) !important;\r\n\r\n            cursor: pointer;\r\n\r\n            transition: all 0.25s ease;\r\n\r\n            white-space: nowrap;\r\n\r\n        }\r\n\r\n        .fin-mini-tab.active {\r\n\r\n            background-color: var(--beqi-accent-blue) !important;\r\n\r\n            color: #fff !important;\r\n\r\n        }\r\n\r\n        \/* Year mini tabs *\/\r\n\r\n        .fin-tc-year-tabs {\r\n\r\n            display: flex;\r\n\r\n            gap: 6px;\r\n\r\n            margin-bottom: 14px;\r\n\r\n            flex-wrap: nowrap;\r\n\r\n            overflow-x: auto;\r\n\r\n            scrollbar-width: none;\r\n\r\n            -ms-overflow-style: none;\r\n\r\n        }\r\n\r\n        .fin-tc-year-tabs::-webkit-scrollbar { display: none; }\r\n\r\n        .fin-tc-year-btn {\r\n\r\n            background: transparent !important;\r\n\r\n            border: 1px solid var(--beqi-border-card) !important;\r\n\r\n            padding: 5px 14px;\r\n\r\n            border-radius: 20px;\r\n\r\n            font-size: 11px;\r\n\r\n            font-weight: 600;\r\n\r\n            color: var(--beqi-text-secondary) !important;\r\n\r\n            cursor: pointer;\r\n\r\n            transition: all 0.25s ease;\r\n\r\n            white-space: nowrap;\r\n\r\n            flex-shrink: 0;\r\n\r\n        }\r\n\r\n        .fin-tc-year-btn.active {\r\n\r\n            background-color: var(--beqi-accent-blue) !important;\r\n\r\n            border-color: var(--beqi-accent-blue) !important;\r\n\r\n            color: #fff !important;\r\n\r\n        }\r\n\r\n        \/* Program list *\/\r\n\r\n        .fin-prog-list { display: flex; flex-direction: column; gap: 10px; }\r\n\r\n        .fin-prog-item {\r\n\r\n            display: flex;\r\n\r\n            flex-direction: column;\r\n\r\n            gap: 5px;\r\n\r\n        }\r\n\r\n        .fin-prog-info {\r\n\r\n            display: flex;\r\n\r\n            justify-content: space-between;\r\n\r\n            align-items: center;\r\n\r\n            gap: 8px;\r\n\r\n        }\r\n\r\n        .fin-prog-rank {\r\n\r\n            font-size: 11px;\r\n\r\n            font-weight: 800;\r\n\r\n            color: var(--beqi-accent-blue);\r\n\r\n            min-width: 18px;\r\n\r\n        }\r\n\r\n        .fin-prog-name {\r\n\r\n            font-size: 12px;\r\n\r\n            font-weight: 600;\r\n\r\n            color: var(--beqi-text-primary) !important;\r\n\r\n            flex: 1;\r\n\r\n            white-space: nowrap;\r\n\r\n            overflow: hidden;\r\n\r\n            text-overflow: ellipsis;\r\n\r\n        }\r\n\r\n        .fin-prog-amount {\r\n\r\n            font-size: 12px;\r\n\r\n            font-weight: 700;\r\n\r\n            color: var(--beqi-accent-blue);\r\n\r\n            white-space: nowrap;\r\n\r\n        }\r\n\r\n        .fin-prog-amount.out { color: var(--beqi-accent-emerald); }\r\n\r\n        .fin-prog-bar-wrap {\r\n\r\n            background-color: var(--beqi-tab-bg);\r\n\r\n            border-radius: 4px;\r\n\r\n            height: 5px;\r\n\r\n            overflow: hidden;\r\n\r\n        }\r\n\r\n        .fin-prog-bar {\r\n\r\n            height: 100%;\r\n\r\n            border-radius: 4px;\r\n\r\n            background: var(--beqi-accent-blue);\r\n\r\n            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n        }\r\n\r\n        .fin-prog-bar.out { background: var(--beqi-accent-emerald); }\r\n\r\n        \/* 3-column layout: KPI + KPI + TopCampaign *\/\r\n\r\n        .fin-kpi-row-3 {\r\n\r\n            display: grid;\r\n\r\n            grid-template-columns: 1fr 1fr 1.2fr;\r\n\r\n            gap: 20px;\r\n\r\n            margin-bottom: 20px;\r\n\r\n            align-items: stretch;\r\n\r\n        }\r\n\r\n        \/* KPI card stretch full height *\/\r\n\r\n        .fin-kpi-row-3 .fin-card {\r\n\r\n            display: flex;\r\n\r\n            flex-direction: column;\r\n\r\n            justify-content: center;\r\n\r\n        }\r\n\r\n        \/* Tablet: KPI 2 kolom, Top Campaign di bawah full width *\/\r\n\r\n        @media (max-width: 900px) {\r\n\r\n            .fin-kpi-row-3 {\r\n\r\n                grid-template-columns: 1fr 1fr;\r\n\r\n            }\r\n\r\n            .fin-top-campaign-card {\r\n\r\n                grid-column: 1 \/ -1;\r\n\r\n            }\r\n\r\n        }\r\n\r\n        \/* Mobile: KPI tetap 2 kolom berdampingan, Top Campaign full width *\/\r\n\r\n        @media (max-width: 600px) {\r\n\r\n            .fin-kpi-row-3 {\r\n\r\n                grid-template-columns: 1fr 1fr;\r\n\r\n                gap: 12px;\r\n\r\n            }\r\n\r\n            .fin-top-campaign-card {\r\n\r\n                grid-column: 1 \/ -1;\r\n\r\n            }\r\n\r\n            .fin-kpi-row-3 .fin-card {\r\n\r\n                padding: 14px;\r\n\r\n            }\r\n\r\n        }\r\n\r\n    <\/style>\r\n\r\n\r\n\r\n    <div class=\"fin-dashboard-outer\" id=\"beqiDashboardWrapper\">\r\n\r\n        <div class=\"fin-dashboard-inner\">\r\n\r\n\r\n\r\n            <!-- ACTION BAR -->\r\n\r\n            <div class=\"fin-action-bar\">\r\n\r\n                <a href=\"https:\/\/beqicharity.com\/ar\/\" class=\"fin-back-btn\">\r\n\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line><polyline points=\"12 19 5 12 12 5\"><\/polyline><\/svg>\r\n\r\n                    <span data-i18n=\"backHome\">Kembali ke Beranda<\/span>\r\n\r\n                <\/a>\r\n\r\n                <div class=\"fin-settings-group\">\r\n\r\n                    <button class=\"fin-setting-btn\" id=\"btnLangToggle\">\r\n\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"><\/path><\/svg>\r\n\r\n                        <span id=\"langText\">EN<\/span>\r\n\r\n                    <\/button>\r\n\r\n                    <button class=\"fin-setting-btn\" id=\"btnThemeToggle\">\r\n\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" id=\"themeIcon\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"><\/path><\/svg>\r\n\r\n                        <span data-i18n=\"modeName\">Mode Gelap<\/span>\r\n\r\n                    <\/button>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- HEADER -->\r\n\r\n            <div class=\"fin-top-bar\">\r\n\r\n                <img decoding=\"async\" src=\"https:\/\/beqicharity.com\/wp-content\/smush-webp\/2025\/06\/2Logo-Full-Color-Square-Transparent-scaled-1.png.webp\" alt=\"BEQI Charity\" class=\"fin-logo fin-logo-light no-lazyload smush-dimensions\" onerror=\"this.style.display=&#039;none&#039;\" title=\"\" width=\"164\" style=\"--smush-image-width: 164px; --smush-image-aspect-ratio: 164\/150;\">\r\n\r\n                <img decoding=\"async\" src=\"https:\/\/beqicharity.com\/wp-content\/smush-webp\/2025\/06\/2Logo-Full-Color-Square-Transparent-scaled-1.png.webp\" alt=\"BEQI Charity\" class=\"fin-logo fin-logo-dark no-lazyload smush-dimensions\" onerror=\"this.style.display=&#039;none&#039;\" title=\"\" width=\"164\" style=\"--smush-image-width: 164px; --smush-image-aspect-ratio: 164\/150;\">\r\n\r\n                <h3 data-i18n=\"title\">Dashboard Transparansi Keuangan<\/h3>\r\n\r\n                <p data-i18n=\"subtitle\">Ringkasan Laporan Keseluruhan<\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- GRAND TOTAL + TOP CAMPAIGN -->\r\n\r\n            <div class=\"fin-section-title\" data-i18n=\"sec1\">Grand Total Keseluruhan<\/div>\r\n\r\n            <div class=\"fin-kpi-row-3\">\r\n\r\n                <div class=\"fin-card\">\r\n\r\n                    <div class=\"fin-kpi-title\" data-i18n=\"kpi1_title\">Total Penghimpunan<\/div>\r\n\r\n                    <div class=\"fin-kpi-value\" id=\"kpiTotalIn\" style=\"color: var(--beqi-accent-blue) !important;\">Rp 1.423.947.323<\/div>\r\n\r\n                    <div class=\"fin-kpi-sub\" data-i18n=\"kpi1_sub\">Total Cash In seluruh tahun<\/div>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"fin-card emerald-card\">\r\n\r\n                    <div class=\"fin-kpi-title\" data-i18n=\"kpi2_title\">Total Penyaluran<\/div>\r\n\r\n                    <div class=\"fin-kpi-value\" id=\"kpiTotalOut\" style=\"color: var(--beqi-accent-emerald) !important;\">Rp 1.028.383.702<\/div>\r\n\r\n                    <div class=\"fin-kpi-sub\" data-i18n=\"kpi2_sub\">Dana tersalurkan (Zakat, Infaq, dll)<\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n\r\n                <!-- TOP CAMPAIGN CARD -->\r\n\r\n                <div class=\"fin-top-campaign-card\">\r\n\r\n                    <div class=\"fin-tc-header\">\r\n\r\n                        <div class=\"fin-tc-title\"><span style=\"margin-right:4px\">\ud83c\udfc6<\/span> <span data-i18n=\"tcTitle\">TOP 5 PROGRAM<\/span><\/div>\r\n\r\n                        <div class=\"fin-mini-tabs\" id=\"tcTypeFilter\">\r\n\r\n                            <button class=\"fin-mini-tab active\" data-tctype=\"in\" data-i18n=\"tcIn\">Penghimpunan<\/button>\r\n\r\n                            <button class=\"fin-mini-tab\" data-tctype=\"out\" data-i18n=\"tcOut\">Penyaluran<\/button>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"fin-tc-year-tabs\" id=\"tcYearFilter\">\r\n\r\n                        <button class=\"fin-tc-year-btn active\" data-tcyear=\"all\" data-i18n=\"tabMidAll\">Semua Tahun<\/button>\r\n\r\n                        <button class=\"fin-tc-year-btn\" data-tcyear=\"2026\" data-i18n=\"tabMid2026\">2026<\/button>\r\n\r\n                        <button class=\"fin-tc-year-btn\" data-tcyear=\"2025\" data-i18n=\"tabMid2025\">2025<\/button>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"fin-prog-list\" id=\"tcProgList\">\r\n\r\n                        <!-- Diisi oleh JS -->\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- SECTION TENGAH: CHART PER KATEGORI PER BULAN -->\r\n\r\n            <div class=\"fin-section-title\" data-i18n=\"sec_mid\">Rincian Laporan Keuangan<\/div>\r\n\r\n            <div class=\"fin-tabs-container\" id=\"midTabsContainer\">\r\n\r\n                <div class=\"fin-tabs-scroll\">\r\n\r\n                    <div class=\"fin-tabs\" id=\"midYearFilter\">\r\n\r\n                        <button class=\"fin-tab-btn active\" data-midyear=\"all\" data-i18n=\"tabMidAll\">Semua Tahun<\/button>\r\n\r\n                        <button class=\"fin-tab-btn\" data-midyear=\"2026\" data-i18n=\"tabMid2026\">Tahun 2026<\/button>\r\n\r\n                        <button class=\"fin-tab-btn\" data-midyear=\"2025\" data-i18n=\"tabMid2025\">Tahun 2025<\/button>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"fin-charts-row\">\r\n\r\n                <div class=\"fin-chart-container\">\r\n\r\n                    <canvas id=\"barChartProgram\"><\/canvas>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"fin-chart-container pie\">\r\n\r\n                    <canvas id=\"pieChartProgram\"><\/canvas>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- SECTION BAWAH: LINE CHART ARUS KAS -->\r\n\r\n            <div class=\"fin-section-title\" data-i18n=\"sec3\">Rincian Arus Kas<\/div>\r\n\r\n            <div class=\"fin-tabs-container\" id=\"botTabsContainer\">\r\n\r\n                <div class=\"fin-tabs-scroll\">\r\n\r\n                    <div class=\"fin-tabs\" id=\"yearFilter\">\r\n\r\n                        <button class=\"fin-tab-btn active\" data-year=\"all\" data-i18n=\"tabAll\">Semua Tahun<\/button>\r\n\r\n                        <button class=\"fin-tab-btn\" data-year=\"2026\" data-i18n=\"tab2026\">Tahun 2026<\/button>\r\n\r\n                        <button class=\"fin-tab-btn\" data-year=\"2025\" data-i18n=\"tab2025\">Tahun 2025<\/button>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"fin-charts-row\">\r\n\r\n                <div class=\"fin-chart-container\">\r\n\r\n                    <canvas id=\"barChartKas\"><\/canvas>\r\n\r\n                <\/div>\r\n\r\n                <div class=\"fin-chart-container pie\">\r\n\r\n                    <canvas id=\"pieChartKas\"><\/canvas>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n            <!-- FOOTER -->\r\n\r\n            <div style=\"text-align:center; margin-top:40px; padding-top:24px; border-top:1px solid var(--beqi-border-card);\">\r\n\r\n                <p style=\"margin:0; font-size:13px; font-weight:700; color:var(--beqi-text-primary);\">\r\n\r\n                    Copyright &copy; 2026 BEQI CHARITY. All rights reserved.\r\n\r\n                <\/p>\r\n\r\n                <p style=\"margin:4px 0 0 0; font-size:12px; color:var(--beqi-text-secondary);\">\r\n\r\n                    Last update: <strong>8 Juni 2026<\/strong>\r\n\r\n                <\/p>\r\n\r\n            <\/div>\r\n\r\n\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n\r\n    <script>\r\n\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n\r\n        if (typeof Chart === 'undefined') return;\r\n\r\n\r\n\r\n        const formatRupiah = (value) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(value);\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ BILINGUAL DICTIONARY\r\n\r\n        \/\/ ============================================================\r\n\r\n        const i18n = {\r\n\r\n            id: {\r\n\r\n                backHome: \"Kembali ke Beranda\",\r\n\r\n                modeDark: \"Mode Gelap\",\r\n\r\n                modeLight: \"Mode Terang\",\r\n\r\n                title: \"Dashboard Transparansi Keuangan\",\r\n\r\n                subtitle: \"Ringkasan Laporan Keseluruhan\",\r\n\r\n                sec1: \"Grand Total Keseluruhan\",\r\n\r\n                kpi1_title: \"Total Penghimpunan\",\r\n\r\n                kpi1_sub: \"Total Cash In seluruh tahun\",\r\n\r\n                kpi2_title: \"Total Penyaluran\",\r\n\r\n                kpi2_sub: \"Dana tersalurkan (Zakat, Infaq, dll)\",\r\n\r\n                sec_mid: \"Rincian Laporan Keuangan\",\r\n\r\n                tabMid2025: \"Tahun 2025\",\r\n\r\n                tabMid2026: \"Tahun 2026\",\r\n\r\n                tabMidAll: \"Semua Tahun\",\r\n\r\n                sec3: \"Rincian Arus Kas\",\r\n\r\n                tabAll: \"Semua Tahun\",\r\n\r\n                tab2026: \"Tahun 2026\",\r\n\r\n                tab2025: \"Tahun 2025\",\r\n\r\n                months2025: ['Agu 25', 'Sep 25', 'Okt 25', 'Nov 25', 'Des 25'],\r\n\r\n                months2026: ['Jan 26', 'Feb 26', 'Mar 26', 'Apr 26', 'Mei 26'],\r\n\r\n                monthsAll: ['Agu 25', 'Sep 25', 'Okt 25', 'Nov 25', 'Des 25', 'Jan 26', 'Feb 26', 'Mar 26', 'Apr 26', 'Mei 26'],\r\n\r\n                langLabel: \"EN\",\r\n\r\n                chartLegendIn: \"Penghimpunan (Cash In)\",\r\n\r\n                chartLegendOut: \"Penyaluran (Cash Out)\",\r\n\r\n                catLabels: {\r\n\r\n                    'Zakat': 'Zakat',\r\n\r\n                    'Infaq - Shodaqoh': 'Infaq - Shodaqoh',\r\n\r\n                    'Wakaf Sawah': 'Wakaf Sawah',\r\n\r\n                    'Wakaf Perpustakaan': 'Wakaf Perpustakaan',\r\n\r\n                    'Sedekah Subuh': 'Sedekah Subuh',\r\n\r\n                    'Jumat Berkah': 'Jumat Berkah',\r\n\r\n                    'Infaq PSB': 'Infaq PSB',\r\n\r\n                    'Palestina': 'Palestina',\r\n\r\n                    'Beasiswa': 'Beasiswa',\r\n\r\n                    'Yatim': 'Yatim',\r\n\r\n                    'Ramadhan': 'Ramadhan',\r\n\r\n                    'Fidyah': 'Fidyah',\r\n\r\n                    'Qurban': 'Qurban',\r\n\r\n                    'Bencana Sumatra': 'Bencana Sumatra'\r\n\r\n                },\r\n\r\n                pieTitleAll: \"Distribusi Penghimpunan Keseluruhan\",\r\n\r\n                pieTitle2025: \"Distribusi Penghimpunan 2025\",\r\n\r\n                pieTitle2026: \"Distribusi Penghimpunan 2026\",\r\n\r\n                tcTitle: \"TOP 5 PROGRAM\",\r\n\r\n                tcIn: \"Penghimpunan\",\r\n\r\n                tcOut: \"Penyaluran\"\r\n\r\n            },\r\n\r\n            en: {\r\n\r\n                backHome: \"Back to Home\",\r\n\r\n                modeDark: \"Dark Mode\",\r\n\r\n                modeLight: \"Light Mode\",\r\n\r\n                title: \"Financial Transparency Dashboard\",\r\n\r\n                subtitle: \"Comprehensive Report Summary\",\r\n\r\n                sec1: \"Grand Total Summary\",\r\n\r\n                kpi1_title: \"Total Cash In\",\r\n\r\n                kpi1_sub: \"Total funds collected across all years\",\r\n\r\n                kpi2_title: \"Total Cash Out\",\r\n\r\n                kpi2_sub: \"Distributed funds (Zakat, Infaq, etc.)\",\r\n\r\n                sec_mid: \"Financial Report Details\",\r\n\r\n                tabMid2025: \"Year 2025\",\r\n\r\n                tabMid2026: \"Year 2026\",\r\n\r\n                tabMidAll: \"All Years\",\r\n\r\n                sec3: \"Periodic Cash Flow Details\",\r\n\r\n                tabAll: \"All Years\",\r\n\r\n                tab2026: \"Year 2026\",\r\n\r\n                tab2025: \"Year 2025\",\r\n\r\n                months2025: ['Aug 25', 'Sep 25', 'Oct 25', 'Nov 25', 'Dec 25'],\r\n\r\n                months2026: ['Jan 26', 'Feb 26', 'Mar 26', 'Apr 26', 'May 26'],\r\n\r\n                monthsAll: ['Aug 25', 'Sep 25', 'Oct 25', 'Nov 25', 'Dec 25', 'Jan 26', 'Feb 26', 'Mar 26', 'Apr 26', 'May 26'],\r\n\r\n                langLabel: \"ID\",\r\n\r\n                chartLegendIn: \"Cash In\",\r\n\r\n                chartLegendOut: \"Cash Out\",\r\n\r\n                catLabels: {\r\n\r\n                    'Zakat': 'Zakat',\r\n\r\n                    'Infaq - Shodaqoh': 'Infaq - Shodaqoh',\r\n\r\n                    'Wakaf Sawah': 'Sawah Waqf',\r\n\r\n                    'Wakaf Perpustakaan': 'Library Waqf',\r\n\r\n                    'Sedekah Subuh': 'Morning Alms',\r\n\r\n                    'Jumat Berkah': 'Friday Blessing',\r\n\r\n                    'Infaq PSB': 'PSB Infaq',\r\n\r\n                    'Palestina': 'Palestine',\r\n\r\n                    'Beasiswa': 'Scholarship',\r\n\r\n                    'Yatim': 'Orphan Fund',\r\n\r\n                    'Ramadhan': 'Ramadhan',\r\n\r\n                    'Fidyah': 'Fidyah',\r\n\r\n                    'Qurban': 'Qurban',\r\n\r\n                    'Bencana Sumatra': 'Sumatra Disaster'\r\n\r\n                },\r\n\r\n                pieTitleAll: \"Overall Cash In Distribution\",\r\n\r\n                pieTitle2025: \"2025 Cash In Distribution\",\r\n\r\n                pieTitle2026: \"2026 Cash In Distribution\",\r\n\r\n                tcTitle: \"TOP 5 PROGRAM\",\r\n\r\n                tcIn: \"Cash In\",\r\n\r\n                tcOut: \"Cash Out\"\r\n\r\n            }\r\n\r\n        };\r\n\r\n\r\n\r\n        let currentLang = localStorage.getItem('beqiLang') || 'id';\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ KATEGORI & WARNA\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ 14 kategori (gabungan 2025 + 2026)\r\n\r\n        const catKeys = [\r\n\r\n            'Zakat', 'Infaq - Shodaqoh', 'Wakaf Sawah', 'Wakaf Perpustakaan',\r\n\r\n            'Sedekah Subuh', 'Jumat Berkah', 'Infaq PSB', 'Palestina',\r\n\r\n            'Beasiswa', 'Yatim', 'Ramadhan', 'Fidyah', 'Qurban', 'Bencana Sumatra'\r\n\r\n        ];\r\n\r\n        const inColors = [\r\n\r\n            '#3b82f6', '#f59e0b', '#8b5cf6', '#06b6d4',\r\n\r\n            '#eab308', '#84cc16', '#6366f1', '#64748b',\r\n\r\n            '#f97316', '#ec4899', '#14b8a6', '#a855f7', '#ef4444', '#78716c'\r\n\r\n        ];\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ DATABASE DATA 2025\r\n\r\n        \/\/ Data: kolom Titipan (Dana yang masuk dari muzakki\/donatur)\r\n\r\n        \/\/ 5 bulan: Agu, Sep, Okt, Nov, Des 2025\r\n\r\n        \/\/ ============================================================\r\n\r\n        const rawDb2025 = {\r\n\r\n            in: {\r\n\r\n                'Zakat':              [0,        141750,   163625,   141750,   240625],\r\n\r\n                'Infaq - Shodaqoh':   [72220496, 89851915, 74945237, 34719684, 4974400],\r\n\r\n                'Wakaf Sawah':        [0,        0,        0,        0,        0],\r\n\r\n                'Wakaf Perpustakaan': [5715076,  9270000,  1350000,  4950000,  0],\r\n\r\n                'Sedekah Subuh':      [356551,   1500850,  692474,   2093264,  2203607],\r\n\r\n                'Jumat Berkah':       [48088,    148105,   5337667,  268006,   1049347],\r\n\r\n                'Infaq PSB':          [1560000,  2680000,  2240020,  520000,   80000],\r\n\r\n                'Palestina':          [0,        0,        360060,   123604,   0],\r\n\r\n                'Beasiswa':           [0,        0,        0,        0,        0],\r\n\r\n                'Yatim':              [0,        0,        0,        0,        0],\r\n\r\n                'Ramadhan':           [0,        0,        0,        0,        0],\r\n\r\n                'Fidyah':             [0,        0,        0,        0,        0],\r\n\r\n                'Qurban':             [0,        0,        0,        0,        0],\r\n\r\n                'Bencana Sumatra':    [0,        0,        0,        44005,    42429220]\r\n\r\n            },\r\n\r\n            \/\/ Total Cash Out per bulan 2025\r\n\r\n            outTotal: [1000000, 4500000, 3852000, 20890700, 34000000]\r\n\r\n        };\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ DATABASE DATA 2026\r\n\r\n        \/\/ Data real dari laporan: kolom Titipan saja (Jan - Mei 2026)\r\n\r\n        \/\/ ============================================================\r\n\r\n        const rawDb2026 = {\r\n\r\n            in: {\r\n\r\n                'Zakat':              [144375,    31529750,  53634263,  357875,    144375],\r\n\r\n                'Infaq - Shodaqoh':   [5165200,   4664000,   7520000,   3883200,   12313840],\r\n\r\n                'Wakaf Sawah':        [21076958,  3105622,   8833958,   3021492,   473094],\r\n\r\n                'Wakaf Perpustakaan': [1873744,   1150298,   3565282,   1402356,   3304290],\r\n\r\n                'Sedekah Subuh':      [3273168,   5406578,   2387503,   2735662,   2043414],\r\n\r\n                'Jumat Berkah':       [1873744,   2565354,   135057,    2094654,   1366463],\r\n\r\n                'Infaq PSB':          [1438400,   638400,    1117600,   399200,    2000800],\r\n\r\n                'Palestina':          [675926,    4667006,   2436032,   5274115,   320008],\r\n\r\n                'Beasiswa':           [77337,     1453187,   7459242,   2375789,   734710],\r\n\r\n                'Yatim':              [0,         2574721,   2082508,   656250,    0],\r\n\r\n                'Ramadhan':           [0,         2533699,   920019,    0,         0],\r\n\r\n                'Fidyah':             [0,         72000,     1979200,   0,         0],\r\n\r\n                'Qurban':             [0,         0,         0,         335160757, 334486086],\r\n\r\n                'Bencana Sumatra':    [1724970,   0,         0,         0,         0]\r\n\r\n            },\r\n\r\n            \/\/ Total Cash Out per bulan 2026 (dari laporan Penyaluran)\r\n\r\n            outTotal: [8862500, 120102502, 116066000, 184310000, 534800000]\r\n\r\n        };\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ HELPER: hitung total in per bulan dari rawDb\r\n\r\n        \/\/ ============================================================\r\n\r\n        const calcTotalIn = (db) => {\r\n\r\n            const numMonths = db.in['Zakat'].length;\r\n\r\n            let totals = new Array(numMonths).fill(0);\r\n\r\n            catKeys.forEach(cat => {\r\n\r\n                if (db.in[cat]) {\r\n\r\n                    db.in[cat].forEach((v, i) => { totals[i] += v; });\r\n\r\n                }\r\n\r\n            });\r\n\r\n            return totals;\r\n\r\n        };\r\n\r\n\r\n\r\n        \/\/ Simple cash flow DB untuk chart bawah\r\n\r\n        const getDbKeuangan = () => ({\r\n\r\n            '2025': {\r\n\r\n                labels: i18n[currentLang].months2025,\r\n\r\n                in: calcTotalIn(rawDb2025),\r\n\r\n                out: rawDb2025.outTotal\r\n\r\n            },\r\n\r\n            '2026': {\r\n\r\n                labels: i18n[currentLang].months2026,\r\n\r\n                in: calcTotalIn(rawDb2026),\r\n\r\n                out: rawDb2026.outTotal\r\n\r\n            }\r\n\r\n        });\r\n\r\n\r\n\r\n        const getAllData = () => {\r\n\r\n            const db = getDbKeuangan();\r\n\r\n            return {\r\n\r\n                labels: [...db['2025'].labels, ...db['2026'].labels],\r\n\r\n                in: [...db['2025'].in, ...db['2026'].in],\r\n\r\n                out: [...db['2025'].out, ...db['2026'].out]\r\n\r\n            };\r\n\r\n        };\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ DARK MODE\r\n\r\n        \/\/ ============================================================\r\n\r\n        const wrapper = document.getElementById('beqiDashboardWrapper');\r\n\r\n        const btnTheme = document.getElementById('btnThemeToggle');\r\n\r\n        const themeIcon = document.getElementById('themeIcon');\r\n\r\n        let isDark = localStorage.getItem('beqiTheme') === 'dark';\r\n\r\n\r\n\r\n        const moonIcon = '<path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"><\/path>';\r\n\r\n        const sunIcon = '<circle cx=\"12\" cy=\"12\" r=\"5\"><\/circle><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"><\/line><line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"><\/line><line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"><\/line><line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"><\/line><line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"><\/line><line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"><\/line><line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"><\/line><line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"><\/line>';\r\n\r\n\r\n\r\n        const updateThemeUI = () => {\r\n\r\n            const gridColor = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';\r\n\r\n            const titleColor = isDark ? '#f8fafc' : '#0f172a';\r\n\r\n            const modeText = document.querySelector('[data-i18n=\"modeName\"]');\r\n\r\n\r\n\r\n            if (isDark) {\r\n\r\n                wrapper.classList.add('beqi-dark-mode');\r\n\r\n                themeIcon.innerHTML = sunIcon;\r\n\r\n                if (modeText) modeText.innerText = i18n[currentLang].modeLight;\r\n\r\n                Chart.defaults.color = '#94a3b8';\r\n\r\n                document.body.style.backgroundColor = '#0b1120';\r\n\r\n            } else {\r\n\r\n                wrapper.classList.remove('beqi-dark-mode');\r\n\r\n                themeIcon.innerHTML = moonIcon;\r\n\r\n                if (modeText) modeText.innerText = i18n[currentLang].modeDark;\r\n\r\n                Chart.defaults.color = '#475569';\r\n\r\n                document.body.style.backgroundColor = '';\r\n\r\n            }\r\n\r\n\r\n\r\n            if (window.barChartInstance) {\r\n\r\n                window.barChartInstance.options.scales.y.grid.color = gridColor;\r\n\r\n                window.barChartInstance.update();\r\n\r\n            }\r\n\r\n            if (window.pieChartInstance) {\r\n\r\n                \/\/ Polar area punya scales.r, bukan y\r\n\r\n                if (window.pieChartInstance.options.scales && window.pieChartInstance.options.scales.r) {\r\n\r\n                    window.pieChartInstance.options.scales.r.grid.color = gridColor;\r\n\r\n                }\r\n\r\n                window.pieChartInstance.update();\r\n\r\n            }\r\n\r\n            if (window.barChartProgInstance) { window.barChartProgInstance.options.scales.y.grid.color = gridColor; window.barChartProgInstance.update(); }\r\n\r\n            if (window.pieChartProgInstance) { window.pieChartProgInstance.options.plugins.title.color = titleColor; window.pieChartProgInstance.update(); }\r\n\r\n        };\r\n\r\n\r\n\r\n        btnTheme.addEventListener('click', () => {\r\n\r\n            isDark = !isDark;\r\n\r\n            localStorage.setItem('beqiTheme', isDark ? 'dark' : 'light');\r\n\r\n            updateThemeUI();\r\n\r\n        });\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ COMMON OPTIONS\r\n\r\n        \/\/ ============================================================\r\n\r\n        Chart.defaults.font.family = \"'Inter', sans-serif\";\r\n\r\n\r\n\r\n        const commonBarOptions = {\r\n\r\n            responsive: true, maintainAspectRatio: false,\r\n\r\n            animation: { duration: 600 },\r\n\r\n            plugins: {\r\n\r\n                legend: { position: 'top', labels: { usePointStyle: true, padding: 15 } },\r\n\r\n                tooltip: {\r\n\r\n                    backgroundColor: '#0f172a', titleColor: '#fff', bodyColor: '#fff',\r\n\r\n                    titleFont: { size: 13 }, bodyFont: { size: 14, weight: 'bold' },\r\n\r\n                    padding: 12, cornerRadius: 8,\r\n\r\n                    callbacks: { label: ctx => ' ' + ctx.dataset.label + ': ' + formatRupiah(ctx.raw) }\r\n\r\n                }\r\n\r\n            },\r\n\r\n            scales: {\r\n\r\n                y: {\r\n\r\n                    beginAtZero: true,\r\n\r\n                    ticks: {\r\n\r\n                        maxTicksLimit: 7,\r\n\r\n                        callback: function(value) {\r\n\r\n                            if (value >= 1000000000) return 'Rp ' + (value\/1000000000).toFixed(1) + ' M';\r\n\r\n                            if (value >= 1000000) return 'Rp ' + Math.round(value\/1000000) + ' Jt';\r\n\r\n                            if (value > 0) return 'Rp ' + value;\r\n\r\n                            return 'Rp 0';\r\n\r\n                        }\r\n\r\n                    },\r\n\r\n                    grid: { color: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)', drawBorder: false }\r\n\r\n                },\r\n\r\n                x: { grid: { display: false, drawBorder: false }, ticks: { maxRotation: 0, minRotation: 0 } }\r\n\r\n            }\r\n\r\n        };\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ MIDDLE CHART HELPERS\r\n\r\n        \/\/ ============================================================\r\n\r\n        let activeMidYear = 'all';\r\n\r\n\r\n\r\n        const getMiddleLabels = (yearKey) => {\r\n\r\n            if (yearKey === '2025') return i18n[currentLang].months2025;\r\n\r\n            if (yearKey === '2026') return i18n[currentLang].months2026;\r\n\r\n            return i18n[currentLang].monthsAll;\r\n\r\n        };\r\n\r\n\r\n\r\n        const buildMiddleDatasets = (yearKey) => {\r\n\r\n            let datasets = [];\r\n\r\n            catKeys.forEach((cat, idx) => {\r\n\r\n                let data = [];\r\n\r\n                if (yearKey === '2025') {\r\n\r\n                    data = rawDb2025.in[cat] || [0,0,0,0,0];\r\n\r\n                } else if (yearKey === '2026') {\r\n\r\n                    data = rawDb2026.in[cat] || [0,0,0,0,0];\r\n\r\n                } else {\r\n\r\n                    const d25 = rawDb2025.in[cat] || [0,0,0,0,0];\r\n\r\n                    const d26 = rawDb2026.in[cat] || [0,0,0,0,0];\r\n\r\n                    data = [...d25, ...d26];\r\n\r\n                }\r\n\r\n                \/\/ Sembunyikan kategori yang semua nilainya 0\r\n\r\n                const hasData = data.some(v => v > 0);\r\n\r\n                datasets.push({\r\n\r\n                    catId: cat,\r\n\r\n                    label: i18n[currentLang].catLabels[cat] + ' (In)',\r\n\r\n                    data: data,\r\n\r\n                    backgroundColor: inColors[idx],\r\n\r\n                    stack: 'in',\r\n\r\n                    borderRadius: 2,\r\n\r\n                    minBarLength: 3,\r\n\r\n                    hidden: !hasData\r\n\r\n                });\r\n\r\n            });\r\n\r\n            \/\/ Cash Out\r\n\r\n            let outData = [];\r\n\r\n            if (yearKey === '2025') outData = rawDb2025.outTotal;\r\n\r\n            else if (yearKey === '2026') outData = rawDb2026.outTotal;\r\n\r\n            else outData = [...rawDb2025.outTotal, ...rawDb2026.outTotal];\r\n\r\n\r\n\r\n            datasets.push({\r\n\r\n                catId: 'out',\r\n\r\n                label: i18n[currentLang].chartLegendOut,\r\n\r\n                data: outData,\r\n\r\n                backgroundColor: '#10b981',\r\n\r\n                stack: 'out',\r\n\r\n                borderRadius: 4,\r\n\r\n                minBarLength: 5\r\n\r\n            });\r\n\r\n            return datasets;\r\n\r\n        };\r\n\r\n\r\n\r\n        const getMiddlePieData = (yearKey) => {\r\n\r\n            return catKeys.map(cat => {\r\n\r\n                let sum = 0;\r\n\r\n                if (yearKey === '2025' || yearKey === 'all') {\r\n\r\n                    (rawDb2025.in[cat] || []).forEach(v => sum += v);\r\n\r\n                }\r\n\r\n                if (yearKey === '2026' || yearKey === 'all') {\r\n\r\n                    (rawDb2026.in[cat] || []).forEach(v => sum += v);\r\n\r\n                }\r\n\r\n                return sum;\r\n\r\n            });\r\n\r\n        };\r\n\r\n\r\n\r\n        const getMiddlePieTitle = (yearKey) => {\r\n\r\n            if (yearKey === '2025') return i18n[currentLang].pieTitle2025;\r\n\r\n            if (yearKey === '2026') return i18n[currentLang].pieTitle2026;\r\n\r\n            return i18n[currentLang].pieTitleAll;\r\n\r\n        };\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ INIT MIDDLE CHART (BAR STACKED)\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ PENTING: tidak bisa JSON.parse(JSON.stringify()) karena callback hilang\r\n\r\n        \/\/ Build stackedBarOptions manual agar callback Y-axis tetap ada\r\n\r\n        const tickCallback = function(value) {\r\n\r\n            if (value >= 1000000000) return 'Rp ' + (value\/1000000000).toFixed(1) + ' M';\r\n\r\n            if (value >= 1000000) return 'Rp ' + Math.round(value\/1000000) + ' Jt';\r\n\r\n            if (value > 0) return 'Rp ' + value;\r\n\r\n            return 'Rp 0';\r\n\r\n        };\r\n\r\n\r\n\r\n        const stackedBarOptions = {\r\n\r\n            responsive: true, maintainAspectRatio: false,\r\n\r\n            animation: { duration: 600 },\r\n\r\n            plugins: {\r\n\r\n                legend: {\r\n\r\n                    position: 'top',\r\n\r\n                    labels: { usePointStyle: true, padding: 8, font: { size: 10 }, boxWidth: 8 }\r\n\r\n                },\r\n\r\n                tooltip: {\r\n\r\n                    backgroundColor: '#0f172a', titleColor: '#fff', bodyColor: '#fff',\r\n\r\n                    titleFont: { size: 13 }, bodyFont: { size: 14, weight: 'bold' },\r\n\r\n                    padding: 12, cornerRadius: 8,\r\n\r\n                    callbacks: { label: ctx => ' ' + ctx.dataset.label + ': ' + formatRupiah(ctx.raw) }\r\n\r\n                }\r\n\r\n            },\r\n\r\n            scales: {\r\n\r\n                y: {\r\n\r\n                    beginAtZero: true,\r\n\r\n                    stacked: true,\r\n\r\n                    ticks: {\r\n\r\n                        maxTicksLimit: 5,\r\n\r\n                        font: { size: 10 },\r\n\r\n                        callback: function(value) {\r\n\r\n                            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(value);\r\n\r\n                        }\r\n\r\n                    },\r\n\r\n                    grid: { color: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)', drawBorder: false }\r\n\r\n                },\r\n\r\n                x: {\r\n\r\n                    stacked: true,\r\n\r\n                    grid: { display: false, drawBorder: false },\r\n\r\n                    ticks: { maxRotation: 0, minRotation: 0, font: { size: 10 } }\r\n\r\n                }\r\n\r\n            }\r\n\r\n        };\r\n\r\n\r\n\r\n        const ctxBarProg = document.getElementById('barChartProgram').getContext('2d');\r\n\r\n        window.barChartProgInstance = new Chart(ctxBarProg, {\r\n\r\n            type: 'bar',\r\n\r\n            data: {\r\n\r\n                labels: getMiddleLabels('all'),\r\n\r\n                datasets: buildMiddleDatasets('all')\r\n\r\n            },\r\n\r\n            options: stackedBarOptions\r\n\r\n        });\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ INIT MIDDLE PIE (DOUGHNUT)\r\n\r\n        \/\/ ============================================================\r\n\r\n        const ctxPieProg = document.getElementById('pieChartProgram').getContext('2d');\r\n\r\n        window.pieChartProgInstance = new Chart(ctxPieProg, {\r\n\r\n            type: 'doughnut',\r\n\r\n            data: {\r\n\r\n                labels: catKeys.map(c => i18n[currentLang].catLabels[c]),\r\n\r\n                datasets: [{\r\n\r\n                    data: getMiddlePieData('all'),\r\n\r\n                    backgroundColor: inColors,\r\n\r\n                    borderWidth: 0,\r\n\r\n                    hoverOffset: 8\r\n\r\n                }]\r\n\r\n            },\r\n\r\n            options: {\r\n\r\n                responsive: true, maintainAspectRatio: false, cutout: '65%',\r\n\r\n                plugins: {\r\n\r\n                    legend: { position: 'bottom', labels: { usePointStyle: true, padding: 8, font: { size: 10 }, filter: (item, chart) => chart.datasets[0].data[item.index] > 0 } },\r\n\r\n                    tooltip: {\r\n\r\n                        backgroundColor: '#0f172a', titleColor: '#fff', bodyColor: '#fff',\r\n\r\n                        bodyFont: { size: 14, weight: 'bold' }, padding: 12, cornerRadius: 8,\r\n\r\n                        callbacks: { label: ctx => ' ' + ctx.label + ': ' + formatRupiah(ctx.raw) }\r\n\r\n                    },\r\n\r\n                    title: {\r\n\r\n                        display: true,\r\n\r\n                        text: getMiddlePieTitle('all'),\r\n\r\n                        color: isDark ? '#f8fafc' : '#0f172a',\r\n\r\n                        font: { size: 14, family: \"'Inter', sans-serif\" }\r\n\r\n                    }\r\n\r\n                }\r\n\r\n            }\r\n\r\n        });\r\n\r\n\r\n\r\n        \/\/ Update middle charts saat tab diklik\r\n\r\n        const updateMiddleCharts = (yearKey) => {\r\n\r\n            activeMidYear = yearKey;\r\n\r\n            window.barChartProgInstance.data.labels = getMiddleLabels(yearKey);\r\n\r\n            window.barChartProgInstance.data.datasets = buildMiddleDatasets(yearKey);\r\n\r\n            window.barChartProgInstance.update();\r\n\r\n\r\n\r\n            window.pieChartProgInstance.data.datasets[0].data = getMiddlePieData(yearKey);\r\n\r\n            window.pieChartProgInstance.options.plugins.title.text = getMiddlePieTitle(yearKey);\r\n\r\n            window.pieChartProgInstance.update();\r\n\r\n        };\r\n\r\n\r\n\r\n        document.querySelectorAll('#midYearFilter .fin-tab-btn').forEach(btn => {\r\n\r\n            btn.addEventListener('click', (e) => {\r\n\r\n                document.querySelectorAll('#midYearFilter .fin-tab-btn').forEach(b => b.classList.remove('active'));\r\n\r\n                e.target.classList.add('active');\r\n\r\n                updateMiddleCharts(e.target.dataset.midyear);\r\n\r\n            });\r\n\r\n        });\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ BOTTOM CHARTS: LINE CHART (beda dari bar tengah) + PIE\r\n\r\n        \/\/ ============================================================\r\n\r\n        const lineChartOptions = {\r\n\r\n            responsive: true, maintainAspectRatio: false,\r\n\r\n            animation: { duration: 700, easing: 'easeInOutQuart' },\r\n\r\n            interaction: { mode: 'index', intersect: false },\r\n\r\n            plugins: {\r\n\r\n                legend: { position: 'top', labels: { usePointStyle: true, padding: 12, pointStyle: 'circle', font: { size: 11 } } },\r\n\r\n                tooltip: {\r\n\r\n                    backgroundColor: '#0f172a', titleColor: '#fff', bodyColor: '#fff',\r\n\r\n                    titleFont: { size: 13 }, bodyFont: { size: 14, weight: 'bold' },\r\n\r\n                    padding: 12, cornerRadius: 8,\r\n\r\n                    callbacks: { label: ctx => ' ' + ctx.dataset.label + ': ' + formatRupiah(ctx.raw) }\r\n\r\n                }\r\n\r\n            },\r\n\r\n            scales: {\r\n\r\n                y: {\r\n\r\n                    beginAtZero: true,\r\n\r\n                    ticks: {\r\n\r\n                        maxTicksLimit: 5,\r\n\r\n                        font: { size: 10 },\r\n\r\n                        callback: v => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(v)\r\n\r\n                    },\r\n\r\n                    grid: { color: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)', drawBorder: false }\r\n\r\n                },\r\n\r\n                x: { grid: { display: false, drawBorder: false }, ticks: { maxRotation: 0, minRotation: 0, font: { size: 10 } } }\r\n\r\n            }\r\n\r\n        };\r\n\r\n\r\n\r\n        const ctxBar = document.getElementById('barChartKas').getContext('2d');\r\n\r\n        const ctxPie = document.getElementById('pieChartKas').getContext('2d');\r\n\r\n\r\n\r\n        window.barChartInstance = new Chart(ctxBar, {\r\n\r\n            type: 'line',\r\n\r\n            data: { labels: [], datasets: [] },\r\n\r\n            options: lineChartOptions\r\n\r\n        });\r\n\r\n\r\n\r\n        window.pieChartInstance = new Chart(ctxPie, {\r\n\r\n            type: 'polarArea',\r\n\r\n            data: { labels: [], datasets: [] },\r\n\r\n            options: {\r\n\r\n                responsive: true, maintainAspectRatio: false,\r\n\r\n                animation: { duration: 700, easing: 'easeInOutQuart' },\r\n\r\n                scales: {\r\n\r\n                    r: {\r\n\r\n                        ticks: {\r\n\r\n                            display: false,\r\n\r\n                            backdropColor: 'transparent'\r\n\r\n                        },\r\n\r\n                        grid: {\r\n\r\n                            color: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'\r\n\r\n                        }\r\n\r\n                    }\r\n\r\n                },\r\n\r\n                plugins: {\r\n\r\n                    legend: { position: 'bottom', labels: { usePointStyle: true, padding: 18, font: { size: 13 } } },\r\n\r\n                    tooltip: {\r\n\r\n                        backgroundColor: '#0f172a', titleColor: '#fff', bodyColor: '#fff',\r\n\r\n                        bodyFont: { size: 14, weight: 'bold' }, padding: 12, cornerRadius: 8,\r\n\r\n                        callbacks: { label: ctx => ' ' + ctx.label + ': ' + formatRupiah(ctx.raw) }\r\n\r\n                    }\r\n\r\n                }\r\n\r\n            }\r\n\r\n        });\r\n\r\n\r\n\r\n        const updateCharts = (yearKey) => {\r\n\r\n            const db = getDbKeuangan();\r\n\r\n            const data = yearKey === 'all' ? getAllData() : db[yearKey];\r\n\r\n\r\n\r\n            window.barChartInstance.data = {\r\n\r\n                labels: data.labels,\r\n\r\n                datasets: [\r\n\r\n                    {\r\n\r\n                        label: i18n[currentLang].chartLegendIn,\r\n\r\n                        data: data.in,\r\n\r\n                        borderColor: '#0ea5e9',\r\n\r\n                        backgroundColor: 'rgba(14, 165, 233, 0.12)',\r\n\r\n                        fill: true,\r\n\r\n                        tension: 0.4,\r\n\r\n                        pointRadius: 5,\r\n\r\n                        pointHoverRadius: 8,\r\n\r\n                        pointBackgroundColor: '#0ea5e9',\r\n\r\n                        pointBorderColor: '#fff',\r\n\r\n                        pointBorderWidth: 2,\r\n\r\n                        borderWidth: 2.5\r\n\r\n                    },\r\n\r\n                    {\r\n\r\n                        label: i18n[currentLang].chartLegendOut,\r\n\r\n                        data: data.out,\r\n\r\n                        borderColor: '#10b981',\r\n\r\n                        backgroundColor: 'rgba(16, 185, 129, 0.10)',\r\n\r\n                        fill: true,\r\n\r\n                        tension: 0.4,\r\n\r\n                        pointRadius: 5,\r\n\r\n                        pointHoverRadius: 8,\r\n\r\n                        pointBackgroundColor: '#10b981',\r\n\r\n                        pointBorderColor: '#fff',\r\n\r\n                        pointBorderWidth: 2,\r\n\r\n                        borderWidth: 2.5\r\n\r\n                    }\r\n\r\n                ]\r\n\r\n            };\r\n\r\n            window.barChartInstance.update();\r\n\r\n\r\n\r\n            const sumIn = data.in.reduce((a, b) => a + b, 0);\r\n\r\n            const sumOut = data.out.reduce((a, b) => a + b, 0);\r\n\r\n            window.pieChartInstance.data = {\r\n\r\n                labels: [i18n[currentLang].chartLegendIn, i18n[currentLang].chartLegendOut],\r\n\r\n                datasets: [{\r\n\r\n                    data: [sumIn, sumOut],\r\n\r\n                    backgroundColor: ['rgba(14, 165, 233, 0.75)', 'rgba(16, 185, 129, 0.75)'],\r\n\r\n                    borderColor: ['#0ea5e9', '#10b981'],\r\n\r\n                    borderWidth: 2,\r\n\r\n                    hoverOffset: 6\r\n\r\n                }]\r\n\r\n            };\r\n\r\n            window.pieChartInstance.update();\r\n\r\n        };\r\n\r\n\r\n\r\n        document.querySelectorAll('#yearFilter .fin-tab-btn').forEach(btn => {\r\n\r\n            btn.addEventListener('click', (e) => {\r\n\r\n                document.querySelectorAll('#yearFilter .fin-tab-btn').forEach(b => b.classList.remove('active'));\r\n\r\n                e.target.classList.add('active');\r\n\r\n                updateCharts(e.target.dataset.year);\r\n\r\n            });\r\n\r\n        });\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ SCROLL FADE: deteksi apakah tab bisa discroll\r\n\r\n        \/\/ ============================================================\r\n\r\n        const initScrollFade = (containerId) => {\r\n\r\n            const container = document.getElementById(containerId);\r\n\r\n            if (!container) return;\r\n\r\n            const scrollEl = container.querySelector('.fin-tabs-scroll');\r\n\r\n            if (!scrollEl) return;\r\n\r\n            const check = () => {\r\n\r\n                const canScroll = scrollEl.scrollWidth > scrollEl.clientWidth;\r\n\r\n                const atEnd = scrollEl.scrollLeft + scrollEl.clientWidth >= scrollEl.scrollWidth - 4;\r\n\r\n                container.classList.toggle('can-scroll', canScroll && !atEnd);\r\n\r\n            };\r\n\r\n            scrollEl.addEventListener('scroll', check, { passive: true });\r\n\r\n            window.addEventListener('resize', check);\r\n\r\n            setTimeout(check, 100);\r\n\r\n        };\r\n\r\n        initScrollFade('midTabsContainer');\r\n\r\n        initScrollFade('botTabsContainer');\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ TOP CAMPAIGN DATA\r\n\r\n        \/\/ Program names sesuai kategori di rawDb\r\n\r\n        \/\/ out per kategori: mapping manual dari data penyaluran\r\n\r\n        \/\/ ============================================================\r\n\r\n        const tcPrograms = [\r\n\r\n            'Zakat', 'Infaq - Shodaqoh', 'Wakaf Sawah', 'Wakaf Perpustakaan',\r\n\r\n            'Sedekah Subuh', 'Jumat Berkah', 'Infaq PSB', 'Palestina',\r\n\r\n            'Beasiswa', 'Yatim', 'Ramadhan', 'Fidyah', 'Qurban', 'Bencana Sumatra'\r\n\r\n        ];\r\n\r\n\r\n\r\n        \/\/ Cash Out per kategori per tahun (dari laporan penyaluran)\r\n\r\n        const tcOut2025 = {\r\n\r\n            'Zakat':              0,\r\n\r\n            'Infaq - Shodaqoh':   64242500,\r\n\r\n            'Wakaf Sawah':        0,\r\n\r\n            'Wakaf Perpustakaan': 0,\r\n\r\n            'Sedekah Subuh':      510000,\r\n\r\n            'Jumat Berkah':       1750000,\r\n\r\n            'Infaq PSB':          0,\r\n\r\n            'Palestina':          0,\r\n\r\n            'Beasiswa':           0,\r\n\r\n            'Yatim':              0,\r\n\r\n            'Ramadhan':           0,\r\n\r\n            'Fidyah':             0,\r\n\r\n            'Qurban':             0,\r\n\r\n            'Bencana Sumatra':    0\r\n\r\n        };\r\n\r\n        const tcOut2026 = {\r\n\r\n            'Zakat':              91165000,\r\n\r\n            'Infaq - Shodaqoh':   39936000,\r\n\r\n            'Wakaf Sawah':        0,\r\n\r\n            'Wakaf Perpustakaan': 0,\r\n\r\n            'Sedekah Subuh':      8050000,\r\n\r\n            'Jumat Berkah':       3710000,\r\n\r\n            'Infaq PSB':          60000000,\r\n\r\n            'Palestina':          5000000,\r\n\r\n            'Beasiswa':           0,\r\n\r\n            'Yatim':              37900000,\r\n\r\n            'Ramadhan':           18760000,\r\n\r\n            'Fidyah':             2520000,\r\n\r\n            'Qurban':             691100000,\r\n\r\n            'Bencana Sumatra':    6000002\r\n\r\n        };\r\n\r\n\r\n\r\n        \/\/ Hitung total in per program per tahun\r\n\r\n        const getTcInData = (yearKey) => {\r\n\r\n            return tcPrograms.map(prog => {\r\n\r\n                let total = 0;\r\n\r\n                if (yearKey === '2025' || yearKey === 'all') {\r\n\r\n                    (rawDb2025.in[prog] || []).forEach(v => total += v);\r\n\r\n                }\r\n\r\n                if (yearKey === '2026' || yearKey === 'all') {\r\n\r\n                    (rawDb2026.in[prog] || []).forEach(v => total += v);\r\n\r\n                }\r\n\r\n                return { name: prog, value: total };\r\n\r\n            });\r\n\r\n        };\r\n\r\n\r\n\r\n        const getTcOutData = (yearKey) => {\r\n\r\n            return tcPrograms.map(prog => {\r\n\r\n                let total = 0;\r\n\r\n                if (yearKey === '2025' || yearKey === 'all') total += tcOut2025[prog] || 0;\r\n\r\n                if (yearKey === '2026' || yearKey === 'all') total += tcOut2026[prog] || 0;\r\n\r\n                return { name: prog, value: total };\r\n\r\n            });\r\n\r\n        };\r\n\r\n\r\n\r\n        let activeTcYear = 'all';\r\n\r\n        let activeTcType = 'in';\r\n\r\n\r\n\r\n        const renderTopCampaign = () => {\r\n\r\n            const data = activeTcType === 'in'\r\n\r\n                ? getTcInData(activeTcYear)\r\n\r\n                : getTcOutData(activeTcYear);\r\n\r\n\r\n\r\n            const sorted = data\r\n\r\n                .filter(d => d.value > 0)\r\n\r\n                .sort((a, b) => b.value - a.value)\r\n\r\n                .slice(0, 5);\r\n\r\n\r\n\r\n            const maxVal = sorted[0]?.value || 1;\r\n\r\n            const isOut = activeTcType === 'out';\r\n\r\n            const list = document.getElementById('tcProgList');\r\n\r\n            if (!list) return;\r\n\r\n\r\n\r\n            list.innerHTML = sorted.map((item, i) => {\r\n\r\n                const pct = Math.round((item.value \/ maxVal) * 100);\r\n\r\n                const label = i18n[currentLang].catLabels[item.name] || item.name;\r\n\r\n                return `\r\n\r\n                <div class=\"fin-prog-item\">\r\n\r\n                    <div class=\"fin-prog-info\">\r\n\r\n                        <span class=\"fin-prog-rank\">#${i + 1}<\/span>\r\n\r\n                        <span class=\"fin-prog-name\" title=\"${label}\">${label}<\/span>\r\n\r\n                        <span class=\"fin-prog-amount ${isOut ? 'out' : ''}\">${formatRupiah(item.value)}<\/span>\r\n\r\n                    <\/div>\r\n\r\n                    <div class=\"fin-prog-bar-wrap\">\r\n\r\n                        <div class=\"fin-prog-bar ${isOut ? 'out' : ''}\" style=\"width:${pct}%\"><\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>`;\r\n\r\n            }).join('');\r\n\r\n        };\r\n\r\n\r\n\r\n        \/\/ Tab Year\r\n\r\n        document.querySelectorAll('#tcYearFilter .fin-tc-year-btn').forEach(btn => {\r\n\r\n            btn.addEventListener('click', e => {\r\n\r\n                document.querySelectorAll('#tcYearFilter .fin-tc-year-btn').forEach(b => b.classList.remove('active'));\r\n\r\n                e.target.classList.add('active');\r\n\r\n                activeTcYear = e.target.dataset.tcyear;\r\n\r\n                renderTopCampaign();\r\n\r\n            });\r\n\r\n        });\r\n\r\n        \/\/ Tab Type (In\/Out)\r\n\r\n        document.querySelectorAll('#tcTypeFilter .fin-mini-tab').forEach(btn => {\r\n\r\n            btn.addEventListener('click', e => {\r\n\r\n                document.querySelectorAll('#tcTypeFilter .fin-mini-tab').forEach(b => b.classList.remove('active'));\r\n\r\n                e.target.classList.add('active');\r\n\r\n                activeTcType = e.target.dataset.tctype;\r\n\r\n                renderTopCampaign();\r\n\r\n            });\r\n\r\n        });\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ UPDATE TEXTS (BILINGUAL)\r\n\r\n        \/\/ ============================================================\r\n\r\n        const updateTexts = () => {\r\n\r\n            document.querySelectorAll('[data-i18n]').forEach(el => {\r\n\r\n                const key = el.getAttribute('data-i18n');\r\n\r\n                if (key === 'modeName') {\r\n\r\n                    el.innerText = isDark ? i18n[currentLang].modeLight : i18n[currentLang].modeDark;\r\n\r\n                } else if (i18n[currentLang][key]) {\r\n\r\n                    el.innerText = i18n[currentLang][key];\r\n\r\n                }\r\n\r\n            });\r\n\r\n            document.getElementById('langText').innerText = i18n[currentLang].langLabel;\r\n\r\n\r\n\r\n            \/\/ Update middle bar chart labels\r\n\r\n            if (window.barChartProgInstance) {\r\n\r\n                window.barChartProgInstance.data.labels = getMiddleLabels(activeMidYear);\r\n\r\n                window.barChartProgInstance.data.datasets.forEach(ds => {\r\n\r\n                    if (ds.catId === 'out') {\r\n\r\n                        ds.label = i18n[currentLang].chartLegendOut;\r\n\r\n                    } else {\r\n\r\n                        ds.label = i18n[currentLang].catLabels[ds.catId] + ' (In)';\r\n\r\n                    }\r\n\r\n                });\r\n\r\n                window.barChartProgInstance.update();\r\n\r\n            }\r\n\r\n            \/\/ Update middle pie\r\n\r\n            if (window.pieChartProgInstance) {\r\n\r\n                window.pieChartProgInstance.data.labels = catKeys.map(c => i18n[currentLang].catLabels[c]);\r\n\r\n                window.pieChartProgInstance.options.plugins.title.text = getMiddlePieTitle(activeMidYear);\r\n\r\n                window.pieChartProgInstance.update();\r\n\r\n            }\r\n\r\n            \/\/ Update bottom charts\r\n\r\n            const activeTab = document.querySelector('#yearFilter .fin-tab-btn.active');\r\n\r\n            if (activeTab && window.barChartInstance) updateCharts(activeTab.dataset.year);\r\n\r\n        };\r\n\r\n\r\n\r\n        document.getElementById('btnLangToggle').addEventListener('click', () => {\r\n\r\n            currentLang = currentLang === 'id' ? 'en' : 'id';\r\n\r\n            localStorage.setItem('beqiLang', currentLang);\r\n\r\n            updateTexts();\r\n\r\n            renderTopCampaign();\r\n\r\n        });\r\n\r\n\r\n\r\n        \/\/ ============================================================\r\n\r\n        \/\/ INISIALISASI\r\n\r\n        \/\/ ============================================================\r\n\r\n        updateThemeUI();\r\n\r\n        updateTexts();\r\n\r\n        updateCharts('all');\r\n\r\n        renderTopCampaign();\r\n\r\n    });\r\n\r\n    <\/script>\r\n\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_templately_pack_id":"","_templately_imported_at":"","_templately_source":"","_templately_import_session_id":"","footnotes":""},"class_list":["post-9250","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/beqicharity.com\/ar\/wp-json\/wp\/v2\/pages\/9250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beqicharity.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beqicharity.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beqicharity.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beqicharity.com\/ar\/wp-json\/wp\/v2\/comments?post=9250"}],"version-history":[{"count":0,"href":"https:\/\/beqicharity.com\/ar\/wp-json\/wp\/v2\/pages\/9250\/revisions"}],"wp:attachment":[{"href":"https:\/\/beqicharity.com\/ar\/wp-json\/wp\/v2\/media?parent=9250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}