{"id":12171,"date":"2025-08-19T15:54:34","date_gmt":"2025-08-19T12:54:34","guid":{"rendered":"https:\/\/kth.sa\/?page_id=12171"},"modified":"2025-11-21T10:14:44","modified_gmt":"2025-11-21T07:14:44","slug":"sales-dashboard","status":"publish","type":"page","link":"https:\/\/kth.sa\/en\/sales-dashboard\/","title":{"rendered":"Sales Dashboard"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n Course Performance Report<\/title>\n <!-- Load Tailwind CSS -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <!-- Load Lucide icons -->\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <!-- Configure Tailwind for a clean, vibrant palette -->\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n 'primary-blue': '#1e40af', \/* Dark Blue for emphasis *\/\n 'secondary-green': '#10b981', \/* Primary positive accent *\/\n 'tertiary-red': '#ef4444', \/* Negative accent *\/\n 'bg-light': '#f9fafb',\n 'card-bg': '#ffffff',\n 'chart-rev': '#3b82f6', \/* Blue for Revenue *\/\n 'chart-cost': '#f59e0b', \/* Amber for Costs *\/\n 'chart-mktg': '#f87171', \/* Light Red for Marketing *\/\n 'chart-dir': '#10b981', \/* Green for Direct Cost *\/\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n <style>\n \/* Custom progress bar styles *\/\n .progress-bar-container {\n height: 8px;\n border-radius: 4px;\n background-color: #e5e7eb;\n overflow: hidden;\n }\n .progress-bar-fill {\n height: 100%;\n border-radius: 4px;\n transition: width 0.5s ease-in-out;\n }\n\n \/* Chart utility for responsive height *\/\n .chart-container {\n height: 250px;\n }\n\n \/* Hover effect for cards *\/\n .dashboard-card {\n transition: all 0.2s ease-in-out;\n }\n .dashboard-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n\n \/* Radial progress mimic (for high-level metrics) *\/\n .radial-progress {\n width: 100px;\n height: 100px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: \n radial-gradient(closest-side, white 80%, transparent 81%),\n conic-gradient(var(--fill-color) calc(var(--progress) * 1%), #e5e7eb 0);\n }\n <\/style>\n<\/head>\n<body class=\"bg-bg-light p-6 font-sans\">\n\n <!-- Header & Title -->\n <header class=\"mb-8\">\n <div class=\"flex justify-between items-center\">\n <h1 class=\"text-3xl font-extrabold text-gray-900 flex items-center space-x-2\">\n <i data-lucide=\"line-chart\" class=\"w-8 h-8 text-primary-blue\"><\/i>\n <span>Annual Course Performance Report<\/span>\n <\/h1>\n <div class=\"flex items-center space-x-4\">\n <button class=\"flex items-center space-x-2 text-gray-600 hover:text-primary-blue transition\">\n <i data-lucide=\"calendar\" class=\"w-5 h-5\"><\/i>\n <span class=\"text-sm font-medium\">Full Year 2025<\/span>\n <\/button>\n <button class=\"bg-primary-blue text-white px-4 py-2 rounded-lg text-sm font-medium shadow-lg hover:bg-blue-800 transition\">\n <i data-lucide=\"download\" class=\"w-4 h-4 inline mr-2\"><\/i>\n Export PDF\n <\/button>\n <\/div>\n <\/div>\n <p class=\"text-gray-500 mt-1\">Detailed breakdown of enrollment, revenue, and profitability across all course offerings.<\/p>\n <\/header>\n\n <!-- Main Metric Cards (Row 1: Focus on Total Financials) -->\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-6 mb-8\">\n\n <!-- Card 1: Total Revenue -->\n <div class=\"dashboard-card bg-card-bg p-6 rounded-xl shadow-md border-t-4 border-chart-rev\">\n <div class=\"flex justify-between items-start\">\n <div>\n <p class=\"text-sm font-medium text-gray-500 uppercase\">Total Revenue (SAR)<\/p>\n <h2 class=\"text-3xl font-extrabold text-gray-900 mt-1\">43,113<\/h2>\n <\/div>\n <div class=\"p-2 rounded-full bg-chart-rev\/10 text-chart-rev\">\n <i data-lucide=\"wallet\" class=\"w-6 h-6\"><\/i>\n <\/div>\n <\/div>\n <p class=\"text-xs mt-3 text-gray-600\">Avg. Revenue per Course: SAR 8,622<\/p>\n <\/div>\n\n <!-- Card 2: Total Net Profit -->\n <div class=\"dashboard-card bg-card-bg p-6 rounded-xl shadow-md border-t-4 border-secondary-green\">\n <div class=\"flex justify-between items-start\">\n <div>\n <p class=\"text-sm font-medium text-gray-500 uppercase\">Total Net Profit (SAR)<\/p>\n <!-- 4,403 SAR -->\n <h2 class=\"text-3xl font-extrabold text-secondary-green mt-1\">4,403<\/h2>\n <\/div>\n <div class=\"p-2 rounded-full bg-secondary-green\/10 text-secondary-green\">\n <i data-lucide=\"trending-up\" class=\"w-6 h-6\"><\/i>\n <\/div>\n <\/div>\n <p class=\"text-xs mt-3 text-gray-600\">Net Profit Margin: 10.2%<\/p>\n <\/div>\n\n <!-- Card 3: Total Costs -->\n <div class=\"dashboard-card bg-card-bg p-6 rounded-xl shadow-md border-t-4 border-chart-cost\">\n <div class=\"flex justify-between items-start\">\n <div>\n <p class=\"text-sm font-medium text-gray-500 uppercase\">Total Costs (SAR)<\/p>\n <!-- 38,710 SAR -->\n <h2 class=\"text-3xl font-extrabold text-gray-900 mt-1\">38,710<\/h2>\n <\/div>\n <div class=\"p-2 rounded-full bg-chart-cost\/10 text-chart-cost\">\n <i data-lucide=\"shield-half\" class=\"w-6 h-6\"><\/i>\n <\/div>\n <\/div>\n <p class=\"text-xs mt-3 text-gray-600\">Direct: 17,500 | Marketing: 21,159<\/p>\n <\/div>\n\n <!-- Card 4: Total Enrollment -->\n <div class=\"dashboard-card bg-card-bg p-6 rounded-xl shadow-md border-t-4 border-primary-blue\">\n <div class=\"flex justify-between items-start\">\n <div>\n <p class=\"text-sm font-medium text-gray-500 uppercase\">Total Enrollment<\/p>\n <!-- 64 Students -->\n <h2 class=\"text-3xl font-extrabold text-gray-900 mt-1\">64<\/h2>\n <\/div>\n <div class=\"p-2 rounded-full bg-primary-blue\/10 text-primary-blue\">\n <i data-lucide=\"users\" class=\"w-6 h-6\"><\/i>\n <\/div>\n <\/div>\n <p class=\"text-xs mt-3 text-gray-600\">Avg. Students per Course: 12.8<\/p>\n <\/div>\n <\/div>\n\n <!-- Charts and Tables (Row 2: Detailed Course Breakdown) -->\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n\n <!-- Widget 5: Course Profitability Ranking (Table) -->\n <div class=\"dashboard-card bg-card-bg p-6 rounded-xl shadow-md lg:col-span-2\">\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4\">Course Profitability Breakdown<\/h3>\n <div class=\"overflow-x-auto\">\n <table class=\"min-w-full divide-y divide-gray-200\">\n <thead class=\"bg-bg-light\">\n <tr>\n <th scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Course Name<\/th>\n <th scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Enrollment<\/th>\n <th scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Revenue (SAR)<\/th>\n <th scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Cost (SAR)<\/th>\n <th scope=\"col\" class=\"px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider\">Net Profit (SAR)<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"divide-y divide-gray-200\">\n <!-- Data Analysis -->\n <tr>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">Data Analysis<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">13<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">13,888<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">9,551<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-right font-semibold text-secondary-green\">+4,337<\/td>\n <\/tr>\n <!-- PMP+FMP -->\n <tr>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">PMP + FMP<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">23<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">17,982<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">15,856<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-right font-semibold text-secondary-green\">+2,126<\/td>\n <\/tr>\n <!-- PMP+RMP -->\n <tr>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">PMP + RMP<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">1<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">1,599<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">1,599<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-right font-medium text-gray-700\">0<\/td>\n <\/tr>\n <!-- AI Tools -->\n <tr class=\"bg-red-50\/50\">\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">AI Tools<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">21<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">6,650<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">11,723<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-right font-semibold text-tertiary-red\">-5,073<\/td>\n <\/tr>\n <!-- Personal Branding -->\n <tr class=\"bg-red-50\/50\">\n <td class=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">Personal Branding<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">6<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">2,394<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">9,280<\/td>\n <td class=\"px-6 py-4 whitespace-nowrap text-sm text-right font-semibold text-tertiary-red\">-6,886<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <!-- Widget 6: Cost Allocation (Pie Chart Mockup) -->\n <div class=\"dashboard-card bg-card-bg p-6 rounded-xl shadow-md lg:col-span-1\">\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4\">Total Cost Allocation<\/h3>\n <div class=\"chart-container flex flex-col items-center justify-center\">\n \n <!-- Total Cost: 38,710. Marketing: 21,159 (54.6%), Direct: 17,551 (45.4%) -->\n \n <!-- Radial Progress Chart Mockup (Total Cost divided into Direct and Marketing) -->\n <div class=\"radial-progress text-center mb-4\" \n style=\"--progress: 100; --fill-color: #f59e0b;\">\n <div class=\"radial-progress\" \n style=\"--progress: 45.4; --fill-color: #10b981; width: 80px; height: 80px;\">\n <span class=\"text-xl font-bold text-gray-800\">100%<\/span>\n <\/div>\n <\/div>\n\n <p class=\"text-sm font-medium text-gray-600 mb-4\">SAR 38,710 Spent Annually<\/p>\n \n <!-- Legend -->\n <div class=\"space-y-2 w-full max-w-xs\">\n <div class=\"flex justify-between items-center text-sm\">\n <div class=\"flex items-center space-x-2\">\n <span class=\"w-3 h-3 rounded-full bg-chart-dir\"><\/span>\n <span class=\"text-gray-700\">Direct Costs<\/span>\n <\/div>\n <span class=\"font-semibold text-gray-900\">45.4%<\/span>\n <\/div>\n <div class=\"flex justify-between items-center text-sm\">\n <div class=\"flex items-center space-x-2\">\n <span class=\"w-3 h-3 rounded-full bg-chart-cost\"><\/span>\n <span class=\"text-gray-700\">Marketing Spend<\/span>\n <\/div>\n <span class=\"font-semibold text-gray-900\">54.6%<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Row 3: Performance Insights (Enrollment Efficiency) -->\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6\">\n \n <!-- Widget 7: Marketing Efficiency (Bar Chart Mockup) -->\n <div class=\"dashboard-card bg-card-bg p-6 rounded-xl shadow-md\">\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4\">Marketing Efficiency (Cost per Enrollment)<\/h3>\n \n <!-- Data: Cost per Enrollment (Mktg Spend \/ Enrollment) -->\n <!-- PMP+FMP: 7856 \/ 23 = 341.56 SAR -->\n <!-- P. Branding: 6980 \/ 6 = 1163.33 SAR -->\n <!-- AI Tools: 9323 \/ 21 = 443.95 SAR -->\n <!-- D. Analysis: 4751 \/ 13 = 365.46 SAR -->\n <!-- PMP+RMP: 1599 \/ 1 = 1599.00 SAR (Highest) -->\n\n <div class=\"chart-container flex flex-col justify-around\">\n <!-- PMP+RMP (Max Cost) -->\n <div class=\"flex items-center space-x-4\">\n <span class=\"w-28 text-sm text-gray-600\">PMP+RMP<\/span>\n <div class=\"progress-bar-container flex-1\">\n <div class=\"progress-bar-fill bg-tertiary-red\" style=\"width: 100%;\"><\/div>\n <\/div>\n <span class=\"w-20 text-right text-sm font-semibold text-tertiary-red\">1,599 SAR<\/span>\n <\/div>\n <!-- Personal Branding -->\n <div class=\"flex items-center space-x-4\">\n <span class=\"w-28 text-sm text-gray-600\">P. Branding<\/span>\n <div class=\"progress-bar-container flex-1\">\n <div class=\"progress-bar-fill bg-tertiary-red\/70\" style=\"width: 72.8%;\"><\/div>\n <\/div>\n <span class=\"w-20 text-right text-sm font-semibold text-tertiary-red\/70\">1,163 SAR<\/span>\n <\/div>\n <!-- AI Tools -->\n <div class=\"flex items-center space-x-4\">\n <span class=\"w-28 text-sm text-gray-600\">AI Tools<\/span>\n <div class=\"progress-bar-container flex-1\">\n <div class=\"progress-bar-fill bg-primary-blue\/70\" style=\"width: 27.8%;\"><\/div>\n <\/div>\n <span class=\"w-20 text-right text-sm font-semibold text-primary-blue\/70\">444 SAR<\/span>\n <\/div>\n <!-- Data Analysis -->\n <div class=\"flex items-center space-x-4\">\n <span class=\"w-28 text-sm text-gray-600\">Data Analysis<\/span>\n <div class=\"progress-bar-container flex-1\">\n <div class=\"progress-bar-fill bg-secondary-green\/80\" style=\"width: 22.8%;\"><\/div>\n <\/div>\n <span class=\"w-20 text-right text-sm font-semibold text-secondary-green\/80\">365 SAR<\/span>\n <\/div>\n <!-- PMP+FMP (Lowest Cost) -->\n <div class=\"flex items-center space-x-4\">\n <span class=\"w-28 text-sm text-gray-600\">PMP+FMP<\/span>\n <div class=\"progress-bar-container flex-1\">\n <div class=\"progress-bar-fill bg-secondary-green\" style=\"width: 21.3%;\"><\/div>\n <\/div>\n <span class=\"w-20 text-right text-sm font-semibold text-secondary-green\">342 SAR<\/span>\n <\/div>\n <\/div>\n <p class=\"text-xs text-gray-500 mt-4 italic\">Lower cost per enrollment indicates more efficient marketing spend.<\/p>\n <\/div>\n\n <!-- Widget 8: Profit vs. Loss Courses (List Card) -->\n <div class=\"dashboard-card bg-card-bg p-6 rounded-xl shadow-md\">\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4\">Quick Profitability Status<\/h3>\n <div class=\"flex justify-between items-start mb-6\">\n <div class=\"text-center\">\n <p class=\"text-5xl font-extrabold text-secondary-green\">2<\/p>\n <p class=\"text-lg text-gray-600 mt-1\">Courses in Profit<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-5xl font-extrabold text-tertiary-red\">2<\/p>\n <p class=\"text-lg text-gray-600 mt-1\">Courses in Loss<\/p>\n <\/div>\n <div class=\"text-center\">\n <p class=\"text-5xl font-extrabold text-gray-500\">1<\/p>\n <p class=\"text-lg text-gray-600 mt-1\">Break Even<\/p>\n <\/div>\n <\/div>\n \n <ul class=\"space-y-3\">\n <li class=\"flex justify-between items-center border-b pb-2\">\n <div class=\"flex items-center space-x-3\">\n <i data-lucide=\"check-circle\" class=\"w-5 h-5 text-secondary-green\"><\/i>\n <span class=\"font-medium\">Data Analysis<\/span>\n <\/div>\n <span class=\"text-sm text-secondary-green font-bold\">+4,337 SAR<\/span>\n <\/li>\n <li class=\"flex justify-between items-center border-b pb-2\">\n <div class=\"flex items-center space-x-3\">\n <i data-lucide=\"check-circle\" class=\"w-5 h-5 text-secondary-green\"><\/i>\n <span class=\"font-medium\">PMP + FMP<\/span>\n <\/div>\n <span class=\"text-sm text-secondary-green font-bold\">+2,126 SAR<\/span>\n <\/li>\n <li class=\"flex justify-between items-center border-b pb-2\">\n <div class=\"flex items-center space-x-3\">\n <i data-lucide=\"minus-circle\" class=\"w-5 h-5 text-tertiary-red\"><\/i>\n <span class=\"font-medium\">AI Tools<\/span>\n <\/div>\n <span class=\"text-sm text-tertiary-red font-bold\">-5,073 SAR<\/span>\n <\/li>\n <li class=\"flex justify-between items-center border-b pb-2\">\n <div class=\"flex items-center space-x-3\">\n <i data-lucide=\"minus-circle\" class=\"w-5 h-5 text-tertiary-red\"><\/i>\n <span class=\"font-medium\">Personal Branding<\/span>\n <\/div>\n <span class=\"text-sm text-tertiary-red font-bold\">-6,886 SAR<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Initialize Lucide icons after they are loaded\n document.addEventListener('DOMContentLoaded', () => {\n lucide.createIcons();\n });\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Course Performance Report Annual Course Performance Report Full Year 2025…<\/p>","protected":false},"author":60,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"googlesitekit_rrm_CAow9NjADA:productID":"","footnotes":""},"class_list":["post-12171","page","type-page","status-publish","hentry","post-no-thumbnail"],"_links":{"self":[{"href":"https:\/\/kth.sa\/en\/wp-json\/wp\/v2\/pages\/12171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kth.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kth.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kth.sa\/en\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/kth.sa\/en\/wp-json\/wp\/v2\/comments?post=12171"}],"version-history":[{"count":0,"href":"https:\/\/kth.sa\/en\/wp-json\/wp\/v2\/pages\/12171\/revisions"}],"wp:attachment":[{"href":"https:\/\/kth.sa\/en\/wp-json\/wp\/v2\/media?parent=12171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}