{"id":3254,"date":"2025-07-21T04:35:32","date_gmt":"2025-07-21T02:35:32","guid":{"rendered":"https:\/\/j-cred.co.za\/?page_id=3254"},"modified":"2025-07-21T11:44:33","modified_gmt":"2025-07-21T09:44:33","slug":"cos","status":"publish","type":"page","link":"https:\/\/j-cred.co.za\/zh\/cos\/","title":{"rendered":"CoS Portal"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\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
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\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>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n NERSA Cost of Supply Framework Explorer<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- Firebase SDK -->\r\n <script type=\"module\">\r\n \/\/ These variables are placeholders and will be provided by the environment at runtime.\r\n const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : { apiKey: \"your-api-key\", authDomain: \"your-auth-domain\", projectId: \"your-project-id\" };\r\n const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;\r\n const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';\r\n\r\n \/\/ Import necessary Firebase modules\r\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-app.js\";\r\n import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged, setPersistence, inMemoryPersistence } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-auth.js\";\r\n import { getFirestore, collection, addDoc, onSnapshot, query, getDocs, setLogLevel } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\r\n\r\n \/\/ Initialize Firebase\r\n const app = initializeApp(firebaseConfig);\r\n const auth = getAuth(app);\r\n const db = getFirestore(app);\r\n \r\n \/\/ Enable detailed logging for Firestore for easier debugging\r\n setLogLevel('debug');\r\n\r\n \/\/ Expose Firebase services to the global window object so the main script can access them\r\n window.firebaseServices = { auth, db, appId };\r\n window.authUtils = { signInAnonymously, signInWithCustomToken, onAuthStateChanged, setPersistence, inMemoryPersistence, initialAuthToken };\r\n window.firestoreUtils = { collection, addDoc, onSnapshot, query, getDocs };\r\n <\/script>\r\n\r\n <style>\r\n \/* General body styling *\/\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #F8F8F8;\r\n color: #333;\r\n }\r\n \/* Ensure html and body take full height for sticky footer if needed *\/\r\n html, body {\r\n height: 100%;\r\n scroll-padding-top: 5rem; \/* Offset for sticky header *\/\r\n }\r\n \/* Chart container styling *\/\r\n .chart-container {\r\n position: relative; width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; height: 300px; max-height: 400px;\r\n }\r\n @media (min-width: 768px) { .chart-container { height: 350px; } }\r\n \/* Navigation link underline animation *\/\r\n .nav-link { transition: all 0.3s ease; position: relative; }\r\n .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: #2563EB; transition: width 0.3s ease; }\r\n .nav-link:hover::after, .nav-link.active::after { width: 100%; }\r\n .nav-link.active { color: #2563EB; }\r\n \/* Interactive framework step styling *\/\r\n .framework-step { transition: all 0.3s ease; cursor: pointer; border: 1px solid #E5E7EB; }\r\n .framework-step.active { background-color: #3B82F6; color: white; border-color: #2563EB; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }\r\n \/* Focus style for accessibility on range inputs *\/\r\n input[type=\"range\"]:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }\r\n \/* Dropdown menu styling *\/\r\n .dropdown-content { display: none; position: absolute; background-color: #ffffff; min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 10; border-radius: 0.5rem; overflow: hidden; top: 100%; left: 0; transform: translateY(0.5rem); opacity: 0; transition: transform 0.2s ease-out, opacity 0.2s ease-out; pointer-events: none; }\r\n .dropdown:hover .dropdown-content { display: block; opacity: 1; transform: translateY(0); pointer-events: all; }\r\n .dropdown-content a { color: #333; padding: 12px 16px; text-decoration: none; display: block; text-align: left; transition: background-color 0.2s ease, color 0.2s ease; }\r\n .dropdown-content a:hover { background-color: #E0E7FF; color: #3B82F6; }\r\n \/* Modal styling *\/\r\n .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }\r\n .modal-overlay.show { opacity: 1; visibility: visible; }\r\n .modal-content { background-color: #fff; padding: 2rem; border-radius: 0.75rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); max-width: 400px; width: 90%; transform: translateY(-20px); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: 0; position: relative; }\r\n .modal-overlay.show .modal-content { transform: translateY(0); opacity: 1; }\r\n .modal-close-btn { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #6B7280; transition: color 0.2s ease; }\r\n .modal-close-btn:hover { color: #1F2937; }\r\n \/* Dashboard tab styling *\/\r\n .tab-button { \r\n padding: 0.75rem 1.25rem; \r\n border-radius: 0.5rem; \r\n transition: all 0.3s ease; \r\n border-left: 4px solid transparent; \r\n text-align: left;\r\n }\r\n .tab-button.active { \r\n background-color: #E0E7FF; \r\n color: #3B82F6; \r\n font-weight: 600; \r\n border-color: #3B82F6;\r\n }\r\n .tab-button:hover:not(.active) { \r\n background-color: #F3F4F6; \r\n }\r\n \/* Collapsible section styling *\/\r\n .collapsible-header { cursor: pointer; padding: 0.75rem 1rem; background-color: #EBF4FF; border-radius: 0.5rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.2s ease; }\r\n .collapsible-header:hover { background-color: #D1E7FF; }\r\n .collapsible-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; padding-left: 1rem; }\r\n .collapsible-content.open { max-height: 1000px; transition: max-height 0.5s ease-in; }\r\n .arrow-icon { transition: transform 0.3s ease; }\r\n .collapsible-header.open .arrow-icon { transform: rotate(90deg); }\r\n \/* CoS Form Modal styling *\/\r\n .cos-form-modal-content { background-color: #fff; padding: 2rem; border-radius: 0.75rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); max-width: 900px; width: 90%; transform: translateY(-20px); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; opacity: 0; position: relative; max-height: 90vh; overflow-y: auto; }\r\n .modal-overlay.show .cos-form-modal-content { transform: translateY(0); opacity: 1; }\r\n .form-step { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; opacity: 1; transform: translateY(0); }\r\n .form-step.hidden { opacity: 0; transform: translateY(20px); position: absolute; left: -9999px; }\r\n \/* Hide number input spinners *\/\r\n input[type=\"number\"]::-webkit-inner-spin-button, input[type=\"number\"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }\r\n input[type=\"number\"] { -moz-appearance: textfield; }\r\n \/* Validation and message styling *\/\r\n .border-red-500 { border-color: #EF4444; }\r\n .bg-red-50 { background-color: #FEF2F2; }\r\n .text-red-600 { color: #DC2626; }\r\n .bg-green-50 { background-color: #F0FDF4; }\r\n .text-green-600 { color: #16A34A; }\r\n .helper-text { font-size: 0.75rem; color: #6B7280; margin-top: 0.25rem; }\r\n \/* Stepper Styles *\/\r\n .stepper-container { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2rem; }\r\n .step-item { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }\r\n .step-circle { width: 32px; height: 32px; border-radius: 50%; background-color: #E5E7EB; color: #6B7280; display: flex; align-items: center; justify-content: center; font-weight: bold; transition: all 0.3s ease; border: 2px solid transparent; }\r\n .step-item.active .step-circle { background-color: #3B82F6; color: white; border-color: #2563EB; }\r\n .step-item.completed .step-circle { background-color: #16A34A; color: white; }\r\n .step-label { font-size: 0.75rem; margin-top: 0.5rem; text-align: center; color: #6B7280; font-weight: 500; }\r\n .step-item.active .step-label, .step-item.completed .step-label { color: #1F2937; font-weight: 600; }\r\n .step-connector { flex: 1; height: 2px; background-color: #E5E7EB; margin: 15px -1rem 0; transition: background-color 0.3s ease; }\r\n .step-item.completed + .step-connector { background-color: #16A34A; }\r\n \/* Signature Pad *\/\r\n #signature-pad { border: 2px dashed #D1D5DB; border-radius: 0.5rem; cursor: crosshair; }\r\n \/* Tooltip Styles *\/\r\n .tooltip-container { position: relative; display: inline-block; margin-left: 8px; }\r\n .tooltip-icon { cursor: pointer; color: #9CA3AF; }\r\n .tooltip-text { visibility: hidden; width: 250px; background-color: #1F2937; color: #fff; text-align: left; border-radius: 6px; padding: 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -125px; opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; line-height: 1.25; }\r\n .tooltip-text a { color: #60A5FA; text-decoration: underline; }\r\n .tooltip-container:hover .tooltip-text { visibility: visible; opacity: 1; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n <header class=\"bg-white shadow-md sticky top-0 z-50\">\r\n <nav class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-20\">\r\n <div class=\"flex-shrink-0\">\r\n <h1 class=\"text-2xl font-bold text-gray-800\">CoS Portal<\/h1>\r\n <\/div>\r\n <div class=\"hidden md:block\">\r\n <div class=\"ml-10 flex items-baseline space-x-6\">\r\n <div class=\"relative dropdown\">\r\n <button class=\"nav-link px-3 py-2 text-sm font-medium text-gray-700 flex items-center\">\r\n The Framework <span class=\"ml-1 text-xs\">▼<\/span>\r\n <\/button>\r\n <div class=\"dropdown-content\">\r\n <a href=\"#introduction\" class=\"nav-link px-3 py-2 text-sm font-medium text-gray-700\">Introduction<\/a>\r\n <a href=\"#framework\" data-step=\"1\" class=\"nav-link px-3 py-2 text-sm font-medium text-gray-700\">Framework Steps<\/a>\r\n <a href=\"#interactive-model\" class=\"nav-link px-3 py-2 text-sm font-medium text-gray-700\">Interactive Model<\/a>\r\n <a href=\"#resources\" class=\"nav-link px-3 py-2 text-sm font-medium text-gray-700\">Resources<\/a>\r\n <\/div>\r\n <\/div>\r\n <button id=\"login-portal-nav-link\" class=\"px-5 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-colors duration-200\">Login to Portal<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n <\/header>\r\n\r\n <main class=\"container mx-auto px-4 sm:px-6 lg:px-8 py-10 md:py-16\">\r\n <!-- Main Framework Content -->\r\n <div id=\"framework-explorer-content\">\r\n <section id=\"introduction\" class=\"scroll-mt-20 bg-white p-8 md:p-12 rounded-xl shadow-lg\">\r\n <div class=\"text-center\">\r\n <span class=\"text-base font-semibold text-blue-600\">For South African Municipalities<\/span>\r\n <p class=\"mt-6 max-w-3xl mx-auto text-lg leading-8 text-gray-700\">\r\n This application provides an interactive guide to the National Energy Regulator of South Africa (NERSA) Cost of Supply (CoS) framework, designed to help municipal officials develop fair, transparent, and cost-reflective electricity tariffs.\r\n <\/p>\r\n <\/div>\r\n <div class=\"mt-16 grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-300\">\r\n <h3 class=\"text-xl font-semibold text-gray-800 flex items-center\"><span class=\"mr-2 text-blue-500\">★<\/span>Economic Efficiency<\/h3>\r\n <p class=\"mt-2 text-gray-600\">Promotes tariffs that signal the true economic cost of providing electricity.<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-300\">\r\n <h3 class=\"text-xl font-semibold text-gray-800 flex items-center\"><span class=\"mr-2 text-blue-500\">✎<\/span>Equity and Fairness<\/h3>\r\n <p class=\"mt-2 text-gray-600\">Ensures customers pay their fair share, preventing cross-subsidies.<\/p>\r\n <\/div>\r\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-300\">\r\n <h3 class=\"text-xl font-semibold text-gray-800 flex items-center\"><span class=\"mr-2 text-blue-500\">💰<\/span>Financial Sustainability<\/h3>\r\n <p class=\"mt-2 text-gray-600\">Allows municipalities to recover costs and ensure long-term network viability.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <hr class=\"my-16 border-gray-300\">\r\n\r\n <section id=\"framework\" class=\"scroll-mt-20 bg-white p-8 md:p-12 rounded-xl shadow-lg\">\r\n <div class=\"text-center\">\r\n <h2 class=\"text-3xl font-bold tracking-tight text-gray-900\">The 5-Step Framework<\/h2>\r\n <p class=\"mt-4 max-w-2xl mx-auto text-lg text-gray-700\">\r\n Click on each step below to explore its objectives. This interactive diagram simplifies the process from raw financial data to final, cost-reflective tariffs.\r\n <\/p>\r\n <\/div>\r\n <div class=\"mt-12 flex flex-col lg:flex-row gap-8 items-start\">\r\n <div class=\"w-full lg:w-1\/3 space-y-2\">\r\n <div id=\"step-btn-1\" class=\"framework-step active p-4 rounded-lg\">\r\n <h4 class=\"font-bold text-lg\">Step 1: Unbundling of Costs<\/h4>\r\n <p class=\"text-sm\">Separate total costs into core electricity value chain functions.<\/p>\r\n <\/div>\r\n <div class=\"text-center text-2xl text-gray-400 font-bold\"> ↓ <\/div>\r\n <div id=\"step-btn-2\" class=\"framework-step p-4 rounded-lg\">\r\n <h4 class=\"font-bold text-lg\">Step 2: Functionalisation of Costs<\/h4>\r\n <p class=\"text-sm\">Break down distribution costs into network and retail activities.<\/p>\r\n <\/div>\r\n <div class=\"text-center text-2xl text-gray-400 font-bold\"> ↓ <\/div>\r\n <div id=\"step-btn-3\" class=\"framework-step p-4 rounded-lg\">\r\n <h4 class=\"font-bold text-lg\">Step 3: Classification of Costs<\/h4>\r\n <p class=\"text-sm\">Categorise costs by their primary driver (Energy, Demand, or Customer).<\/p>\r\n <\/div>\r\n <div class=\"text-center text-2xl text-gray-400 font-bold\"> ↓ <\/div>\r\n <div id=\"step-btn-4\" class=\"framework-step p-4 rounded-lg\">\r\n <h4 class=\"font-bold text-lg\">Step 4: Allocation of Costs<\/h4>\r\n <p class=\"text-sm\">Assign the classified costs to specific customer categories.<\/p>\r\n <\/div>\r\n <div class=\"text-center text-2xl text-gray-400 font-bold\"> ↓ <\/div>\r\n <div id=\"step-btn-5\" class=\"framework-step p-4 rounded-lg\">\r\n <h4 class=\"font-bold text-lg\">Step 5: Tariff Design<\/h4>\r\n <p class=\"text-sm\">Use the allocated costs to structure and set final tariffs.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full lg:w-2\/3\">\r\n <div id=\"step-content\" class=\"bg-gray-50 p-6 md:p-8 rounded-lg shadow-inner border border-gray-200 min-h-[400px]\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <hr class=\"my-16 border-gray-300\">\r\n\r\n <section id=\"interactive-model\" class=\"scroll-mt-20 bg-white p-8 md:p-12 rounded-xl shadow-lg\">\r\n <div class=\"text-center\">\r\n <h2 class=\"text-3xl font-bold tracking-tight text-gray-900\">Interactive Cost Allocation Model<\/h2>\r\n <p class=\"mt-4 max-w-3xl mx-auto text-lg text-gray-700\">\r\n Adjust the sliders to see how classifying costs impacts the final allocation to different customer classes, making the \"cause and effect\" of the framework clear.\r\n <\/p>\r\n <\/div>\r\n <div class=\"mt-12 bg-gray-50 p-6 md:p-8 rounded-lg shadow-inner border border-gray-200\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\r\n <div class=\"lg:col-span-1 space-y-6\">\r\n <div>\r\n <label for=\"total-cost\" class=\"block text-sm font-medium text-gray-700 mb-2\">Total Annual Network Cost (R million)<\/label>\r\n <input id=\"total-cost\" type=\"range\" min=\"10\" max=\"500\" value=\"100\" class=\"w-full\">\r\n <div class=\"text-center font-bold text-blue-600 mt-2 text-lg\">R <span id=\"total-cost-value\">100<\/span> M<\/div>\r\n <\/div>\r\n <div>\r\n <label for=\"demand-perc\" class=\"block text-sm font-medium text-gray-700 mb-2\">Demand-Related Cost (%)<\/label>\r\n <input id=\"demand-perc\" type=\"range\" min=\"0\" max=\"100\" value=\"60\" class=\"w-full\">\r\n <div class=\"text-center font-bold text-blue-600 mt-2 text-lg\"><span id=\"demand-perc-value\">60<\/span>%<\/div>\r\n <\/div>\r\n <div>\r\n <label for=\"energy-perc\" class=\"block text-sm font-medium text-gray-700 mb-2\">Energy-Related Cost (%)<\/label>\r\n <input id=\"energy-perc\" type=\"range\" min=\"0\" max=\"100\" value=\"30\" class=\"w-full\">\r\n <div class=\"text-center font-bold text-blue-600 mt-2 text-lg\"><span id=\"energy-perc-value\">30<\/span>%<\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">Customer-Related Cost (%)<\/label>\r\n <div class=\"w-full h-10 bg-gray-100 rounded-lg flex items-center justify-center border border-gray-200\">\r\n <span id=\"customer-perc-value\" class=\"font-bold text-blue-600 text-lg\">10%<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lg:col-span-2\">\r\n <div class=\"chart-container\">\r\n <canvas id=\"allocation-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <hr class=\"my-16 border-gray-300\">\r\n\r\n <section id=\"resources\" class=\"scroll-mt-20 bg-white p-8 md:p-12 rounded-xl shadow-lg\">\r\n <div class=\"text-center\">\r\n <h2 class=\"text-3xl font-bold tracking-tight text-gray-900\">Resources & Next Steps<\/h2>\r\n <p class=\"mt-4 max-w-2xl mx-auto text-lg text-gray-700\">\r\n Here is a simplified checklist of essential items and links to official resources to help your municipality get started on a Cost of Supply study.\r\n <\/p>\r\n <\/div>\r\n <div class=\"mt-12 grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-inner border border-gray-200\">\r\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4\">Data Requirements Checklist<\/h3>\r\n <ul class=\"mt-4 space-y-3 text-gray-700\">\r\n <li class=\"flex items-center\"><span class=\"text-green-600 mr-3 text-xl\">✓<\/span>Audited Financial Statements<\/li>\r\n <li class=\"flex items-center\"><span class=\"text-green-600 mr-3 text-xl\">✓<\/span>Fixed Asset Register (updated)<\/li>\r\n <li class=\"flex items-center\"><span class=\"text-green-600 mr-3 text-xl\">✓<\/span>Bulk purchase invoices<\/li>\r\n <li class=\"flex items-center\"><span class=\"text-green-600 mr-3 text-xl\">✓<\/span>Billed energy (kWh) and demand (kVA) data<\/li>\r\n <li class=\"flex items-center\"><span class=\"text-green-600 mr-3 text-xl\">✓<\/span>Customer numbers per tariff category<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-inner border border-gray-200 flex flex-col justify-center\">\r\n <h3 class=\"text-xl font-semibold text-gray-800 mb-4\">Official Documentation<\/h3>\r\n <p class=\"mt-4 text-gray-700\">For a complete understanding, refer to the official framework document provided by NERSA.<\/p>\r\n <a href=\"https:\/\/www.nersa.org.za\/files\/files\/2020\/09\/Cost-of-Supply-Framework.pdf\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"mt-6 inline-block bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors text-center shadow-md\">\r\n Download NERSA CoS Framework PDF\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n <!-- Dashboard Content -->\r\n <div id=\"dashboard-content\" class=\"hidden\">\r\n <section id=\"dashboard-section\" class=\"bg-white p-8 md:p-12 rounded-xl shadow-lg\">\r\n <div class=\"flex justify-between items-start mb-8\">\r\n <div>\r\n <h2 class=\"text-3xl font-bold tracking-tight text-gray-900 mb-2\">Welcome to Your Dashboard!<\/h2>\r\n <p class=\"text-gray-700\">This is your personalized workspace for managing CoS studies and reports.<\/p>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <button id=\"logout-button\" class=\"text-sm font-medium text-red-600 hover:text-red-800 transition-colors\">Log Out<\/button>\r\n <p id=\"user-id-display\" class=\"text-xs text-gray-500 mt-1 truncate\" title=\"Your User ID\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- UPDATED: Dashboard Layout -->\r\n <div class=\"flex flex-col md:flex-row gap-8\">\r\n <!-- Left Sidebar Navigation -->\r\n <div id=\"dashboard-nav\" class=\"flex flex-col md:w-1\/4 lg:w-1\/5 space-y-2\">\r\n <button class=\"tab-button\" data-tab=\"national-overview\">National Overview<\/button>\r\n <button class=\"tab-button\" data-tab=\"project-management\">Project Management<\/button>\r\n <button class=\"tab-button\" data-tab=\"cos-data-input\">CoS Data Input<\/button>\r\n <button class=\"tab-button\" data-tab=\"report-submission\">Report Submission<\/button>\r\n <button class=\"tab-button\" data-tab=\"advanced-analytics\">Advanced Analytics<\/button>\r\n <button class=\"tab-button\" data-tab=\"compliance-dashboard\">Compliance Dashboard<\/button>\r\n <\/div>\r\n\r\n <!-- Main Content Area -->\r\n <div id=\"dashboard-tabs-content\" class=\"flex-1\">\r\n <div id=\"national-overview\" class=\"tab-content\">\r\n <h4 class=\"text-xl font-semibold text-gray-800 mb-4\">National Electricity Distribution Overview<\/h4>\r\n <p class=\"text-gray-700 mb-6\">High-level overview of electricity distribution metrics. Click to expand.<\/p>\r\n <div id=\"national-overview-data\" class=\"space-y-4\"><\/div>\r\n <\/div>\r\n\r\n <div id=\"project-management\" class=\"tab-content hidden\">\r\n <h4 class=\"text-xl font-semibold text-gray-800 mb-4\">Your CoS Projects<\/h4>\r\n <div id=\"project-list\" class=\"space-y-4\">\r\n <p id=\"project-loader\" class=\"text-gray-500\">Loading projects...<\/p>\r\n <\/div>\r\n <button id=\"add-project-btn\" class=\"mt-6 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors shadow-md\">Add New Project<\/button>\r\n <\/div>\r\n\r\n <div id=\"cos-data-input\" class=\"tab-content hidden\">\r\n <h4 class=\"text-xl font-semibold text-gray-800 mb-4\">CoS Study Data Input<\/h4>\r\n <p class=\"text-gray-700 mb-6\">For detailed data collection, please use the <a href=\"#\" id=\"open-cos-form-modal-tab\" class=\"text-blue-600 hover:underline font-semibold\">CoS Data Collection Form<\/a>.<\/p>\r\n <\/div>\r\n\r\n <div id=\"report-submission\" class=\"tab-content hidden\">\r\n <h4 class=\"text-xl font-semibold text-gray-800 mb-4\">Submit a New Report<\/h4>\r\n <p class=\"text-gray-700 mb-6\">Upload your completed NERSA-compliant reports.<\/p>\r\n <form id=\"report-form\" class=\"space-y-4\">\r\n <div>\r\n <label for=\"report-title\" class=\"block text-sm font-medium text-gray-700\">Report Title<\/label>\r\n <input type=\"text\" id=\"report-title\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors shadow-md\">Submit Report<\/button>\r\n <\/form>\r\n <div id=\"report-message\" class=\"mt-4 text-sm font-medium hidden p-3 rounded-md\"><\/div>\r\n <\/div>\r\n\r\n <div id=\"advanced-analytics\" class=\"tab-content hidden\">\r\n <h4 class=\"text-xl font-semibold text-gray-800 mb-4\">Advanced Analytics & Scenario Planning<\/h4>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div>\r\n <label for=\"scenario-input\" class=\"block text-sm font-medium text-gray-700 mb-2\">Proposed Tariff Increase (%)<\/label>\r\n <input type=\"number\" id=\"scenario-input\" value=\"5\" min=\"0\" max=\"20\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\">\r\n <button id=\"run-scenario-btn\" class=\"mt-4 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors shadow-md\">Run Scenario<\/button>\r\n <\/div>\r\n <div class=\"chart-container h-64 md:h-auto border border-gray-200 rounded-md p-2 bg-white\">\r\n <canvas id=\"scenario-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <div id=\"scenario-results\" class=\"mt-6 p-4 bg-blue-50 rounded-md shadow-sm border border-blue-200 hidden\"><\/div>\r\n <\/div>\r\n \r\n <div id=\"compliance-dashboard\" class=\"tab-content hidden\">\r\n <!-- Content for this tab will be generated by JavaScript -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n <\/main>\r\n\r\n <footer class=\"bg-gray-100 mt-16\">\r\n <div class=\"container mx-auto py-8 px-4 sm:px-6 lg:px-8 text-center text-gray-600\">\r\n <p>This interactive tool is a simplified educational guide based on the NERSA framework for SALGA members.<\/p>\r\n <p class=\"text-sm mt-2\">© 2025 - For demonstration purposes.<\/p>\r\n <!-- UPDATED: Powered by SALGA Logo and Text -->\r\n <div class=\"mt-6 flex justify-center items-center space-x-2\">\r\n <span class=\"text-xs font-semibold text-gray-500\">Powered by<\/span>\r\n <a href=\"https:\/\/www.salga.org.za\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"South African Local Government Association\">\r\n <img decoding=\"async\" src=\"https:\/\/www.salga.org.za\/Graphics\/Logos\/Salga\/Salga%20logo.png\" alt=\"SALGA Logo\" class=\"h-10\">\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- Login Modal -->\r\n <div id=\"login-modal\" class=\"modal-overlay hidden\">\r\n <div class=\"modal-content\">\r\n <button class=\"modal-close-btn\" id=\"close-login-modal\">×<\/button>\r\n <h3 class=\"text-2xl font-bold text-gray-900 mb-6 text-center\">Login to Portal<\/h3>\r\n <form id=\"login-form\" class=\"space-y-6\">\r\n <!-- CHANGED: Replaced username\/password with a dropdown -->\r\n <div>\r\n <label for=\"user-type\" class=\"block text-sm font-medium text-gray-700\">Select User Type<\/label>\r\n <select id=\"user-type\" name=\"userType\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm\">\r\n <option value=\"\">-- Please choose an option --<\/option>\r\n <option value=\"municipal-official\">Municipal Official<\/option>\r\n <option value=\"salga-rep\">SALGA Representative<\/option>\r\n <option value=\"nersa-regulator\">NERSA Regulator<\/option>\r\n <option value=\"consultant\">Consultant<\/option>\r\n <option value=\"compliance-monitor\">Compliance Monitor<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"login-message\" class=\"text-center text-sm font-medium text-red-600\"><\/div>\r\n <button type=\"submit\" class=\"w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\">Log In<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Add Project Modal -->\r\n <div id=\"add-project-modal\" class=\"modal-overlay hidden\">\r\n <div class=\"modal-content\">\r\n <button class=\"modal-close-btn\" id=\"close-add-project-modal\">×<\/button>\r\n <h3 class=\"text-2xl font-bold text-gray-900 mb-6 text-center\">Add New CoS Project<\/h3>\r\n <form id=\"add-project-form\" class=\"space-y-6\">\r\n <div>\r\n <label for=\"project-name\" class=\"block text-sm font-medium text-gray-700\">Project Name<\/label>\r\n <input type=\"text\" id=\"project-name\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\" placeholder=\"e.g., FY 2026\/2027 Tariff Review\">\r\n <\/div>\r\n <div>\r\n <label for=\"project-description\" class=\"block text-sm font-medium text-gray-700\">Description<\/label>\r\n <textarea id=\"project-description\" rows=\"3\" class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\" placeholder=\"A brief description of the project's goals.\"><\/textarea>\r\n <\/div>\r\n <div id=\"add-project-message\" class=\"text-center text-sm font-medium text-red-600\"><\/div>\r\n <button type=\"submit\" id=\"submit-project-btn\" class=\"w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\">Save Project<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- CoS Data Collection Form Modal -->\r\n <div id=\"cos-data-form-modal\" class=\"modal-overlay hidden\">\r\n <div class=\"cos-form-modal-content\">\r\n <button class=\"modal-close-btn\" id=\"close-cos-form-modal\">×<\/button>\r\n <div class=\"text-center\">\r\n <h2 class=\"text-3xl font-bold tracking-tight text-gray-900\">Comprehensive CoS Data Collection Form<\/h2>\r\n <p class=\"mt-4 max-w-3xl mx-auto text-lg text-gray-700\">\r\n This form guides you through collecting all necessary data for a CoS study.\r\n <\/p>\r\n <\/div>\r\n \r\n <div id=\"form-stepper\" class=\"stepper-container mt-8\">\r\n <div class=\"step-item active\" data-step=\"0\"><div class=\"step-circle\">1<\/div><div class=\"step-label\">General<\/div><\/div>\r\n <div class=\"step-connector\"><\/div>\r\n <div class=\"step-item\" data-step=\"1\"><div class=\"step-circle\">2<\/div><div class=\"step-label\">Costs<\/div><\/div>\r\n <div class=\"step-connector\"><\/div>\r\n <div class=\"step-item\" data-step=\"2\"><div class=\"step-circle\">3<\/div><div class=\"step-label\">Network<\/div><\/div>\r\n <div class=\"step-connector\"><\/div>\r\n <div class=\"step-item\" data-step=\"3\"><div class=\"step-circle\">4<\/div><div class=\"step-label\">Customer<\/div><\/div>\r\n <div class=\"step-connector\"><\/div>\r\n <div class=\"step-item\" data-step=\"4\"><div class=\"step-circle\">5<\/div><div class=\"step-label\">Regulatory<\/div><\/div>\r\n <div class=\"step-connector\"><\/div>\r\n <div class=\"step-item\" data-step=\"5\"><div class=\"step-circle\">6<\/div><div class=\"step-label\">Review<\/div><\/div>\r\n <\/div>\r\n\r\n <form id=\"multi-step-cos-form\" class=\"mt-8\">\r\n <!-- Step 1: General Info -->\r\n <div id=\"form-step-1\" class=\"form-step space-y-6\">\r\n <h3 class=\"text-2xl font-semibold text-gray-800 border-b pb-2\">Step 1: General Information & Revenue Requirement<\/h3>\r\n <div>\r\n <label for=\"project-select\" class=\"block text-sm font-medium text-gray-700\">Select Project<\/label>\r\n <select id=\"project-select\" name=\"projectId\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\">\r\n <option value=\"\">Loading projects...<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"province-select\" class=\"block text-sm font-medium text-gray-700\">Province<\/label>\r\n <select id=\"province-select\" name=\"province\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\">\r\n <option value=\"\">Select Province<\/option>\r\n <option value=\"Eastern Cape\">Eastern Cape<\/option> <option value=\"Free State\">Free State<\/option> <option value=\"Gauteng\">Gauteng<\/option> <option value=\"KwaZulu-Natal\">KwaZulu-Natal<\/option> <option value=\"Limpopo\">Limpopo<\/option> <option value=\"Mpumalanga\">Mpumalanga<\/option> <option value=\"Northern Cape\">Northern Cape<\/option> <option value=\"North West\">North West<\/option> <option value=\"Western Cape\">Western Cape<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"district-select\" class=\"block text-sm font-medium text-gray-700\">District Municipality<\/label>\r\n <select id=\"district-select\" name=\"district\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\" disabled><option value=\"\">Select District<\/option><\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"municipality-select\" class=\"block text-sm font-medium text-gray-700\">Local Municipality<\/label>\r\n <select id=\"municipality-select\" name=\"municipalityName\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\" disabled><option value=\"\">Select Municipality<\/option><\/select>\r\n <\/div>\r\n <div class=\"flex justify-end\">\r\n <button type=\"button\" class=\"next-step-btn bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition-colors shadow-md\">Next<\/button>\r\n <\/div>\r\n <\/div>\r\n <!-- Step 2: Costs -->\r\n <div id=\"form-step-2\" class=\"form-step hidden space-y-6\">\r\n <h3 class=\"text-2xl font-semibold text-gray-800 border-b pb-2\">Step 2: Unbundled & Functionalized Costs (R million)<\/h3>\r\n <h4 class=\"text-lg font-semibold text-gray-800\">Unbundled Costs<\/h4>\r\n <div>\r\n <label for=\"cost-transmission-form\" class=\"block text-sm font-medium text-gray-700\">Transmission Cost (Bulk Purchase)<\/label>\r\n <input type=\"number\" id=\"cost-transmission-form\" name=\"costTransmission\" min=\"0\" step=\"0.01\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm\">\r\n <\/div>\r\n <div>\r\n <label for=\"cost-distribution-form\" class=\"block text-sm font-medium text-gray-700\">Distribution Cost<\/label>\r\n <input type=\"number\" id=\"cost-distribution-form\" name=\"costDistribution\" min=\"0\" step=\"0.01\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm\">\r\n <\/div>\r\n <div class=\"flex justify-between\">\r\n <button type=\"button\" class=\"prev-step-btn bg-gray-300 text-gray-800 py-2 px-6 rounded-md hover:bg-gray-400\">Previous<\/button>\r\n <button type=\"button\" class=\"next-step-btn bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700\">Next<\/button>\r\n <\/div>\r\n <\/div>\r\n <!-- Step 3: Network -->\r\n <div id=\"form-step-3\" class=\"form-step hidden space-y-6\">\r\n <h3 class=\"text-2xl font-semibold text-gray-800 border-b pb-2\">Step 3: Network & Infrastructure Data<\/h3>\r\n <div>\r\n <label for=\"total-asset-value\" class=\"block text-sm font-medium text-gray-700\">Total Network Asset Value (R million)<\/label>\r\n <input type=\"number\" id=\"total-asset-value\" name=\"totalAssetValue\" min=\"0\" step=\"0.01\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm\">\r\n <\/div>\r\n <div>\r\n <label for=\"annual-depreciation\" class=\"block text-sm font-medium text-gray-700\">Annual Depreciation (R million)<\/label>\r\n <input type=\"number\" id=\"annual-depreciation\" name=\"annualDepreciation\" min=\"0\" step=\"0.01\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm\">\r\n <\/div>\r\n <div class=\"flex justify-between\">\r\n <button type=\"button\" class=\"prev-step-btn bg-gray-300 text-gray-800 py-2 px-6 rounded-md hover:bg-gray-400\">Previous<\/button>\r\n <button type=\"button\" class=\"next-step-btn bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700\">Next<\/button>\r\n <\/div>\r\n <\/div>\r\n <!-- Step 4: Customer -->\r\n <div id=\"form-step-4\" class=\"form-step hidden space-y-6\">\r\n <h3 class=\"text-2xl font-semibold text-gray-800 border-b pb-2\">Step 4: Customer & Consumption Data<\/h3>\r\n <h4 class=\"text-lg font-semibold text-gray-800\">Customer Counts<\/h4>\r\n <div>\r\n <label for=\"cust-res-prepaid\" class=\"block text-sm font-medium text-gray-700\">Residential (Pre-paid) Customers<\/label>\r\n <input type=\"number\" id=\"cust-res-prepaid\" name=\"custResPrepaid\" min=\"0\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm\">\r\n <\/div>\r\n <div>\r\n <label for=\"cust-res-credit\" class=\"block text-sm font-medium text-gray-700\">Residential (Credit) Customers<\/label>\r\n <input type=\"number\" id=\"cust-res-credit\" name=\"custResCredit\" min=\"0\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm\">\r\n <\/div>\r\n <div class=\"flex justify-between\">\r\n <button type=\"button\" class=\"prev-step-btn bg-gray-300 text-gray-800 py-2 px-6 rounded-md hover:bg-gray-400\">Previous<\/button>\r\n <button type=\"button\" class=\"next-step-btn bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700\">Next<\/button>\r\n <\/div>\r\n <\/div>\r\n <!-- Step 5: Regulatory -->\r\n <div id=\"form-step-5\" class=\"form-step hidden space-y-6\">\r\n <h3 class=\"text-2xl font-semibold text-gray-800 border-b pb-2\">Step 5: Regulatory & Other Data<\/h3>\r\n <div>\r\n <label for=\"nersa-approved-tariff\" class=\"block text-sm font-medium text-gray-700\">NERSA Approved Tariff for Previous FY (%)<\/label>\r\n <input type=\"number\" id=\"nersa-approved-tariff\" name=\"nersaApprovedTariff\" min=\"0\" step=\"0.1\" required class=\"mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm\">\r\n <\/div>\r\n <div class=\"flex justify-between\">\r\n <button type=\"button\" class=\"prev-step-btn bg-gray-300 text-gray-800 py-2 px-6 rounded-md hover:bg-gray-400\">Previous<\/button>\r\n <button type=\"button\" class=\"next-step-btn bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700\">Next<\/button>\r\n <\/div>\r\n <\/div>\r\n <!-- Step 6: Review -->\r\n <div id=\"form-step-6\" class=\"form-step hidden space-y-6\">\r\n <h3 class=\"text-2xl font-semibold text-gray-800 border-b pb-2\">Step 6: Review & Submit<\/h3>\r\n <div id=\"form-summary\" class=\"bg-gray-50 p-6 rounded-lg shadow-inner border border-gray-200 space-y-2\"><\/div>\r\n <div class=\"flex items-center\">\r\n <input type=\"checkbox\" id=\"confirm-submission\" required class=\"h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500\">\r\n <label for=\"confirm-submission\" class=\"ml-2 block text-sm text-gray-900\">I confirm that all provided data is accurate.<\/label>\r\n <\/div>\r\n <div id=\"form-message\" class=\"text-center text-sm font-medium hidden p-3 rounded-md\"><\/div>\r\n <div class=\"flex justify-between\">\r\n <button type=\"button\" class=\"prev-step-btn bg-gray-300 text-gray-800 py-2 px-6 rounded-md hover:bg-gray-400\">Previous<\/button>\r\n <button type=\"submit\" class=\"bg-green-600 text-white py-2 px-6 rounded-md hover:bg-green-700\">Submit CoS Data<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\n\/\/ Main application logic is wrapped in an object to avoid polluting the global scope.\r\nconst App = {\r\n \/\/ --- Properties ---\r\n firebase: null, auth: null, db: null, appId: null, userId: null,\r\n isLoggedIn: false,\r\n unsubscribeProjects: null,\r\n\r\n \/\/ Chart instances\r\n classificationChart: null, allocationChart: null, scenarioChart: null,\r\n\r\n \/\/ Form state\r\n currentCosStep: 0,\r\n\r\n \/\/ Data objects\r\n stepContentData: {\r\n 1: {\r\n title: 'Step 1: Unbundling of Costs',\r\n content: `<p class=\"text-gray-600 mb-4\">The first step is to isolate all costs related to the electricity business from other municipal services. Costs are then \"unbundled\" into the main components of the electricity value chain:<\/p><ul class=\"list-disc list-inside mt-4 space-y-2 text-gray-600\"><li><strong>Generation:<\/strong> Costs related to producing electricity.<\/li><li><strong>Transmission:<\/strong> High-voltage network costs, typically associated with bulk purchases from Eskom.<\/li><li><strong>Distribution:<\/strong> The core of municipal costs, including all infrastructure and activities to deliver electricity to end customers.<\/li><\/ul><p class=\"mt-4 text-gray-600\">The primary output is a clear statement of the total annual cost of the distribution business.<\/p>`,\r\n chart: null\r\n },\r\n 2: {\r\n title: 'Step 2: Functionalisation of Costs',\r\n content: `<p class=\"text-gray-600 mb-4\">The total Distribution cost is broken down by its function to understand what activities are driving costs.<\/p><p class=\"mt-4 text-gray-600\">The main functional categories are:<\/p><ul class=\"list-disc list-inside mt-4 space-y-2 text-gray-600\"><li><strong>Network Services:<\/strong> Costs for physical infrastructure (poles, wires, transformers), including capital costs and maintenance.<\/li><li><strong>Retail Services:<\/strong> Costs of managing customer relationships, such as meter reading, billing, and support.<\/li><li><strong>Customer-Specific Costs:<\/strong> Costs for a specific customer, like a dedicated feeder line.<\/li><\/ul>`,\r\n chart: null\r\n },\r\n 3: {\r\n title: 'Step 3: Classification of Costs',\r\n content: `<p class=\"text-gray-600 mb-4\">This critical step classifies costs by their primary driver to determine 'why' the cost is incurred.<\/p><p class=\"mt-4 text-gray-600\">The three cost classifications are:<\/p><ul class=\"list-disc list-inside mt-4 space-y-2 text-gray-600\"><li><strong>Demand-Related (R\/kVA):<\/strong> Costs driven by the peak demand on the network.<\/li><li><strong>Energy-Related (R\/kWh):<\/strong> Costs that vary with the amount of electricity consumed.<\/li><li><strong>Customer-Related (R\/customer):<\/strong> Costs driven by the number of customers, regardless of consumption.<\/li><\/ul><div class=\"mt-6 mx-auto\" style=\"max-width: 250px; height: 250px; position: relative;\"><canvas id=\"classification-chart\"><\/canvas><\/div>`,\r\n chart: 'doughnut'\r\n },\r\n 4: {\r\n title: 'Step 4: Allocation of Costs',\r\n content: `<p class=\"text-gray-600 mb-4\">Classified costs are allocated to customer categories (e.g., Residential, Commercial) using appropriate allocation factors.<\/p><p class=\"mt-4 text-gray-600\">The principle is to match costs to the customers who cause them:<\/p><ul class=\"list-disc list-inside mt-4 space-y-2 text-gray-600\"><li><strong>Demand Costs<\/strong> are allocated based on contribution to system peak demand.<\/li><li><strong>Energy Costs<\/strong> are allocated based on total energy consumption (kWh).<\/li><li><strong>Customer Costs<\/strong> are allocated based on the number of customers in each group.<\/li><\/ul><p class=\"mt-4 text-gray-600\">The result is the total cost to serve each customer category.<\/p>`,\r\n chart: null\r\n },\r\n 5: {\r\n title: 'Step 5: Tariff Design',\r\n content: `<p class=\"text-gray-600 mb-4\">The final step uses the allocated costs to design specific tariff structures for each customer class.<\/p><p class=\"mt-4 text-gray-600\">This step involves:<\/p><ul class=\"list-disc list-inside mt-4 space-y-2 text-gray-600\"><li>Calculating the unit costs (e.g., R\/kWh, R\/kVA\/month).<\/li><li>Designing the tariff structure (e.g., fixed charges, demand charges, time-of-use rates).<\/li><li>Comparing proposed tariffs with existing ones to plan a gradual migration and avoid rate shock.<\/li><\/ul>`,\r\n chart: null\r\n }\r\n },\r\n geoData: { \"Eastern Cape\": { \"Alfred Nzo\": [\"Matatiele\", \"Umzimvubu\"], \"Amathole\": [\"Amahlathi\", \"Great Kei\", \"Mbhashe\", \"Mnquma\", \"Ngqushwa\", \"Raymond Mhlaba\"], \"Buffalo City\": [\"Buffalo City\"], \"Chris Hani\": [\"Emalahleni (EC)\", \"Engcobo\", \"Enoch Mgijima\", \"Intsika Yethu\", \"Inxuba Yethemba\", \"Lukhanji\", \"Sakhisizwe\", \"Tsolwana\"], \"Joe Gqabi\": [\"Elundini\", \"Maletswai\", \"Senqu\"], \"Nelson Mandela Bay\": [\"Nelson Mandela Bay\"], \"O.R. Tambo\": [\"Ingquza Hill\", \"King Sabata Dalindyebo\", \"Mhlontlo\", \"Nyandeni\", \"Port St Johns\"], \"Sarah Baartman\": [\"Dr Beyers Naud\u00e9\", \"Kouga\", \"Koukamma\", \"Makana\", \"Ndlambe\", \"Sunday's River Valley\"] }, \"Free State\": { \"Fezile Dabi\": [\"Metsimaholo\", \"Moqhaka\", \"Ngwathe\", \"Salga\"], \"Lejweleputswa\": [\"Matjhabeng\", \"Nala\", \"Tokologo\", \"Tswelopele\"], \"Mangaung\": [\"Mangaung\"], \"Thabo Mofutsanyana\": [\"Dihlabeng\", \"Maluti-a-Phofung\", \"Mantsopa\", \"Nketoana\", \"Phumelela\", \"Setsoto\"], \"Xhariep\": [\"Kopanong\", \"Letsemeng\", \"Mohokare\"] }, \"Gauteng\": { \"City of Johannesburg\": [\"City of Johannesburg\"], \"City of Tshwane\": [\"City of Tshwane\"], \"Ekurhuleni\": [\"Ekurhuleni\"], \"Sedibeng\": [\"Emfuleni\", \"Lesedi\", \"Midvaal\"], \"West Rand\": [\"Mogale City\", \"Merafong City\", \"Rand West City\"] }, \"KwaZulu-Natal\": { \"Amajuba\": [\"Dannhauser\", \"eMadlangeni\", \"Newcastle\"], \"Harry Gwala\": [\"Dr Nkosazana Dlamini Zuma\", \"Greater Kokstad\", \"Umzimkhulu\"], \"iLembe\": [\"KwaDukuza\", \"Mandeni\", \"Maphumulo\", \"Ndwedwe\"], \"eThekwini\": [\"eThekwini\"], \"King Cetshwayo\": [\"Mfolozi\", \"Mthonjaneni\", \"Nkandla\", \"uMhlathuze\", \"uMlalazi\"], \"Ugu\": [\"Ray Nkonyeni\", \"Umdoni\", \"Umshwathi\", \"Umzumbe\"], \"Umkhanyakude\": [\"Big 5 Hlabisa\", \"Jozini\", \"Mtubatuba\", \"Umhlabuyalingana\"], \"Umzinyathi\": [\"Endumeni\", \"Msinga\", \"Nquthu\", \"Umvoti\"], \"Uthukela\": [\"Alfred Duma\", \"Inkosi Langalibalele\", \"Okhahlamba\"], \"Zululand\": [\"Abaqulusi\", \"Nongoma\", \"Ulundi\", \"Umhlabuyalingana\", \"uPhongolo\"] }, \"Limpopo\": { \"Capricorn\": [\"Blouberg\", \"Lepelle-Nkumpi\", \"Polokwane\", \"Molemole\"], \"Mopani\": [\"Ba-Phalaborwa\", \"Giyani\", \"Letaba\", \"Maruleng\"], \"Sekhukhune\": [\"Elias Motsoaledi\", \"Ephraim Mogale\", \"Fetakgomo Tubatse\", \"Makhuduthamaga\"], \"Vhembe\": [\"Collins Chabane\", \"Makhado\", \"Musina\", \"Thulamela\"], \"Waterberg\": [\"Bela-Bela\", \"Lephalale\", \"Modimolle-Mookgophong\", \"Mogalakwena\", \"Thabazimbi\"] }, \"Mpumalanga\": { \"Ehlanzeni\": [\"Bushbuckridge\", \"City of Mbombela\", \"Nkomazi\", \"Thaba Chweu\"], \"Gert Sibande\": [\"Albert Luthuli\", \"Dipaleseng\", \"Govan Mbeki\", \"Lekwa\", \"Mkhondo\", \"Msukaligwa\", \"Pixley ka Seme\"], \"Nkangala\": [\"Emakhazeni\", \"Emalahleni (MP)\", \"Steve Tshwete\", \"Thembisile Hani\", \"Victor Khanye\"] }, \"Northern Cape\": { \"Frances Baard\": [\"Dikgatlong\", \"Magareng\", \"Phokwane\", \"Sol Plaatje\"], \"John Taolo Gaetsewe\": [\"Gamagara\", \"Joe Morolong\", \"Ga-Segonyana\"], \"Namakwa\": [\"Kamiesberg\", \"Kh\u00e2i-Ma\", \"Nama Khoi\", \"Richtersveld\", \"Steinkopf\", \"Hantam\"], \"Pixley ka Seme (NC)\": [\"Emthanjeni\", \"Kareeberg\", \"Renosterberg\", \"Siyathemba\", \"Ubuntu\", \"Umsobomvu\"], \"Z.F. Mgcawu\": [\"Dawid Kruiper\", \"Kai !Garib\", \"Kgatelopele\", \"\/\/Khara Hais\", \"Tsantsabane\"] }, \"North West\": { \"Bojanala Platinum\": [\"Kgetlengrivier\", \"Madibeng\", \"Moretele\", \"Moses Kotane\", \"Rustenburg\"], \"Dr Kenneth Kaunda\": [\"City of Matlosana\", \"Maquassi Hills\", \"Tlokwe City Council\", \"Ventersdorp\"], \"Dr Ruth Segomotsi Mompati\": [\"Greater Taung\", \"Kagisano-Molopo\", \"Lekwa-Teemane\", \"Mamusa\", \"Naledi\"], \"Ngaka Modiri Molema\": [\"Ditsobotla\", \"Mahikeng\", \"Ramotshere Moiloa\", \"Ratlou\", \"Tswaing\"] }, \"Western Cape\": { \"Cape Winelands\": [\"Breede Valley\", \"Drakenstein\", \"Langeberg\", \"Stellenbosch\", \"Witzenberg\"], \"Central Karoo\": [\"Beaufort West\", \"Laingsburg\", \"Prince Albert\"], \"City of Cape Town\": [\"City of Cape Town\"], \"Garden Route\": [\"Bitou\", \"George\", \"Hessequa\", \"Kannaland\", \"Knysna\", \"Mossel Bay\", \"Oudtshoorn\"], \"Overberg\": [\"Cape Agulhas\", \"Overstrand\", \"Swellendam\", \"Theewaterskloof\"], \"West Coast\": [\"Bergrivier\", \"Cederberg\", \"Matzikama\", \"Saldanha Bay\", \"Swartland\"] } },\r\n nationalOverviewData: { national: { name: 'South Africa (National)', totalRevenue: 50000, avgEnergyLosses: 10.5, avgRevenueCollection: 90.0, numEntities: 368 }, provinces: { gauteng: { name: 'Gauteng', totalRevenue: 15000, avgEnergyLosses: 12.0, avgRevenueCollection: 88.0, numEntities: 3, entities: [ { name: 'City of Johannesburg', type: 'Metro', totalRevenue: 8000, energyLosses: 13.5, revenueCollection: 85.0 }, { name: 'City of Tshwane', type: 'Metro', totalRevenue: 5000, energyLosses: 11.0, revenueCollection: 90.0 }, { name: 'Ekurhuleni', type: 'Metro', totalRevenue: 2000, energyLosses: 10.0, revenueCollection: 92.0 } ] }, westernCape: { name: 'Western Cape', totalRevenue: 10000, avgEnergyLosses: 8.0, avgRevenueCollection: 95.0, numEntities: 1, entities: [ { name: 'City of Cape Town', type: 'Metro', totalRevenue: 10000, energyLosses: 8.0, revenueCollection: 95.0 } ] }, kwazuluNatal: { name: 'KwaZulu-Natal', totalRevenue: 8000, avgEnergyLosses: 15.0, avgRevenueCollection: 80.0, numEntities: 1, entities: [ { name: 'eThekwini', type: 'Metro', totalRevenue: 8000, energyLosses: 15.0, revenueCollection: 80.0 } ] } } },\r\n\r\n \/\/ --- Initialization ---\r\n init() {\r\n document.addEventListener('firebaseReady', () => {\r\n this.firebase = window.firebaseServices;\r\n this.db = this.firebase.db;\r\n this.auth = this.firebase.auth;\r\n this.appId = this.firebase.appId;\r\n this.handleAuthentication();\r\n });\r\n\r\n this.initEventListeners();\r\n this.initFrameworkSteps();\r\n this.initInteractiveModel();\r\n },\r\n\r\n \/\/ --- Authentication ---\r\n async handleAuthentication() {\r\n const { onAuthStateChanged, signInAnonymously, signInWithCustomToken, initialAuthToken, setPersistence, inMemoryPersistence } = window.authUtils;\r\n try {\r\n await setPersistence(this.auth, inMemoryPersistence);\r\n onAuthStateChanged(this.auth, (user) => {\r\n if (user) {\r\n this.userId = user.uid;\r\n document.getElementById('user-id-display').textContent = `ID: ${this.userId.substring(0, 12)}...`;\r\n document.getElementById('user-id-display').title = `Your User ID: ${this.userId}`;\r\n if (sessionStorage.getItem('isLoggedIn') === 'true') {\r\n this.isLoggedIn = true;\r\n this.showDashboard();\r\n }\r\n } else {\r\n this.userId = null; this.isLoggedIn = false;\r\n this.showFrameworkExplorer();\r\n }\r\n });\r\n if (initialAuthToken) await signInWithCustomToken(this.auth, initialAuthToken);\r\n else await signInAnonymously(this.auth);\r\n } catch (error) { console.error(\"Authentication Error:\", error); }\r\n },\r\n\r\n \/\/ --- Event Listeners ---\r\n initEventListeners() {\r\n document.getElementById('login-portal-nav-link').addEventListener('click', () => this.isLoggedIn ? this.showDashboard() : this.showLoginModal());\r\n document.getElementById('logout-button').addEventListener('click', () => this.logout());\r\n document.getElementById('login-form').addEventListener('submit', (e) => this.handleLogin(e));\r\n document.getElementById('close-login-modal').addEventListener('click', () => this.hideLoginModal());\r\n document.getElementById('login-modal').addEventListener('click', (e) => { if (e.target.id === 'login-modal') this.hideLoginModal(); });\r\n document.getElementById('add-project-btn').addEventListener('click', () => this.showAddProjectModal());\r\n document.getElementById('add-project-form').addEventListener('submit', (e) => this.handleAddProject(e));\r\n document.getElementById('close-add-project-modal').addEventListener('click', () => this.hideAddProjectModal());\r\n document.getElementById('add-project-modal').addEventListener('click', (e) => { if (e.target.id === 'add-project-modal') this.hideAddProjectModal(); });\r\n document.getElementById('open-cos-form-modal-tab').addEventListener('click', (e) => { e.preventDefault(); this.showCosFormModal(); });\r\n document.getElementById('close-cos-form-modal').addEventListener('click', () => this.hideCosFormModal());\r\n document.getElementById('cos-data-form-modal').addEventListener('click', (e) => { if (e.target.id === 'cos-data-form-modal') this.hideCosFormModal(); });\r\n \r\n document.querySelectorAll('.next-step-btn').forEach(btn => btn.addEventListener('click', () => this.navigateCosForm(1)));\r\n document.querySelectorAll('.prev-step-btn').forEach(btn => btn.addEventListener('click', () => this.navigateCosForm(-1)));\r\n document.getElementById('multi-step-cos-form').addEventListener('submit', (e) => this.handleCosFormSubmit(e));\r\n document.getElementById('province-select').addEventListener('change', () => this.populateDistricts());\r\n document.getElementById('district-select').addEventListener('change', () => this.populateMunicipalities());\r\n document.querySelectorAll('.tab-button').forEach(button => button.addEventListener('click', () => this.showTab(button.dataset.tab)));\r\n document.getElementById('report-form').addEventListener('submit', (e) => this.handleReportSubmit(e));\r\n document.getElementById('run-scenario-btn').addEventListener('click', () => this.runScenario());\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n const href = this.getAttribute('href');\r\n \/\/ FIX: Check if the href is a valid selector (longer than just \"#\")\r\n if (href && href.startsWith('#') && href.length > 1) {\r\n e.preventDefault();\r\n const targetElement = document.querySelector(href);\r\n if(targetElement) {\r\n targetElement.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n }\r\n });\r\n });\r\n },\r\n\r\n \/\/ --- UI State Management ---\r\n showDashboard() {\r\n document.getElementById('framework-explorer-content').classList.add('hidden');\r\n document.getElementById('dashboard-content').classList.remove('hidden');\r\n document.getElementById('login-portal-nav-link').textContent = 'Go to Dashboard';\r\n this.updateDashboardForRole(); \/\/ <-- New RBAC function\r\n this.initProjectManagement();\r\n },\r\n showFrameworkExplorer() {\r\n document.getElementById('framework-explorer-content').classList.remove('hidden');\r\n document.getElementById('dashboard-content').classList.add('hidden');\r\n document.getElementById('login-portal-nav-link').textContent = 'Login to Portal';\r\n if (this.unsubscribeProjects) { this.unsubscribeProjects(); this.unsubscribeProjects = null; }\r\n },\r\n showTab(tabId) {\r\n document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));\r\n document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));\r\n document.getElementById(tabId).classList.remove('hidden');\r\n document.querySelector(`.tab-button[data-tab=\"${tabId}\"]`).classList.add('active');\r\n if (tabId === 'advanced-analytics' && !this.scenarioChart) this.initScenarioChart();\r\n if (tabId === 'national-overview') this.renderNationalOverview();\r\n if (tabId === 'compliance-dashboard') this.renderComplianceDashboard();\r\n },\r\n\r\n \/\/ --- Login\/Logout ---\r\n handleLogin(e) {\r\n e.preventDefault();\r\n const userType = document.getElementById('user-type').value;\r\n const messageEl = document.getElementById('login-message');\r\n\r\n if (userType) {\r\n messageEl.textContent = 'Login successful! Loading dashboard...';\r\n messageEl.className = 'text-center text-sm font-medium text-green-600';\r\n sessionStorage.setItem('isLoggedIn', 'true');\r\n sessionStorage.setItem('userType', userType); \/\/ Store user role\r\n this.isLoggedIn = true;\r\n setTimeout(() => {\r\n this.hideLoginModal();\r\n this.showDashboard();\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }, 1000);\r\n } else {\r\n messageEl.textContent = 'Please select a user type to continue.';\r\n messageEl.className = 'text-center text-sm font-medium text-red-600';\r\n }\r\n },\r\n logout() {\r\n sessionStorage.removeItem('isLoggedIn'); \r\n sessionStorage.removeItem('userType');\r\n this.isLoggedIn = false;\r\n this.showFrameworkExplorer(); window.scrollTo({ top: 0, behavior: 'smooth' });\r\n },\r\n\r\n \/\/ --- Modals ---\r\n showLoginModal() { document.getElementById('login-modal').classList.add('show'); document.getElementById('login-modal').classList.remove('hidden'); },\r\n hideLoginModal() { document.getElementById('login-modal').classList.remove('show'); setTimeout(() => document.getElementById('login-modal').classList.add('hidden'), 300); },\r\n showAddProjectModal() { document.getElementById('add-project-modal').classList.add('show'); document.getElementById('add-project-modal').classList.remove('hidden'); },\r\n hideAddProjectModal() { document.getElementById('add-project-modal').classList.remove('show'); setTimeout(() => document.getElementById('add-project-modal').classList.add('hidden'), 300); },\r\n showCosFormModal() { document.getElementById('cos-data-form-modal').classList.add('show'); document.getElementById('cos-data-form-modal').classList.remove('hidden'); this.currentCosStep = 0; this.updateCosFormStep(); this.populateProjectDropdown(); },\r\n hideCosFormModal() { document.getElementById('cos-data-form-modal').classList.remove('show'); setTimeout(() => document.getElementById('cos-data-form-modal').classList.add('hidden'), 300); },\r\n \r\n \/\/ --- Project Management (Firestore) ---\r\n initProjectManagement() {\r\n if (this.unsubscribeProjects || !this.userId) return;\r\n const { collection, query, onSnapshot } = window.firestoreUtils;\r\n const projectsCollectionPath = `\/artifacts\/${this.appId}\/users\/${this.userId}\/projects`;\r\n const q = query(collection(this.db, projectsCollectionPath));\r\n this.unsubscribeProjects = onSnapshot(q, (snapshot) => {\r\n const listEl = document.getElementById('project-list');\r\n listEl.innerHTML = '';\r\n if (snapshot.empty) {\r\n listEl.innerHTML = '<p class=\"text-gray-500\">No projects found. Add one to get started!<\/p>';\r\n } else {\r\n snapshot.forEach((doc) => {\r\n const project = doc.data();\r\n const div = document.createElement('div');\r\n div.className = 'bg-white p-4 rounded-md shadow-sm border border-gray-200';\r\n div.innerHTML = `<h5 class=\"font-semibold text-gray-800\">${project.name}<\/h5><p class=\"text-sm text-gray-600 mt-1\">${project.description || ''}<\/p>`;\r\n listEl.appendChild(div);\r\n });\r\n }\r\n }, (error) => console.error(\"Error fetching projects:\", error));\r\n },\r\n async handleAddProject(e) {\r\n e.preventDefault();\r\n const { collection, addDoc } = window.firestoreUtils;\r\n const name = document.getElementById('project-name').value;\r\n if (!name) { document.getElementById('add-project-message').textContent = 'Project name is required.'; return; }\r\n const submitBtn = document.getElementById('submit-project-btn');\r\n submitBtn.disabled = true; submitBtn.textContent = 'Saving...';\r\n try {\r\n const projectsCollectionPath = `\/artifacts\/${this.appId}\/users\/${this.userId}\/projects`;\r\n await addDoc(collection(this.db, projectsCollectionPath), { name: name, description: document.getElementById('project-description').value, createdAt: new Date() });\r\n document.getElementById('add-project-form').reset(); this.hideAddProjectModal();\r\n } catch (error) { console.error(\"Error adding document: \", error); } finally { submitBtn.disabled = false; submitBtn.textContent = 'Save Project'; }\r\n },\r\n\r\n \/\/ --- Framework Steps ---\r\n initFrameworkSteps() {\r\n document.querySelectorAll('.framework-step').forEach((btn, index) => {\r\n btn.addEventListener('click', () => {\r\n document.querySelectorAll('.framework-step').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active'); this.updateStepContent(index + 1);\r\n });\r\n });\r\n this.updateStepContent(1);\r\n },\r\n updateStepContent(step) {\r\n const data = this.stepContentData[step];\r\n document.getElementById('step-content').innerHTML = `<h3 class=\"text-2xl font-bold text-gray-900 mb-4\">${data.title}<\/h3>${data.content}`;\r\n if (data.chart === 'doughnut') this.renderClassificationChart();\r\n },\r\n renderClassificationChart() {\r\n if (this.classificationChart) this.classificationChart.destroy();\r\n const ctx = document.getElementById('classification-chart')?.getContext('2d');\r\n if (!ctx) return;\r\n this.classificationChart = new Chart(ctx, { type: 'doughnut', data: { labels: ['Demand-Related', 'Energy-Related', 'Customer-Related'], datasets: [{ data: [60, 30, 10], backgroundColor: ['#3B82F6', '#10B981', '#F97316'], borderColor: '#FFFFFF', borderWidth: 2 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' }, title: { display: true, text: 'Typical Cost Classification Split' } } } });\r\n },\r\n\r\n \/\/ --- Interactive Model ---\r\n initInteractiveModel() {\r\n this.initAllocationChart();\r\n ['total-cost', 'demand-perc', 'energy-perc'].forEach(id => {\r\n document.getElementById(id).addEventListener('input', () => this.updateAllocationModel());\r\n });\r\n this.updateAllocationModel();\r\n },\r\n updateAllocationModel() {\r\n const totalCostSlider = document.getElementById('total-cost');\r\n const demandPercSlider = document.getElementById('demand-perc');\r\n const energyPercSlider = document.getElementById('energy-perc');\r\n let demand = parseInt(demandPercSlider.value);\r\n let energy = parseInt(energyPercSlider.value);\r\n if (demand + energy > 100) {\r\n if (document.activeElement === demandPercSlider) energy = 100 - demand; else demand = 100 - energy;\r\n demandPercSlider.value = demand; energyPercSlider.value = energy;\r\n }\r\n const customer = 100 - demand - energy;\r\n document.getElementById('total-cost-value').textContent = totalCostSlider.value;\r\n document.getElementById('demand-perc-value').textContent = demand;\r\n document.getElementById('energy-perc-value').textContent = energy;\r\n document.getElementById('customer-perc-value').textContent = customer + '%';\r\n this.updateAllocationChart();\r\n },\r\n initAllocationChart() {\r\n const ctx = document.getElementById('allocation-chart')?.getContext('2d');\r\n if (!ctx) return;\r\n this.allocationChart = new Chart(ctx, { type: 'bar', data: { labels: ['Residential', 'Commercial', 'Industrial'], datasets: [{ label: 'Allocated Cost (R million)', data: [0, 0, 0], backgroundColor: ['#60A5FA', '#34D399', '#FBBF24'] }] }, options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y', scales: { x: { beginAtZero: true, title: { display: true, text: 'Allocated Cost (R million)' } } }, plugins: { legend: { display: false }, title: { display: true, text: 'Simulated Cost Allocation per Customer Class' } } } });\r\n },\r\n updateAllocationChart() {\r\n if (!this.allocationChart) return;\r\n const totalCost = parseFloat(document.getElementById('total-cost').value);\r\n const demandPerc = parseFloat(document.getElementById('demand-perc').value) \/ 100;\r\n const energyPerc = parseFloat(document.getElementById('energy-perc').value) \/ 100;\r\n const customerPerc = 1 - demandPerc - energyPerc;\r\n const factors = { residential: { d: 0.35, e: 0.40, c: 0.80 }, commercial: { d: 0.45, e: 0.45, c: 0.18 }, industrial: { d: 0.20, e: 0.15, c: 0.02 } };\r\n const pools = { d: totalCost * demandPerc, e: totalCost * energyPerc, c: totalCost * customerPerc };\r\n this.allocationChart.data.datasets[0].data = [\r\n (pools.d * factors.residential.d + pools.e * factors.residential.e + pools.c * factors.residential.c).toFixed(2),\r\n (pools.d * factors.commercial.d + pools.e * factors.commercial.e + pools.c * factors.commercial.c).toFixed(2),\r\n (pools.d * factors.industrial.d + pools.e * factors.industrial.e + pools.c * factors.industrial.c).toFixed(2)\r\n ];\r\n this.allocationChart.update();\r\n },\r\n\r\n \/\/ --- CoS Form ---\r\n navigateCosForm(dir) {\r\n if (dir > 0 && !this.validateCosStep(this.currentCosStep)) return;\r\n this.currentCosStep = Math.max(0, Math.min(5, this.currentCosStep + dir));\r\n if (this.currentCosStep === 5) this.generateCosSummary();\r\n this.updateCosFormStep();\r\n },\r\n updateCosFormStep() {\r\n document.querySelectorAll('.form-step').forEach((s, i) => s.classList.toggle('hidden', i !== this.currentCosStep));\r\n document.querySelectorAll('#form-stepper .step-item').forEach((s, i) => {\r\n s.classList.remove('active', 'completed');\r\n if (i < this.currentCosStep) s.classList.add('completed');\r\n else if (i === this.currentCosStep) s.classList.add('active');\r\n });\r\n },\r\n validateCosStep(stepIndex) {\r\n const step = document.querySelectorAll('.form-step')[stepIndex];\r\n let isValid = true;\r\n step.querySelectorAll('input[required], select[required]').forEach(input => {\r\n input.classList.remove('border-red-500');\r\n if (!input.value.trim()) { isValid = false; input.classList.add('border-red-500'); }\r\n });\r\n return isValid;\r\n },\r\n generateCosSummary() {\r\n const formData = new FormData(document.getElementById('multi-step-cos-form'));\r\n let summaryHtml = '<h4 class=\"font-semibold text-gray-800 mb-2\">Summary:<\/h4><dl class=\"grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 text-sm\">';\r\n for (let [key, value] of formData.entries()) {\r\n if (value) {\r\n const label = document.querySelector(`[name=\"${key}\"]`)?.previousElementSibling?.textContent || key;\r\n summaryHtml += `<dt class=\"font-medium text-gray-600\">${label}:<\/dt><dd class=\"text-gray-800\">${value}<\/dd>`;\r\n }\r\n }\r\n summaryHtml += '<\/dl>';\r\n document.getElementById('form-summary').innerHTML = summaryHtml;\r\n },\r\n handleCosFormSubmit(e) { e.preventDefault(); \/* ... *\/ },\r\n\r\n \/\/ --- Geographic Dropdowns ---\r\n populateDistricts() {\r\n const provinceSelect = document.getElementById('province-select');\r\n const districtSelect = document.getElementById('district-select');\r\n const municipalitySelect = document.getElementById('municipality-select');\r\n districtSelect.innerHTML = '<option value=\"\">Select District<\/option>';\r\n municipalitySelect.innerHTML = '<option value=\"\">Select Municipality<\/option>';\r\n districtSelect.disabled = true; municipalitySelect.disabled = true;\r\n const selectedProvince = provinceSelect.value;\r\n if (selectedProvince && this.geoData[selectedProvince]) {\r\n Object.keys(this.geoData[selectedProvince]).sort().forEach(d => districtSelect.add(new Option(d, d)));\r\n districtSelect.disabled = false;\r\n }\r\n },\r\n populateMunicipalities() {\r\n const provinceSelect = document.getElementById('province-select');\r\n const districtSelect = document.getElementById('district-select');\r\n const municipalitySelect = document.getElementById('municipality-select');\r\n municipalitySelect.innerHTML = '<option value=\"\">Select Municipality<\/option>';\r\n municipalitySelect.disabled = true;\r\n const selectedProvince = provinceSelect.value;\r\n const selectedDistrict = districtSelect.value;\r\n if (selectedProvince && selectedDistrict && this.geoData[selectedProvince]?.[selectedDistrict]) {\r\n this.geoData[selectedProvince][selectedDistrict].sort().forEach(m => municipalitySelect.add(new Option(m, m)));\r\n municipalitySelect.disabled = false;\r\n }\r\n },\r\n \r\n \/\/ --- Role-Based Access Control ---\r\n updateDashboardForRole() {\r\n const userType = sessionStorage.getItem('userType');\r\n const rolePermissions = {\r\n 'municipal-official': ['national-overview', 'project-management', 'cos-data-input', 'report-submission', 'advanced-analytics'],\r\n 'salga-rep': ['national-overview', 'project-management', 'compliance-dashboard'],\r\n 'nersa-regulator': ['report-submission', 'compliance-dashboard'],\r\n 'consultant': ['project-management', 'cos-data-input', 'advanced-analytics'],\r\n 'compliance-monitor': ['compliance-dashboard']\r\n };\r\n\r\n const userTabs = rolePermissions[userType] || [];\r\n const allTabs = document.querySelectorAll('#dashboard-nav .tab-button');\r\n let firstVisibleTab = null;\r\n\r\n allTabs.forEach(tab => {\r\n const tabName = tab.dataset.tab;\r\n if (userTabs.includes(tabName)) {\r\n tab.style.display = 'flex';\r\n if (!firstVisibleTab) {\r\n firstVisibleTab = tabName;\r\n }\r\n } else {\r\n tab.style.display = 'none';\r\n }\r\n });\r\n\r\n if (firstVisibleTab) {\r\n this.showTab(firstVisibleTab);\r\n }\r\n },\r\n\r\n \/\/ --- Other Dashboard Features ---\r\n initScenarioChart() {\r\n const ctx = document.getElementById('scenario-chart')?.getContext('2d');\r\n if (!ctx) return;\r\n this.scenarioChart = new Chart(ctx, { type: 'line', data: { labels: ['Current', 'Scenario 1', 'Scenario 2'], datasets: [{ label: 'Projected Revenue (R million)', data: [100, 105, 110], borderColor: '#3B82F6', backgroundColor: 'rgba(59, 130, 246, 0.2)', fill: true }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'Revenue Projection' } }, scales: { y: { beginAtZero: true } } } });\r\n },\r\n runScenario() {\r\n const increase = parseFloat(document.getElementById('scenario-input').value);\r\n if (isNaN(increase)) return;\r\n const projected = 100 * (1 + increase \/ 100);\r\n document.getElementById('scenario-results').innerHTML = `<h5 class=\"font-semibold\">Results:<\/h5><p>A <strong>${increase}%<\/strong> increase projects revenue of <strong>R${projected.toFixed(2)} million<\/strong>.<\/p>`;\r\n document.getElementById('scenario-results').classList.remove('hidden');\r\n if (this.scenarioChart) {\r\n this.scenarioChart.data.datasets[0].data = [100, projected, projected * 1.05];\r\n this.scenarioChart.update();\r\n }\r\n },\r\n handleReportSubmit(e) { e.preventDefault(); \/* ... *\/ },\r\n renderNationalOverview() { \/* ... *\/ },\r\n renderComplianceDashboard() {\r\n const container = document.getElementById('compliance-dashboard');\r\n container.innerHTML = `\r\n <h4 class=\"text-xl font-semibold text-gray-800 mb-4\">Regulatory Compliance Dashboard<\/h4>\r\n <p class=\"text-gray-700 mb-6\">This dashboard provides a checklist against key legislative and regulatory requirements for municipal tariff setting.<\/p>\r\n <div class=\"space-y-6\">\r\n ${this.createComplianceSection('NERSA CoS Framework', [\r\n { text: 'Unbundling of costs completed and documented.', status: 'completed' },\r\n { text: 'Cost allocation methodology is justified and transparent.', status: 'pending' },\r\n { text: 'Tariff structures are cost-reflective.', status: 'completed' },\r\n { text: 'Public participation process for tariff approval followed.', status: 'overdue' }\r\n ])}\r\n ${this.createComplianceSection('Municipal Finance Management Act (MFMA)', [\r\n { text: 'Tariff policy adopted by council.', status: 'completed' },\r\n { text: 'Budget aligned with Integrated Development Plan (IDP).', status: 'completed' },\r\n { text: 'Financial statements submitted to Auditor-General.', status: 'pending' }\r\n ])}\r\n ${this.createComplianceSection('Municipal Systems Act (MSA)', [\r\n { text: 'Performance management system in place for electricity service.', status: 'completed' },\r\n { text: 'Community participation in IDP and budget process documented.', status: 'completed' }\r\n ])}\r\n ${this.createComplianceSection('Auditor-General (AG) & National Treasury', [\r\n { text: 'Previous audit findings on electricity revenue have been addressed.', status: 'pending' },\r\n { text: 'Compliance with mSCOA for financial reporting.', status: 'completed' }\r\n ])}\r\n <\/div>\r\n `;\r\n },\r\n createComplianceSection(title, items) {\r\n let itemsHtml = items.map(item => {\r\n const statusClasses = {\r\n completed: 'text-green-600 bg-green-100',\r\n pending: 'text-yellow-600 bg-yellow-100',\r\n overdue: 'text-red-600 bg-red-100'\r\n };\r\n const statusText = item.status.charAt(0).toUpperCase() + item.status.slice(1);\r\n return `\r\n <div class=\"flex items-center justify-between bg-white p-3 rounded-md shadow-sm border border-gray-200\">\r\n <label class=\"ml-3 text-gray-700 flex-1\">${item.text}<\/label>\r\n <span class=\"text-xs font-semibold ml-auto px-2 py-1 rounded-full ${statusClasses[item.status]}\">${statusText}<\/span>\r\n <\/div>\r\n `;\r\n }).join('');\r\n\r\n return `\r\n <div>\r\n <h5 class=\"text-lg font-semibold text-gray-800 mb-3\">${title}<\/h5>\r\n <div class=\"space-y-2\">${itemsHtml}<\/div>\r\n <\/div>\r\n `;\r\n }\r\n};\r\n\r\n\/\/ Start the application after the DOM is loaded and Firebase is ready\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n const firebaseReadyEvent = new Event('firebaseReady');\r\n \/\/ This timeout ensures the module script has loaded and populated window.firebaseServices\r\n setTimeout(() => {\r\n if (window.firebaseServices) {\r\n document.dispatchEvent(firebaseReadyEvent);\r\n App.init();\r\n } else {\r\n console.error(\"Firebase services failed to load.\");\r\n }\r\n }, 100);\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\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>NERSA Cost of Supply Framework Explorer CoS Portal The Framework ▼ Introduction Framework Steps Interactive Model Resources Login to Portal For South African Municipalities This application provides an interactive guide to the National Energy Regulator of South Africa (NERSA) Cost of Supply (CoS) framework, designed to help municipal officials develop fair, transparent, and cost-reflective electricity tariffs. ★Economic Efficiency Promotes tariffs that signal the true economic cost of providing electricity. ✎Equity and Fairness Ensures customers pay their fair share, preventing cross-subsidies. 💰Financial Sustainability Allows municipalities to recover costs and ensure long-term network viability. The 5-Step Framework Click on each step below to explore its objectives. This interactive diagram simplifies the process from raw financial data to final, cost-reflective tariffs. Step 1: Unbundling of Costs Separate total costs into core electricity value chain functions. ↓ Step 2: Functionalisation of Costs Break down distribution costs into network and retail activities. ↓ Step 3: Classification of Costs Categorise costs by their primary driver (Energy, Demand, or Customer). ↓ Step 4: Allocation of Costs Assign the classified costs to specific customer categories. ↓ Step 5: Tariff Design Use the allocated costs to structure and set final tariffs. Interactive Cost Allocation Model Adjust the sliders to see how classifying costs impacts the final allocation to different customer classes, making the “cause and effect” of the framework clear. Total Annual Network Cost (R million) R 100 M Demand-Related Cost (%) 60% Energy-Related Cost (%) 30% Customer-Related Cost (%) 10% Resources & Next Steps Here is a simplified checklist of essential items and links to official resources to help your municipality get started on a Cost of Supply study. Data Requirements Checklist ✓Audited Financial Statements ✓Fixed Asset Register (updated) ✓Bulk purchase invoices ✓Billed energy (kWh) and demand (kVA) data ✓Customer numbers per tariff category Official Documentation For a complete understanding, refer to the official framework document provided by NERSA. Download NERSA CoS Framework PDF Welcome to Your Dashboard! This is your personalized workspace for managing CoS studies and reports. Log Out National Overview Project Management CoS Data Input Report Submission Advanced Analytics Compliance Dashboard National Electricity Distribution Overview High-level overview of electricity distribution metrics. Click to expand. Your CoS Projects Loading projects… Add New Project CoS Study Data Input For detailed data collection, please use the CoS Data Collection Form. Submit a New Report Upload your completed NERSA-compliant reports. Report Title Submit Report Advanced Analytics & Scenario Planning Proposed Tariff Increase (%) Run Scenario This interactive tool is a simplified educational guide based on the NERSA framework for SALGA members. © 2025 – For demonstration purposes. Powered by × Login to Portal Select User Type — Please choose an option —Municipal OfficialSALGA RepresentativeNERSA RegulatorConsultantCompliance Monitor Log In × Add New CoS Project Project Name Description Save Project × Comprehensive CoS Data Collection Form This form guides you through collecting all necessary data for a CoS study. 1General 2Costs 3Network 4Customer 5Regulatory 6Review Step 1: General Information & Revenue Requirement Select Project Loading projects… Province Select ProvinceEastern CapeFree StateGautengKwaZulu-NatalLimpopoMpumalangaNorthern CapeNorth WestWestern Cape District Municipality Select District Local Municipality Select Municipality Next Step 2: Unbundled & Functionalized Costs (R million) Unbundled Costs Transmission Cost (Bulk Purchase) Distribution Cost Previous Next Step 3: Network & Infrastructure Data Total Network Asset Value (R million) Annual Depreciation (R million) Previous Next Step 4: Customer & Consumption Data Customer Counts Residential (Pre-paid) Customers Residential (Credit) Customers Previous Next Step 5: Regulatory & Other Data NERSA Approved Tariff for Previous FY (%) Previous Next Step 6: Review & Submit I confirm that all provided data is accurate. Previous Submit CoS Data<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-3254","page","type-page","status-publish","hentry"],"blocksy_meta":{"disable_header":"yes","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/j-cred.co.za\/zh\/wp-json\/wp\/v2\/pages\/3254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/j-cred.co.za\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/j-cred.co.za\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/j-cred.co.za\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/j-cred.co.za\/zh\/wp-json\/wp\/v2\/comments?post=3254"}],"version-history":[{"count":28,"href":"https:\/\/j-cred.co.za\/zh\/wp-json\/wp\/v2\/pages\/3254\/revisions"}],"predecessor-version":[{"id":3426,"href":"https:\/\/j-cred.co.za\/zh\/wp-json\/wp\/v2\/pages\/3254\/revisions\/3426"}],"wp:attachment":[{"href":"https:\/\/j-cred.co.za\/zh\/wp-json\/wp\/v2\/media?parent=3254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}