{"id":7,"date":"2026-04-05T09:28:04","date_gmt":"2026-04-05T09:28:04","guid":{"rendered":"https:\/\/test.onesolution.in.th\/?page_id=7"},"modified":"2026-04-05T09:28:04","modified_gmt":"2026-04-05T09:28:04","slug":"7-2","status":"publish","type":"page","link":"https:\/\/test.onesolution.in.th\/index.php\/7-2\/","title":{"rendered":""},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Solar Feasibility Dashboard | Thailand<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    \n    <!-- Chosen Palette: Warm Neutrals & Solar Accent (Slate-50 bg, Slate-800 text, Amber-400 for primary actions\/highlights, Emerald-600 for positive financial metrics) -->\n    \n    <!-- Application Structure Plan: \n    1.  Header & Executive Summary: Instantly addresses the user's specific inputs (90 sq wa, 6-8k bill) and provides the recommended system size (10kW).\n    2.  Feasibility & Space (Inform): Visually demonstrates that roof space is more than adequate, addressing a common early-stage concern.\n    3.  Technology Selection (Organize\/Compare): A tabbed interface comparing On-grid, Off-grid, and Hybrid systems, clearly highlighting why On-grid is recommended for city homes.\n    4.  Financial & ROI Simulator (Change\/Compare): The core interactive tool. Allows the user to toggle between 30%, 50%, and 70% daytime usage to dynamically see how consumption habits drastically affect payback periods and monthly savings.\n    5.  Regulatory & Maintenance (Inform): Clear text blocks detailing Thailand's specific sell-back schemes and expected lifecycle costs.\n    *Rationale*: This structure moves the user linearly from \"Can I do it?\" (Space) -> \"What should I buy?\" (Tech) -> \"Is it worth it?\" (Finances) -> \"What else do I need to know?\" (Regulations). \n    -->\n\n    <!-- Visualization & Content Choices: \n    - Roof Space: CSS progress bar (Goal: Inform. Method: Styled HTML. Justification: Simple proportion, no heavy library needed).\n    - System Comparison: Interactive clickable cards (Goal: Compare\/Organize. Method: HTML\/Tailwind + JS toggle. Justification: Prevents text overload, allows deep dive).\n    - ROI Simulator: Chart.js Line Chart (Goal: Change\/Compare. Method: Canvas Chart.js. Justification: Best way to visualize break-even points over a 10-year timeline based on changing variables).\n    - NO SVG graphics used. NO Mermaid JS used. Using Unicode\/Emojis for iconography. \n    -->\n\n    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n\n    <style>\n        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8fafc; color: #0f172a; }\n        \n        \/* Required Chart Container Styling *\/\n        .chart-container {\n            position: relative;\n            width: 100%;\n            max-width: 800px;\n            margin-left: auto;\n            margin-right: auto;\n            height: 350px;\n            max-height: 400px;\n        }\n        @media (max-width: 640px) {\n            .chart-container { height: 280px; }\n        }\n\n        .tab-active { background-color: #fbbf24; color: #000; border-color: #f59e0b; }\n        .tab-inactive { background-color: #f1f5f9; color: #475569; border-color: #cbd5e1; }\n        .interactive-btn { transition: all 0.2s ease-in-out; }\n        .interactive-btn:hover { transform: translateY(-2px); }\n    <\/style>\n<\/head>\n<body class=\"antialiased\">\n\n    <!-- Header Section -->\n    <header class=\"bg-white shadow-sm sticky top-0 z-10 border-b border-slate-200\">\n        <div class=\"max-w-6xl mx-auto px-4 py-4 flex justify-between items-center\">\n            <div class=\"flex items-center gap-2\">\n                <span class=\"text-2xl\" role=\"img\" aria-label=\"sun\">&#9728;&#65039;<\/span>\n                <h1 class=\"text-xl font-bold text-slate-800\">Thai Solar Insights<\/h1>\n            <\/div>\n            <div class=\"text-sm font-medium text-slate-500 bg-slate-100 px-3 py-1 rounded-full\">\n                Custom Assessment\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <main class=\"max-w-6xl mx-auto px-4 py-8 space-y-12\">\n\n        <!-- Executive Summary -->\n        <section class=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-8\">\n            <h2 class=\"text-2xl md:text-3xl font-bold mb-4\">Executive Summary &#038; Sizing<\/h2>\n            <p class=\"text-slate-600 mb-6 text-lg leading-relaxed\">\n                Based on your monthly electricity bill of <strong>6,000 &#8211; 8,000 THB<\/strong>, we recommend a <strong>10 kW Solar System<\/strong>. This size will generate roughly 1,200 &#8211; 1,350 kWh per month, effectively neutralizing the highest tier rates of your MEA\/PEA utility bill. Below is an analysis of your property space, system options, and expected return on investment in Thailand.\n            <\/p>\n            <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 text-center\">\n                <div class=\"bg-amber-50 p-4 rounded-xl border border-amber-100\">\n                    <p class=\"text-sm text-amber-700 font-semibold uppercase tracking-wide\">Rec. System<\/p>\n                    <p class=\"text-2xl font-bold text-amber-600\">10 kW<\/p>\n                <\/div>\n                <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-100\">\n                    <p class=\"text-sm text-slate-500 font-semibold uppercase tracking-wide\">Avg. Daily Yield<\/p>\n                    <p class=\"text-2xl font-bold text-slate-800\">40 kWh<\/p>\n                <\/div>\n                <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-100\">\n                    <p class=\"text-sm text-slate-500 font-semibold uppercase tracking-wide\">CapEx Est.<\/p>\n                    <p class=\"text-2xl font-bold text-slate-800\">280k THB<\/p>\n                <\/div>\n                <div class=\"bg-emerald-50 p-4 rounded-xl border border-emerald-100\">\n                    <p class=\"text-sm text-emerald-700 font-semibold uppercase tracking-wide\">Est. ROI<\/p>\n                    <p class=\"text-2xl font-bold text-emerald-600\" id=\"summary-roi\">5 &#8211; 6 Yrs<\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 1: Property Feasibility -->\n        <section>\n            <h3 class=\"text-xl font-bold mb-3 flex items-center gap-2\">\n                <span class=\"text-xl\">&#127969;<\/span> 1. Space &#038; Feasibility\n            <\/h3>\n            <p class=\"text-slate-600 mb-6\">\n                Assessing if your 90 sq.wa property can accommodate a 10 kW system. Solar panels require unshaded, preferably South or West-facing roof space.\n            <\/p>\n            <div class=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-200\">\n                <div class=\"flex flex-col md:flex-row justify-between items-center mb-4 gap-4\">\n                    <div class=\"flex-1\">\n                        <p class=\"text-sm text-slate-500 mb-1\">Total Land Area (90 sq wa)<\/p>\n                        <p class=\"text-lg font-bold\">360 m&sup2;<\/p>\n                    <\/div>\n                    <div class=\"flex-1\">\n                        <p class=\"text-sm text-slate-500 mb-1\">Est. Roof Area (80%)<\/p>\n                        <p class=\"text-lg font-bold\">288 m&sup2;<\/p>\n                    <\/div>\n                    <div class=\"flex-1\">\n                        <p class=\"text-sm text-slate-500 mb-1\">Required for 10kW<\/p>\n                        <p class=\"text-lg font-bold text-amber-600\">~50 m&sup2;<\/p>\n                    <\/div>\n                <\/div>\n                <!-- CSS Space Bar -->\n                <div class=\"w-full bg-slate-100 rounded-full h-8 flex overflow-hidden border border-slate-200 relative\">\n                    <div class=\"bg-amber-400 h-8 flex items-center justify-center text-xs font-bold px-2\" style=\"width: 17%\">10kW (17%)<\/div>\n                    <div class=\"bg-slate-300 h-8 flex items-center justify-center text-xs font-bold text-slate-600\" style=\"width: 83%\">Available Roof Space (83%)<\/div>\n                <\/div>\n                <p class=\"text-sm text-emerald-600 font-semibold mt-4 flex items-center gap-1\">\n                    <span>&#10004;&#65039;<\/span> Feasibility Status: Excellent. You have abundant roof space for current and future expansions.\n                <\/p>\n            <\/div>\n        <\/section>\n\n        <!-- Section 2: Technology Comparison -->\n        <section>\n            <h3 class=\"text-xl font-bold mb-3 flex items-center gap-2\">\n                <span class=\"text-xl\">&#128267;<\/span> 2. System Architecture Selection\n            <\/h3>\n            <p class=\"text-slate-600 mb-6\">\n                Understand the differences between On-Grid, Off-Grid, and Hybrid systems to make an informed capital decision. For urban\/suburban homes in Thailand, On-grid is usually optimal.\n            <\/p>\n            \n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n                <button onclick=\"setSystemType('ongrid')\" id=\"btn-ongrid\" class=\"tab-active border-2 rounded-xl p-4 text-center interactive-btn font-semibold cursor-pointer\">\n                    On-Grid System <br><span class=\"text-sm font-normal\">(Recommended)<\/span>\n                <\/button>\n                <button onclick=\"setSystemType('hybrid')\" id=\"btn-hybrid\" class=\"tab-inactive border-2 rounded-xl p-4 text-center interactive-btn font-semibold cursor-pointer\">\n                    Hybrid System <br><span class=\"text-sm font-normal\">(With Battery)<\/span>\n                <\/button>\n                <button onclick=\"setSystemType('offgrid')\" id=\"btn-offgrid\" class=\"tab-inactive border-2 rounded-xl p-4 text-center interactive-btn font-semibold cursor-pointer\">\n                    Off-Grid System <br><span class=\"text-sm font-normal\">(Independent)<\/span>\n                <\/button>\n            <\/div>\n\n            <!-- Dynamic System Content -->\n            <div class=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-200 min-h-[200px]\" id=\"system-details\">\n                <!-- Injected via JS -->\n            <\/div>\n        <\/section>\n\n        <!-- Section 3: Financial & ROI Simulator -->\n        <section>\n            <h3 class=\"text-xl font-bold mb-3 flex items-center gap-2\">\n                <span class=\"text-xl\">&#128176;<\/span> 3. ROI &#038; Daytime Usage Simulator\n            <\/h3>\n            <p class=\"text-slate-600 mb-6\">\n                Solar panels generate power during the day. Your return on investment drastically changes based on how much power you consume directly (saving ~4.7 THB\/unit) versus how much you sell back to the grid (earning ~2.20 THB\/unit via net-billing). <strong>Select your estimated daytime usage below to simulate financials.<\/strong>\n            <\/p>\n\n            <div class=\"grid lg:grid-cols-3 gap-8\">\n                <!-- Controls & Stats -->\n                <div class=\"space-y-6\">\n                    <div class=\"bg-slate-50 p-5 rounded-xl border border-slate-200\">\n                        <label class=\"block text-sm font-bold text-slate-700 mb-3\">Estimate your daytime power usage (9 AM &#8211; 4 PM):<\/label>\n                        <div class=\"flex gap-2\">\n                            <button onclick=\"setUsageScenario(30)\" id=\"btn-use-30\" class=\"flex-1 py-2 rounded border interactive-btn text-sm font-bold tab-inactive\">30%<\/button>\n                            <button onclick=\"setUsageScenario(50)\" id=\"btn-use-50\" class=\"flex-1 py-2 rounded border interactive-btn text-sm font-bold tab-active\">50%<\/button>\n                            <button onclick=\"setUsageScenario(70)\" id=\"btn-use-70\" class=\"flex-1 py-2 rounded border interactive-btn text-sm font-bold tab-inactive\">70%<\/button>\n                        <\/div>\n                        <p class=\"text-xs text-slate-500 mt-2\">Example: 30% means no one is home, only fridge\/standby. 70% means working from home with A\/C running.<\/p>\n                    <\/div>\n\n                    <div class=\"grid grid-cols-2 gap-4\">\n                        <div class=\"bg-white p-4 rounded-xl border border-slate-200 shadow-sm text-center\">\n                            <p class=\"text-xs text-slate-500 font-semibold uppercase\">Direct Savings<\/p>\n                            <p class=\"text-xl font-bold text-slate-800\" id=\"stat-save\">&#8212; THB\/mo<\/p>\n                            <p class=\"text-[10px] text-slate-400\">@ 4.7 THB\/unit<\/p>\n                        <\/div>\n                        <div class=\"bg-white p-4 rounded-xl border border-slate-200 shadow-sm text-center\">\n                            <p class=\"text-xs text-slate-500 font-semibold uppercase\">Sell to Grid<\/p>\n                            <p class=\"text-xl font-bold text-emerald-600\" id=\"stat-earn\">&#8212; THB\/mo<\/p>\n                            <p class=\"text-[10px] text-slate-400\">@ 2.20 THB\/unit<\/p>\n                        <\/div>\n                        <div class=\"col-span-2 bg-slate-800 p-4 rounded-xl shadow-sm text-center text-white\">\n                            <p class=\"text-sm text-slate-300 font-semibold uppercase mb-1\">Total Monthly Benefit<\/p>\n                            <p class=\"text-3xl font-bold text-amber-400\" id=\"stat-total\">&#8212; THB<\/p>\n                            <p class=\"text-sm mt-2\">Break-even in: <span class=\"font-bold text-white\" id=\"stat-roi\">&#8212;<\/span> Years<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Chart Container -->\n                <div class=\"lg:col-span-2 bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-center\">\n                    <h4 class=\"text-center font-bold text-slate-700 mb-4\">10-Year Cumulative Cash Flow (THB)<\/h4>\n                    <div class=\"chart-container\">\n                        <canvas id=\"roiChart\"><\/canvas>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Section 4: Maintenance & Legal -->\n        <section class=\"grid md:grid-cols-2 gap-8\">\n            <!-- Maintenance -->\n            <div class=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-200\">\n                <h3 class=\"text-xl font-bold mb-4 flex items-center gap-2\">\n                    <span class=\"text-xl\">&#128736;&#65039;<\/span> 4. Maintenance &#038; Lifecycle\n                <\/h3>\n                <ul class=\"space-y-4\">\n                    <li class=\"flex gap-3\">\n                        <span class=\"text-amber-500 mt-1\">&#10004;&#65039;<\/span>\n                        <div>\n                            <strong class=\"text-slate-800\">Panel Cleaning (2x \/ Year)<\/strong>\n                            <p class=\"text-sm text-slate-600\">Dust reduces efficiency. Professional cleaning costs ~2,000 &#8211; 3,000 THB per visit. Est: 5,000 THB\/yr.<\/p>\n                        <\/div>\n                    <\/li>\n                    <li class=\"flex gap-3\">\n                        <span class=\"text-amber-500 mt-1\">&#10004;&#65039;<\/span>\n                        <div>\n                            <strong class=\"text-slate-800\">Inverter Replacement (Year 10-12)<\/strong>\n                            <p class=\"text-sm text-slate-600\">While panels last 25 years, the inverter (the brain) typically needs replacement around year 10. Budget ~40,000 THB.<\/p>\n                        <\/div>\n                    <\/li>\n                    <li class=\"flex gap-3\">\n                        <span class=\"text-amber-500 mt-1\">&#10004;&#65039;<\/span>\n                        <div>\n                            <strong class=\"text-slate-800\">Warranty Coverage<\/strong>\n                            <p class=\"text-sm text-slate-600\">Tier 1 panels usually have a 12-year product and 25-year performance warranty. Inverters typically carry 5 to 10 years.<\/p>\n                        <\/div>\n                    <\/li>\n                <\/ul>\n            <\/div>\n\n            <!-- Legal & Tax -->\n            <div class=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-200\">\n                <h3 class=\"text-xl font-bold mb-4 flex items-center gap-2\">\n                    <span class=\"text-xl\">&#128181;<\/span> 5. Tax Benefits &#038; Selling Options\n                <\/h3>\n                <ul class=\"space-y-4\">\n                    <li class=\"flex gap-3\">\n                        <span class=\"text-emerald-500 mt-1\">&#10004;&#65039;<\/span>\n                        <div>\n                            <strong class=\"text-slate-800\">Net-Billing Program (\u0e02\u0e32\u0e22\u0e44\u0e1f\u0e04\u0e37\u0e19)<\/strong>\n                            <p class=\"text-sm text-slate-600\">Currently, PEA\/MEA allows residential users to sell excess power back to the grid at exactly <strong>2.20 THB\/kWh<\/strong> for a contract period of 10 years. Requires a special two-way meter installation.<\/p>\n                        <\/div>\n                    <\/li>\n                    <li class=\"flex gap-3\">\n                        <span class=\"text-emerald-500 mt-1\">&#10004;&#65039;<\/span>\n                        <div>\n                            <strong class=\"text-slate-800\">Tax Deductions (Corporate vs Individual)<\/strong>\n                            <p class=\"text-sm text-slate-600\">For residential (individuals), there are currently no direct personal income tax deductions for installing solar. The benefit is entirely in bill reduction and net-billing income. BOI tax benefits are strictly for registered businesses\/factories.<\/p>\n                        <\/div>\n                    <\/li>\n                    <li class=\"flex gap-3\">\n                        <span class=\"text-emerald-500 mt-1\">&#10004;&#65039;<\/span>\n                        <div>\n                            <strong class=\"text-slate-800\">Permits Required<\/strong>\n                            <p class=\"text-sm text-slate-600\">Installation requires permits from the local municipality (Or Bor Tor \/ Khet), the ERC (Energy Regulatory Commission), and the utility provider (PEA\/MEA).<\/p>\n                        <\/div>\n                    <\/li>\n                <\/ul>\n            <\/div>\n        <\/section>\n\n        <!-- Footer -->\n        <footer class=\"text-center text-slate-500 text-sm border-t border-slate-200 pt-8 mt-8 pb-4\">\n            Disclaimer: Estimates based on average Thai peak sun hours (4 hrs\/day) and standard Tier 1 equipment costs as of current market rates. Actual generation and ROI may vary based on exact location, shading, and electricity tariff changes.\n        <\/footer>\n    <\/main>\n\n    <script>\n        \/\/ --- Core Data & State Management ---\n        const sysCost = 280000; \/\/ 10kW On-Grid Estimate THB\n        const annualMaintenance = 5000;\n        const inverterReplaceCost = 40000;\n        \n        \/\/ Scenario Calculations based on 1200 kWh\/month generation\n        const rateBuy = 4.7; \/\/ THB\n        const rateSell = 2.2; \/\/ THB\n        const monthlyGen = 1200; \/\/ kWh\n\n        const calculateFinancials = (usagePercent) => {\n            const usageRatio = usagePercent \/ 100;\n            const sellRatio = 1 - usageRatio;\n            \n            const kwhUsed = monthlyGen * usageRatio;\n            const kwhSold = monthlyGen * sellRatio;\n            \n            const saved = Math.round(kwhUsed * rateBuy);\n            const earned = Math.round(kwhSold * rateSell);\n            const total = saved + earned;\n            \n            \/\/ Simple ROI = Capital \/ Annual Benefit\n            const roi = (sysCost \/ (total * 12)).toFixed(1);\n\n            return { saved, earned, total, roi };\n        };\n\n        const scenarios = {\n            30: calculateFinancials(30),\n            50: calculateFinancials(50),\n            70: calculateFinancials(70)\n        };\n\n        let currentScenario = 50;\n        let roiChartInstance = null;\n\n        \/\/ --- System Types Content ---\n        const systemData = {\n            ongrid: {\n                title: \"On-Grid System (Recommended for 90 sq wa Urban Home)\",\n                desc: \"Connects directly to MEA\/PEA grid. Uses solar during the day, draws from grid at night. Excess daytime power can be sold back.\",\n                pros: [\"Lowest capital cost (~280k THB)\", \"Fastest ROI (4.5 - 6.5 years)\", \"Zero battery maintenance\"],\n                cons: [\"System shuts down during grid power outages for safety (Anti-islanding)\"],\n                cost: \"\u0e3f 250,000 - 300,000\"\n            },\n            hybrid: {\n                title: \"Hybrid System (On-Grid + Battery Storage)\",\n                desc: \"Connects to grid but includes batteries. Stores excess daytime solar to use at night or during power outages.\",\n                pros: [\"Provides backup power during blackouts\", \"Maximizes self-consumption of generated solar\"],\n                cons: [\"High initial cost (batteries are expensive)\", \"Slower ROI (8 - 10+ years)\", \"Batteries degrade and need replacement in 7-10 years\"],\n                cost: \"\u0e3f 450,000 - 550,000+\"\n            },\n            offgrid: {\n                title: \"Off-Grid System\",\n                desc: \"Completely disconnected from the utility grid. Relies 100% on solar and large battery banks. Mostly for remote areas.\",\n                pros: [\"Total energy independence\", \"No electricity bills ever\"],\n                cons: [\"Extremely high cost (massive battery bank required)\", \"If it rains for days, you lose power\", \"Not practical\/legal for city housing\"],\n                cost: \"\u0e3f 600,000+\"\n            }\n        };\n\n        \/\/ --- UI Update Functions ---\n\n        function setSystemType(type) {\n            \/\/ Update Tab UI\n            ['ongrid', 'hybrid', 'offgrid'].forEach(t => {\n                const btn = document.getElementById(`btn-${t}`);\n                if (t === type) {\n                    btn.classList.replace('tab-inactive', 'tab-active');\n                } else {\n                    btn.classList.replace('tab-active', 'tab-inactive');\n                }\n            });\n\n            \/\/ Update Content\n            const data = systemData[type];\n            const html = `\n                <div class=\"flex flex-col h-full justify-between\">\n                    <div>\n                        <h4 class=\"text-xl font-bold text-slate-800 mb-2\">${data.title}<\/h4>\n                        <p class=\"text-slate-600 mb-4\">${data.desc}<\/p>\n                        <div class=\"grid md:grid-cols-2 gap-4 mb-4\">\n                            <div>\n                                <strong class=\"text-sm uppercase text-slate-500\">Advantages<\/strong>\n                                <ul class=\"text-sm space-y-1 mt-1 text-slate-700\">\n                                    ${data.pros.map(p => `<li><span class=\"text-emerald-500 mr-1\">&#10004;<\/span>${p}<\/li>`).join('')}\n                                <\/ul>\n                            <\/div>\n                            <div>\n                                <strong class=\"text-sm uppercase text-slate-500\">Disadvantages<\/strong>\n                                <ul class=\"text-sm space-y-1 mt-1 text-slate-700\">\n                                    ${data.cons.map(c => `<li><span class=\"text-red-400 mr-1\">&#10006;<\/span>${c}<\/li>`).join('')}\n                                <\/ul>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"mt-4 pt-4 border-t border-slate-100 flex justify-between items-center\">\n                        <span class=\"text-slate-500 font-semibold uppercase text-sm\">Est. 10kW Cost<\/span>\n                        <span class=\"text-xl font-bold text-slate-800\">${data.cost}<\/span>\n                    <\/div>\n                <\/div>\n            `;\n            document.getElementById('system-details').innerHTML = html;\n        }\n\n        function generateChartData(scenarioKey) {\n            const data = scenarios[scenarioKey];\n            const annualNetBenefit = (data.total * 12) - annualMaintenance;\n            let cashFlow = [];\n            \n            \/\/ Year 0 is Capital Cost\n            let currentBalance = -sysCost;\n            cashFlow.push(currentBalance);\n\n            for (let year = 1; year <= 10; year++) {\n                currentBalance += annualNetBenefit;\n                if (year === 10) currentBalance -= inverterReplaceCost; \/\/ Year 10 cost hit\n                cashFlow.push(currentBalance);\n            }\n            return cashFlow;\n        }\n\n        function initChart() {\n            const ctx = document.getElementById('roiChart').getContext('2d');\n            \n            const dataLabels = ['Yr 0', 'Yr 1', 'Yr 2', 'Yr 3', 'Yr 4', 'Yr 5', 'Yr 6', 'Yr 7', 'Yr 8', 'Yr 9', 'Yr 10'];\n            \n            roiChartInstance = new Chart(ctx, {\n                type: 'line',\n                data: {\n                    labels: dataLabels,\n                    datasets: [{\n                        label: 'Cumulative Cash Flow (THB)',\n                        data: generateChartData(currentScenario),\n                        borderColor: '#f59e0b', \/\/ Amber 500\n                        backgroundColor: 'rgba(245, 158, 11, 0.1)',\n                        borderWidth: 3,\n                        pointBackgroundColor: '#0f172a',\n                        pointRadius: 4,\n                        fill: true,\n                        tension: 0.1\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false, \/\/ Critical for custom container height\n                    plugins: {\n                        legend: { display: false },\n                        tooltip: {\n                            callbacks: {\n                                label: function(context) {\n                                    let label = context.dataset.label || '';\n                                    if (label) { label += ': '; }\n                                    if (context.parsed.y !== null) {\n                                        label += new Intl.NumberFormat('en-US').format(context.parsed.y) + ' THB';\n                                    }\n                                    return label;\n                                }\n                            }\n                        }\n                    },\n                    scales: {\n                        y: {\n                            grid: { color: '#e2e8f0' },\n                            ticks: {\n                                callback: function(value) { return value \/ 1000 + 'k'; }\n                            }\n                        },\n                        x: {\n                            grid: { display: false }\n                        }\n                    },\n                    \/\/ Draw a red line at 0 (Break-even line)\n                    animation: {\n                        onComplete: function () {\n                            const chartInstance = this;\n                            const ctx = chartInstance.ctx;\n                            const yAxis = chartInstance.scales.y;\n                            const xAxis = chartInstance.scales.x;\n                            const yZero = yAxis.getPixelForValue(0);\n                            \n                            ctx.save();\n                            ctx.beginPath();\n                            ctx.moveTo(xAxis.left, yZero);\n                            ctx.lineTo(xAxis.right, yZero);\n                            ctx.lineWidth = 2;\n                            ctx.strokeStyle = '#ef4444'; \/\/ Red 500\n                            ctx.setLineDash([5, 5]);\n                            ctx.stroke();\n                            ctx.restore();\n                        }\n                    }\n                }\n            });\n        }\n\n        function setUsageScenario(percent) {\n            currentScenario = percent;\n            \n            \/\/ Update Buttons UI\n            [30, 50, 70].forEach(p => {\n                const btn = document.getElementById(`btn-use-${p}`);\n                if (p === percent) {\n                    btn.classList.replace('tab-inactive', 'tab-active');\n                } else {\n                    btn.classList.replace('tab-active', 'tab-inactive');\n                }\n            });\n\n            \/\/ Update Stats UI\n            const data = scenarios[percent];\n            document.getElementById('stat-save').innerText = new Intl.NumberFormat('en-US').format(data.saved);\n            document.getElementById('stat-earn').innerText = new Intl.NumberFormat('en-US').format(data.earned);\n            document.getElementById('stat-total').innerText = new Intl.NumberFormat('en-US').format(data.total);\n            document.getElementById('stat-roi').innerText = data.roi;\n\n            \/\/ Update Chart\n            if (roiChartInstance) {\n                roiChartInstance.data.datasets[0].data = generateChartData(percent);\n                roiChartInstance.update();\n            }\n        }\n\n        \/\/ --- Initialization ---\n        document.addEventListener('DOMContentLoaded', () => {\n            setSystemType('ongrid'); \/\/ Init default system view\n            setUsageScenario(50);    \/\/ Init default usage scenario (updates UI and stats)\n            initChart();             \/\/ Draw initial chart\n        });\n\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Solar Feasibility Dashboard | Thailand &#9728;&#65039; Thai Solar Insights Custom Assessment Executive Summary &#038; Sizing Based on your monthly electricity bill of 6,000 &#8211; 8,000 THB, we recommend a 10 kW Solar System. This size will generate roughly 1,200 &#8211; 1,350 kWh per month, effectively neutralizing the highest tier rates of your MEA\/PEA utility bill. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.onesolution.in.th\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.onesolution.in.th\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.onesolution.in.th\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.onesolution.in.th\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.onesolution.in.th\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":1,"href":"https:\/\/test.onesolution.in.th\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/test.onesolution.in.th\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/test.onesolution.in.th\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}