{"id":20848,"date":"2025-12-29T08:33:40","date_gmt":"2025-12-29T03:03:40","guid":{"rendered":"https:\/\/demo.vleafy.com\/ibc2\/?page_id=20848"},"modified":"2026-01-09T18:27:34","modified_gmt":"2026-01-09T12:57:34","slug":"master-dashboard","status":"publish","type":"page","link":"https:\/\/demo.vleafy.com\/ibc2\/master-dashboard\/","title":{"rendered":"Master Dashboard"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20848\" class=\"elementor elementor-20848\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5dd0a9a e-con-full e-flex e-con e-parent \" data-id=\"5dd0a9a\" data-element_type=\"container\">\t\t<div class=\"elementor-element elementor-element-563c246 elementor-widget elementor-widget-pxl_heading\" data-id=\"563c246\" data-element_type=\"widget\" data-widget_type=\"pxl_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"pxl-pxl_heading-563c246-1740\" class=\"pxl-heading pxl-heading--tcustom\">\n\t<div class=\"pxl-heading--inner\">\n\n\t\t\n\t<h3 class=\"pxl-item--title   pxl-color-style-1 wow fadeInUp\" data-wow-delay=\"300ms\">\n\n\n\tMaster Dashboard\t\t\t\n\t<\/h3>\n\n<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c0ecd59 elementor-widget elementor-widget-image\" data-id=\"c0ecd59\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"218\" height=\"80\" src=\"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2024\/06\/home-1-light.png\" class=\"attachment-large size-large wp-image-7236\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t<div class=\"elementor-element elementor-element-6b9e2f2 e-flex e-con-boxed e-con e-parent \" data-id=\"6b9e2f2\" data-element_type=\"container\">\t\t\t<div class=\"e-con-inner\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-2224beb elementor-widget elementor-widget-html\" data-id=\"2224beb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n    <style>\r\n        \r\n        .dashboard-container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .dashboard-header {\r\n            text-align: center;\r\n            margin-bottom: 60px;\r\n        }\r\n\r\n        .dashboard-title {\r\n            color: #fff;\r\n            font-size: 3rem;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 3px;\r\n            margin-bottom: 15px;\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n        }\r\n\r\n        .dashboard-subtitle {\r\n            color: #fff;\r\n            font-size: 30px\r\n        }\r\n\r\n        .stats-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n            gap: 25px;\r\n            padding: 0 20px;\r\n        }\r\n\r\n        .stat-card {\r\n            background: linear-gradient(145deg, rgb(138 43 226 \/ 38%), rgb(75 0 130));\r\n            backdrop-filter: blur(10px);\r\n            border: 2px solid rgba(138, 43, 226, 0.3);\r\n            border-radius: 20px;\r\n            padding: 35px;\r\n            transition: all 0.3s;\r\n            position: relative;\r\n            overflow: hidden;\r\n            cursor: pointer;\r\n        }\r\n\r\n        .stat-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);\r\n            transition: left 0.5s;\r\n        }\r\n\r\n        .stat-card:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        .stat-card:hover {\r\n            transform: translateY(-8px);\r\n            background: linear-gradient(145deg, rgba(138, 43, 226, 0.25), rgba(75, 0, 130, 0.25));\r\n            border-color: #ff1493;\r\n            box-shadow: 0 15px 40px rgba(138, 43, 226, 0.4);\r\n        }\r\n\r\n        .stat-card-header {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .stat-icon {\r\n            width: 60px;\r\n            height: 60px;\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            border-radius: 15px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);\r\n        }\r\n\r\n        .stat-icon svg {\r\n            width: 30px;\r\n            height: 30px;\r\n            fill: #fff;\r\n        }\r\n\r\n        .stat-badge {\r\n            background: rgba(255, 20, 147, 0.2);\r\n            border: 2px solid rgba(255, 20, 147, 0.4);\r\n            color: #ff1493;\r\n            padding: 5px 12px;\r\n            border-radius: 50px;\r\n            font-size: 0.75rem;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .stat-title {\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-size: 0.9rem;\r\n            font-weight: 600;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .stat-value {\r\n            color: #fff;\r\n            font-size: 3rem;\r\n            font-weight: 700;\r\n            margin-bottom: 8px;\r\n            background: #fff;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n        }\r\n\r\n        .stat-label {\r\n            color: rgba(255, 255, 255, 0.6);\r\n            font-size: 0.85rem;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .stat-footer {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            padding-top: 20px;\r\n            border-top: 1px solid rgba(138, 43, 226, 0.3);\r\n        }\r\n\r\n        .view-details-btn {\r\n            background: transparent;\r\n            border: 2px solid #8a2be2;\r\n            color: #fff;\r\n            padding: 10px 25px;\r\n            border-radius: 50px;\r\n            font-size: 0.9rem;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n        }\r\n\r\n        .view-details-btn:hover {\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            border-color: #ff1493;\r\n            transform: translateX(5px);\r\n        }\r\n\r\n        .view-details-btn svg {\r\n            width: 14px;\r\n            height: 14px;\r\n            fill: currentColor;\r\n        }\r\n\r\n        \/* Modal *\/\r\n        .modal {\r\n            display: none;\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0, 0, 0, 0.8);\r\n            z-index: 1000;\r\n            padding: 20px;\r\n            overflow-y: auto;\r\n            animation: fadeIn 0.3s;\r\n        }\r\n\r\n        .modal.active {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        @keyframes fadeIn {\r\n            from { opacity: 0; }\r\n            to { opacity: 1; }\r\n        }\r\n\r\n        .modal-content {\r\n            background: linear-gradient(145deg, #2d1b4e, #1a0b2e);\r\n            border: 2px solid rgba(138, 43, 226, 0.5);\r\n            border-radius: 25px;\r\n            max-width: 800px;\r\n            width: 100%;\r\n            max-height: 90vh;\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n            animation: slideUp 0.3s;\r\n        }\r\n\r\n        @keyframes slideUp {\r\n            from { \r\n                opacity: 0;\r\n                transform: translateY(50px);\r\n            }\r\n            to { \r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        .modal-header {\r\n            background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(255, 20, 147, 0.3));\r\n            padding: 30px;\r\n            border-bottom: 2px solid rgba(138, 43, 226, 0.4);\r\n            position: relative;\r\n        }\r\n\r\n        .modal-title {\r\n            color: #fff;\r\n            font-size: 2rem;\r\n            font-weight: 700;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .modal-subtitle {\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .modal-close-btn {\r\n            position: absolute;\r\n            top: 20px;\r\n            right: 20px;\r\n            width: 40px;\r\n            height: 40px;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            border: 2px solid rgba(255, 255, 255, 0.3);\r\n            border-radius: 50%;\r\n            color: #fff;\r\n            font-size: 1.5rem;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: all 0.3s;\r\n        }\r\n\r\n        .modal-close-btn:hover {\r\n            background: rgba(255, 20, 147, 0.3);\r\n            border-color: #ff1493;\r\n            transform: rotate(90deg);\r\n        }\r\n\r\n        .modal-body {\r\n            padding: 30px;\r\n            overflow-y: auto;\r\n            flex: 1;\r\n        }\r\n\r\n        .detail-list {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 15px;\r\n        }\r\n\r\n        .detail-item {\r\n            background: linear-gradient(145deg, rgba(138, 43, 226, 0.1), rgba(75, 0, 130, 0.1));\r\n            border: 1px solid rgba(138, 43, 226, 0.3);\r\n            border-radius: 12px;\r\n            padding: 20px;\r\n            transition: all 0.3s;\r\n        }\r\n\r\n        .detail-item:hover {\r\n            background: linear-gradient(145deg, rgba(138, 43, 226, 0.2), rgba(75, 0, 130, 0.2));\r\n            border-color: #ff1493;\r\n            transform: translateX(5px);\r\n        }\r\n\r\n        .detail-row {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .detail-row:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n\r\n        .detail-label {\r\n            color: rgba(255, 255, 255, 0.7);\r\n            font-size: 0.9rem;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .detail-value {\r\n            color: #fff;\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .dashboard-title {\r\n                font-size: 2rem;\r\n            }\r\n\r\n            .stats-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .stat-value {\r\n                font-size: 2.5rem;\r\n            }\r\n\r\n            .modal-title {\r\n                font-size: 1.5rem;\r\n            }\r\n        }\r\n\r\n        \/* Scrollbar *\/\r\n        .modal-body::-webkit-scrollbar {\r\n            width: 8px;\r\n        }\r\n\r\n        .modal-body::-webkit-scrollbar-track {\r\n            background: rgba(138, 43, 226, 0.1);\r\n        }\r\n\r\n        .modal-body::-webkit-scrollbar-thumb {\r\n            background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n            border-radius: 10px;\r\n        }\r\n\r\n        \/* Floating particles *\/\r\n        @keyframes dashboard-float {\r\n            0%, 100% { transform: translateY(0) rotate(0deg); }\r\n            50% { transform: translateY(-20px) rotate(180deg); }\r\n        }\r\n\r\n        .dashboard-particle {\r\n            position: fixed;\r\n            width: 4px;\r\n            height: 4px;\r\n            background: rgba(138, 43, 226, 0.4);\r\n            border-radius: 50%;\r\n            pointer-events: none;\r\n            animation: dashboard-float 6s infinite ease-in-out;\r\n            z-index: 1;\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"dashboard-container\">\r\n        <div class=\"dashboard-header\">\r\n            \r\n            <p class=\"dashboard-subtitle\">OVERVIEW<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"stats-grid\" id=\"statsGrid\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Modal -->\r\n    <div class=\"modal\" id=\"detailsModal\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <button class=\"modal-close-btn\" onclick=\"closeModal()\">\u00d7<\/button>\r\n                <h2 class=\"modal-title\" id=\"modalTitle\"><\/h2>\r\n                <p class=\"modal-subtitle\" id=\"modalSubtitle\"><\/p>\r\n            <\/div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"detail-list\" id=\"detailsList\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Dashboard data\r\n        const dashboardStats = [\r\n            {\r\n                icon: '<path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/>',\r\n                badge: \"Name\",\r\n                title: \"Category 1\",\r\n                value: \"2,450\",\r\n                label: \"Total Records\",\r\n                details: [\r\n                    { label: \"Detail 1\", value: \"850\" },\r\n                    { label: \"Detail 2\", value: \"620\" },\r\n                    { label: \"Detail 3\", value: \"480\" },\r\n                    { label: \"Detail 4\", value: \"500\" }\r\n                ]\r\n            },\r\n            {\r\n                icon: '<path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"\/>',\r\n                badge: \"Name\",\r\n                title: \"Category 2\",\r\n                value: \"1,875\",\r\n                label: \"Total Entries\",\r\n                details: [\r\n                    { label: \"Item 1\", value: \"425\" },\r\n                    { label: \"Item 2\", value: \"580\" },\r\n                    { label: \"Item 3\", value: \"370\" },\r\n                    { label: \"Item 4\", value: \"500\" }\r\n                ]\r\n            },\r\n            {\r\n                icon: '<path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V8.3l7-3.11v7.8z\"\/>',\r\n                badge: \"Name\",\r\n                title: \"Category 3\",\r\n                value: \"3,240\",\r\n                label: \"Registered\",\r\n                details: [\r\n                    { label: \"Name 1\", value: \"920\" },\r\n                    { label: \"Name 2\", value: \"785\" },\r\n                    { label: \"Name 3\", value: \"650\" },\r\n                    { label: \"Name 4\", value: \"885\" }\r\n                ]\r\n            },\r\n            {\r\n                icon: '<path d=\"M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z\"\/>',\r\n                badge: \"Name\",\r\n                title: \"Category 4\",\r\n                value: \"890\",\r\n                label: \"Active Members\",\r\n                details: [\r\n                    { label: \"Type 1\", value: \"245\" },\r\n                    { label: \"Type 2\", value: \"310\" },\r\n                    { label: \"Type 3\", value: \"185\" },\r\n                    { label: \"Type 4\", value: \"150\" }\r\n                ]\r\n            },\r\n            {\r\n                icon: '<path d=\"M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z\"\/>',\r\n                badge: \"Name\",\r\n                title: \"Category 5\",\r\n                value: \"5,620\",\r\n                label: \"Total Count\",\r\n                details: [\r\n                    { label: \"Field 1\", value: \"1,420\" },\r\n                    { label: \"Field 2\", value: \"1,680\" },\r\n                    { label: \"Field 3\", value: \"1,290\" },\r\n                    { label: \"Field 4\", value: \"1,230\" }\r\n                ]\r\n            },\r\n            {\r\n                icon: '<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/>',\r\n                badge: \"Name\",\r\n                title: \"Category 6\",\r\n                value: \"4,100\",\r\n                label: \"Completed\",\r\n                details: [\r\n                    { label: \"Section 1\", value: \"1,050\" },\r\n                    { label: \"Section 2\", value: \"980\" },\r\n                    { label: \"Section 3\", value: \"1,120\" },\r\n                    { label: \"Section 4\", value: \"950\" }\r\n                ]\r\n            },\r\n\t\t\t{\r\n                icon: '<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/>',\r\n                badge: \"Name\",\r\n                title: \"Category 7\",\r\n                value: \"342\",\r\n                label: \"Completed\",\r\n                details: [\r\n                    { label: \"Section 1\", value: \"1,050\" },\r\n                    { label: \"Section 2\", value: \"980\" },\r\n                    { label: \"Section 3\", value: \"1,120\" },\r\n                    { label: \"Section 4\", value: \"950\" }\r\n                ]\r\n            },\r\n\t\t\t{\r\n                icon: '<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/>',\r\n                badge: \"Name\",\r\n                title: \"Category 8\",\r\n                value: \"108\",\r\n                label: \"Completed\",\r\n                details: [\r\n                    { label: \"Section 1\", value: \"1,050\" },\r\n                    { label: \"Section 2\", value: \"980\" },\r\n                    { label: \"Section 3\", value: \"1,120\" },\r\n                    { label: \"Section 4\", value: \"950\" }\r\n                ]\r\n            },\r\n\t\t\t{\r\n                icon: '<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/>',\r\n                badge: \"Name\",\r\n                title: \"Category 9\",\r\n                value: \"856\",\r\n                label: \"Completed\",\r\n                details: [\r\n                    { label: \"Section 1\", value: \"1,050\" },\r\n                    { label: \"Section 2\", value: \"980\" },\r\n                    { label: \"Section 3\", value: \"1,120\" },\r\n                    { label: \"Section 4\", value: \"950\" }\r\n                ]\r\n            }\r\n        ];\r\n\r\n        \/\/ Render stats\r\n        function renderStats() {\r\n            const grid = document.getElementById('statsGrid');\r\n            \r\n            dashboardStats.forEach((stat, index) => {\r\n                const statCard = document.createElement('div');\r\n                statCard.className = 'stat-card';\r\n                statCard.onclick = () => openModal(index);\r\n                \r\n                statCard.innerHTML = `\r\n                    <div class=\"stat-card-header\">\r\n                        <div class=\"stat-icon\">\r\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                                ${stat.icon}\r\n                            <\/svg>\r\n                        <\/div>\r\n                        <div class=\"stat-badge\">${stat.badge}<\/div>\r\n                    <\/div>\r\n                    <div class=\"stat-title\">${stat.title}<\/div>\r\n                    <div class=\"stat-value\">${stat.value}<\/div>\r\n                    <div class=\"stat-label\">${stat.label}<\/div>\r\n                    <div class=\"stat-footer\">\r\n                        <button class=\"view-details-btn\">\r\n                            View Details\r\n                            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                                <path d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\"\/>\r\n                            <\/svg>\r\n                        <\/button>\r\n                    <\/div>\r\n                `;\r\n                \r\n                grid.appendChild(statCard);\r\n            });\r\n        }\r\n\r\n        \/\/ Open modal\r\n        function openModal(index) {\r\n            const stat = dashboardStats[index];\r\n            \r\n            document.getElementById('modalTitle').textContent = stat.title;\r\n            document.getElementById('modalSubtitle').textContent = `${stat.value} ${stat.label}`;\r\n            \r\n            const detailsList = document.getElementById('detailsList');\r\n            detailsList.innerHTML = '';\r\n            \r\n            stat.details.forEach(detail => {\r\n                const detailItem = document.createElement('div');\r\n                detailItem.className = 'detail-item';\r\n                detailItem.innerHTML = `\r\n                    <div class=\"detail-row\">\r\n                        <span class=\"detail-label\">${detail.label}<\/span>\r\n                        <span class=\"detail-value\">${detail.value}<\/span>\r\n                    <\/div>\r\n                `;\r\n                detailsList.appendChild(detailItem);\r\n            });\r\n            \r\n            document.getElementById('detailsModal').classList.add('active');\r\n            document.body.style.overflow = 'hidden';\r\n        }\r\n\r\n        \/\/ Close modal\r\n        function closeModal() {\r\n            document.getElementById('detailsModal').classList.remove('active');\r\n            document.body.style.overflow = 'auto';\r\n        }\r\n\r\n        \/\/ Close on outside click\r\n        document.getElementById('detailsModal').addEventListener('click', function(e) {\r\n            if (e.target === this) {\r\n                closeModal();\r\n            }\r\n        });\r\n\r\n        \/\/ Close on Escape key\r\n        document.addEventListener('keydown', function(e) {\r\n            if (e.key === 'Escape') {\r\n                closeModal();\r\n            }\r\n        });\r\n\r\n        \/\/ Create floating particles\r\n        function createParticles() {\r\n            for (let i = 0; i < 20; i++) {\r\n                const particle = document.createElement('div');\r\n                particle.className = 'dashboard-particle';\r\n                particle.style.left = Math.random() * 100 + '%';\r\n                particle.style.top = Math.random() * 100 + '%';\r\n                particle.style.animationDelay = Math.random() * 6 + 's';\r\n                particle.style.animationDuration = (Math.random() * 4 + 4) + 's';\r\n                document.body.appendChild(particle);\r\n            }\r\n        }\r\n\r\n        \/\/ Initialize\r\n        renderStats();\r\n        createParticles();\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Master Dashboard OVERVIEW \u00d7<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20848","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages\/20848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/comments?post=20848"}],"version-history":[{"count":0,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages\/20848\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/media?parent=20848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}